This is a modern and visually engaging personal portfolio website built with React, Vite, and React Router DOM. It features a dynamic user interface with smooth navigation, an interactive hero section, a showcase of the developer's technology stack, and responsive design elements to highlight software development skills.
NEW: Now includes a Firebase backend for dynamic project management! 🚀
- 🚀 Interactive Navigation: Seamless routing between Home, About, Projects, and Contact pages using React Router.
- 🌟 Dynamic Hero Section: A prominent introductory area designed to immediately capture attention.
- 🌐 Social Media Integration: Easy access to the developer's online presence via integrated social links.
- 🛠️ Technology Stack Showcase: A dedicated section visually listing the developer's proficiency in various programming languages and tools.
- 🌌 Animated Background: Subtle and captivating background animations to enhance the user experience.
- 📄 Dedicated Pages: Individual pages for detailed information about the developer, showcased projects, and contact methods.
- 🔐 Admin Dashboard: Secure authentication with Firebase
- 📋 Project Management: Add, edit, and delete projects dynamically
- 🖼️ Cloud Image Hosting: Integration with Cloudinary for reliable image storage
- ☁️ Firestore Database: Real-time project data storage and synchronization
To get this project up and running on your local machine, follow these simple steps.
- Clone the Repository:
git clone https://github.com/Chukwudebere-ferd/ELZIPO.git cd ELZIPO - Install Dependencies:
npm install
- Run the Development Server:
This will start the Vite development server, usually on
npm run dev
http://localhost:5173.
This project now requires Firebase and Cloudinary credentials for the admin backend.
For local development, create a .env.local file in the Elzipo/ folder:
# Firebase Configuration
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
VITE_FIREBASE_APP_ID=your_firebase_app_id
# Cloudinary Configuration
VITE_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
VITE_CLOUDINARY_UPLOAD_PRESET=your_cloudinary_upload_presetSetup Instructions: See QUICK_START.md for a 5-minute setup guide.
Detailed Setup: See FIREBASE_SETUP.md for complete step-by-step instructions.
Once the development server is running, open your web browser and navigate to the address provided by Vite (e.g., http://localhost:5173).
The application will display the main portfolio page. You can navigate through the different sections (Projects, About, Contact) using the sidebar navigation links. The hero section introduces the portfolio, while the social icons and technology stack showcase provide additional insights into the developer's capabilities.
This project leverages the following key technologies and libraries:
| Technology | Description | Link |
|---|---|---|
| React | A JavaScript library for building user interfaces | React.js |
| Vite | A fast build tool for modern web projects | Vite.js |
| React Router DOM | Declarative routing for React | React Router |
| React Icons | Customizable SVG React icons | React Icons |
| Firebase | Backend services (Auth, Firestore, Storage) | Firebase |
| Firestore | Cloud database for project data | Firestore |
| Firebase Auth | User authentication system | Firebase Auth |
| Cloudinary | Cloud image hosting and CDN | Cloudinary |
| JavaScript | The programming language for web development | MDN Web Docs |
| CSS3 | Styling language for web pages | MDN Web Docs |
Note: The "Stacks" section within the portfolio also showcases proficiency in additional technologies like Node.js, Flutter, TypeScript, MongoDB, and MySQL, indicating a broader skillset.
- Name: Elzipo
- Email: Elzipo106@gmail.com
- Twitter: @elzipoferd
- WhatsApp: +2349047594112
