A modern, responsive portfolio website built with React, TypeScript, Tailwind CSS, and Supabase.
- 🚀 Blazing fast performance with Vite
- 🎨 Beautiful UI with Tailwind CSS and Radix UI
- 🔒 Secure authentication with Supabase
- 📱 Fully responsive design
- 📝 Content management with Supabase
- 🌍 Deployed on Netlify
- Node.js 18+ (LTS recommended)
- npm or yarn
- Supabase account
- Netlify account
- Git
-
Clone the repository
git clone https://github.com/yourusername/my-portfolio.git cd my-portfolio -
Install dependencies
npm install # or yarn -
Set up environment variables
- Copy
.env.exampleto.env.local - Fill in your Supabase credentials
cp .env.example .env.local
- Copy
-
Start the development server
npm run dev # or yarn dev -
Open your browser The app will be available at
http://localhost:3000
Create a .env.local file in the root directory with the following variables:
VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key- Push your code to a GitHub/GitLab/Bitbucket repository
- Connect your repository to Netlify
- Set up the following build settings:
- Build command:
npm run build - Publish directory:
dist - Node version: 18
- Build command:
- Add your environment variables in the Netlify dashboard
- Deploy!
-
Build the application:
npm run build
-
The built files will be in the
distdirectory
my-portfolio/
├── client/ # Frontend source code
│ ├── components/ # Reusable components
│ ├── lib/ # Utility functions and configurations
│ ├── pages/ # Page components
│ └── styles/ # Global styles
├── server/ # Backend server code
├── public/ # Static files
├── .env.example # Example environment variables
├── .gitignore # Git ignore file
├── netlify.toml # Netlify configuration
├── package.json # Project dependencies and scripts
├── README.md # Project documentation
└── tsconfig.json # TypeScript configuration
- React - JavaScript library for building user interfaces
- TypeScript - Typed JavaScript
- Tailwind CSS - Utility-first CSS framework
- Supabase - Open source Firebase alternative
- Vite - Next generation frontend tooling
- Netlify - Cloud hosting and serverless backend
This project is open source and available under the MIT License.