An animated and responsive portfolio for web apps - built with Next.js, TypeScript, React.js, Tailwind CSS, Framer Motion and Resend. Features: portfolio showcase, blog system, contact form with real email delivery via Resend, profile page and dark/light mode.
Check out the live demo of the project here:
→ https://pixelstack-me.vercel.app/
Homepage with animated hero section
Portfolio page showcasing projects and tech stack
Contact form with API integration
Profile & skills section with animated progress bars
Dark mode theme using custom ThemeContext
- Fully responsive layout / Mobile-friendly navigation
- Smooth Framer Motion animations
- Light/Dark mode with custom ThemeContext
- Hero section with animated intro
- Portfolio with project previews, tech stack, and live links
- Blog system with dynamic routes (
/posts/[handle]) - Search bar filters portfolio items and blog posts by title, keyword in the description or technology
- Contact form with real email delivery via Resend (
/api/connect) -> includes client & server-side validation, XXS sanitization, rate limiting and auto-reply to sender - Newsletter subscription with admin email notification via Resend
- Mobile navigation with hamburger menu
- Footer with social links and branding
- Imprint with privat policy and legal informations
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5 |
| UI | React 19, Tailwind CSS 4, Framer Motion |
| Icons | Heroicons, React Icons |
| Resend SDK | |
| Testing | Jest, Playwright |
| Deployment | Vercel + IONOS (custom domain) |
📁 pixelstack
│
├── 📂 src
│ ├── 📂 app
│ │ ├── 📂 api
│ │ │ ├── 📂 newsletter # Newsletter subscription endpoint
│ │ │ └── 📂 connect # Contact form API endpoint with email
│ │ ├── 📂 components # Reusable UI components
│ │ │ ├── 📂 Connect # Contact form (hook + component)
│ │ │ ├── 📂 Footer # Footer with social links
│ │ │ ├── 📂 Header # Header + theme toggle
│ │ │ ├── 📂 Home # Homepage sections
│ │ │ ├── 📂 MessageUI # Error/success messages
│ │ │ └── 📂 Profile # About me components
│ │ ├── 📂 portfolio # Portfolio overview
│ │ ├── 📂 posts # Blog system
│ │ ├── 📂 profile # Profile page
│ │ ├── 📂 context # ThemeContext provider
│ │ ├── 📄 layout.tsx
│ │ ├── 📄 globals.css
│ │ └── 📄 page.tsx # Homepage
│ │
│ ├── 📂 data # Static content
│ │ ├── 📂 content # Blog post details
│ │ ├── 📄 posts.ts # Blog metadata
│ │ └── 📄 portfolio.ts # Portfolio data
│ │
│ └── 📂 types # TypeScript definitions
│
├── 📂 tests # Unit & API tests
│ ├── 📄 useConnectForm.test.ts
│ └── 📄 api-connect.test.ts
│
├── 📂 e2e # Playwright E2E tests
│ └── 📄 contact-form.e2e.spec.ts
│
├── 📂 public # Static assets
│
├── 📄 jest.config.ts
├── 📄 playwright.config.ts
├── 📄 package.json
└── 📄 README.md
The contact form at /connect sends a POST request to /api/connect.
The API route handles:
- Input validation and XSS sanitization
- Rate limiting (1 request per IP per minute)
- Sending the contact message to the inbox and
- Sending an automatic confirmation email back to the sender
Both emails are delivered via Resend. If the auto-reply fails, the request still returns success — the notification to the inbox was already sent.
The newsletter form on the homepage sends a POST request to /api/newsletter.
The API route handles:
- Email format validation and XSS sanitization
- Rate limiting (1 request per IP per minute)
- Sending an admin notification to the inbox with the subscriber's email and signup date
Delivered via Resend.
Dark mode is handled through a custom ThemeContext:
- Saves preference in
localStorage - Detects system theme on first visit
- Avoids FOUC with a mounted-state check
- Instant theme switching without page reload
The project includes three layers of tests — unit, API, and E2E browser tests via Playwright:
- Unit Tests: React Hook logic (form state, change handlers, submission)
- API Tests: Route validation, error handling & rate limiting (5 scenarios)
- E2E Tests: Browser flow with Playwright (form fill, submission, validation)
Run tests locally:
npm run test # Unit & API tests (watch mode)
npm run test:run # Unit & API tests (single run)
npm run test:e2e # Playwright E2E tests
| Suite | Tests | Status |
|---|---|---|
| Unit (hook logic) | 4 | ✅ passing |
| API (backend validation) | 5 | ✅ passing |
| E2E (browser flow) | 3 | ✅ passing |
| Total | 12 | ✅ all passing |
This project is private and serves as a personal portfolio.