Back to Work
Full StackFull Stack Development2025

Personal Portfolio Website

Designed and built from scratch - Next.js, Tailwind CSS, deployed at vishnuvuttarkar.com

Next.js 14Tailwind CSSReactApp RouterJavaScript

Overview

Most cybersecurity professionals use generic templates. I built mine from scratch. This portfolio was designed and developed entirely without templates or UI libraries - every component, animation, layout decision, and data structure was written by hand. The goal was to build something that reflects both technical depth and design sensibility, standing out to security recruiters who see hundreds of identical sites. The project involved real engineering decisions: how to structure a multi-page Next.js application, how to separate content from presentation for long-term maintainability, and how to design a UI that feels polished and professional without relying on heavy dependencies.

How It Was Built

01

Design Philosophy

Designed a dark, minimal aesthetic inspired by modern developer portfolios. Typography, spacing, and motion were given as much attention as functionality. The goal was a site that communicates confidence and precision - qualities that matter in offensive security.

02

Architecture

Built on Next.js 14 App Router with a clean src/app directory structure. Each section of the site (Work, Blog, About, Journey, Skills, Contact) is a dedicated page with its own route - making the site scalable and easy to extend without touching unrelated code.

03

Content Architecture

All content (projects, blog posts) is stored in separate JavaScript modules under src/data/. Each project and blog post lives in its own file, making it trivial to add, edit, or remove content without touching any UI code. This mirrors the kind of separation of concerns that matters in production codebases.

04

Component Design

Built a library of reusable components entirely with Tailwind utility classes - no external UI libraries. Includes a floating pill navbar with active route detection, scroll reveal animations via IntersectionObserver, certification badge cards with live credential verification links, and a typewriter animation for the hero section.

05

Performance and Deployment

Deployed at vishnuvuttarkar.com. Next.js Image optimisation, font preloading, and minimal JavaScript bundles keep load times fast. The site scores well on Core Web Vitals out of the box.

What It Includes

Pages

Home, Work (individual project writeups), Blog (individual post pages), About, Journey (interactive timeline), Skills, Contact

Interactions

Typing animation cycling through roles, scroll-triggered reveal animations, hover effects, cert badge verification links, copy-to-clipboard email, resume view and download

Content System

Each project and blog post is its own JavaScript module - adding new content takes 2 minutes and requires no UI changes

Stack

Next.js 14 (App Router), Tailwind CSS, React, Google Fonts, Next/Image - zero external UI libraries

Design

Dark aesthetic with glassmorphism cards, subtle dot-grid backgrounds, green accent system, and consistent typographic scale across all pages

Tech Stack

Next.js 14ReactTailwind CSSJavaScript (ES6+)Next/ImageGoogle FontsIntersectionObserver API

References

  • [1]Next.js App Router documentation
  • [2]Tailwind CSS documentation
  • [3]Deployed at vishnuvuttarkar.com
All ProjectsWork with me →