A unique, interactive portfolio website with an Ubuntu 20.04-inspired interface

Live Demo • Report Bug • Request Feature

• About
• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Configuration
• Usage
• Deployment
• Project Structure
• Customization
• Contributing
• License
• Contact
• Acknowledgments

This is my personal portfolio website featuring an Ubuntu 20.04-inspired desktop interface. Built with modern web technologies, it provides an interactive and engaging way to explore my skills, projects, and professional experience. The website mimics a real Ubuntu desktop environment with functional applications, a terminal, and a window management system.

• 🐧 Ubuntu-themed Interface: Authentic Ubuntu 20.04 desktop experience
• 💼 Professional Showcase: Comprehensive display of skills, projects, and experience
• 🎨 Modern Design: Clean, responsive UI that works on all devices
• ⚡ Fast Performance: Built with Next.js for optimal loading speeds
• 📱 Mobile Responsive: Fully functional on smartphones and tablets

• Draggable Windows: Fully functional window management system
• Taskbar: Launch and manage applications from the bottom taskbar
• System Tray: Display system information and quick actions
• Desktop Icons: Quick access to main applications

• Terminal: Interactive command-line interface with custom commands

  • about-mayank: Display information about me
  • cd, ls, pwd: Navigate through virtual file system
  • code: Open VS Code with my GitHub repository
  • chrome: Open browser with my website
  • And many more!

• About Me: Detailed information about my background and skills

• Projects Showcase: Interactive display of my key projects with tech stacks

• VS Code: View my portfolio source code in an embedded VS Code instance

• Contact Form: Functional email form powered by EmailJS

• External Links: Direct links to GitHub, LinkedIn, and other profiles

• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Smooth Animations: Fluid transitions and interactions
• Custom Cursor: Enhanced visual feedback
• Keyboard Shortcuts: Navigate efficiently using keyboard
• SEO Optimized: Proper meta tags and social media integration

• Google Analytics: Integrated analytics for visitor tracking
• Performance Monitoring: Track page load times and user interactions

• Framework: Next.js 13.1.2 - React framework with SSR/SSG
• UI Library: React 18.2.0 - Component-based UI library
• Styling: Tailwind CSS 3.2.4 - Utility-first CSS framework
• Drag & Drop: React-Draggable - Draggable windows
• Icons: Custom SVG icons

• Email Service: EmailJS - Contact form functionality
• Analytics: Google Analytics 4 - Visitor tracking
• Hosting: Optimized for deployment on Vercel, Netlify, or similar platforms

• Package Manager: npm / yarn
• Code Quality: ESLint for linting
• Build Tool: Next.js built-in webpack configuration
• Version Control: Git & GitHub

Before you begin, ensure you have the following installed:

• Node.js (v16.x or later) - Download
• npm (v8.x or later) or yarn (v1.22.x or later)
• Git - Download

1. Clone the repository

   git clone https://github.com/LittleCodr/portfolio.git cd portfolio

2. Install dependencies

   npm install # or yarn install

3. Run the development server

   npm run dev # or yarn dev

4. Open your browser

   Navigate to http://localhost:3000 to see the application running.

1. Create a free account at EmailJS
2. Create an email service (Gmail, Outlook, etc.)
3. Create an email template with the following variables:
   • {{name}} - Sender's name
   • {{subject}} - Email subject
   • {{message}} - Email message body
4. Update the credentials in components/apps/gedit.js:

   // Current configuration const serviceID = 'service_vz46lwf'; const templateID = 'template_8i60bqj'; const publicKey = 'DeVMnnb1zkvXuFF1v';

1. Create a Google Analytics 4 property at Google Analytics
2. Get your Measurement ID (format: G-XXXXXXXXXX)
3. Update the ID in pages/_app.js:

   const GA_TRACKING_ID = 'G-0EEBPFMJN4';

The integrated terminal supports the following commands:

• Drag: Click and drag the title bar to move windows
• Close: Click the X button on the title bar
• Minimize: Click the minimize button
• Maximize: Click the maximize button (if available)
• Focus: Click anywhere on a window to bring it to front

# Create optimized production build npm run build # Start production server npm start # Export as static site (optional) npm run export

1. Install Vercel CLI:

   npm install -g vercel

2. Deploy:

   vercel

3. Follow the prompts to complete deployment

1. Install Netlify CLI:

   npm install -g netlify-cli

2. Build and deploy:

   npm run build netlify deploy --prod

1. Update next.config.js with your repository name
2. Run:

   npm run build npm run export

3. Deploy the out directory to GitHub Pages

portfolio/ ├── components/ # React components │ ├── apps/ # Application components (Terminal, VS Code, etc.) │ ├── context/ # React context providers │ ├── screen/ # Screen/layout components │ └── SEO/ # SEO and meta components ├── lib/ # Utility libraries │ └── gtag.js # Google Analytics utilities ├── pages/ # Next.js pages │ ├── _app.js # Custom App component │ ├── _document.js # Custom Document component │ └── index.js # Home page ├── public/ # Static assets │ ├── images/ # Images and icons │ └── themes/ # Theme assets ├── styles/ # Global styles ├── apps.config.js # Application configuration ├── tailwind.config.js # Tailwind CSS configuration ├── package.json # Project dependencies └── README.md # This file 

1. About Section: Edit components/apps/mayank.js
2. Projects: Update project data in components/apps/mayank.js
3. Skills: Modify skills section in components/apps/mayank.js
4. Social Links: Update URLs in apps.config.js

Edit tailwind.config.js:

module.exports = { theme: { extend: { colors: { 'ub-orange': '#E95420', // Main Ubuntu orange // Add your custom colors } } } }

1. Create component in components/apps/
2. Add configuration in apps.config.js
3. Import and integrate in the main app

Contributions, issues, and feature requests are welcome!

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

Copyright (c) 2024 Mayank Agrawal

Mayank Agrawal - iOS & Android Developer | Full Stack Engineer

• 🌐 Website: mayank1406.pro
• 📧 Email: littlecodr@gmail.com
• 💼 LinkedIn: @mayank1406
• 🐙 GitHub: @LittleCodr
• 🐦 Twitter: @mindflayer_69

Project Link: https://github.com/LittleCodr/portfolio

• Original Concept: Inspired by Vivek Patel's Ubuntu portfolio
• Ubuntu Design: Based on Ubuntu 20.04 Focal Fossa
• Icons & Assets: Ubuntu design team
• Framework: Next.js team for the amazing framework
• Styling: Tailwind CSS team
• Community: All the open-source contributors who made this possible