A masterclass in modern web architecture. Built with React 19, Vite 7, and Feature-Sliced Design (FSD).
Report Bug
·
Request Feature
This project represents a shift from "building components" to "architecting systems." It serves as a living proof-of-concept for high-performance web engineering, utilizing the latest bleeding-edge technologies to deliver an application that is performant, scalable, and resilient.
Unlike traditional portfolios, this application adopts Feature-Sliced Design (FSD) to decouple business logic from UI, ensuring that the codebase remains maintainable as it scales. It fully embraces the React 19 ecosystem and leverages Vite 7 for lightning-fast development and production builds.
- 🏗️ Feature-Sliced Architecture (FSD): Organized into strict layers to enforce unidirectional data flow and prevent spaghetti dependencies:
app: Global settings, styles, and providers.pages: Compositional layer for constructing full pages.widgets: Self-contained UI blocks (e.g., Header, Footer).features: User interactions (e.g., ThemeToggle, ContactForm).entities: Business domain models (e.g., Project, Profile).shared: Reusable infrastructure code (UI kit, libs).
- ⚡ Bleeding Edge Performance: Powered by Vite 7 using the Rust-based Rolldown bundler principles (future-ready) and React 19 for concurrent rendering features.
- 🎨 Modern Styling & Motion:
- Tailwind CSS 4: Zero-runtime, utility-first styling with the new engine.
- Framer Motion: Declarative, production-ready animations and micro-interactions.
- Lucide Icons: Clean, consistent, and lightweight iconography.
- ♿ Headless Accessibility: Built on Radix UI primitives and React Helmet Async to ensure semantic structure, keyboard navigation, and SEO optimization.
- 🌗 Smart Theming: A persistent, system-aware dark mode implementation avoiding FOUC (Flash of Unstyled Content).
Follow these steps to set up the project locally.
- Node.js (v20 or higher recommended)
- npm or yarn
-
Clone the repository:
git clone https://github.com/BonyKoshy/Portfolio.git cd Portfolio -
Install dependencies:
npm install
-
Start the development server:
npm run dev
The application will be available at
http://localhost:5173.
npm run dev: Starts the development server.npm run build: Builds the app for production.npm run preview: Locally previews the production build.npm run lint: Runs ESLint to check for code quality issues.npm run optimize-images: Runs the custom script to optimize assets inpublic/.