AIML Folio

Problem Statement

Generic portfolio templates fail to communicate an AI/ML engineer's depth. The goal was a fully custom, premium portfolio that feels native to the AI world - dark aesthetic, interactive visualisations, and deep project case studies that go beyond a link and a screenshot.

Dataset

Personal project data, skill metrics, GitHub contributions, certifications, and experience timeline - all structured as a typed data layer in TypeScript for type-safe rendering across every section.

Architecture

Next.js 15 App Router with dynamic project routes, Framer Motion scroll-triggered animations, an interactive D3 force-graph for the tech stack, radar chart for skill distribution, and a tabbed AI/ML vs Dev project split.

Model Selection

Next.js for SSR/SEO and image optimisation; TypeScript for maintainability; Framer Motion for declarative animations; Tailwind CSS for the design system; Vercel for edge deployment with zero-config CI.

Training Process

Iterative design: established the dark-space colour palette and CSS tokens first, then built section by section - hero, skills, tech graph, projects, timeline, certifications, contact - polishing animations and responsive breakpoints at each step.

Evaluation Metrics

Results

Live at www.harshpariya.dev - a production-grade AI/ML portfolio with animated hero, interactive tech graph, tabbed project showcase with full case studies, and responsive layout across all devices.

Key Learnings

• 1A typed data layer makes it trivial to add new projects and sections without breaking anything.
• 2Interactive visualisations (force graph, radar chart) communicate technical depth far better than bullet lists.
• 3Dark-space aesthetics with purple/cyan gradients immediately signal an AI-native engineer.