Project: Personal Portfolio Website

Website: aaswne.github.io/Personal-Portfolio-/

Project Overview

I developed a personal portfolio website using HTML (HTML5), CSS (CSS3), JavaScript (ES6), and Bootstrap to present my skills and projects with a clean, professional aesthetic. The site showcases my work, resume, and contact info, and features a fully responsive, user-friendly design that adapts seamlessly across devices.

Tech Stack

HTML5 & CSS3: Structuring and designing the visual layouts, typography, and responsive styles.

Bootstrap: Prebuilt components and grid system to speed up development and ensure mobile responsiveness.

JavaScript: Adding interactivity, animations, carousel, form validation, etc.

Key Features

🌙 Dark Mode Toggle: Switch between light and dark themes, with preference saved via localStorage.

📱 Responsive Navigation: Hamburger menu that toggles the navigation links on small screens.

📄 Downloadable CV: Button triggers direct CV download from a hosted file.

🧩 Project Showcase Gallery: Visually display my work with thumbnails and descriptions.

📬 Contact & About Sections: Present resume, skills, and allow users to reach out.

Challenges & Learnings

Implementing Dark Mode: Learned to toggle CSS themes and persist user preferences using localStorage.

Responsive Navigation: Built a hamburger menu with class toggles and event handling for different screen sizes.

Secure CV Download: Dynamically generated Google Drive download links for easy access.

Cross-device Testing & Debugging: Ensured seamless functionality on various browsers and screen sizes.

Balancing UI & Performance: Optimized CSS, JS, and DOM operations for speed and smoothness.

Sample Code Snippets

              // Dark Mode Toggle with Local Storage

const btn = document.getElementById("darkModeToggle");

// Load saved preference on page load
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("darkmode");
  btn.textContent = "☀️";
} else {
  btn.textContent = "🌙";
}

btn.addEventListener("click", () => {
  document.body.classList.toggle("darkmode");

  // Save preference
  if (document.body.classList.contains("darkmode")) {
    btn.textContent = "☀️";
    localStorage.setItem("theme", "dark");
  } else {
    btn.textContent = "🌙";
    localStorage.setItem("theme", "light");
  }
});
            

// Mobile Navigation Menu Toggle
document.addEventListener('DOMContentLoaded', () => {
  const hamburger = document.getElementById('hamburgmenu');
  const nav = document.querySelector('.nav');

  hamburger.addEventListener('click', () => {
    nav.classList.toggle('active');
  });
});
  

// Spotify Section Fade-In after load
window.addEventListener("load", () => {
  setTimeout(() => {
    document.querySelector(".spotify-container")
    .style.opacity = "1";
  }, 1500);
});
  

Responsive Preview