ShaifArfan · mohammadzali2005 · Mar 8, 2026 · Mar 8, 2026 · Mar 8, 2026 · Mar 8, 2026
diff --git a/README.md b/README.md
@@ -1,20 +1,30 @@
-![Watch Now](./img/Design.jpg)
-# One page Portfolio Website (HTML CSS Project)
-**Watch on YouTube ![YouTube Video Views](https://img.shields.io/youtube/views/ZFQkb26UD1Y?style=social) : https://youtu.be/ZFQkb26UD1Y**
-
----
-
-### Made with ❤️ by [Shaif Arfan](https://www.instagram.com/shaifarfan08/)
-
-Like my works and want to support me?
-
-<a href="https://www.buymeacoffee.com/shaifarfan08" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 162.75px !important;" ></a>
-
----
-
-## Other projects
-
-📚 [All Web Cifar Project Tutorials](https://github.com/ShaifArfan/wc-project-tutorials)
-
-
-
+# One Page Web 
+A modern, responsive personal portfolio website built with HTML, CSS, and JavaScript.
+This project was originally forked and has been improved and customized with new features, optimizations, and design enhancements.
+
+## ✨ Features
+- Responsive Design – Works seamlessly across desktop, tablet, and mobile devices.
+- Modern UI – Clean layout with warm, natural visuals for a professional introduction.
+- Navigation Menu – Easy access to Home, Services, Projects, About, and Contact sections.
+- Portfolio Showcase – Highlight your projects with a dedicated portfolio section.
+- Performance Improvements – Optimized assets, reduced load times, and improved accessibility.
+- Custom Enhancements – Added animations, refined typography, and improved color palette.
+
+## 🚀 Improvements Made
+Compared to the original fork, this version includes:
+- Refactored and cleaner code structure for easier maintenance.
+- Enhanced responsiveness with better grid and flexbox usage.
+- SEO-friendly meta tags and improved accessibility (ARIA labels, alt text).
+- Portfolio button redesigned with smoother hover effects.
+- Contact section updated with functional form integration (optional backend-ready).
+- Overall UI polish for a more professional look.
+
+## 🛠️ Tech Stack
+- Frontend: HTML5, CSS3, JavaScript (Vanilla)
+- Frameworks/Libraries: None (lightweight and dependency-free)
+- Deployment: GitHub Pages
+
+## 📸 Preview
+[Live Demo](https://mohammadzali2005.github.io/one-page-web-project/)
+
+![Preview](https://github.com/mohammadzali2005/one-page-web-project/blob/master/Thumbnail.png)
diff --git a/Thumbnail.png b/Thumbnail.png
diff --git a/index.html b/index.html
@@ -1,16 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="a single exmaple page about a person with a normal and clean model.">
   <link rel="stylesheet" href="style.css">
-  <title>My Website</title>
+  <title>Web Project</title>
 </head>
 
+<!-- ------------------------------------------------------ -->
+<!-- Header -->
+<!-- Hero -->
+<!-- Services -->
+<!-- Projects -->
+<!-- About Me -->
+<!-- Contact -->
+<!-- Footer -->
+<!-- ------------------------------------------------------ -->
+
 <body>
-  <!-- Header -->
-  <section id="header">
+  <!-- Header Start -->
+  <header>
     <div class="header container">
       <div class="nav-bar">
         <div class="brand">
@@ -32,11 +42,11 @@ <h1><span>S</span>haif <span>A</span>rfan</h1>
         </div>
       </div>
     </div>
-  </section>
-  <!-- End Header -->
+  </header>
+  <!-- Header End -->
 
 
-  <!-- Hero Section  -->
+  <!-- Hero Section Start -->
   <section id="hero">
     <div class="hero container">
       <div>
@@ -47,9 +57,9 @@ <h1>Arfan <span></span></h1>
       </div>
     </div>
   </section>
-  <!-- End Hero Section  -->
+  <!-- Hero Section End -->
 
-  <!-- Service Section -->
+  <!-- Service Section Start -->
   <section id="services">
     <div class="services container">
       <div class="service-top">
@@ -86,9 +96,9 @@ <h2>Web Design</h2>
       </div>
     </div>
   </section>
-  <!-- End Service Section -->
+  <!-- Service Section End -->
 
-  <!-- Projects Section -->
+  <!-- Projects Section Start -->
   <section id="projects">
     <div class="projects container">
       <div class="projects-header">
@@ -158,9 +168,9 @@ <h2>Coding is Love</h2>
       </div>
     </div>
   </section>
-  <!-- End Projects Section -->
+  <!-- Projects Section End -->
 
-  <!-- About Section -->
+  <!-- About Section Start -->
   <section id="about">
     <div class="about container">
       <div class="col-left">
@@ -180,9 +190,9 @@ <h2>Front End Developer</h2>
       </div>
     </div>
   </section>
-  <!-- End About Section -->
+  <!-- About Section End -->
 
-  <!-- Contact Section -->
+  <!-- Contact Section Start-->
   <section id="contact">
     <div class="contact container">
       <div>
@@ -215,9 +225,9 @@ <h2>Fatikchhari, Chittagong, Bangladesh</h2>
       </div>
     </div>
   </section>
-  <!-- End Contact Section -->
+  <!-- Contact Section End -->
 
-  <!-- Footer -->
+  <!-- Footer Start -->
   <section id="footer">
     <div class="footer container">
       <div class="brand">
@@ -231,18 +241,16 @@ <h2>Your Complete Web Solution</h2>
         <div class="social-item">
           <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/instagram-new.png" /></a>
         </div>
-        <div class="social-item">
-          <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/twitter.png" /></a>
-        </div>
         <div class="social-item">
           <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/behance.png" /></a>
         </div>
       </div>
       <p>Copyright © 2020 Arfan. All rights reserved</p>
     </div>
   </section>
-  <!-- End Footer -->
-  <script src="./app.js"></script>
-</body>
+  <!-- Footer End -->
 
+  <!-- Script for JavaScript -->
+  <script src="./script.js"></script>
+</body>
 </html>
diff --git a/app.js → script.js b/app.js → script.js