🖥️ Akshita Rawat's Portfolio

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

Live Demo • Report Bug • Request Feature

</div>

📋 Table of Contents

About
Features
Tech Stack
Getting Started
Usage
Deployment
Project Structure
Customization
Contributing
License
Contact
Acknowledgments

🎯 About

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.

✨ Highlights

🐧 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

🚀 Features

🖥️ Desktop Environment

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

📱 Applications

Terminal: Interactive command-line interface with custom commands
- about-akshita: 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

🎨 User Experience

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

📊 Analytics & Tracking

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

🛠️ Tech Stack

Frontend

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

Backend & Services

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

Development Tools

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

🏁 Getting Started

Prerequisites

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

Installation

Clone the repository

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

Install dependencies
```
npm install
# or
yarn install
```
Run the development server
```
npm run dev
# or
yarn dev
```
Open your browser

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

Configuration

EmailJS Setup (Required for Contact Form)

Create a free account at EmailJS
Create an email service (Gmail, Outlook, etc.)
Create an email template with the following variables:
- {{name}} - Sender's name
- {{subject}} - Email subject
- {{message}} - Email message body

Update the credentials in components/apps/gedit.js:

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

Google Analytics Setup (Optional)

Create a Google Analytics 4 property at Google Analytics
Get your Measurement ID (format: G-XXXXXXXXXX)
Update the ID in pages/_app.js:
```
const GA_TRACKING_ID = 'G-0EEBPFMJN4';
```

💻 Usage

Terminal Commands

The integrated terminal supports the following commands:

| Command | Description | |---------|-------------| | about-akshita | Display information about me | | ls | List files in current directory | | cd <dir> | Change directory | | pwd | Print working directory | | echo <text> | Display text | | clear | Clear terminal screen | | code | Open VS Code with portfolio code | | spotify | Open Spotify player | | chrome | Open Chrome browser | | settings | Open system settings | | exit | Close terminal |

Window Management

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

🚀 Deployment

Build for Production

# Create optimized production build
npm run build

# Start production server
npm start

# Export as static site (optional)
npm run export

Deploy to Vercel (Recommended)

Install Vercel CLI:
```
npm install -g vercel
```
Deploy:
```
vercel
```
Follow the prompts to complete deployment

Deploy to Netlify

Install Netlify CLI:
```
npm install -g netlify-cli
```
Build and deploy:
```
npm run build
netlify deploy --prod
```

Deploy to GitHub Pages

Update next.config.js with your repository name
Run:
```
npm run build
npm run export
```
Deploy the out directory to GitHub Pages

📁 Project Structure

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

🎨 Customization

Updating Personal Information

About Section: Edit components/apps/akshita.js
Projects: Update project data in components/apps/akshita.js
Skills: Modify skills section in components/apps/akshita.js
Social Links: Update URLs in apps.config.js

Changing Theme Colors

Edit tailwind.config.js:

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

Adding New Applications

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

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Fork the project
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (

Portfolio

Install / Use

README