A modern, elegant link tree website built with Next.js and Tailwind CSS, featuring a custom brand color palette and responsive design.
- 🎨 Custom brand color palette with elegant purple tones
- 📱 Fully responsive design (mobile-first approach)
- ⚡ Optimized for performance and Core Web Vitals
- ♿ Accessible design with proper contrast ratios
- 🎭 Smooth animations and hover effects
- 🔗 Social media links with recognizable icons
- 💼 Featured projects section with tech stack badges
- 🌙 Dark mode support
The website uses a carefully crafted color palette:
- Background:
#faf9fb(Brand 50) - Foreground:
#2c1028(Brand 900) - Primary:
#6e2765(Brand 600) - Secondary:
#a87da3(Brand 400) - Accent:
#7e3775(Brand 500) - Muted:
#e2d4e0(Brand 200)
- Clone or download the project files
- Install dependencies: ```bash npm install ```
- Run the development server: ```bash npm run dev ```
- Open http://localhost:3000 in your browser
Edit the following components to add your information:
components/profile-header.tsx- Name, bio, and profile photocomponents/projects-section.tsx- Your projects and tech stackcomponents/social-links-section.tsx- Your social media links
- Colors are defined in
app/globals.cssusing CSS custom properties - Components use Tailwind CSS classes with the custom color palette
- Animations and transitions are defined in the global CSS
- Semantic HTML elements for better SEO
- Optimized images with proper alt text
- Minimal JavaScript bundle
- CSS-only animations for smooth performance
- Proper meta tags for social sharing
- WCAG AA compliant contrast ratios
- Proper heading hierarchy
- Screen reader friendly
- Keyboard navigation support
- Focus indicators for interactive elements
- Framework: Next.js 14+ (App Router)
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui
- Icons: Lucide React
- Fonts: Geist Sans & Geist Mono
- TypeScript: Full type safety