An interactive Ubuntu-themed portfolio website that simulates a complete desktop environment. Built with Next.js, TypeScript, and Tailwind CSS, this portfolio showcases projects and skills through an immersive Ubuntu desktop experience.
- Authentic Ubuntu Loading Screen - Complete with Ubuntu logo and loading animation
- Draggable Desktop Icons - Interactive icons that can be repositioned with collision detection
- Window Management - Minimize, maximize, close, and drag windows with smooth animations
- Ubuntu Dock - Left sidebar with application launchers and indicators
- Top Panel - Ubuntu-style top panel with time display, system status, and controls
- Bottom Taskbar - Running applications and system tray
- Wallpaper System - Dynamic wallpaper switching with Ubuntu-themed backgrounds
The left sidebar features essential Ubuntu applications:
- ** Home** - Return to desktop overview
- ** Google Chrome** - Web browser with search functionality
- ** Help** - Interactive help and support system
- ** Files** - File manager for browsing project assets
- ** Terminal** - Command-line interface
- ** Settings** - System preferences and configuration
- ** Calculator** - Built-in calculator application
- ** Spotify** - Music player with playlist integration
- ** Image Viewer** - Gallery for viewing project screenshots
- Working Terminal Commands - Fully functional terminal with real commands
- Command History - Persistent command history
- Project Launchers - Launch specific projects with
./project-name - System Information -
neofetchcommand displays system specs - File Operations -
ls,cat,pwd,whoamicommands - Fun Commands -
fortunefor random quotes,treefor directory structure
- Terminal - Fully functional command-line interface with real Ubuntu commands
- Projects - Interactive showcase of development projects with detailed descriptions
- About Me - Personal information, professional background, and career journey
- Skills - Comprehensive technical skills organized by categories and proficiency levels
- Contact - Professional contact information with direct links to social profiles
- Gallery - Visual project showcase with screenshots and interactive demos
- Settings - System preferences, theme customization, and configuration options
- Commands Guide - Interactive help documentation with all available commands
- Spotify Music Player - Integrated Spotify web player with playlist support
- Image Viewer - Built-in image gallery for viewing project screenshots
- Wallpaper Gallery - Collection of Ubuntu-themed wallpapers and backgrounds
- Calculator - Functional calculator application with standard operations
- Text Editor - Simple text editor for notes and documentation
- File Manager - File system browser for navigating project assets
- System Monitor - Real-time system information and performance metrics
- Settings Panel - Comprehensive system configuration and preferences
- Help & Support - Interactive help system with tutorials and documentation
- Ubuntu Color Scheme - Authentic Ubuntu orange (#E95420) and terminal colors
- Responsive Design - Works seamlessly across all device sizes (mobile, tablet, desktop)
- Smooth Animations - Fluid transitions, hover effects, and window animations
- Accessibility - Keyboard navigation, screen reader support, and ARIA labels
- Dark Theme - Terminal-inspired dark mode with proper contrast ratios
- Custom Scrollbars - Styled scrollbars matching Ubuntu aesthetic
- Icon System - Consistent iconography with proper sizing and spacing
- Content Security Policy - Secure iframe embedding for Spotify and external content
- Performance Optimized - Lazy loading, memoization, and efficient rendering
- Type Safety - Full TypeScript implementation with strict type checking
- Component Architecture - Modular, reusable components with proper separation of concerns
- State Management - Efficient React state management with hooks and context
- Error Handling - Graceful error boundaries and user feedback
- SEO Optimized - Proper meta tags, structured data, and semantic HTML
- Node.js 18+
- pnpm (recommended) or npm
-
Clone the repository
git clone https://github.com/tanayvasishtha/Ubuntu-Theme-Portfolio.git cd Ubuntu-Theme-Portfolio -
Install dependencies
pnpm install # or npm install -
Start the development server
pnpm dev # or npm run dev -
Open your browser Navigate to http://localhost:3000
- Next.js 14.2.16 - React framework with App Router
- TypeScript 5.0 - Type-safe JavaScript
- Tailwind CSS 4.1.9 - Utility-first CSS framework
- Lucide React - Beautiful icon library
- Radix UI - Accessible component primitives
- Custom Ubuntu Theme - Authentic Ubuntu color palette
- CSS Variables - Dynamic theming system
- Responsive Design - Mobile-first approach
- Animation Library - Smooth transitions and effects
- ESLint - Code linting
- PostCSS - CSS processing
- Autoprefixer - CSS vendor prefixing
ubuntu-portfolio/
├── app/ # Next.js App Router
│ ├── globals.css # Global styles and Ubuntu theme
│ ├── layout.tsx # Root layout with fonts
│ └── page.tsx # Main portfolio component
├── components/ # Reusable components
│ ├── ui/ # shadcn/ui components
│ └── theme-provider.tsx # Theme context provider
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── public/ # Static assets
│ ├── ubuntu-*.png # Ubuntu branding images
│ └── ubuntu-wallpaper.png
└── styles/ # Additional stylesheets
- Double-click icons to open applications
- Drag icons to reposition them on the desktop
- Use window controls (minimize, maximize, close) in the top-right corner
- Click and drag window title bars to move windows
The portfolio features a fully functional terminal with authentic Ubuntu commands:
ls # List files and directories
pwd # Show current working directory
whoami # Display current user information
whois # Learn about the developer
cat [file] # Display file contents (about.txt, contact.txt, skills.txt)
tree # Show directory structure
history # View command history
clear # Clear terminal screenopen projects # Open projects showcase window
open about # Open about me window
open skills # Open technical skills window
open contact # Open contact information window
open gallery # Open project gallery window
open settings # Open system settings window./ecommerce # Launch e-commerce platform project
./taskmanager # Launch task management application
./apigateway # Launch API gateway system
./portfolio # About this portfolio websitesocial # Display social media links
email # Show contact email address
sponsor me # Support the developer on Buy Me a Coffee
github # Open GitHub profile
linkedin # Open LinkedIn profile
twitter # Open Twitter/X profileai # Chat with AI assistant
matrix # Enter the Matrix (fun animation)
hack # Activate hacker mode
love # Show some love with ASCII art
fortune # Get random inspirational quotes
neofetch # Display system information
date # Show current date and time
banner # Display ASCII art bannersecret # Access hidden commands (password: "Banger")
sudo # Admin privileges (fun easter egg)help # Show complete command reference
commands # Display available commands- Update the
projectDetailsobject inapp/page.tsx - Add new project entries with title, description, features, and tech stack
- Update terminal commands to include new project launchers
- Edit the
desktopIconsarray inapp/page.tsx - Add new icons with custom actions and positions
- Update the terminal
opencommand to include new applications
- Modify
app/globals.cssfor global theme changes - Update CSS variables for color scheme modifications
- Customize Ubuntu branding in the
public/directory
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy with zero configuration
# Build the project
pnpm build
# Start production server
pnpm startContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Follow TypeScript best practices
- Use Tailwind CSS for styling
- Maintain Ubuntu design consistency
- Add proper error handling
- Include accessibility features
This project is licensed under the MIT License - see the LICENSE file for details.
This isn't just another portfolio website - it's a complete Ubuntu desktop simulation that allows visitors to interact with your work in a familiar, engaging environment. Users can explore your projects, skills, and personality through an authentic Ubuntu interface.
- Real Terminal Commands - Visitors can actually use terminal commands to navigate and explore
- Draggable Interface - Desktop icons can be moved and repositioned like a real OS
- Window Management - Full window controls with minimize, maximize, and close functionality
- Music Integration - Spotify player for a complete desktop experience
- Secret Commands - Hidden features and easter eggs for curious visitors
- Responsive Ubuntu Design - Maintains Ubuntu aesthetics across all screen sizes
- Performance Optimized - Smooth animations and interactions without lag
- Accessibility First - Full keyboard navigation and screen reader support
- Modern Tech Stack - Built with the latest web technologies for optimal performance
- Authentic Ubuntu Theme - Perfect recreation of Ubuntu's visual design language
- Consistent Iconography - Professional icon system throughout the interface
- Smooth Animations - Fluid transitions that enhance the user experience
- Custom Styling - Tailored scrollbars, buttons, and UI elements
- Ubuntu - For the amazing Linux distribution and design inspiration
- Next.js Team - For the excellent React framework
- Tailwind CSS - For the utility-first CSS framework
- Radix UI - For accessible component primitives
- Lucide - For the beautiful icon library
- Spotify - For the music integration API
Made with Ubuntu