How I Built SrujanTube: A YouTube-Inspired Developer Portfolio
Hey dev community! πŸ‘‹ Today I'm excited to share my journey of creating SrujanTube, a developer portfolio that breaks away from traditional formats by reimagining the experience through a YouTube-inspired interface.
The Concept
Traditional portfolios often follow the same pattern – a grid of projects, an about section, and contact information. I wanted something different, something that would:

Create a familiar experience for visitors
Showcase projects in an engaging way
Stand out from typical developer portfolios

The solution? Model my portfolio after one of the most intuitive and widely-used interfaces in the world: YouTube.
Tech Stack Breakdown
For this project, I went with:

Next.js 15: For its enhanced performance, routing capabilities, and built-in optimizations
TypeScript: To ensure type safety and improve development experience
Tailwind CSS: For rapid UI development and consistent styling
Custom Hooks & Context API: For state management without additional libraries
Vercel: For seamless deployment and excellent performance

Key Features Implementation

YouTube-Style Navigation
// Simplified sidebar navigation component
const Sidebar = ({ isExpanded }: { isExpanded: boolean }) => {
return (


{/* Navigation items */}
} label="Home" link="/" />
} label="Projects" link="/projects" />
} label="About" link="/about" />
} label="Contact" link="/contact" />


);
};

Project "Video" Cards
The project cards mimic YouTube video thumbnails, complete with:

Thumbnail image
Title and description
View count and posting date
Interactive elements (like, save, etc.)

// Simplified project card component
const ProjectCard = ({ project }: { project: Project }) => {
return (



{project.title}
{project.duration}
  

    
{project.title}

    
{project.description}


    

      {project.views} views
      {project.postedDate}