🌟 Aarab Nishchal's Portfolio

✨ Student Developer | Chief Problem Solver | Solution Sorcerer

My space on the web showcasing modern web development with stunning dark aesthetics

---

📋 Table of Contents

• 🎯 Overview
• ✨ Features
• 🛠️ Tech Stack
• 🎨 Design System
• 🚀 Quick Start
• ⚙️ Customization
• 📸 Screenshots
• 🔗 Connect

---

🎯 Overview

A modern, responsive portfolio website built with Next.js 15 and React 19, featuring stunning dark aesthetics and smooth animations. This project showcases advanced web development practices with a focus on performance, accessibility, and user experience.

🌐 Live Demo: aarab.vercel.app 📱 GitHub: github.com/aarabii/An

✨ Features

Feature	Description
🎨 Dark Luxury Theme	Ultra-dark design with purple accents and glass effects
⚡ Performance Optimized	Next.js 15 with Turbopack for lightning-fast builds
📱 Fully Responsive	Seamless experience across all device sizes
🎭 Smooth Animations	Motion-powered interactions and transitions
📧 Contact System	Integrated email functionality with React Email
🔍 SEO Optimized	Complete meta tags, sitemap, robots.txt
🛡️ Security Headers	Enhanced security with proper headers configuration
📄 PDF Resume	Integrated resume viewer with error boundaries
🎯 Interactive UI	Modern glassmorphism and hover effects

🛠️ Tech Stack

Frontend Framework

Technology	Version	Purpose
Next.js	15.4.4	React framework with SSR
React	19.1.0	UI library
TypeScript	^5.0	Type-safe JavaScript

Styling & UI

Technology	Version	Purpose
Tailwind CSS	^3.4.17	Utility-first CSS
Motion	^12.23.9	Animation library
Radix UI	^1.2.3	Headless UI components
Class Variance Authority	^0.7.1	Component variants

Email & Communication

Technology	Version	Purpose
React Email	^0.3.2	Email templates
Nodemailer	^7.0.5	Email sending
Sonner	^2.0.6	Toast notifications

Development Tools

Technology	Version	Purpose
ESLint	^9.0	Code linting
Autoprefixer	^10.4.21	CSS vendor prefixes
Critters	^0.0.23	Critical CSS inlining

🎨 Design System

Color Palette

Color Category	HSL Value	Usage	Preview
Background	240 15% 2%	Main background
Foreground	220 8% 94%	Primary text
Primary	220 15% 88%	Interactive elements
Secondary	275 60% 45%	Accent elements
Accent	275 70% 55%	Highlights
Muted	240 18% 6%	Subtle backgrounds
Card	245 20% 3%	Component surfaces

Typography

Font Family	Usage	Weight	Characteristics
Inter	Body text, paragraphs	300-700	Clean, readable, versatile
Cutive Mono	Code, technical text	400	Monospaced, technical feel
Nasalization	Main headings	400	Futuristic, bold display
Quentine	Name, special text	400	Elegant, signature style

Visual Effects

Effect	CSS Properties	Description
Glass Morphism	backdrop-filter: blur(16px)	Frosted glass appearance
Luxury Shadows	box-shadow: multiple layers	Deep, rich shadow system
Neon Glow	box-shadow: 0 0 20px purple	Purple accent glows
Shimmer	linear-gradient animation	Subtle shine effects

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm/yarn/pnpm

Installation

1. Clone the repository

   git clone https://github.com/aarabii/An.git
   cd An

2. Install dependencies

   npm install

3. Environment setup

   cp .env.example .env.local

4. Start development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

Build Commands

Command	Description
npm run dev	Start development server with Turbopack
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint checks

⚙️ Customization

Personal Information

// src/constant/self.ts
export const selfData = {
  name: "Your Name",
  jobTitle: "Your Title",
  email: "your.email@domain.com",
  // ... update all personal details
};

Projects & Experience

File	Purpose
src/constant/projects.ts	Your project portfolio
src/constant/experience.ts	Work experience data
src/constant/skillsData.tsx	Technical skills

Assets

Asset Type	Location	Description
Logo	public/images/logo.svg	Main logo
Profile Picture	src/assets/images/me.png	About section image
Resume	public/docs/	PDF resume file
Fonts	src/assets/fonts/	Custom font files

Styling

• Colors: Modify CSS custom properties in src/app/globals.css
• Fonts: Update font configurations in src/app/fonts.ts
• Components: Customize UI components in src/components/ui/

📸 Screenshots

🌟 Dark Luxury Theme - Experience the stunning dark aesthetics with purple accents

🚀 Lightning Fast - Next.js 15 with Turbopack for optimal performance

📱 Fully Responsive - Perfect on every device and screen size

🔗 Connect

Platform	Username	Link
🐙 GitHub	@aarabii	https://github.com/aarabii
💼 LinkedIn	Aarab Nishchal	Professional Network
📸 Instagram	@aarab.ii	Creative Updates
🐦 Twitter	@aarab_ii	Tech Thoughts
📧 Email	aarab.nishchal@gmail.com	Direct Contact

---

Built with ❤️ by Aarab Nishchal

Student Developer | Chief Problem Solver | Solution Sorcerer