A modern, performant, and accessible portfolio website built with the latest web technologies.

• Latest Tech Stack: Next.js 15.5, React 19, TypeScript 5, Tailwind CSS 4
• Modern Design: Minimalist, clean interface with smooth animations using Framer Motion
• Dark/Light Mode: Seamless theme switching with persistent preferences
• Auto-Rotating Testimonials: Interactive carousel with Embla Carousel, read more/less functionality
• Timeline Experience: Beautiful timeline layout showcasing 6 professional positions
• Fully Responsive: Optimized for all devices (320px to 1920px+) with mobile-first design
• Accessible: WCAG 2.1 AA compliant with semantic HTML and ARIA labels
• Performant: Optimized for Lighthouse scores 95+
• Type-Safe: Full TypeScript coverage for reliability
• Tested: Vitest + React Testing Library setup for quality assurance
• SEO Optimized: Meta tags, Open Graph, and structured data

• Framework: Next.js 15.5 with App Router & Turbopack
• React: React 19 with concurrent rendering
• TypeScript: TypeScript 5 with strict mode

• CSS Framework: Tailwind CSS 4
• Animations: Framer Motion 12
• Carousel: Embla Carousel with autoplay plugin
• Theme: next-themes
• Icons: Lucide React
• Utilities: CVA, clsx, tailwind-merge

• Test Runner: Vitest 3
• Testing Library: @testing-library/react
• DOM Testing: jsdom

• Node.js 18+ (recommended: 20.19+ or 22.12+)
• npm, yarn, or pnpm

1. Clone the repository:

git clone https://github.com/karkigrishmin/karkigrishmin.github.io.git
cd grishmin-portfolio-2025

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

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

The page will automatically reload when you make changes.

• npm run dev - Start development server with Turbopack
• npm run build - Create production build with static export
• npm test - Run tests with Vitest
• npm run test:ui - Run tests with UI

Note: This project uses Next.js static export for deployment to GitHub Pages.

grishmin-portfolio-2025/
├── app/
│   ├── layout.tsx          # Root layout with theme provider
│   ├── page.tsx            # Main landing page
│   ├── globals.css         # Global styles & design tokens
│   └── favicon.ico
├── components/
│   ├── ui/                 # Reusable UI components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   └── badge.tsx
│   ├── sections/           # Page sections
│   │   ├── hero.tsx
│   │   ├── about.tsx
│   │   ├── skills.tsx
│   │   ├── experience.tsx  # Timeline with 6 jobs
│   │   ├── projects.tsx    # 6 professional projects
│   │   ├── testimonials.tsx # Carousel with 5 LinkedIn recommendations
│   │   └── contact.tsx
│   ├── navigation.tsx      # Navigation bar
│   ├── theme-provider.tsx  # Theme context
│   └── theme-toggle.tsx    # Theme switcher
├── lib/
│   ├── utils.ts            # Utility functions
│   └── constants.ts        # Content data
├── tests/
│   ├── setup.ts            # Test configuration
│   └── theme-toggle.test.tsx
├── public/                 # Static assets
├── vitest.config.ts        # Vitest configuration
├── next.config.ts          # Next.js configuration
├── tailwind.config.ts      # Tailwind configuration
└── tsconfig.json           # TypeScript configuration

All content is centralized in lib/constants.ts. Update this file to change:

• Personal information
• Skills (6 categories with technologies)
• Experience (6 professional positions with timeline data)
• Projects (6 client projects with live links)
• Testimonials (5 LinkedIn recommendations)
• Social links

Design tokens are defined in app/globals.css:

• Colors (light/dark mode)
• Typography
• Spacing
• Borders

All components are modular and reusable:

• UI components in components/ui/
• Section components in components/sections/
• Styled with Tailwind CSS
• Animated with Framer Motion

This site is deployed to GitHub Pages with automatic deployment via GitHub Actions.

Live Site: https://karkigrishmin.github.io/

How it works:

1. Push changes to the main branch
2. GitHub Actions automatically builds the site
3. Static files are deployed to GitHub Pages
4. Site updates within 1-2 minutes

To deploy your own:

1. Fork this repository
2. Enable GitHub Pages in repository settings
3. Set source to "GitHub Actions"
4. Push to main branch to trigger deployment

The deployment workflow is defined in .github/workflows/deploy.yml.

The project can also be deployed to:

• Vercel: Import from GitHub and deploy instantly
• Netlify: Drag and drop the out/ folder after running npm run build
• Cloudflare Pages: Connect repository and configure build settings
• AWS Amplify: Deploy with continuous deployment from GitHub
• Railway / Render: Support Next.js static exports

Optimized for excellent Lighthouse scores:

• Performance: 95+
• Accessibility: 95+
• Best Practices: 95+
• SEO: 95+

Optimization techniques:

• Next.js Image component for optimized images
• Code splitting with dynamic imports
• Font optimization with next/font
• Lazy loading for sections
• Turbopack for faster builds

• Chrome (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)
• Edge (last 2 versions)

MIT License - feel free to use this project for your own portfolio!

Grishmin Karki

• GitHub: @karkigrishmin
• LinkedIn: grishmin
• Twitter: @karkigrishmin
• Email: [email protected]

• Built with Next.js
• Styled with Tailwind CSS
• Animated with Framer Motion
• Icons from Lucide
• Fonts from Google Fonts

Made with ❤️ by Grishmin Karki