Building my Personal Portfolio with Tailwind CSS

A single-page, responsive portfolio built during Internshala (Course 2) using semantic HTML, Tailwind CSS, and vanilla JS. Features: day/night toggle, animated skill bars, interactive project cards, and a contact form. Live demo: https://my-portfolio-pearl-xi-96.vercel.app/

Live demo

https://my-portfolio-pearl-xi-96.vercel.app/

Why I built this

I built and published my Personal Portfolio as part of Internshala (Course 2) to create a clean, responsive single-page site that demonstrates my frontend skills, attention to micro-interactions, and UI sensibility. The goal was to ship a polished product that recruiters and engineers can browse quickly.

Tech stack

• HTML5 (semantic)
• Tailwind CSS (utility-first styling)
• JavaScript (vanilla for interactivity)
• Font Awesome + Google Fonts (Poppins)

What I built — highlights

• 🌓 Day / Night theme toggle with persistent preference (localStorage)
• 📱 Responsive layouts tuned for desktop, tablet (iPad Mini), and mobile (Samsung Galaxy S8+)
• ✨ CSS animations & transitions for micro-interactions (buttons, cards, headings)
• 🎯 Interactive project cards with hover transforms & live preview / GitHub links
• 📊 Animated skill bars that animate into view on scroll
• 📧 Contact form with basic validation
• 🏆 Certifications section (including my Internshala certificate)

Responsive & accessibility notes

• I prioritized semantic HTML (<header>, <main>, <section>, <footer>) for screen readers and SEO.
• Navigation includes skip links and ARIA attributes where necessary.
• The design adapts with Tailwind responsive utilities — md:flex, lg:grid, etc. — and I manually tested key breakpoints.

Deployment

Deployed on Vercel for fast static hosting and quick previews. Zero-config deployment makes iterative changes simple.

What I learned

• Tailwind significantly speeds up layout tasks and keeps styling consistent.
• Micro-interactions (transitions, hover states) add polish but should be performant and accessible.
• Building a portfolio is as much about storytelling and UX as it is about code.

What’s next

• Add project case studies (problem → approach → code → result)
• Add light analytics to understand which projects visitors view
• Consider a React-based rewrite for reusable components

I built this portfolio during Internshala (Course 2) to showcase my UI & frontend skills. I’m actively looking for Frontend / UI Developer roles (remote or hybrid). If you’re hiring or know someone who is, I’d love to connect — DM me or check the resume and live demo on the site:

🔗 https://my-portfolio-pearl-xi-96.vercel.app/

portfolio, webdev, frontend, tailwindcss, javascript, internshala