A minimal, pixel-perfect dev portfolio showcasing my work as a Fullstack Developer.
→ Check out the live site: athaxv.me
- Next.js 16 - React framework with App Router
- Tailwind CSS v4 - Utility-first CSS framework
- shadcn/ui - Re-usable components built with Radix UI and Tailwind CSS
- TypeScript - Type-safe development
- Framer Motion - Smooth animations and transitions
- Three.js - 3D snowfall animation background
- ✨ Clean & Modern Design - Minimalist UI with attention to detail
- 🌓 Light/Dark Themes - Seamless theme switching with system preference detection
- ❄️ Interactive Snowfall Animation - Beautiful 3D pixelated snowfall effect using Three.js
- 📱 Fully Responsive - Optimized for all screen sizes
- 🔍 SEO Optimized - JSON-LD schema, sitemap, robots.txt, and meta tags
- 📄 vCard Integration - Download contact information as vCard
- 🎯 Command Menu - Quick navigation with keyboard shortcuts (⌘K)
- 📊 GitHub Integration - Live star count and contribution tracking
- 🎨 Component Registry - Reusable components powered by shadcn CLI
- 📈 Analytics Ready - PostHog integration with consent management
- About - Personal introduction and bio
- Experience - Work history and professional journey
- Projects - Showcase of notable projects and contributions
- Certifications - Professional certifications and achievements
- GitHub Activity - Recent contributions and activity
- Recent PRs - Latest pull requests and open source work
- Social Links - Connect on GitHub, Twitter, LinkedIn, and more
- Node.js 22.x or higher
- pnpm >= 9
- Clone the repository:
git clone https://github.com/Athaxv/dev.profile.git
cd dev.profile- Install dependencies:
pnpm install- Set up environment variables:
Copy .env.example to .env and fill in the required values:
cp .env.example .envRequired environment variables:
# Application
APP_URL=https://safeedaadmi.dev
# Registry Configuration
REGISTRY_NAMESPACE=@athaxv
REGISTRY_NAMESPACE_URL=https://safeedaadmi.dev/r/{name}.json
# GitHub API (for star count and contributions)
GITHUB_API_TOKEN=your_github_token_here
# Analytics (Optional)
NEXT_PUBLIC_POSTHOG_KEY=your_posthog_key
NEXT_PUBLIC_POSTHOG_HOST=https://ph.yourdomain.com
NEXT_PUBLIC_POSTHOG_UI_HOST=https://us.i.posthog.com- Run the development server:
pnpm devOpen http://localhost:1408 in your browser.
pnpm dev- Start development server on port 1408pnpm build- Build for productionpnpm start- Start production serverpnpm preview- Build and preview locallypnpm lint- Run ESLintpnpm lint:fix- Fix ESLint errors automaticallypnpm check-types- Type check with TypeScriptpnpm format:check- Check code formattingpnpm format:write- Format code with Prettierpnpm registry:build- Build component registry
src/
├── app/ # Next.js App Router pages
│ ├── (app)/ # Main application routes
│ ├── (llms)/ # LLM-friendly endpoints
│ └── layout.tsx # Root layout
├── components/ # Shared UI components
│ ├── ui/ # shadcn/ui components
│ └── ...
├── features/ # Feature-based modules
│ ├── portfolio/ # Portfolio-specific components
│ └── blog/ # Blog functionality
├── config/ # Configuration files
├── hooks/ # Custom React hooks
├── lib/ # Utility libraries
├── registry/ # Component registry
└── styles/ # Global styles
Edit the following files to customize your portfolio:
src/features/portfolio/data/user.ts- Personal info, bio, contact detailssrc/features/portfolio/data/experiences.ts- Work experiencesrc/features/portfolio/data/projects.ts- Portfolio projectssrc/features/portfolio/data/certifications.ts- Certificationssrc/features/portfolio/data/social-links.ts- Social media linkssrc/config/site.ts- Site configuration and URLs
Replace public/images/ipsum.svg with your logo. The logo component is located at src/components/site-header-mark.tsx.
Theme colors can be customized in src/config/site.ts:
export const META_THEME_COLORS = {
light: "#ffffff",
dark: "#09090b",
};The portfolio features a beautiful 3D snowfall animation built with Three.js. The animation:
- Adapts to light/dark themes
- Configurable density, speed, and appearance
- Optimized for performance with WebGL
- Gracefully degrades if WebGL is unavailable
Configuration can be adjusted in src/components/snowfall-background.tsx.
Press ⌘K (or Ctrl+K) to open the command menu for quick navigation. The menu includes:
- Portfolio sections
- Social links
- Keyboard shortcuts
The project includes a component registry system powered by shadcn CLI, allowing you to:
- Build reusable components
- Distribute components via JSON endpoints
- Include live previews and code snippets
- Push your code to GitHub
- Import your repository in Vercel
- Add environment variables
- Deploy!
The project is optimized for Vercel with automatic deployments on push.
The project can be deployed to any platform that supports Next.js:
- Netlify
- Railway
- Render
- Self-hosted with Node.js
Licensed under the MIT license.
You're free to use this code! Just make sure to remove all personal information before publishing your website.
- React - UI library
- Next.js - React framework
- Tailwind CSS - CSS framework
- Radix UI - Unstyled UI primitives
- shadcn/ui - Component library
- Framer Motion - Animation library
- Three.js - 3D graphics library
- Lucide - Icon library
- PostHog - Analytics platform
- And many other open-source libraries
Contributions are welcome! Please feel free to submit a Pull Request.
- Website: athaxv.me
- GitHub: @Athaxv
- Twitter: @Athaxv05
- LinkedIn: Atharv Gaur
Made with ❤️ by Atharv Gaur