React Framer Motion TailwindCSS MantineApr 2025

ZK Portfolio

Developer portfolio with Framer Motion animations, Mantine UI, scroll effects, type animation, and Netlify forms.

Overview

ZK Portfolio is a personal developer portfolio built with React/Vite and Tailwind CSS. It features smooth scroll-triggered animations via Framer Motion and react-animate-on-scroll, a type animation hero section, project showcase with detail views, experience timeline, skills grid, and a contact form powered by Netlify Forms. The UI combines Mantine components with Radix UI primitives, Lucide and Tabler icons, and a sticky header via react-headroom. The design includes dark/light theming and responsive layouts across landing, projects, about, experience, and contact sections.

Challenge

Needed a portfolio that stands out from template-based developer sites and demonstrates advanced frontend capabilities.

Results

Featured on design inspiration sites, 95+ Lighthouse score, and 3x increase in client inquiries.

95+

Lighthouse score

Inquiry increase

<1.2s

Load time

AAA

Accessibility

Key Highlights

Framer Motion & scroll-triggered entrance animations

Type animation hero with react-type-animation

Netlify Forms contact integration with validation

Mantine + Radix UI components with Tailwind styling

Architecture

React/Vite SPA with Tailwind CSS v4 and class-variance-authority

Framer Motion for page transitions and react-animate-on-scroll for scroll effects

Mantine v6 + Radix UI primitives with Tabler and Lucide icon sets

Netlify Forms for serverless contact submissions with react-netlify-forms

Timeline

Design & Layout

2 weeks

Component architecture, landing/projects pages, Mantine + Tailwind setup

Animation & Interaction

3 weeks

Framer Motion transitions, scroll animations, type animation hero, sticky header

Content & Forms

2 weeks

Projects showcase, experience timeline, skills grid, Netlify Forms contact

Polish & Deploy

1 week

Dark/light theming, responsive design, Vite build optimization