A personal portfolio showcasing my work as a frontend developer — built with React 19, Vite, Tailwind CSS v4, and React Router 7.
🔗 Live Portfolio | 💻 GitHub Repo
A single-page portfolio site that introduces who I am, the technologies I work with, and the projects I've shipped. It features animated hero, theme toggle, certificate gallery, contact form (EmailJS), and a responsive project grid with live demo + source links.
Built with React 19, Vite 7, Tailwind CSS v4, and React Router 7. UI primitives via Radix Toast and Lucide icons; styling via tailwind-merge + class-variance-authority.
👉 https://bohdancheban-portfolio.vercel.app
Comfortable with: HTML/CSS · JavaScript · TypeScript · React · Redux / RTK · TailwindCSS · SASS/SCSS · Bootstrap · Node.js · PostgreSQL · Postman · Git/GitHub · Vite · Vercel · Figma · VS Code
Familiar with: Next.js · Vue · Nuxt · Zustand · React Native · Expo · ShadCN · Appwrite · Drizzle · NeonDB
| # | Project | Stack | Live | Code |
|---|---|---|---|---|
| 1 | SaaS Landing Page — animated, dark-mode-first landing for a SaaS product | React, TailwindCSS, TypeScript, Zustand | Demo | GitHub |
| 2 | NoteForge — full-stack notes platform with auth and search | Next.js, TypeScript, Drizzle, NeonDB, ShadCN | Demo | GitHub |
| 3 | Nuxt Recipe App — elegant recipe browser built on Nuxt 4 | Nuxt, Vue, TypeScript, TailwindCSS | Demo | GitHub |
| 4 | HabitTracker Mobile — daily-habit tracker for Android with streaks and reminders | React Native, Expo, TypeScript, Appwrite | APK (Telegram) | GitHub |
| 5 | 2048 JS Game — classic 2048 with smooth tile animations and touch controls | JS, HTML, SCSS | Demo | GitHub |
| 6 | MyBike Landing Page — landing for an electric-bike brand with product compare | HTML, SCSS | Demo | GitHub |
| 7 | Weather Dashboard — city search, current conditions, and interactive charts | React, Tailwind, Chart.js, React-toastify | Demo | GitHub |
| 8 | Phone Catalog (Nice Gadgets) — multilingual, theme-switchable e-commerce SPA | React, Redux Toolkit, React Router, Bulma, i18next, Swiper | Demo | GitHub |
- Node.js
v20.xor higher - npm
v10.xor higher - Git
-
Clone the repository:
git clone https://github.com/bcheban/portfolio.git cd portfolio -
Install dependencies:
npm install
-
Start the dev server:
npm run dev
The app will open at http://localhost:5173.
| Script | Description |
|---|---|
npm run dev |
Start the local Vite dev server |
npm run build |
Create a production build in /dist |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint across the project |
The scripts/ folder includes a helper to capture Lighthouse score-card PNGs for each project's live URL and write them straight into each project repo:
npm install --save-dev puppeteer lighthouse chrome-launcher
node scripts/lighthouse-screenshots.mjs # all targets
node scripts/lighthouse-screenshots.mjs --only next-noteforgeEdit scripts/lighthouse-targets.json so outPath for each entry points at the local clone of the matching project repo (default assumes sibling folders).
- 🎨 Hero Section – Animated intro with parallax star background and call-to-action.
- 👤 About Section – Bio, role highlights, and key strengths.
- 🧠 Skills + Familiar Technologies – Two filterable grids (frontend / backend / tools) showing comfort-level vs familiarity.
- 📁 Projects Grid – Responsive card grid with tag chips, hover zoom, and live + source links.
- 🎓 Certificates Gallery – Showcase of completed courses and credentials.
- ✉️ Contact Form – EmailJS-powered form with Radix toast feedback.
- 🌗 Light / Dark Theme – Persistent theme toggle with smooth transitions.
- 📱 Fully Responsive – Mobile-first design, optimized from 320px up.
- 🚫 Custom 404 – Dedicated NotFound page.
- Project Name with a clear, descriptive title
- Project Overview with a short description of what the app does
- Live Preview link to the deployed version
- Technologies Used with all major tools and libraries listed
- Getting Started with prerequisites, installation, and run instructions
- Available Scripts documented for local development
- Features described in a readable, scannable list
- Responsive design verified on mobile, tablet, and desktop
- Deployed to Vercel and link verified to work
Made with ❤️ by @bcheban