A modern, responsive portfolio website built with Next.js 14, Tailwind CSS, and Framer Motion featuring a stunning dark mode with animated stars background.

Live Website: https://achyutkatiyar.com

• Overview
• Features
• Technologies
• Getting Started
• Project Structure
• Customization
• Using This Template
• Deployment
• Credits
• License

This portfolio website showcases my projects, experience, and skills with a focus on modern web development and innovative UI/UX. The site features smooth animations, a unique dark mode experience with Three.js stars animation, and a responsive design that works across all devices.

• Modern UI/UX: Clean, minimal design with custom animations
• Responsive: Fully responsive across mobile, tablet, and desktop
• Dark/Light Mode: Toggle between themes with a beautiful starry background in dark mode
• Command Palette (⌘K): Keyboard-driven navigation inspired by power user tools
• Interactive Components:
  • Floating glassmorphic navbar
  • Animated project cards
  • Timeline-based experience section
  • Achievement showcase
  • Testimonials/recommendations
• Performance Optimized: Fast load times and smooth animations
• Accessibility: ARIA-compliant components and keyboard navigation
• SEO Friendly: Proper metadata and semantic HTML

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS v4
• Animations:
  • Framer Motion
  • Three.js (for starry background)
• UI Components: shadcn/ui
• State Management: React Hooks
• Icons: Lucide React
• Fonts: Inter (variable) and custom fonts

• Node.js 18.17.0 or later
• npm or yarn

1. Clone the repository:

   git clone https://github.com/yourusername/portfolio-website.git cd portfolio-website

2. Install dependencies:

   npm install # or yarn install

3. Run the development server:

   npm run dev # or yarn dev

4. Open http://localhost:3000 in your browser.

├── app/ # Next.js app directory │ ├── (routes)/ # Page routes │ │ ├── about/ │ │ ├── blog/ │ │ ├── contact/ │ │ ├── experience/ │ │ └── projects/ │ ├── globals.css # Global styles │ └── layout.tsx # Root layout ├── components/ # React components │ ├── home/ # Homepage components │ ├── layout/ # Layout components (navbar, footer) │ ├── projects/ # Project related components │ ├── shared/ # Shared components │ ├── ui/ # UI components (shadcn) │ ├── 3d-card.tsx # 3D hover effect card │ ├── black-hole-video.tsx # Black hole video component │ └── star-background.tsx # Star background component ├── data/ # Static data files │ ├── projects.ts # Projects data │ ├── experience.ts # Experience data │ ├── skills.ts # Skills data │ └── social.ts # Social links data ├── lib/ # Utility functions │ └── utils.ts # Helper functions ├── public/ # Static assets │ ├── fonts/ # Custom fonts │ ├── images/ # Images │ └── blackhole.webm # Black hole video for dark mode └── package.json # Project dependencies 

Edit the following files to update with your information:

• data/projects.ts: Add your projects
• data/experience.ts: Add your work and research experience
• data/skills.ts: Update your technical skills
• data/social.ts: Update your social media links

The site uses Tailwind CSS for styling. You can customize:

1. Colors: Edit the theme colors in globals.css or tailwind.config.mjs
2. Fonts: Replace fonts in the /public/fonts directory and update references in app/layout.tsx
3. Components: Modify shadcn components in the components/ui directory

Replace the following assets with your own:

• /public/images/profile.jpg: Your profile picture
• /public/images/projects/: Project images
• /public/resume.pdf: Your resume
• /public/favicon.ico: Site favicon

If you'd like to use this template for your own portfolio website, you are welcome to do so under the following conditions:

1. Required Attribution:

   • You must maintain the original credit in the footer: "Original design by Achyut Katiyar"
   • Keep the attribution link in the README

2. GitHub Repository:

   • If you fork or clone this repository, please star the original repository
   • Include a clear statement in your README indicating that your project is based on Achyut Katiyar's portfolio template

3. Customization Requirements:

   • Change the personal information to your own
   • Modify at least the color scheme or layout to make it personal to you
   • Replace all project, experience, and skill data with your own

• Remove attribution and claim the design as entirely your own
• Sell this template or any derivative work without explicit permission
• Use my personal information, images, or project details in your version

For your README:

This portfolio is based on [Achyut Katiyar's Portfolio Template](https://github.com/achyut21/portfolio-website), customized with my personal information and projects.

For your website footer:

Design inspired by <a href="https://github.com/achyut21" target="_blank" rel="noopener noreferrer">Achyut Katiyar</a>

This portfolio is optimized for deployment on Vercel, but can be deployed to any platform that supports Next.js.

1. Push your code to a GitHub repository
2. Import the repository in Vercel
3. Set any required environment variables
4. Deploy!

Vercel will automatically detect that it's a Next.js project and configure the build settings accordingly.

For other platforms, refer to the Next.js deployment documentation.

• Design & Development: Achyut Katiyar
• UI Components: shadcn/ui
• Icons: Lucide React
• Animation: Framer Motion
• 3D Starfield: Three.js and React Three Fiber

This project is available for personal and educational use with required attribution as detailed in the Using This Template section.

© 2025 Achyut Katiyar. All Rights Reserved.