A unique desktop-style portfolio application showcasing my work as a Mathematics & Computing student and Full-Stack Developer at Birla Institute of Technology, Mesra.
- Window Management: Complete minimize, maximize, restore functionality with taskbar
- Interactive Desktop: Drag-and-drop windows with real-time positioning
- Dynamic Theming: Wallpaper-based color themes with smooth transitions
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- About Me: Personal background and journey
- Projects: Interactive project showcase with live demos
- Experience: Professional and academic experience
- Skills: Technical expertise and proficiency levels
- Contact: Real email integration via EmailJS
- Terminal: Interactive bash-style terminal with custom commands
- VS Code: Live code editor integration via GitHub1s
- Spotify: Music playlist embedding
- Settings: Theme customization and system preferences
- Real-time Email: Functional contact form with email delivery
- Boot/Shutdown Animations: Linux-inspired system startup/shutdown
- Dynamic Wallpapers: Multiple themed wallpapers with color extraction
- Performance Optimized: React.memo, throttled operations, efficient re-renders
- React 18 - Modern React with hooks and performance optimizations
- Tailwind CSS - Utility-first CSS framework with custom themes
- Lucide React - Professional icon library
- EmailJS - Client-side email integration
- CRACO - Create React App Configuration Override
- FastAPI - High-performance Python web framework
- Uvicorn - Lightning-fast ASGI server
- Pydantic - Data validation and serialization
- GitHub1s - Live VS Code environment
- Spotify Web Player - Music streaming integration
- Custom Terminal - Interactive command-line interface
portfolio.os/
βββ π frontend/ # React application
β βββ π public/ # Static assets and favicon
β βββ π src/
β β βββ π components/ # React components
β β β βββ π windows/ # Application windows
β β β βββ π Desktop.jsx # Main desktop environment
β β β βββ π WindowManager.jsx # Window management system
β β β βββ π TaskBar.jsx # Taskbar with app switching
β β β βββ π ...
β β βββ π hooks/ # Custom React hooks
β β βββ π styles/ # CSS and theme files
β β βββ π config/ # Configuration files
β β βββ π mock.js # Portfolio data and content
β β βββ π ...
β βββ π package.json
βββ π backend/ # FastAPI server
β βββ π server.py # Main server application
β βββ π requirements.txt # Python dependencies
βββ π start-frontend.bat # Windows startup script
βββ π start-frontend.sh # Unix/Mac startup script
βββ π LICENSE # MIT License
βββ π README.md # This file
# Navigate to frontend directory
cd frontend
# Install dependencies (first time only)
npm install
# Start development server
npm startFrontend URL: http://localhost:3000
# Navigate to backend directory
cd backend
# Install Python dependencies (first time only)
pip install -r requirements.txt
# Start FastAPI server
python server.pyBackend API: http://localhost:8001
- Windows: Double-click
start-frontend.bat - macOS/Linux: Run
./start-frontend.sh
To enable the contact form functionality:
- Visit EmailJS.com
- Sign up for a free account
- Verify your email address
- Go to Email Services β Add New Service
- Choose your email provider (Gmail recommended)
- Connect your email account
- Copy the Service ID
- Go to Email Templates β Create New Template
- Use these template variables:
Subject: {{subject}} - New Portfolio Contact From: {{from_name}} ({{from_email}}) Message: {{message}} - Copy the Template ID
Edit frontend/src/config/emailjs.js:
export const emailjsConfig = {
serviceID: 'your_service_id',
templateID: 'your_template_id',
publicKey: 'your_public_key'
};The integrated terminal supports these commands:
| Command | Description |
|---|---|
help |
Display all available commands |
about |
Show personal information |
projects |
List development projects |
skills |
Display technical skills |
contact |
Show contact information |
whoami |
Current user information |
pwd |
Present working directory |
ls |
List directory contents |
clear |
Clear terminal screen |
neofetch |
System information display |
The portfolio features dynamic theming with multiple wallpaper categories:
- π₯ Garuda Linux - Classic Linux distribution themes
- β‘ Anime - Tokyo Ghoul and Bleach inspired themes
- π Manga - Manga-style artwork themes
- πΏ Nature - Natural landscape themes
- π Space - Cosmic and galaxy themes
Colors automatically adapt based on the selected wallpaper for a cohesive visual experience.
- React.memo optimization for all window components
- Throttled operations for smooth drag/resize at 60fps
- Dynamic theme system with CSS custom properties
- Responsive grid layouts with CSS Container Queries
- Lazy loading and code splitting for optimal performance
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers (iOS Safari, Chrome Mobile)
# Start with hot reload
npm start
# Build for production
npm run build
# Run tests
npm test
# Eject configuration (irreversible)
npm run eject- ESLint for code linting
- Prettier for code formatting
- React DevTools for component debugging
# Build production version
npm run build
# Deploy the 'build' folder to your hosting service
# (Netlify, Vercel, GitHub Pages, etc.)# Install dependencies
pip install -r requirements.txt
# Run with production server
uvicorn server:app --host 0.0.0.0 --port 8001While this is a personal portfolio, feedback and suggestions are welcome!
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Pranav Priyadarshi (@lazys0ul)
- π§ Email: pranavpriyadarshi903@gmail.com
- πΌ LinkedIn: linkedin.com/in/pranav0997
- π± GitHub: github.com/lazys0ul
Built with β€οΈ using React, FastAPI, and modern web technologies
Experience the portfolio live at your deployed URL