initial commit

2025-08-10 15:28:18 +03:30
commit 23ff7288e9
3 changed files with 153 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>دکتر [نام دکتر]</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>دکتر [نام دکتر]</h1>
+        <p>[تخصص دکتر]</p>
+    </header>
+
+    <main>
+        <section id="profile" class="scroll-section">
+            <img src="https://via.placeholder.com/150" alt="عکس پروفایل" class="profile-pic">
+            <h2>بیوگرافی</h2>
+            <p>
+                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+            </p>
+        </section>
+
+        <section id="resume" class="scroll-section">
+            <h2>رزومه</h2>
+            <ul>
+                <li>
+                    <h3>[عنوان تحصیلات]</h3>
+                    <p>[نام دانشگاه]، [سال]</p>
+                </li>
+                <li>
+                    <h3>[عنوان تجربه کاری]</h3>
+                    <p>[محل کار]، [سال]</p>
+                </li>
+                <li>
+                    <h3>[عنوان گواهینامه]</h3>
+                    <p>[نام موسسه]، [سال]</p>
+                </li>
+            </ul>
+        </section>
+
+        <section id="contact" class="scroll-section">
+            <h2>اطلاعات تماس</h2>
+            <div class="contact-info">
+                <p><strong>آدرس مطب:</strong> [آدرس مطب]</p>
+                <p><strong>تلفن تماس:</strong> [شماره تلفن]</p>
+                <div class="social-media">
+                    <a href="#">[لینک اجتماعی 1]</a>
+                    <a href="#">[لینک اجتماعی 2]</a>
+                    <a href="#">[لینک اجتماعی 3]</a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/script.js
+++ b/script.js
@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const sections = document.querySelectorAll('.scroll-section');
+
+    const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('visible');
+            }
+        });
+    }, {
+        threshold: 0.1
+    });
+
+    sections.forEach(section => {
+        observer.observe(section);
+    });
+});
--- a/style.css
+++ b/style.css
@@ -0,0 +1,78 @@
+body {
+    font-family: 'Tahoma', sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    background: #f4f4f4;
+    color: #333;
+    direction: rtl;
+}
+
+header {
+    background: #333;
+    color: #fff;
+    padding: 2rem 0;
+    text-align: center;
+}
+
+header h1 {
+    margin: 0;
+}
+
+main {
+    padding: 1rem;
+    max-width: 800px;
+    margin: auto;
+}
+
+.scroll-section {
+    background: #fff;
+    margin-bottom: 1rem;
+    padding: 1.5rem;
+    border-radius: 5px;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.scroll-section.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.profile-pic {
+    display: block;
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    margin: 0 auto 1rem;
+}
+
+h2 {
+    color: #333;
+    border-bottom: 2px solid #333;
+    padding-bottom: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+}
+
+ul li {
+    background: #eee;
+    padding: 0.75rem;
+    margin-bottom: 0.5rem;
+    border-radius: 3px;
+}
+
+.contact-info p {
+    margin: 0.5rem 0;
+}
+
+.social-media a {
+    margin-right: 10px;
+    text-decoration: none;
+    color: #333;
+}