Portfolio-Website

This portfolio showcases my work with creative emoji elements, a harmonious blend of professional colors, and a dedicated section for career highlights, presenting my technical skills.

[!TIP] 🚀 Make this portfolio truly yours in 2 steps:

🛠️ Step 1: Customize it → How_To_Customize.md
🌐 Step 2: Deploy it → How_To_Deploy.md

✨ Build → Customize → Deploy → Share

Technology Used 💻

🛠  Languages and Tools :

Description

• This portfolio showcases a creative blend of emojis to enhance visual appeal and expressiveness.
• The design features a harmonious blend of professional colors for a polished, attractive look.
• A dedicated section highlights career achievements, making it easy to see professional milestones.
• The website is user-friendly, with an intuitive interface that is simple to navigate.
• Responsive design ensures the portfolio looks great and functions well on all devices and screen sizes.
• Added a new dropdown for dynamically changing website colors with options for Autumn, Summer, Rainy, and Winter. Upon selection, the website color changes instantly. Refreshing the website restores it to its default color scheme.
• Added a dynamic wheel animation for the social links section, where each link rotates into the center sequentially. The animation loops continuously, reversing direction after every three links. The central icon and title update with each link. Additionally, I’ve placed the social links logo on the main page and corresponding Font Awesome icons on the career highlights page.

Directory Structure

📁 Portfolio-Website/
├── index.html                 # 🏠 Main landing page of the portfolio website
├── career-highlights.html     # 🏆 Page dedicated to career highlights and achievements
│
├── 📁 css/                    # 💅 Stylesheets
│   ├── index.css              # 🎨 Stylesheet for index.html
│   └── career-highlights.css  # 🏅 Stylesheet for career-highlights.html
│
├── 📁 js/                     # 📜 JavaScript files
│   ├── index.js               # 🎛️ Script for dynamic color changes and navbar adjustments
│   ├── career-highlights.js   # 👁️‍🗨️ Script for controlling color modes on highlights page
│   └── section-add.js         # 🧩 Script to dynamically load modular sections into index.html
│
├── 📁 images/                 # 🖼️ All images used in the website (logos, project thumbnails, etc.)
│
├── 📁 components/             # 🧱 Reusable components (like header.html, footer.html, slider-carousel.html)
│   ├── header.html            # 🔝 Navigation bar and header section
│   ├── footer.html            # 🔻 Footer section with social/contact info
│   └── slider-carousel.html   # 🎞️ Animated slider carousel for landing section
│
├── 📁 sections/               # 📦 All content sections loaded dynamically (About, Projects, etc.)
│   ├── about-me.html          # 👩‍💻 About Me section
│   ├── education.html         # 🎓 Academic background and degrees
│   ├── skills.html            # 🛠️ Technical and soft skills list
│   ├── certifications.html    # 📑 Certifications and credentials
│   ├── experience.html        # 💼 Work experience and internships
│   ├── projects.html          # 🧪 Project showcases with descriptions
│   ├── social-links.html      # 🎡 Section with animated social media wheel
│   ├── blogs-links.html       # ✍️ Blog post links or guest articles
│   ├── hobbies-and-interests.html # 🎨 Hobbies, interests, and creative pursuits
│   └── thank-you.html         # 🙏 Closing message or thank-you note
│
├── LICENSE                    # 📜 MIT License
├── README.md                  # 📘 Documentation file for repository overview, usage, and setup