A professional, high-performance portfolio website built with React, TypeScript, and Supabase. Features a real-time admin dashboard for content management, project filtering, and an integrated blog/article section.
This project is a complete solution for developers to showcase their work. It includes a beautiful, responsive frontend and a secure admin panel to manage all aspects of the portfolio without touching the code.
- Dynamic Content: Manage Hero, About, Skills, Experience, Projects, and Articles from the Admin Dashboard.
- Real-time Notifications: Get instant updates when content is modified via Supabase Realtime.
- Project Filtering: Filter projects by technology tags with smooth animations.
- Pagination: Optimized loading for Projects and Articles sections.
- Responsive Design: Fully optimized for mobile, tablet, and desktop views.
- Secure Admin: Protected dashboard using Supabase Authentication.
- Contact Integration: Managed contact information and social links.
- Frontend: React 18, TypeScript, Vite
- Styling: Tailwind CSS, Framer Motion (animations)
- Icons: Lucide React
- Backend/Database: Supabase (PostgreSQL, Auth, Realtime)
- Routing: React Router 6
-
Clone the repository:
git clone https://github.com/augustdev290/augustdev290-portfolio-cms.git cd augustdev290-portfolio-cms -
Install dependencies:
npm install
-
Environment Variables: Create a
.envfile in the root directory and add your Supabase credentials:VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Database Setup: Run the following SQL in your Supabase SQL Editor to create the necessary tables:
projectsarticlesskillsexperiencesocialssettingsnotifications
-
Start the development server:
npm run dev
- Frontend: Accessible at
http://localhost:3000 - Admin Dashboard: Accessible at
http://localhost:3000/admin - Login: Use your Supabase Auth credentials to access the dashboard.
Augustdev290
- GitHub: @Augustdev290
This project is licensed under the MIT License - see the LICENSE file for details.