A modern, full-stack portfolio showcasing projects, skills, and expertise in Full-stack Development and AI/ML Engineering. Built with Next.js 16, React 19, and Tailwind CSS, featuring premium interactive animations, a custom cursor, and a beautiful Bento-style grid layout.
- 🎨 Premium Design: Glassmorphic UI with dark theme, smooth scrolling, and custom cursor.
- 🖱️ Interactive Elements: Magnetic buttons and a "Trailing Ring" custom cursor.
- 🎬 Scroll Reveal Animations: Sections gently fade in and slide up as you scroll.
- ⌨️ Typewriter Animations: Sequential text typing effects with cursor.
- 🎯 Bento Grid Layout: Responsive card grid for projects and skills.
- 📱 Fully Responsive: Mobile, tablet, and desktop optimized (custom cursor and smooth scroll disabled on mobile for performance).
- 🌓 Dark Mode: Built-in theme switching support.
- ⚡ Performance: Server-side rendering with Next.js App Router and React 19.
- Framework: Next.js 16 with App Router
- Library: React 19
- Language: TypeScript
- Styling: Tailwind CSS with custom tokens
- UI Components: shadcn/ui
- Animations: Framer Motion
- Smooth Scroll: Lenis
- Icons: Lucide React
- Package Manager: pnpm
- Version Control: Git + GitHub
- Code Quality: TypeScript strict mode
portfolio/
├── app/
│ ├── layout.tsx # Root layout with smooth scroll & custom cursor
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/
│ ├── hero.tsx # Hero section with typewriter
│ ├── projects.tsx # Bento grid project showcase with scroll reveal
│ ├── about.tsx # About section
│ ├── skills.tsx # Skills showcase with scroll reveal
│ ├── experience.tsx # Work experience with scroll reveal
│ ├── contact.tsx # Contact section
│ ├── navigation.tsx # Navigation bar
│ ├── custom-cursor.tsx # Custom trailing cursor component
│ ├── smooth-scroll.tsx # Lenis smooth scroll wrapper
│ └── ui/
│ ├── magnetic-button.tsx # Magnetic button wrapper
│ ├── scroll-reveal.tsx # Scroll animation wrapper
│ └── ... # Other shadcn components
├── public/
│ ├── images/ # Image assets
│ └── Hem-Varia-ONEPAGECV.pdf
└── ...
- Node.js 18+ or Bun
- pnpm (or npm/yarn)
-
Clone the repository
git clone https://github.com/HemVaria/portfolio.git cd portfolio -
Install dependencies
pnpm install
-
Run the development server
pnpm dev
-
Open in browser
- Visit http://localhost:3000
# Development server
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start
# Run TypeScript type checking
pnpm type-checkEdit the following files to customize with your own information:
components/hero.tsx: Hero greeting, name, and rolescomponents/about.tsx: Bio and professional summarycomponents/contact.tsx: Email, phone, and social linkscomponents/projects.tsx: Project showcase with descriptionscomponents/skills.tsx: Technical skills and toolscomponents/experience.tsx: Work experience timeline
Edit components/projects.tsx and add to the projects array:
{
title: "Your Project Title",
year: "2025",
size: "lg", // "lg" | "md" | "sm"
description: "Brief project description",
stack: ["Tech1", "Tech2", "Tech3"],
repo: "https://github.com/username/project",
demo: "https://www.youtube.com/embed/VIDEO_ID", // optional
image: "/images/projects/project.jpg" // optional
}-
Push to GitHub
git push origin main
-
Deploy with Vercel
- Visit vercel.com
- Connect your GitHub repository
- Click "Deploy"
- Vercel will auto-deploy on every push to
main
This project is licensed under the MIT License — see the LICENSE file for details.
- Portfolio: hehehem.vercel.app
- GitHub: @HemVaria
- LinkedIn: Hem Varia
- Email: hemvaria007@gmail.com
Made with ❤️ by Hem Varia