Back to Projects

Project

Personal Portfolio

A modern, animated portfolio website built with Next.js, Tailwind CSS, and Framer Motion featuring a unique cosmic theme and full mobile responsiveness.

Next.jsTypeScriptTailwind CSSFramer Motion

Overview

This portfolio website showcases my work and experience as a software developer. Built with modern technologies, it features a unique cosmic theme with an animated black hole background.

Features

  • Cosmic Design - Unique dark theme with animated starfield and black hole effect
  • Responsive Layout - Looks great on all devices
  • Smooth Animations - Framer Motion powered transitions and scroll effects
  • Markdown Content - Easy content management with markdown files
  • SEO Optimized - Built-in meta tags and OpenGraph support
  • Fast Performance - Static generation for lightning-fast page loads

Technical Highlights

Animated Background

The black hole background is rendered using HTML5 Canvas with:

  • Dynamic star field with twinkling effect
  • Rotating accretion disk around the event horizon
  • Subtle gravitational lensing simulation

Content System

Blog posts and projects are stored as markdown files with frontmatter for metadata. This makes it easy to:

  • Version control all content with git
  • Write in a familiar format
  • Add new content without touching code

Lessons Learned

Building this portfolio taught me a lot about:

  • Canvas animations and performance optimization
  • Framer Motion's scroll-based animations
  • Tailwind CSS custom theming
  • Next.js static site generation