Personal portfolio built with React + Vite. Features cinematic scroll-jacking, sticker pop animations, parallax layers, mouse tilt effects, and full responsive support across all breakpoints.
- React 19 + Vite 8
- CSS Modules + CSS custom properties (design tokens)
- Framer Motion + GSAP ScrollTrigger (scroll-jacking)
- Lenis (smooth scroll)
- JetBrains Mono (typography)
- Node.js >= 18
- npm >= 9
# Clone the repository
git clone git@github.com:rizkymashudi/erem-dev.git
cd erem-dev
# Install dependencies
cd portfolio-react
npm install
# Start development server
npm run devThe dev server runs at http://localhost:5173 by default.
| Command | Description |
|---|---|
npm run dev |
Start Vite dev server with HMR |
npm run build |
Build for production to dist/ |
npm run preview |
Preview production build locally |
npm run lint |
Run ESLint |
portfolio-react/
├── public/
│ ├── assets/stickers/ # Sticker images (WebP)
│ ├── favicon.webp # Apple touch icon
│ ├── favicon-32.webp # Browser favicon
│ ├── og-image.png # Open Graph image
│ ├── robots.txt
│ └── sitemap.xml
├── src/
│ ├── components/
│ │ ├── Nav/ # Dynamic Island navigation
│ │ ├── Hero/ # Parallax hero with typing animation
│ │ ├── Marquee/ # Infinite scroll marquee
│ │ ├── WorkSection/ # Horizontal project carousel
│ │ ├── SkillsSection/ # Stacking skill cards
│ │ ├── ExperienceSection/ # Timeline with chapter crossfade
│ │ ├── AboutSection/ # Bio reveal with link cards
│ │ ├── Footer/ # Contact section
│ │ └── Sticker/ # Reusable sticker component
│ ├── hooks/ # Custom hooks (scroll, tilt, typing, theme)
│ ├── data/ # Content data files
│ ├── styles/ # Design tokens, global styles, keyframes
│ ├── App.jsx
│ └── main.jsx
├── index.html
└── vite.config.js
Deployed on Vercel. To deploy manually:
cd portfolio-react
npm run build
npx vercelAll rights reserved.