My space on the web showcasing modern web development with stunning dark aesthetics
- 🎯 Overview
- ✨ Features
- 🛠️ Tech Stack
- 🎨 Design System
- 🚀 Quick Start
- ⚙️ Customization
- 📸 Screenshots
- 🔗 Connect
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
| 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 |
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 15.4.4 |
React framework with SSR |
| React | 19.1.0 |
UI library |
| TypeScript | ^5.0 |
Type-safe JavaScript |
| 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 |
| Technology | Version | Purpose |
|---|---|---|
| React Email | ^0.3.2 |
Email templates |
| Nodemailer | ^7.0.5 |
Email sending |
| Sonner | ^2.0.6 |
Toast notifications |
| Technology | Version | Purpose |
|---|---|---|
| ESLint | ^9.0 |
Code linting |
| Autoprefixer | ^10.4.21 |
CSS vendor prefixes |
| Critters | ^0.0.23 |
Critical CSS inlining |
| 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 |
| 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 |
| 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 |
- Node.js 18+
- npm/yarn/pnpm
-
Clone the repository
git clone https://github.com/aarabii/An.git cd An -
Install dependencies
npm install
-
Environment setup
cp .env.example .env.local
-
Start development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
| 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 |
// src/constant/self.ts
export const selfData = {
name: "Your Name",
jobTitle: "Your Title",
email: "[email protected]",
// ... update all personal details
};| File | Purpose |
|---|---|
src/constant/projects.ts |
Your project portfolio |
src/constant/experience.ts |
Work experience data |
src/constant/skillsData.tsx |
Technical skills |
| 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 |
- 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/
🌟 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
| Platform | Username | Link |
|---|---|---|
| 🐙 GitHub | @aarabii | https://github.com/aarabii |
| Aarab Nishchal | Professional Network | |
| @aarab.ii | Creative Updates | |
| @aarab_ii | Tech Thoughts | |
| [email protected] | Direct Contact |