Portfolio Website

Personal Portfolio & Resume Website

Live Demo GitHub

About This Project

This is my personal portfolio website built to showcase my skills, projects, and experience as a web developer. The website features a modern, responsive design that works seamlessly across all devices.

The portfolio includes sections for my work experience, education, skills, and contact information. It also features a dark mode toggle for better user experience and smooth scrolling animations.

Technologies Used

HTML5
CSS3
JavaScript
Git
ScrollReveal
BoxIcons

Key Features

  • Responsive Design: Fully optimized layout that adapts to mobile, tablet, and desktop screens
  • Dark Mode: Seamless light/dark theme toggle with localStorage persistence
  • Smooth Navigation: Interactive scrolling with active link highlighting for better UX
  • Scroll Animations: Elegant section reveals powered by the ScrollReveal.js library
  • Contact Integration: Functional contact form connected with Web3Forms for real submissions
  • Modern UI/UX: Clean and minimalist design built with custom CSS transitions and animations
  • Interactive Menu: Mobile-friendly hamburger navigation with smooth toggle effects
  • Performance Optimized: Lightweight code structure ensuring fast loading and smooth performance

Screenshots

Portfolio Home Section

Home Section

Portfolio About Section

About Section

Portfolio Skills Section

Skills Section

Portfolio Project Section

Project Section

Portfolio Dark Mode

Dark Mode

Portfolio Mobile View

Mobile View

Challenges & Solutions

Challenge 1: Dark Mode Implementation

Implementing a dark mode that persists across page reloads and maintains consistency across all sections.

Solution: Used localStorage to save user preference and applied dark mode classes dynamically with JavaScript.

Challenge 2: Responsive Navigation

Creating a mobile-friendly navigation that works smoothly on all screen sizes.

Solution: Implemented a hamburger menu with smooth transitions and proper z-index management.

What I Learned

  • Advanced CSS Grid and Flexbox layouts
  • JavaScript DOM manipulation and event handling
  • Responsive design principles and mobile-first approach
  • Working with third-party libraries (ScrollReveal, BoxIcons)
  • Form handling and API integration
  • Performance optimization techniques
  • Version control with Git and deployment with Vercel