2025 · Personal Project · 3 months
iamk.xyz Portfolio
Full-stack Next.js + Tailwind site (self-designed and deployed). Serves as my main showcase and blog platform where I publish in-depth technical articles. Anyone can use this template to create their portfolio as well.
Role: Designer & Developer
Purpose & goal
Own one codebase for marketing, case studies, and long-form writing without a heavy CMS — fast deploys, clear SEO, easy edits in Git.
Status
Production — this deployment; content and components evolve in-repo.
Challenge
Needed a modern, performant portfolio site that could serve as both showcase and blog platform.
Spotlight
MDX + Next as the content system
Problem: Blog and static pages need shared layout, metadata, and components without duplicating headers or breaking builds when content changes.
What I did: MDX with shared layouts, typed front matter patterns, and `next/image` for predictable performance on article and project pages.
Freelance positioning in the same shell
Problem: Job-hunt portfolios read differently from client sites — CTAs, scope, and proof must coexist without confusing visitors.
What I did: Structured home sections (proof → process → FAQ) and dedicated `/projects` + case study routes so depth lives on real URLs.
Approach
- Designed clean, professional interface
- Implemented Next.js for optimal performance
- Added MDX support for technical blog posts
- Created reusable template for others
Solution
Built a full-stack portfolio site with blog functionality, optimized for performance and SEO.
Impact
- Serves as main professional showcase
- Platform for technical writing and education
- Template available for community use
- Excellent performance and SEO scores
Personal portfolio & blog
Lessons learned
- Case study URLs beat modals: shareable links are how hiring managers and clients forward work.
- Ship content and UI together — empty blog promises hurt trust more than a smaller feature set.
Accessibility
Landmarks, skip-friendly headings, focus styles on interactive elements, and sane motion defaults (respect reduced motion where used).
Tech stack
- Next.js
- Tailwind CSS
- TypeScript
- MDX