A highly interactive developer portfolio that simulates the Fedora Workstation (GNOME) desktop environment in the browser. Built with modern web technologies, it offers a unique, immersive way to explore my work, skills, and experience.
- Desktop Experience: Fully functional window manager with dragging, resizing, minimizing, and maximizing capabilities.
- GNOME Shell: Authentic top bar with quick settings, calendar integration, and an "Activities" overlay (Exposé style) for window management.
- Interactive Terminal: A ZSH-like terminal emulator with custom commands (
ls,cd,cat,neofetch,matrix, etc.) for power users. - AI Assistant 🤖: Integrated RAG-powered chatbot that can answer questions about my background and projects, with streaming responses and bold text formatting.
- System Apps:
- 📄 Resume: Integrated PDF viewer.
- 📂 Projects: Interactive grid view of my work with GitHub links.
- ⚙️ Settings: System customization (wallpapers, gradients).
- ℹ️ About: Personal bio and tech stack overview.
- 🌐 Browser: In-app web browser simulation.
- Framework: React + Vite
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Phosphor Icons
- Window Management:
react-rnd - Markdown: Custom lightweight renderer for safe Chatbot output.
The application requires a connection to the backend for the AI Assistant. Create a .env file in the root directory:
# Works with or without the /api suffix
VITE_API_URL=https://portfolio-backend-1lt5.onrender.com
# OR
VITE_API_URL=https://portfolio-backend-1lt5.onrender.com/api-
Clone the repository
git clone https://github.com/HammadAli08/fedora_portfolio.git cd fedora_portfolio -
Install dependencies
npm install
-
Start the development server
npm run dev
Open http://localhost:5173 in your browser.
-
Build for production
npm run build
This is a personal portfolio project, but suggestions and bug fixes are welcome!
Designed & Developed by Hammad Ali