Frontend Developer & Designer · February 2024 (3 weeks)
Portfolio Website
A personal portfolio website built with React and styled with a hand-drawn aesthetic
Overview
What Portfolio Website does.
A personal portfolio website built with React and styled with a hand-drawn aesthetic.
- Role
- Frontend Developer & Designer
- Team
- Solo Project
- Duration
- February 2024 (3 weeks)
- Responsive
- Yes
The challenge
Needed a professional yet creative platform to showcase my work and skills in a way that reflects my personality and design aesthetic.
Project goals
- Create a distinctive portfolio that stands out
- Showcase projects in an engaging way
- Express personal design aesthetic
- Demonstrate technical capabilities
Process
How Portfolio Website came together.
Design Concept
Explored various design directions and settled on a hand-drawn aesthetic that matches my personal style.
Wireframing
Created low-fidelity wireframes to plan content organization and user flow.
Visual Design
Developed the visual language including typography, color scheme, and illustration style.
Development
Built the site using React, TypeScript and Framer Motion for smooth animations.
Key features
- Interactive project cards with hover animations
- Hand-drawn illustrations and UI elements
- Smooth page transitions
- Dark/light mode toggle
- Responsive design for all devices
Impact
- Received positive feedback from 5 potential clients
- Shared on web design showcase platforms
- Led to 3 freelance opportunities
Lessons learned
- Balancing creative design with performance
- Creating smooth animations with Framer Motion
- Building an effective personal brand
Tools & technologies
What it was built with.
- React
- TypeScript
- Tailwind CSS
- Framer Motion
- Vite
More work
Related case studies.
04Full Stack DeveloperDocument builder · 2025
BuildErDocs
Drag-and-drop form builder that generates Markdown, PDF, Word, HTML, and JSON documents
- React
- Vite
- TypeScript
- Tailwind CSS
01Full Stack DeveloperColor design tool · 2024
Tonalist Studio
A next-generation color design tool for the modern web
- Next.js
- Tailwind CSS
- Shadcn UI
- Framer Motion