Izamhn.com

A full-stack personal portfolio and branding website built from scratch with Next.js App Router, designed for two sides at once: public visitors browsing the work, and the admin (myself) managing everything through a custom dashboard.

On the public side, there's a Home page with a hero section showing real-time Instagram stats (followers, posts, following count) pulled straight from the API, a Portfolio page filterable by category (Graphic Design / Web Development), a Blog page with automatic reading time & view counters, a Product page (free & paid items), an About page with education and work experience timelines, and a Contact page integrated directly with WhatsApp.

On the admin side, there's a fully private dashboard with complete CRUD functionality for Portfolio, Blog, and Products — each with modal-based forms, a custom rich text editor, Cloudinary image uploads, and a Summary page displaying content performance stats (total views, likes, category breakdowns, unviewed content, etc.).

Features:

• Private, login-protected admin dashboard
• Full CRUD for Portfolio, Blog, and Products via modal forms
• Custom rich text editor for writing articles and project descriptions
• Integrated image upload & management via Cloudinary
• Analytics dashboard: total views/likes, top 5 most-viewed content, category breakdowns
• Instagram API integration for real-time follower stats on the hero section
• WhatsApp integration for direct contact & collaboration inquiries
• Multi-language support (Indonesian/English) with instant toggle
• Dark mode / light mode
• Fully responsive with custom animations (staggered entrance animations, drag-to-close mobile bottom sheet)
• Performance-optimized (lazy loading, priority image loading for LCP, etc.)

Key Technical Implementation:

• React Context API — separate state management per admin module (Portfolio, Blog, Product), each with its own custom hook (usePortfolioAdmin, useBlogAdmin, etc.) to share form state, loading, error, and CRUD actions without prop drilling
• Intersection Observer API — used on blog/portfolio detail pages to detect when the main title scrolls out of viewport, automatically revealing a compact title in the sticky sidebar
• Pointer Events API — custom drag-to-close gesture for the mobile bottom sheet navigation, with distance threshold and spring-like animation via cubic-bezier
• Custom CSS Keyframe Animations — staggered entrance animation on the hero section (badge → headline → buttons → photo appear sequentially with individual delays), injected via inline <style> tag, automatically disabled at desktop breakpoints
• Next.js Image Optimization — priority loading for LCP elements, manually calculated sizes prop matching actual container width at each breakpoint
• dangerouslySetInnerHTML with CSS specificity override — renders rich text editor content with !important font enforcement ([&_*]:!font-onest) to guarantee typography consistency across devices
• Controlled Components & Optimized Filtering — admin forms use controlled inputs with client-side validation before hitting the API, plus useMemo for category-based portfolio filtering without unnecessary re-renders
• Custom REST API (Next.js Route Handlers) — CRUD endpoints (GET/POST/PUT/DELETE) for portfolio, blog, and products, backed by Redis as the database
• Client/Server Component Architecture — clear separation between Server Components (data fetching, SEO) and Client Components ("use client" for interactivity — forms, modals, animations, drag gestures)

Tech Stack:
Next.js (App Router), React, Tailwind CSS, Redis, Cloudinary, Instagram Graph API, WhatsApp Business API

PageSpeed Insights

Report URL: https://pagespeed.web.dev/analysis/https-www-izamhn-my-id/8h6vr8h17x?hl=id&form_factor=desktop

GTmetrix

Report URL: https://gtmetrix.com/reports/www.izamhn.my.id/yxf9QFy0/