DevFolio 💼

DevFolio is a responsive and interactive portfolio website, showcasing professional projects, creative skills, and personal achievements. It focuses on providing a smooth user experience with features like dark mode, an animated testimonials section, and seamless navigation between sections.

---

Live Demo 🌐

• Check out the live demo of the project at DevFolio Website.

---

🛠 Website Contents

1. Responsive Design:

• Fully responsive layout across all devices and screen sizes.
• Burger menu for easy navigation on screens below 992px.

2. Dark Mode Toggle:

• Switch between light and dark modes using a checkbox toggle with sun/moon icons.

3. Interactive Navbar:

• A collapsible menu that transforms into a close icon when opened.
• Smooth transitions to different sections via internal links.

4. Hero Section:

• Features a professional introduction with an animated cursor effect that cycles through roles (Designer, Developer, Freelancer).
• Engaging call-to-action buttons for contacting or viewing projects.

5. About Section:

• Highlights personal skills, achievements, and years of experience.
• Includes progress bars to showcase proficiency in various technologies.

6. Services Section:

• Displays services offered with custom icons and descriptions.

7. Portfolio Section:

• Features an interactive Swiper.js slider with gallery images.
• Includes smooth animations and pagination.

8. Testimonials Section:

• Swiper.js-powered section with animated testimonials and background images.
• Autoplay feature for smooth transitions between feedback.

9. Blog Section:

• Includes a dedicated section displaying blog posts with images, titles, and descriptions.
• Links to individual blog posts for detailed content.

10. Contact Section:

• Contact form with validation and a Google Maps iframe to display location.
• SweetAlert2 messages for form submissions.

---

🚀 Navigation between Sections

• Quick access to all sections using the navbar.
• Smooth scrolling enhances the user experience.
• Fully responsive design ensures compatibility with all screen sizes.

---

🧑‍💻 Languages and Technologies Used

HTML5:

• Structured the web content with semantic tags.

CSS3:

• Custom styles for each section, including media queries for responsiveness.
• Separate stylesheets for dark mode (darkmode.css), general styling (general.css), and media queries (media.css).

JavaScript:

• Handles the navbar toggle and menu transition.
• Implements dark mode functionality and counter animations on scroll.
• Controls Swiper.js configuration for testimonials and portfolio sliders.

Font Awesome:

• Provides icons for navigation, services, and dark mode toggle.

Google Fonts:

• Fonts used: Poppins, Roboto, and Inter for enhanced typography.

SweetAlert2:

• Displays alerts for form submissions and user actions.

Google Maps API:

• Integrated in the contact section to show the user’s location.

---

How to Use 🚀

We welcome contributions to DevFolio! Here’s how you can help:

1. Fork the repository - Click the "Fork" button at the top right of the repository page.

2. Clone your fork - Use the command:

   git clone https://github.com/OmarrSakr/DevFolio-Website.git
   

---

📂 Project Structure

DevFolio/
│
├── 📂 CSS/
│   ├── all.min.css — Font Awesome styles
│   ├── bootstrap.min.css — Bootstrap CSS for layout and styling
│   ├── darkmode.css — Styles for dark mode
│   ├── general.css — General website styling
│   ├── media.css — Media queries for responsiveness
│   ├── portfolio-details.css — Custom styles for portfolio details
│   ├── blog-single.css — Custom styles for blog pages
│   ├── sweetalert2.min.css — SweetAlert2 CSS for popup alerts
│   └── style.css — Main stylesheet
│
├── 📂 images-DevFolio/ — Images used across sections
│
├── 📂 Js/
│   ├── index.js — Main JS file handling navbar and interactions
│   ├── jquery-3.6.3.min.js — jQuery library
│   ├── bootstrap.bundle.min.js — Bootstrap JavaScript bundle
│   ├── jquery.waypoints.min.js — Waypoints library for scroll detection
│   ├── noframework.waypoints.js — Waypoints without framework dependencies
│   ├── jquery.counterup.min.js — CounterUp plugin for animated counters
│   ├── navbar-toggle-icon.js — Script to toggle menu and cancel icon
│   ├── darkmode-theme-toggle.js — Handles dark mode toggle across pages
│   ├── fill-form-contact-section.js — Validates contact form inputs
│   ├── sweetalert2.min.js — SweetAlert2 for popup alerts
│
├── 📂 swiper/
│   └── swiper-bundle.min.js — Swiper.js for sliders and carousels
│
├── 📂 glightbox/
│   └── glightbox.min.js — GLightbox for lightbox functionality
│
├── 📂 aos/
│   └── aos.js — Animate On Scroll (AOS) library
│
├── 📄 index.html — Main HTML file
├── 📄 blog-single.html — Blog single page with detailed posts
├── 📄 portfolio-details.html — Portfolio details page with project showcases
└── 📄 README.md — Project documentation

---

Future Updates 📈

• Add more services and projects to the portfolio section.
• Integrate email functionality to handle form submissions.
• Include a blog section for sharing articles and insights

---

Important Notes 📢

• This project is a static website and does not include a backend or dynamic content.
• Contributions are welcome to enhance the website’s interactivity and design!

---