personal_website/README.md

2.5 KiB

Personal Website

Project Overview

This is my personal website, a Matrix-themed, cyberpunk-inspired digital space built with React and TypeScript. It serves as a showcase for my projects and personality, blending hardware tinkering, self-hosting enthusiasm, and a love for code and audio into a unique retro hacker aesthetic.

Features

  • Immersive Visuals: Matrix rain background, CRT scanlines, flicker effects, and glitch text.
  • Interactive Terminal: A command-line interface for navigation and interaction, including shortcuts like /home, /about, /ai.
  • AI Chat: Integrated AI assistant powered by Pollinations.ai with conversation history.
  • Radio Music Player: Browse, search, and play radio stations from around the world, or add custom stream URLs. Features a persistent mini-player.
  • Arcade Games: Play classic arcade games like Tetris, Pac-Man, Snake, and Breakout, with local high score saving.
  • Dynamic Content: About page with personal introduction, skills, interests, and an ASCII art portrait.
  • Project Showcase: Detailed pages for various hardware and software projects, including 3-way speakers, an X-ray machine, automated DJ mixing, and VPS infrastructure.
  • Customization: Red/Green theme toggle with persistence, toggleable sound effects.
  • Hidden Gems: Includes a hidden easter egg for old-school gamers.
  • Responsive Design: Optimized for various screen sizes.

Technologies Used

This project is built with:

  • Vite
  • TypeScript
  • React
  • Tailwind CSS
  • Framer Motion
  • shadcn-ui
  • Web Audio API
  • Pollinations.ai (for AI Chat)
  • Radio Browser API (for Music Player)

How to Run Locally

To get a local copy up and running, follow these steps:

The only requirement is having Node.js & npm installed - install with nvm

# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>

# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>

# Step 3: Install the necessary dependencies.
npm i

# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev

For contact information and links to my social profiles and self-hosted services, please visit the /links page on the website.

Credits

This project utilizes various open-source libraries, fonts, and tools. A full list of credits can be found on the /credits page of the website.