Kamal Swarnkar Omnitrix Portfolio

A futuristic personal portfolio built with Next.js, React, Tailwind CSS, Framer Motion, and Three.js. The experience is designed like an Omnitrix activation sequence: visitors start at an animated hero screen, trigger the transformation, and then explore a cinematic portfolio interface with projects, skills, education, training, certificates, and contact details.

Overview

This project is a single-page portfolio application powered by the Next.js App Router. It combines a strong visual theme inspired by Ben 10 and the Omnitrix with data-driven content so personal details, projects, certificates, and contact links can be updated from one place.

The UI is intentionally interactive rather than static. It includes a transformation intro, animated background systems, a custom cursor for desktop, section-aware navigation, rotating skill dials, expandable project cards, and downloadable resume access.

Features

• Omnitrix-style activation hero with staged boot messages and transition sequence
• Section-aware floating navigation after activation
• Layered animated sci-fi background system with particles, grids, waves, portals, and scan effects
• Responsive single-page layout built with the App Router
• Data-driven portfolio content sourced from data/portfolio-data.ts
• Animated skill watch cards with rotating highlighted technologies
• Expandable project mission cards with live/demo links
• Training, education, and certificate showcase sections
• Contact console with LinkedIn, GitHub, email, phone, and CV download
• Tunable visual behavior through lib/site-config.ts

Tech Stack

• Next.js 15
• React 19
• TypeScript
• Tailwind CSS
• Framer Motion
• Three.js
• Lucide React

Project Structure

Portfolio/
|- app/
|  |- globals.css
|  |- layout.tsx
|  |- page.tsx
|- components/
|  |- background/
|  |- sections/
|  |- ui/
|  |- portfolio-app.tsx
|- data/
|  |- portfolio-data.ts
|- hooks/
|  |- use-activation-sound.ts
|  |- use-device-tier.ts
|- lib/
|  |- site-config.ts
|- public/
|  |- assets/
|- next.config.ts
|- package.json
|- tailwind.config.ts
|- tsconfig.json

Key Files

• components/portfolio-app.tsx: main orchestration for app phases, section tracking, and navigation
• data/portfolio-data.ts: central source for resume links, intro copy, training, education, skills, projects, certificates, and contacts
• lib/site-config.ts: controls particle counts, glow intensity, pulse timing, cursor trail density, and section ids
• components/sections/*: portfolio content sections such as hero, about, training, education, skills, projects, certificates, and contact
• components/background/*: visual atmosphere system for the Omnitrix-inspired experience

Getting Started

Prerequisites

• Node.js 18+ recommended
• npm

Installation

npm install

Run Locally

npm run dev

Open http://localhost:3000.

Customization

Most portfolio updates can be made without changing the UI components.

Update content

Edit data/portfolio-data.ts to change:

• intro copy and activation banner text
• training and education entries
• skills and categories
• projects, tech stacks, GitHub links, and demos
• certificates
• social links, email, phone number, and resume download label

Update the visual system

Edit lib/site-config.ts to tune:

• particle counts for desktop and mobile
• star density
• glow intensity
• animation speed
• grid and nebula opacity
• pulse frequency
• cursor trail count

Update styling

• global theme tokens live in app/globals.css
• Tailwind theme extensions live in tailwind.config.ts
• metadata and fonts are configured in app/layout.tsx

Deployment

This project is well suited for deployment on Vercel.

Typical production steps:

npm run build
npm run start

Current Content Highlights

The portfolio currently presents:

• a software and ML-focused personal brand for Kamal Swarnkar
• featured projects including Resumix, an AI-enhanced career guidance system, and FinTrackAI
• training programs from W3grads and Resolute Lab
• certificates from Infosys, Google, and the University of Colorado
• downloadable CV support from the public/assets directory

Notes

• No environment variables are currently required for local development.
• next.config.ts enables optimizePackageImports for lucide-react.
• The existing npm run lint command triggers Next.js ESLint setup because no ESLint configuration file is present yet.

Future Improvements

• add a dedicated ESLint configuration so linting works non-interactively
• include project screenshots or a GIF preview in the README
• add richer metadata, Open Graph images, and favicon assets
• split projects into individual detail pages if the portfolio expands

License

This repository currently has no explicit license file. Add one before open-source distribution if needed.