This is a personal portfolio site, built using React, TypeScript, SCSS, and Vite, and designed in Figma. It’s not just a collection of work — it’s a case study in itself. Every decision, from layout to logic, was part of an intentional process to explore how thoughtful UI is planned, designed, and built.
- React - for building dynamic and reusable UI components
- Typescript - for type safety and code scalability
- SCSS - for scalable and maintainable styling architecture
- Vite - for lighting-fast builds
- Pen & paper - for early ideation
- Figma - for UI system design, prototyping and visual planning
Case Study – A deep dive into building and owning a portfolio project from start to finish. It documents the process, design and code decisions, and the lessons learned along the way. It also acts as a screen gate, allowing visitors to choose between two portfolio modes:
A rich, interactive experience
- Playground: A live board of editable cards showcasing interactive UI elements, micro-interactions, and UI states
- Experience: Highlights from my work building UI systems
- Log: A simplified timeline format for capturing achievements and thoughts.
- About: An introduction to my background and journey
- Contact: Use social links to contact me
A content-focused version for quick scanning
- About
- Skills
- Experience
- Log.
This site was designed directly from Figma, with layout systems, design tokens, and UX thinking guiding the structure. It reflects a full-stack UI engineering approach — balancing visual precision with code maintainability. This project was a space to explore component creation, layout building, and system thinking — all through a design-first lens.
Install dependencies and start the development server
yarn yarn dev