# Czamwaka Portfolio (Next.js + Tailwind CSS) Single-page portfolio website for Mwaka Caesar, founder of KwonKalture Creatives. ## Setup from scratch 1. Create a Next.js app with Tailwind and App Router: ```bash npx create-next-app@latest cza --typescript --tailwind --app --eslint cd cza ``` 2. Install animation and icon dependencies: ```bash npm install framer-motion npm install lucide-react next-themes ``` 3. Start development server: ```bash npm run dev ``` Then open http://localhost:3000. ## Build for production ```bash npm run build npm run start ``` ## Tech stack - Next.js (App Router) - TypeScript - Tailwind CSS - Framer Motion - Lucide React icons - next-themes ## Project structure - `app/layout.tsx`: site metadata, theme wrapper, shared header/footer - `app/page.tsx`: hero, work, approach, quote, and contact sections - `app/contact/page.tsx`: optional standalone contact route - `components/Header.tsx`: logo text and anchor navigation links - `components/Footer.tsx`: copyright and social icon placeholders - `components/ThemeToggle.tsx`: dark/light theme toggle button - `components/Providers.tsx`: theme provider for class-based themes - `components/ProjectCard.tsx`: reusable project card component - `components/Reveal.tsx`: fade-in on scroll animation wrapper - `components/ContactForm.tsx`: frontend-only contact form UI state handling - `components/SelectedWork.tsx`: masonry gallery and lightbox interactions - `data/projects.ts`: project card content - `app/globals.css`: visual tokens, accents, and smooth scrolling ## Notes - Smooth scrolling is enabled globally. - Fade-in section animation is powered by Framer Motion. - The about section uses a responsive two-column layout that stacks on mobile. - The contact form is frontend-only by default and ready to connect to an API later. ## Netlify deployment This repo includes `netlify.toml` and uses the Next.js Netlify runtime plugin. ### Recommended Netlify build settings - Build command: `npm run build` - Publish directory: leave empty (managed by the Next.js plugin) ### If deployment shows "Page not found" 1. Confirm `netlify.toml` exists at the repo root. 2. Confirm `@netlify/plugin-nextjs` is installed. 3. In Netlify, run **Clear cache and deploy site**. 4. Remove old redirect rules that force a static 404. ### Local verification ```bash npm run build ``` If local build passes, Netlify issues are usually cache or dashboard configuration. # czamwaka.com