This repository contains the development source of my personal portfolio and reflects the structure and workflow I use as a UX/UI & Product Designer with front-end experience to design and build interface-driven products.
Focused on clarity and consistency, prioritizing practical product constraints over heavy abstractions or theoretical scalability.
Live portfolio: https://hasenkday.github.io/
Components playground: https://hasenkday.github.io/#/playground
Stack:
Vite ·
React ·
TypeScript ·
Tailwind CSS v4 ·
CSS Modules ·
@theme tokens ·
shadcn/ui ·
Plop
src/
├── app/
│ ├── router.tsx # application routing configuration
│ └── providers.tsx # optional global providers (theme, query, auth, etc.)
│
├── pages/
│ ├── home/ # home page
│ │ ├── home.page.tsx
│ │ └── sections/ # every section used at home
│ ├── cases/ # cases dynamic page
│ ├── playground/ # components playground page to preview UI styling
│ └── not-found/ # not-found page
│
├── layouts/
│ ├── main-layout.tsx # shared layout structure (header, footer, outlet)
│ └── other layouts...
│
├── components/
│ ├── atoms/ # small, reusable UI pieces (Button, Badge, Text)
│ ├── molecules/ # composed components (Card, InputField, Modal)
│ ├── organisms/ # larger UI sections (Header, Footer, ProjectList)
│ └── ui/ # raw shadcn/ui components (Dialog, Dropdown, Tooltip)
│
├── api/ # API access layer (REST, mocks, api implementation)
├── hooks/ # reusable React hooks (data fetching, logic)
│
├── themes/ # design tokens and theme definitions
├── lib/ # shared utilities (cn, helpers)
└── App.tsx # application entry point (router orchestration)