Skip to content

kaihere14/next_portfolio

BranchesTags

Repository files navigation

Portfolio Logo

Arman Thakur - Developer Portfolio

A modern, responsive portfolio built with Next.js 16, React 19, and TailwindCSS 4

Live Demo • Features • Tech Stack • Getting Started • Structure

Next.js React TailwindCSS TypeScript

✨ Features

🎨 Design & UI

  • Dark/Light Theme Toggle - Seamless theme switching with system preference detection and localStorage persistence
  • Smooth Animations - Built with Motion (Framer Motion) for fluid, modern animations
  • Responsive Design - Mobile-first design that looks stunning on all devices
  • Custom Typography - Utilizes Geist font family and custom Hanken Grotesk variable font
  • Handwritten Font - Uses the Caveat Google Font for playful, handwritten annotations in the hero section
  • Asset Preloading - Preloads essential images (e.g., Logo_easter.webp) to improve load performance and ensure instant display of the avatar Easter egg
  • Dynamic Hero Backgrounds - Theme-aware background images for the hero section, adapting to light and dark modes.

👤 Hero Section

  • Profile Avatar - Animated profile image with theme-aware accent colors
  • Interactive Avatar Easter Egg - Click the avatar to toggle a surprise version with ripple effects, bounce‑pop animation, and a click sound
  • Dynamic Background Images - Features distinct background images for light and dark themes, enhancing visual appeal.
  • Personal Stats - Display years of experience, projects completed, and other metrics
  • Social Links - Easy access to Twitter/X, LinkedIn, GitHub, Instagram, Pinterest, and Email
  • Live Spotify Activity - Real-time display of currently playing or last played song via Spotify API integration, with robust fallback values for album art, song name, and artist information.
  • Tech Stack Display - Interactive tech icons with tooltips showing expertise

💼 Experience Section

  • Career Timeline - Professional experience with role highlights
  • Interactive Cards - Hover effects and smooth transitions
  • Accomplishment Highlights - Key achievements with chevron animations

🚀 Projects Showcase

  • Featured Projects Grid - Display of 7 production-ready projects
  • Interactive Project Details - Project cards are clickable to open a full-screen modal with detailed information, animated transitions, and portal rendering.
  • Project Cards - Each card includes:
    • Project name and tagline
    • Description and tech stack
    • Status indicator
    • Live demo and GitHub links
  • Project Detail Modal - Displays an expanded view of a project with a larger image, tagline, detailed description, full tech stack, status, and a direct link to the live site.
  • Show More/Less - Initially displays 4 projects with expandable view

📊 GitHub Integration

  • GitHub Activity Calendar - Visual contribution graph using react-github-calendar
  • Contribution Counter - Real-time total contributions fetched via GitHub GraphQL API
  • Profile Link - Direct link to GitHub profile

🏆 Achievements Section

  • Showcase of certifications, awards, and notable accomplishments

🗣️ Social Proof / Testimonial Video

  • Featured On Video Player - Embeds a testimonial video with a custom thumbnail overlay.
  • Click-Outside-to-Pause - Automatically pauses the video if the user clicks outside the player area.
  • Auto-Reset on End - Video state resets to the thumbnail view once playback finishes.
  • Interactive Play Button - Overlay with a play icon that provides visual feedback on hover.

👨‍💻 About Me

  • Personal introduction with animated avatar
  • Skills showcase with technology icons

🦶 Footer

  • Website Visitor Counter - Displays the total number of unique visitors to the portfolio with an animated number display, fetched from a backend API.

✍️ Guestbook Page

  • Dedicated Guestbook – A standalone page (/guestbook) for visitors to leave messages, feedback, or greetings.
  • Integrated Comments – Utilizes the enhanced comments functionality for user interaction.
  • SEO Optimized – Dedicated metadata for improved search engine visibility.

💬 Comments Section

  • User Authentication – Google OAuth integration with token handling via URL parameters and localStorage.
  • Enhanced Login Redirect – Stores the current page path before Google OAuth, ensuring users are seamlessly returned to the exact page and comments section after successful authentication.
  • Auth Success Page – Captures accessToken from OAuth redirect, stores it in localStorage, and intelligently redirects users back to their original page and the comments section.
  • View & Post Comments – Displays a paginated list of comments with avatars, names, timestamps, and allows logged‑in users to submit new comments.
  • Responsive Design – Styled to match the site’s theme and works seamlessly on mobile devices.

🔍 SEO Optimized

  • Dynamic Sitemap - Auto-generated sitemap for better search engine indexing
  • Robots.txt - Configured for optimal crawling
  • Meta Tags - Comprehensive Open Graph and Twitter Card metadata
  • Structured Data - Proper heading hierarchy and semantic HTML

🛠️ Tech Stack

Core

Technology Version Purpose
Next.js 16.2.0 React Framework (App Router)
React 19.2.4 UI Library
TypeScript 5.x Type Safety

Styling

Technology Purpose
TailwindCSS v4 Utility-first CSS
tw-animate-css CSS Animations
class-variance-authority Component Variants
clsx Conditional Classes
tailwind-merge Class Merging

UI Components

Technology Purpose
Radix UI Headless UI Primitives
Lucide React Icon Library
Motion Animations

Data & API

Technology Purpose
Axios HTTP Client
react-github-calendar GitHub Contributions

Analytics & Performance

Technology Purpose
@vercel/analytics Website Analytics
@vercel/speed-insights Real User Monitoring (RUM) & Insights

Development Tools

Technology Purpose
ESLint Code Linting
Prettier Code Formatting
Husky Git Hooks
lint-staged Staged Files Linting

📁 Project Structure

next_portfolio/ ├── app/ # Next.js App Router │ ├── blogs/ # Blog section │ ├── guestbook/ # Guestbook page for visitor messages │ │ └── page.tsx # Guestbook page content │ ├── globals.css # Global styles & theme variables │ ├── layout.tsx # Root layout with providers │ ├── page.tsx # Home page with metadata │ ├── robots.ts # Robots.txt configuration │ └── sitemap.ts # Dynamic sitemap generation │ ├── components/ │ ├── AboutMe/ # About section │ ├── Achievments/ # Achievements section │ ├── CountUp.jsx # Animated number display component │ ├── Experience/ # Work experience section │ ├── Footer/ # Footer component │ │ ├── Footer.tsx # Main footer layout │ │ ├── FooterBlur.tsx # Background blur effect for footer │ │ └── VisitorCounter.tsx # Component to display website visitor count │ ├── GitHub/ # GitHub activity section │ │ ├── GitHub.tsx # Server component (fetches data) │ │ └── GitHubCalendarClient.tsx # Client component (renders calendar) │ ├── HeroSection/ # Hero section components │ │ ├── Hero.tsx # Main hero wrapper │ │ ├── ActiveStatus.tsx # Discord status │ │ ├── GetInTouch.tsx # CTA button │ │ ├── Intro.tsx # Introduction text │ │ ├── SocialLinks.tsx # Social media links │ │ ├── SongActivity.tsx # Spotify integration │ │ ├── Stats.tsx # Personal statistics │ │ └── TechStack.tsx # Technology icons │ ├── Navbar/ # Navigation with theme toggle │ ├── Projects/ # Projects section │ │ ├── Projects.tsx # Projects data & container │ │ ├── ProjectsGrid.tsx # Grid layout, handles project detail modal state and rendering via portal │ │ └── ProjectCard.tsx # Individual project card, now clickable to open detail modal │ ├── Comments/ # Comments section with authentication and posting │ │ └── Comments.tsx # Client component for displaying and submitting comments │ └── ui/ # Reusable UI components │ ├── hooks/ │ └── ThemeProvider.tsx # Theme context & hook │ ├── lib/ │ └── utils.ts # Utility functions (cn helper) │ ├── public/ # Static assets │ ├── Logo.webp # Site logo │ ├── HankenGrotesk-Variable.ttf # Custom font │ └── [project_images].webp # Project screenshots │ ├── types/ # TypeScript type definitions │ └── configuration files ├── next.config.ts # Next.js configuration ├── tsconfig.json # TypeScript configuration ├── tailwind.config.ts # TailwindCSS configuration ├── eslint.config.mjs # ESLint configuration └── .lintstagedrc.json # Lint-staged configuration

🚀 Getting Started

Prerequisites

  • Node.js 18.17 or later
  • npm, yarn, pnpm, or bun
  • Docker (if running with Docker)

Installation

  1. Clone the repository

    bash git clone https://github.com/kaihere14/next_portfolio.git cd next_portfolio

  2. Install dependencies

    bash npm install

    or

    yarn install

    or

    pnpm install

  3. Set up environment variables

    Create a .env.local file in the root directory:

    env

    GitHub API Token (for contribution graph)

    GITHUB_PATH=your_github_personal_access_token

    Site URL (for SEO)

    NEXT_PUBLIC_SITE_URL=https://your-domain.com

Running the Application

Using Node.js

  1. Run the development server

    bash npm run dev

  2. Open your browser

    Navigate to http://localhost:3000

Using Docker

  1. Build the Docker image

    bash docker build -t next_portfolio .

  2. Run the Docker container

    bash docker run -p 3000:3000 next_portfolio

  3. Open your browser

    Navigate to http://localhost:3000

📜 Available Scripts

Command Description
npm run dev Start development server
npm run build Build for production
npm run start Start production server
npm run lint Run ESLint
npm run format Format code with Prettier
npm run check Check code formatting
npm run check-types TypeScript type checking

🎨 Theme Configuration

The portfolio supports dark and light modes with:

  • System preference detection - Automatically matches OS theme
  • Manual toggle - Switch themes via navbar button
  • No flash - Theme is applied before hydration
  • Persistence - Theme choice saved in localStorage
  • Hero Backgrounds - Automatically switches between light_hero.png and dark_hero.png based on the active theme.
  • Smooth View Transitions - Enjoy a visually appealing transition effect when switching themes, originating from the click position.
  • Reduced Motion Preference - The theme transition respects the user's prefers-reduced-motion setting for accessibility.

Custom CSS Variables

Theme-aware variables are defined in globals.css:

css :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); /_ ... more variables _/ }

.dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); /_ ... more variables _/ }

/_ Variables used for view transitions _/ :root { --theme-click-x: 0px; --theme-click-y: 0px; }

🔧 Customization

Adding Projects

Edit components/Projects/Projects.tsx:

typescript const projects: ProjectType[] = [ { id: "your-project", name: "Project Name", tagline: "Short Tagline", description: "Full description of the project", image: "/project_image.webp", tech: ["React", "Node.js", "MongoDB"], status: "All Systems Operational", link: "https://live-demo.com", githubLink: "https://github.com/username/repo", }, // ... more projects ];

Updating Tech Stack

Edit components/HeroSection/TechStack.tsx:

typescript export const techStack = [ { name: "Technology Name", icon: "https://skillicons.dev/icons?i=tech", desc: "Category", }, // ... more technologies ];

Customizing Social Links

Edit components/HeroSection/SocialLinks.tsx to add or modify social media links.

🌐 Deployment

Vercel (Recommended)

The easiest way to deploy is using Vercel. This project is configured to automatically collect Vercel Analytics and Vercel Speed Insights when deployed to Vercel.

  1. Push your code to GitHub
  2. Import the repository in Vercel
  3. Add environment variables (if any)
  4. Deploy!

Deploy with Vercel

Other Platforms

This portfolio can be deployed on any platform that supports Next.js, including those that leverage Docker containers:

  • Netlify
  • Railway
  • AWS Amplify
  • Self-hosted (VPS with Node.js or Docker)
  • Docker-compatible platforms (e.g., Kubernetes, Docker Swarm, Google Cloud Run, AWS ECS/Fargate)

📄 Environment Variables

Variable Required Description
GITHUB_PATH Yes GitHub Personal Access Token for GraphQL API
NEXT_PUBLIC_SITE_URL No Site URL for SEO (defaults to https://armandev.space)

🤝 Contributing

Contributions are welcome! Feel free to:

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

📝 License

This project is open source and available under the MIT License.

📬 Contact

Arman Thakur - Full Stack Developer

Made with ❤️ by Arman Thakur

About

armandev.space

Resources

Readme
Activity

Stars

2 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages