Skip to content

IndrajeethY/Arch-Portifolio

Repository files navigation

Arch Portfolio - Indrajeeth's Developer Portfolio

A beautiful, interactive developer portfolio inspired by Arch Linux. Experience a fully functional desktop environment in your browser, complete with windows, terminal, and Arch's signature minimalist aesthetic.

Arch Linux React TypeScript Vite

โœจ Features

  • ๐Ÿ–ฅ๏ธ Interactive Desktop Environment - Full Arch Linux-inspired desktop with draggable windows
  • ๐ŸŒ™ Dark Theme - Eye-friendly dark theme matching Arch's aesthetic
  • ๐Ÿ“ฑ Fully Responsive - Works seamlessly on desktop, tablet, and mobile devices
  • โšก Fast & Lightweight - Built with Vite for lightning-fast performance
  • ๐ŸŽจ Beautiful Animations - Smooth transitions and animations using Framer Motion
  • ๐ŸŽต Music Player - Built-in music player in the activities menu
  • ๐Ÿ“ธ Camera App - Interactive camera application
  • ๐ŸŽฎ Easter Eggs - Includes Minecraft (Eaglercraft) and other fun features
  • ๐Ÿ”ง Terminal Emulator - Functional terminal interface

๐Ÿ› ๏ธ Technologies Used

  • React 18 - Modern React with hooks
  • TypeScript - Type-safe development
  • Vite - Next-generation frontend tooling
  • Tailwind CSS - Utility-first CSS framework
  • Framer Motion - Production-ready animation library
  • shadcn/ui - High-quality, accessible UI components
  • Radix UI - Unstyled, accessible component primitives

๐Ÿš€ Getting Started

Prerequisites

  • Node.js 18+ installed (Download)
  • npm or yarn package manager

Installation

  1. Clone the repository:
git clone https://github.com/IndrajeethY/Arch-Portifolio.git
cd Arch-Portifolio
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and visit http://localhost:8080

Building for Production

npm run build

The optimized build will be in the dist/ directory.

Preview Production Build

npm run preview

๐ŸŽจ Customization

Animated Wallpaper Setup

To add a custom animated wallpaper:

  1. Place your video file as wallpaper.mp4 (MP4 format) or wallpaper.webm (WebM format) in the public/ folder
  2. Create a poster image as wallpaper-poster.jpg (first frame of video)
  3. The wallpaper is fully responsive and will automatically adjust for different screen sizes

If no video files are present, a beautiful Arch Linux pattern will be displayed as fallback.

Startup Sound Setup

To add the Linux startup sound:

  1. Find or download a Linux startup sound (e.g., Ubuntu startup sound, Arch boot sound, etc.)
    • Recommended: Short sound (1-3 seconds)
    • Format: MP3, WAV, or OGG
  2. Rename the file to startup-sound.mp3
  3. Place it in the public/ folder
  4. The sound will automatically play when you log in to the desktop

Note: Due to browser autoplay policies, the sound may require user interaction on the first visit. The volume is set to 30% to avoid being too loud.

Modifying Content

  • About Me: Edit /src/components/windows/AboutContent.tsx
  • Projects: Edit /src/components/windows/ProjectsContent.tsx
  • Resume: Edit /src/components/windows/ResumeContent.tsx
  • Contact Info: Edit /src/components/windows/ContactContent.tsx
  • Social Links: Edit /src/components/ActivitiesMenu.tsx

๐Ÿ“ Project Structure

Arch-Portifolio/
โ”œโ”€โ”€ public/              # Static assets
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ components/      # React components
โ”‚   โ”‚   โ”œโ”€โ”€ windows/     # Window content components
โ”‚   โ”‚   โ”œโ”€โ”€ ui/          # shadcn/ui components
โ”‚   โ”‚   โ””โ”€โ”€ ...          # Other components
โ”‚   โ”œโ”€โ”€ pages/           # Page components
โ”‚   โ””โ”€โ”€ main.tsx         # Application entry point
โ”œโ”€โ”€ package.json         # Dependencies and scripts
โ”œโ”€โ”€ vite.config.ts       # Vite configuration
โ””โ”€โ”€ tailwind.config.ts   # Tailwind CSS configuration

๐ŸŽฏ Key Features Breakdown

Boot Sequence

Experience an authentic Linux boot sequence when loading the portfolio.

Login Screen

A realistic Linux login screen with smooth transitions.

Desktop Environment

  • Draggable and resizable windows
  • Multiple windows support with z-index management
  • Window minimize functionality
  • Taskbar with active window indicators

Activities Menu

Quick access to:

  • Music Player
  • Firefox Browser
  • Camera
  • Minecraft (Eaglercraft)
  • System Information
  • Social Media Links

System Tray

Real-time display of:

  • WiFi status
  • Volume level
  • Battery status (if supported)
  • Current time and date

๐Ÿ“œ License

This project is open source and available under the MIT License.

๐Ÿ‘ค Author

Indrajeeth

๐Ÿ™ Acknowledgments

  • Inspired by Arch Linux's philosophy: simplicity, minimalism, and user-centricity
  • Built with amazing open-source tools and libraries
  • Special thanks to the React and Vite communities

๐Ÿค Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.


Made with โค๏ธ and lots of โ˜• - BTW, I use Arch!

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages