Portfolio Website
01. Project Overview
Purpose
This portfolio website serves as a digital resume and showcase of my professional experience as a Full-Stack Software Engineer. The goal was to create a clean, modern, and accessible platform that effectively communicates my skills, experience, and projects.
Challenge
Create a portfolio website that is fast, accessible, and visually appealing without relying on heavy frameworks. The site needed to be easily maintainable, SEO-friendly, and provide an excellent user experience across all devices.
Solution
Built a single-page application using semantic HTML5, Tailwind CSS Browser CDN for rapid styling, and vanilla JavaScript for interactivity. Implemented a custom light/dark theme toggle with localStorage persistence, mobile-first responsive design, and SEO optimizations.
02. Screenshots
Hero Section with Introduction
About Section with Skills
Work Experience with Tab Navigation
Featured Projects Showcase
03. Key Features
Light/Dark Theme Toggle
Custom theme switcher with smooth transitions and localStorage persistence for user preference.
Mobile-First Design
Fully responsive layout optimized for all screen sizes with hamburger menu for mobile navigation.
SEO Optimized
Comprehensive meta tags, Open Graph, Twitter Cards, robots.txt, and sitemap.xml for better indexing.
Performance Optimized
Zero build process with CDN-based Tailwind CSS for fast loading. Perfect for static hosting.
Interactive Components
Tab-based work experience navigation, smooth scroll, and hover effects on project cards.
Accessible Design
ARIA labels, keyboard navigation, high contrast colors, and semantic HTML structure.
04. Technology Stack
Frontend
-
▹
HTML5
Semantic markup for SEO and accessibility
-
▹
Tailwind CSS 4
Utility-first CSS via Browser CDN
-
▹
JavaScript (ES6+)
Vanilla JS for interactivity
Deployment
-
▹
GitHub Pages
Static site hosting with auto deployment
-
▹
Custom Domain
pranaybaddam.site via CNAME
-
▹
Google Analytics
Visitor tracking and insights