A full-stack TypeScript portfolio website built with a Netflix-style interface featuring a hero section, horizontal scrolling project rows, and detailed project modals.
- Netflix-Style UI: Dark theme with red accent colors and horizontal scrolling interfaces
- Project Showcase: Organized by categories (Experience, Research, Side Projects)
- Interactive Modals: Detailed project information with links to GitHub and live demos
- Responsive Design: Mobile-first approach with smooth animations
- Type-Safe: Full TypeScript implementation with Zod validation
- React 18 with TypeScript
- Vite for fast development and building
- Tailwind CSS for styling
- shadcn/ui components built on Radix UI
- TanStack Query for server state management
- Wouter for lightweight routing
- Node.js with Express.js
- TypeScript with ES modules
- In-memory storage with seeded project data
- RESTful API with category-based filtering
-
Clone the repository
git clone <your-repo-url> cd netflix-portfolio
-
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5000
├── client/ # Frontend React application
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── hooks/ # Custom React hooks
│ │ └── lib/ # Utilities and configurations
├── server/ # Backend Express application
│ ├── index.ts # Server entry point
│ ├── routes.ts # API route definitions
│ └── storage.ts # Data storage and seeding
├── shared/ # Shared TypeScript types and schemas
└── package.json # Dependencies and scripts
Edit server/storage.ts to add your own projects. Each project should include:
{
title: "Your Project Title",
description: "Project description",
category: "experience" | "research" | "side-projects",
year: "2024",
technologies: ["React", "TypeScript", "Node.js"],
features: ["Feature 1", "Feature 2"],
imageUrl: "https://your-image-url.com",
githubUrl: "https://github.com/your-username/project",
demoUrl: "https://your-demo-url.com"
}The project uses Tailwind CSS with custom Netflix-themed variables defined in client/src/index.css. Modify the CSS variables to change the color scheme:
:root {
--netflix-red: #e50914;
--netflix-black: #141414;
--netflix-gray: #2f2f2f;
}npm run dev- Start development servernpm run build- Build for productionnpm start- Start production servernpm run check- Type check with TypeScript
This project is optimized for deployment on Replit. The server is configured to run on port 5000 which is automatically forwarded in production.
Contributions are welcome! Feel free to:
- Fork the project
- Create a feature branch
- Make your changes
- Submit a pull request
This project is open source and available under the MIT License.
Template Usage: Feel free to use this as a template for your own portfolio website. Just replace the project data in server/storage.ts with your own information!