Add photo overlay feature and update biography section

index.html

@@ -25,8 +25,8 @@
             <img src="resources/dr_circle.png" alt="عکس پروفایل" class="profile-pic">
             <h2>بیوگرافی</h2>
             <p>
-                مرتضی اسدی هستم فارغ التحصیل رشته پزشکی عمومی سال 95 از دانشگاه اردبیل و تخصص روانپزشکی از دانشگاه تبریز 
+                مرتضی اسدی هستم فارغ التحصیل رشته پزشکی عمومی سال ۹۵ از دانشگاه اردبیل و تخصص روانپزشکی از دانشگاه تبریز 
-سال 99 به عنوان پزشک وظیفه در بیمارستان الغدیر ناجا تبریز مشغول بودم،  از اول سال ۱۴۰۱ تا سال ۱۴۰۳ در بیمارستان مدنی اذرشهر مشغول فعالیت بودم و در حال حاضر در مطب شخصی خود در شهرستان تبریز در خدمت بیماران هستم.
+سال ۹۹ به عنوان پزشک وظیفه در بیمارستان الغدیر ناجا تبریز مشغول بودم،  از اول سال ۱۴۰۱ تا سال ۱۴۰۳ در بیمارستان مدنی اذرشهر مشغول فعالیت بودم و در حال حاضر در مطب شخصی خود در شهرستان تبریز در خدمت بیماران هستم.
 در زمینه ی درمان دارویی و غیر دارویی، اختلالات افسردگی و خلقی، اضطرابی و پانیک، بی خوابی، تمرکز و مشکلات تحصیلی، مشاوره برای کنکور، اختلالات زناشویی، اختلالات جنسی مردان و زنان و زوج درمانی، مشکلات دوران سوگ و اختلالات کودکان مثل بیش فعالی، شب ادراری و افسردگی و اضطراب کودکان در خدمت شما عزیزان هستم.
             </p>
         </section>
@@ -50,15 +50,15 @@
                 <h3>تجربیات کاری</h3>
                 <ul>
                     <li>
-                        <h3>پزشک وظیفه</h3>
+                        <h3>روان‌پزشک نیروی انتظامی</h3>
                         <p>بیمارستان الغدیر ناجا تبریز، ۱۳۹۹-۱۴۰۱</p>
                     </li>
                     <li>
-                        <h3>پزشک</h3>
+                        <h3>روان‌پزشک</h3>
                         <p>بیمارستان مدنی آذرشهر، ۱۴۰۱-۱۴۰۳</p>
                     </li>
                     <li>
-                        <h3>روانپزشک</h3>
+                        <h3>روان‌پزشک</h3>
                         <p>مطب شخصی، ۱۴۰۳-حال حاضر</p>
                     </li>
                 </ul>
@@ -66,7 +66,7 @@
         </section>
 
         <section id="certifications" class="scroll-section">
-            <h2>گواهینامه ها</h2>
+            <h2>گواهینامه‌ها</h2>
             <div class="cert-gallery">
                 <img src="resources/certification.jpg" alt="گواهینامه">
             </div>
@@ -76,12 +76,17 @@
             <h2>اطلاعات تماس</h2>
             <div class="contact-info">
                 <p><strong>آدرس مطب:</strong> تبریز، ائل گلی، چهارراه خیام به سمت رجایی شهر، برج رستار، طبقه 5</p>
-                <p><strong>تلفن تماس:</strong> 04133814661</p>
+                <p><strong>تلفن تماس:</strong> <span dir="ltr">+98 41 3381 4661</span></p>
-                <p><strong>شماره واتساپ:</strong> <span dir="ltr">+989991023222</span></p>
+                <p><strong>شماره واتساپ:</strong> <span dir="ltr">+98 999 10 23 222</span></p>
             </div>
         </section>
     </main>
 
     <script src="script.js"></script>
+
+    <div id="photo-overlay" class="hidden">
+        <span class="close-btn">&times;</span>
+        <img src="resources/dr_photo.png" alt="عکس دکتر مرتضی اسدی" class="overlay-photo">
+    </div>
 </body>
 </html>

script.js

@@ -1,6 +1,6 @@
 document.addEventListener('DOMContentLoaded', function() {
+    // Scroll-reveal effect
     const sections = document.querySelectorAll('.scroll-section');
-
     const observer = new IntersectionObserver(entries => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
@@ -10,8 +10,28 @@ document.addEventListener('DOMContentLoaded', function() {
     }, {
         threshold: 0.1
     });
-
     sections.forEach(section => {
         observer.observe(section);
     });
+
+    // Photo overlay
+    const profilePic = document.querySelector('.profile-pic');
+    const photoOverlay = document.getElementById('photo-overlay');
+    const closeBtn = document.querySelector('.close-btn');
+
+    if (profilePic && photoOverlay && closeBtn) {
+        profilePic.addEventListener('click', () => {
+            photoOverlay.classList.add('show');
+        });
+
+        closeBtn.addEventListener('click', () => {
+            photoOverlay.classList.remove('show');
+        });
+
+        photoOverlay.addEventListener('click', (e) => {
+            if (e.target === photoOverlay) {
+                photoOverlay.classList.remove('show');
+            }
+        });
+    }
 });

style.css

@@ -136,3 +136,51 @@ ul li h3 {
         font-size: 1.8rem;
     }
 }
+
+
+/* Photo Overlay */
+#photo-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+#photo-overlay.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+.overlay-photo {
+    max-width: 80%;
+    max-height: 80%;
+    border-radius: 10px;
+    transform: scale(0.8);
+    transition: transform 0.3s ease;
+}
+
+#photo-overlay.show .overlay-photo {
+    transform: scale(1);
+}
+
+.close-btn {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    color: #fff;
+    font-size: 40px;
+    cursor: pointer;
+}
+.profile-pic {
+    cursor: pointer;
+}
+