Alok Yadav | Portfolio

A modern, high-performance personal portfolio website built with Next.js. Featuring smooth animations, GitHub API integration, and a stunning 3D globe visualization.

Next.js • React.js • TypeScript • Redis • Tailwind CSS • Framer Motion

Features

UI/UX

• Animated Homepage - Stunning hero section with animated text and smooth transitions
• 3D Globe Visualization - Interactive 3D globe using Cobe library
• Responsive Design - Optimized for all screen sizes
• Custom Typography - Cal Sans, Funnel Display, and JetBrains Mono fonts

GitHub Integration

• Real-time Repository Stats - Fetches stars, forks, watchers, and open issues
• Owner Information - Displays avatar, bio, followers, and public repos
• Repository Details - Shows language, size, creation date, and last updated
• Loading & Error States - Beautiful skeleton loaders and error handling

Performance & SEO

• Edge Runtime - API routes run on Edge for maximum performance
• Visit Counter - Real-time visitor tracking with Upstash Redis
• SEO Optimized - Complete metadata, OpenGraph, Twitter cards, and schema.org structured data
• Sitemap & Robots - Auto-generated sitemap and robots.txt
• Fast Loading - Optimized assets and code splitting

Getting Started

Prerequisites

• Node.js 18+ installed
• npm or yarn package manager
• Git

Installation

1. Clone the repository

   git clone https://github.com/03aey/portfolio.git
   cd portfolio

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env

   Add your environment variables:

   NEXT_PUBLIC_BASE_URL=http://localhost:3000
   UPSTASH_REDIS_REST_URL=your_upstash_redis_url
   UPSTASH_REDIS_REST_TOKEN=your_upstash_redis_token

4. Run the development server

   npm run dev

5. Open your browser Navigate to localhost:3000

Available Scripts

Script	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint

Configuration

Environment Variables

Variable	Description	Required
NEXT_PUBLIC_BASE_URL	Base URL for the application	Yes
UPSTASH_REDIS_REST_URL	Upstash Redis REST URL	Yes
UPSTASH_REDIS_REST_TOKEN	Upstash Redis REST Token	Yes

Customization

Add your projects in src/constants/index.ts:

export const featuredProjects = [
	{
		id: "project-id",
		title: "Project Name",
		description: "Project description",
		repoLink: "https://github.com/username/repo",
		liveLink: "https://project-demo.com",
		date: "2024-01-01",
		image: "/assets/projects/project.png",
		tags: [
			{
				id: 1,
				name: "Next.js",
				path: "/assets/logos/next-js.svg",
			},
		],
	},
];

Update personal information in src/app/layout.tsx:

• Metadata and SEO
• Social links
• Schema.org structured data

Featured Projects

1. Mentivo

AI-powered learning partner matching platform with OpenAI integration

• Tech: Next.js, Hono, Drizzle, Clerk, OpenAI, React Query
• Live: mentivo-aey.vercel.app

2. BuildHub

Community maker platform for showcasing launches

• Tech: Next.js, Neon, Drizzle, Clerk, TypeScript
• Live: buildhub-app.vercel.app

3. Parenthesis

Premium travel experiences and luxury accommodations

• Tech: Next.js, Prisma, React Redux, Next Auth
• Live: parenthesis-six.vercel.app

4. Flickr

Anonymous feedback app with secure messaging

• Tech: Next.js, MongoDB, Next Auth, Zod, Aceternity
• Live: flickrrr.vercel.app

Design System

Colors

• Primary: Purple (#b63e96)
• Background: Light (#f5f5f5) / Dark (#06091f)
• Foreground: Dark (#1a1a1a) / Light (#ffffff)

Typography

• Display: Cal Sans
• Body: Funnel Display
• Mono: JetBrains Mono

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Performance

• Lighthouse Score: 100
• First Contentful Paint: < 1s
• Time to Interactive: < 1s
• SEO Score: 100

---