A modern, interactive portfolio website built with Next.js 16, featuring stunning liquid glass effects, smooth scroll-triggered animations, and a warm cream-to-salmon color palette.
- 🔮 Liquid Glass Effects - Glassmorphism cards with backdrop blur and subtle animations
- 🌊 Wavy Background - Dynamic animated wavy patterns using simplex noise
- 📜 Scroll Animations - Bidirectional scroll-triggered animations with Framer Motion
- 🎭 Linear Modal - Smooth shared element transitions for project details
- 🎨 Custom UI Components - Marquee, randomized text effects, and more
- 🌙 Theme Support - Light/dark mode with next-themes
- 📱 Fully Responsive - Optimized for all device sizes
| Category | Technologies |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| Animations | Framer Motion |
| UI Utilities | clsx, tailwind-merge, class-variance-authority |
| Icons | Lucide React |
src/
├── app/ # Next.js App Router
├── components/
│ ├── icons/ # Custom icon components
│ ├── layout/ # Layout components (Navbar, Footer)
│ ├── providers/ # Context providers (Theme)
│ ├── sections/ # Page sections
│ │ ├── HeroSection.tsx
│ │ ├── ExperienceSection.tsx
│ │ ├── TechnologiesSection.tsx
│ │ ├── ProjectsSection.tsx
│ │ └── EducationSection.tsx
│ └── ui/ # Reusable UI components
│ ├── LiquidGlassCard.tsx
│ ├── LinearModal.tsx
│ ├── WavyBackground.tsx
│ ├── Marquee.tsx
│ ├── RandomizedTextEffect.tsx
│ └── ThemeToggle.tsx
└── lib/ # Utility functions
- Node.js 18+
- npm, yarn, or pnpm
-
Clone the repository
git clone https://github.com/MesshM/Portfolio.git cd Portfolio -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open in 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 |
The portfolio uses a warm, modern color scheme:
| Color | Hex | Usage |
|---|---|---|
| Cream | #fffcf2 |
Background, light elements |
| Salmon | #f4a261 |
Accents, highlights |
| Coffee | #5c4033 |
Text, dark elements |
A glassmorphism card component with backdrop blur, subtle borders, and hover effects.
Animated wavy patterns created with simplex noise, adding visual depth to sections.
A modal component with shared element transitions for smooth project detail views.
An infinite scrolling component for displaying technologies and skills.
This project is open source and available under the MIT License.
- Live Demo: [Coming Soon]
- GitHub: https://github.com/MesshM/Portfolio
- LinkedIn: https://linkedin.com/in/messhm
Built by Manuel