Skip to content

readme.md

Latest commit

 

History

History
262 lines (206 loc) · 6.04 KB

readme.md

File metadata and controls

262 lines (206 loc) · 6.04 KB
Raw

🚀 Stalin's Terminal Portfolio

A cyberpunk-style terminal portfolio showcasing AI, cybersecurity, and programming skills with an interactive Linux terminal interface.

✨ Features

  • Interactive Terminal: Full Linux-style command interface
  • Boot Sequence: Authentic Arch Linux startup animation
  • Matrix Effects: 3D particle systems and matrix rain
  • Responsive Design: Works on all devices
  • Modern Tech Stack: Next.js 14, TypeScript, Tailwind CSS
  • Pure Web Technologies: HTML5, CSS3, Vanilla JavaScript
  • Easy Deployment: Static files ready for Netlify

🛠️ Tech Stack

  • Framework: Next.js 14 with App Router
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Icons: Lucide React
  • Deployment: Netlify
  • Frontend: HTML5, CSS3, Vanilla JavaScript
  • Fonts: JetBrains Mono (Google Fonts)
  • No Build Process: Pure static files

🚀 Quick Start

Prerequisites

  • Node.js 18+
  • npm or yarn

Installation

  1. Clone the repository ```bash git clone https://github.com/0x5t4l1n/Stalin.github.io.git cd Stalin.github.io ```

  2. Install dependencies ```bash npm install ```

  3. Run development server ```bash npm run dev ```

  4. Open your browser Navigate to http://localhost:3000

Local Development

  1. Clone the repository ```bash git clone https://github.com/0x5t4l1n/portfolio-nodejs.git cd portfolio-nodejs ```

  2. Serve locally ```bash

    Using Python

    python -m http.server 3000

    Using Node.js (if you have http-server installed)

    npx http-server -p 3000

    Or simply open index.html in your browser

    ```

  3. Open your browser Navigate to http://localhost:3000

📦 Build & Deploy

Local Build

```bash npm run build ```

Deploy to Netlify

Method 1: Drag & Drop

  1. Run npm run build
  2. Drag the out folder to Netlify dashboard

Method 2: Git Integration

  1. Push code to GitHub
  2. Connect repository in Netlify dashboard
  3. Set build command: npm run build
  4. Set publish directory: out

Method 3: Netlify CLI

```bash npm install -g netlify-cli netlify login netlify deploy --prod --dir=out ```

Method 1: Drag & Drop (Easiest)

  1. Zip all files in the project
  2. Go to Netlify
  3. Drag the zip file to the deploy area

Method 2: Git Integration

  1. Push code to GitHub
  2. Connect repository in Netlify dashboard
  3. Deploy settings:
    • Build command: echo 'Static site deployed'
    • Publish directory: . (root)

Method 3: Netlify CLI

```bash npm install -g netlify-cli netlify login netlify deploy --prod --dir=. ```

🎮 Terminal Commands

  • help - Show all available commands
  • whoami - About Stalin S
  • skills - Technical expertise
  • projects - Featured projects
  • github - GitHub profile & stats
  • huggingface - AI models on Hugging Face
  • contact - Get in touch
  • clear - Clear terminal
  • neofetch - System information
  • exit - Exit terminal

Easter Eggs

  • hack or matrix - Toggle hacker mode
  • sudo rm -rf / - Safe joke command

🎨 Customization

Colors

Edit tailwind.config.ts to change the color scheme: ```typescript colors: { terminal: { bg: "#0d1117", text: "#58a6ff", green: "#7ee787", // ... more colors } } ```

Edit the CSS variables in styles.css: ```css :root { --primary-green: #7ee787; --primary-cyan: #22d3ee; --primary-blue: #60a5fa; /* Add more custom colors */ } ```

Skills

Update skills in components/landing-page.tsx: ```typescript const skills = [ { name: "Python", level: 90, icon: Code, color: "from-yellow-400 to-yellow-600" }, // ... add more skills ] ```

Update the skills array in script.js: ```javascript const skills = [ { name: "Python", level: 90, color: "linear-gradient(45deg, #fbbf24, #f59e0b)" }, // Add more skills ]; ```

Projects

Modify projects array in components/landing-page.tsx and lib/commands.ts

Modify the projects array in script.js: ```javascript const projects = [ { title: "Your Project", description: "Project description", tech: ["Tech1", "Tech2"], github: "https://github.com/username/repo", status: "ACTIVE" } ]; ```

📱 Responsive Design

  • Desktop: Full terminal experience with animations
  • Tablet: Optimized layout with touch support
  • Mobile: Streamlined interface for small screens

🔧 Environment Variables

No environment variables required for basic functionality.

🌟 Features Breakdown

Landing Page

  • Animated cyber logo with orbital elements
  • Matrix rain background effect
  • Particle system animations
  • Skills showcase with progress bars
  • Featured projects grid
  • Contact information

Terminal Interface

  • Authentic boot sequence
  • Interactive command system
  • Command history (↑/↓ arrows)
  • Tab completion
  • Multiple themed commands
  • Easter eggs and special effects

🔧 File Structure

``` portfolio-nodejs/ ├── index.html # Main HTML file ├── styles.css # All CSS styles ├── script.js # JavaScript functionality ├── package.json # Project metadata ├── netlify.toml # Netlify configuration └── README.md # This file ```

📄 License

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

🤝 Contributing

  1. Fork the repository
  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

📞 Contact

Stalin S

🙏 Acknowledgments

  • Inspired by retro terminal aesthetics
  • Built with modern web technologies
  • Designed for cybersecurity and AI enthusiasts

⭐ Star this repository if you found it helpful!