I Built 20+ Open-Source Tools and a Cyberpunk Terminal Portfolio to Showcase Them All

How I created dotUniverse — an interactive terminal portfolio with 20+ open-source developer tools, VS Code extensions, Telegram bots, mobile apps, and hidden Easter eggs.

I Built 20+ Open-Source Tools and a Cyberpunk Terminal Portfolio to Showcase Them All

"Every tool I've built — CLI utilities, VS Code extensions, web apps. All open-source. All with a purpose."

---

The Story

Over the past two years, I've been building open-source developer tools in my spare time. VS Code extensions, Telegram bots, CLI utilities, mobile apps — you name it. But I never had a proper way to showcase them all in one place.

So I did what any developer would do: I built my own portfolio from scratch — no frameworks, no dependencies, just raw HTML, CSS, and JavaScript.

The result? dotUniverse — a cyberpunk-themed interactive portfolio with a fully functional terminal emulator, hidden Easter eggs, and a showcase of 20+ open-source tools.

Live: https://kareem2099.github.io/dotuniverse/
GitHub: https://github.com/kareem2099/dotuniverse

---

What I Built: The Tools Ecosystem

Let me walk you through the 20+ tools I've built, organized by category.

VS Code Extensions (8 tools)

Tool	Description	Downloads
CodeTune	Islamic spiritual environment — Quran player, prayer times, focus mode	828+
dotcommand	Intelligent command manager with ML-based suggestions	826+
DotEnvy	Environment manager with Git branch auto-switching	748+
DotShare	Share code journeys to 8 social platforms with AI content creation	918+
DotFetch	Professional HTTP client with .env support	646+
DotReadme	README optimizer with quality audit (A+-F score)	447+
DotSense	AI-powered developer wellness — mood detection, burnout prevention	97+
DotConvert	Data converter — Base64, XML↔JSON, CSV↔JSON	Coming soon

Telegram Bots (3 tools)

Tool	Description
DotDownloader	Multi-platform media downloader (Instagram, TikTok, YouTube, etc.)
DotFormate	File format conversion bot (PDF, DOCX, PPTX, images, OCR)
DotShare_Key	Secure OAuth toolkit with magic link authentication

CLI Tools (2 tools)

Tool	Description
DotScramble	Image privacy studio — face/license plate detection, 8 blur effects
DotGhostBoard	Linux clipboard manager with AES-256 encryption

Mobile Apps (3 tools)

Tool	Description
DotReminder	Android reminder app with AI assistant (Gemini)
DOTShredzilla	Workout tracking app — offline-first, Firebase-synced
DotBurn	Write & burn ISOs to USB drives from your phone

---

The Portfolio: Feature Breakdown

Here's what makes the dotUniverse portfolio special.

1. Cyberpunk Visual Design

The design uses a dark hacker aesthetic with three accent colors:

:root {
    --bg: #060a0f;
    --surface: #0d1520;
    --border: #1a2d45;
    --accent: #00e5ff;      /* Cyan */
    --accent2: #39ff14;     /* Green */
    --accent3: #ff6b35;    /* Orange */
    --text: #c8d8e8;
    --muted: #4a6070;
}

Key visual features:

• Animated grid background — Moving cyan grid lines
• Scan line effect — Horizontal line sweeping down the page
• Particle system — 55 connected particles floating on a canvas
• Glitch text effect — Chromatic aberration on the title
• Neon pulse — Glowing text shadows on statistics

2. Interactive Terminal Emulator

This is the crown jewel of the portfolio. A fully functional terminal emulator with:

• 20+ commands across categories (contact, system, fun, network)
• Tab completion with context-aware suggestions
• Command history (arrow up/down)
• Virtual file system with directories and files
• Live syntax highlighting for valid paths

Here's how the command system works:

const COMMANDS = {
  help() {
    addLine('  Available commands:');
    addLine('  contact  --name <n> --email <e> --msg <message>');
    addLine('  whoami   // about FreeRave');
    addLine('  neofetch // system info');
    addLine('  ls       // list files');
    addLine('  cat      <file> // read file');
    addLine('  fortune  // random dev quote');
    addLine('  coffee   // virtual coffee ☕');
    // ... and more
  },
  whoami() {
    addLine('  Kareem · FreeRave');
    addLine('  role    Open-Source Developer');
    addLine('  tools   VS Code · Python · Kotlin · CLI');
    addLine('  projects 20+ shipped, all MIT licensed');
  },
  coffee() {
    addLine('       (');
    addLine('         )     (');
    addLine('      ___...(-------)-...___');
    addLine('  .-""   )    (          ""-.');
    addLine('  \\'.___/         \\         \\___\\'');
    addLine('   \\'.___          _        _.\\'');
    addLine('      \\\'\\'\\\'---------\\'\\'\\'  ');
    addLine('  ☕ Here\\'s your virtual coffee!');
  }
};

3. Context-Aware Tab Completion

The tab completion system is smart. It knows the difference between commands, directories, and files:

inputEl.addEventListener('keydown', e => {
  if (e.key === 'Tab') {
    e.preventDefault();
    const input = inputEl.value;
    const lastPart = input.endsWith(' ') ? '' : input.split(/\s+/).pop();
    const parts = input.trim().split(/\s+/);
    const command = parts[0].toLowerCase();

    let pool = [];

    if (isCommand) {
      pool = Object.keys(COMMANDS).map(c => c + ' ');
    } else if (['cd', 'ls', 'cat', 'nano'].includes(command)) {
      // Only show directories for 'cd', files for 'cat'
      if (command === 'cd') {
        pool = getDirectories(targetDir);
      } else if (['cat', 'nano'].includes(command)) {
        pool = getFiles(targetDir);
      } else {
        pool = getAll(targetDir);
      }
    }

    tabMatches = pool.filter(item => 
      item.toLowerCase().startsWith(searchPrefix.toLowerCase())
    );
  }
});

4. Virtual File System

The terminal has a virtual file system that persists during the session:

const fileSystem = {
  '~': ['tools/', 'platforms/', 'challenges/', 'README.md', 'brain.exe', '.env'],
  '~/tools': ['DotGhostBoard', 'dotcommand', 'CodeTune', 'DotShare', 'DotFetch'],
  '~/platforms': ['dev.to', 'linkedin', 'github', 'tiktok'],
  '~/challenges': ['april-2026.log']
};

let fileData = {
  'README.md': "# FreeRave Portfolio v1.0.0\n\nWelcome to the dotUniverse.",
  'todo.md': "[✓] Reach 2k followers\n[✓] Build dotUniverse\n[ ] World Domination",
  '.env': "PORT=3000\nDB_URL=mongodb://localhost:27017/top_secret"
};

You can navigate directories, read files, and even edit them with a nano editor simulation:

FreeRave@kali:~$ ls
tools/   platforms/   challenges/   README.md   brain.exe   .env

FreeRave@kali:~$ cd tools
FreeRave@kali:~/tools$ ls
DotGhostBoard   dotcommand   CodeTune   DotShare   DotFetch   DotReadme

FreeRave@kali:~/tools$ cat CodeTune
╔══════════════════════════════════════╗
║  CodeTune                            ║
╠══════════════════════════════════════╣
║  Role: Islamic Dev Environment       ║
║  Features:                           ║
║  • Quran Player (15+ Reciters)       ║
║  • Prayer Times Tracking             ║
║  • Smart Focus Mode                  ║
║  • Dhikr Counters                    ║
╚══════════════════════════════════════╝

5. Easter Eggs 🥚

I hid several Easter eggs in the terminal:

The BSOD (Blue Screen of Death)

FreeRave@kali:~$ sudo rm -rf / --no-preserve-root

This triggers a fake Blue Screen of Death with:

• Red flash effect
• Cards flying off screen with rotation and blur
• Glitching header text
• Progress bar with funny messages ("Deleting your work", "rm -rf /hope", "Uninstalling sanity")
• Full recovery animation after 10 seconds

The Final Boss Attack

FreeRave@kali:~$ sudo apt install nmap
FreeRave@kali:~$ nmap 127.0.0.1

This runs a fake port scan that ends with:

PORT     STATE SERVICE
22/tcp   open  ssh
80/tcp   open  http
443/tcp  open  https
666/tcp  open  doom        ← The twist!
⚠ WARNING: CRITICAL VULNERABILITY DETECTED ⚠

Then it plays The Final Boss video on "port 666"!

Other Easter Eggs

# Matrix effect
FreeRave@kali:~$ matrix

# Hack the mainframe
FreeRave@kali:~$ hack

# Virtual coffee
FreeRave@kali:~$ coffee

# Random dev quote
FreeRave@kali:~$ fortune

# ASCII cow
FreeRave@kali:~$ cowsay "Hello World!"

# Calculator
FreeRave@kali:~$ calc 2 + 2 * 5

# Nano editor
FreeRave@kali:~$ nano README.md

# Try to leave
FreeRave@kali:~$ exit
# "There is no escape from FreeRave's terminal 👀"

6. Growth Challenge Tracker

I added an "April 2026 Growth Challenge" that tracks follower goals across 9 platforms:

<div class="challenge-row" data-now="2036" data-goal="2500" data-color="#00e5ff">
  <div class="challenge-platform">
    <span class="ch-icon">📝</span>
    <span class="ch-name">dev.to</span>
  </div>
  <div class="challenge-bar-wrap">
    <div class="challenge-bar">
      <span class="bar-fill"></span>
    </div>
    <div class="challenge-nums">
      <span class="now">2,036</span>
      <span class="arrow">→</span>
      <span class="goal">2,500</span>
      <span class="pct-badge"></span>
    </div>
  </div>
  <div class="challenge-delta">+464</div>
</div>

The progress bars are calculated dynamically:

rows.forEach(row => {
  const now = parseFloat(row.dataset.now);
  const goal = parseFloat(row.dataset.goal);
  const color = row.dataset.color;
  const pct = Math.min(100, (now / goal) * 100);

  const fill = row.querySelector('.bar-fill');
  fill.style.width = pct.toFixed(1) + '%';
  fill.style.background = color;

  const badge = row.querySelector('.pct-badge');
  badge.textContent = pct.toFixed(0) + '%';
});

7. Count-Up Animations

Statistics animate when they scroll into view:

function countUp(el, target, dur) {
  const start = performance.now();
  function step(now) {
    const p = Math.min((now - start) / dur, 1);
    const ease = 1 - Math.pow(1 - p, 3); // Ease out cubic
    el.textContent = Math.round(ease * target).toLocaleString();
    if (p < 1) requestAnimationFrame(step);
    else el.textContent = target.toLocaleString();
  }
  requestAnimationFrame(step);
}

// Trigger on scroll
const io = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      const raw = e.target.textContent.replace(/,/g, '').replace('+', '').trim();
      const n = parseFloat(raw);
      if (!isNaN(n)) countUp(e.target, n, 1800);
      io.unobserve(e.target);
    }
  });
}, { threshold: 0.5 });

8. Particle System

A canvas-based particle system creates the floating dots effect:

const COLORS = ['rgba(0,229,255,', 'rgba(57,255,20,', 'rgba(255,107,53,'];
for (let i = 0; i < 55; i++) {
  pts.push({
    x: Math.random() * 2000,
    y: Math.random() * 1200,
    r: Math.random() * 1.4 + 0.4,
    vx: (Math.random() - .5) * 0.3,
    vy: (Math.random() - .5) * 0.3,
    col: COLORS[Math.floor(Math.random() * 3)],
    a: Math.random() * 0.5 + 0.15
  });
}

function draw() {
  ctx.clearRect(0, 0, W, H);
  pts.forEach(p => {
    p.x += p.vx; p.y += p.vy;
    // Wrap around edges
    if (p.x < 0) p.x = W; if (p.x > W) p.x = 0;
    if (p.y < 0) p.y = H; if (p.y > H) p.y = 0;
    // Draw particle
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
    ctx.fillStyle = p.col + p.a + ')';
    ctx.fill();
  });
  // Draw connections
  for (let i = 0; i < pts.length; i++) {
    for (let j = i + 1; j < pts.length; j++) {
      const dist = Math.sqrt(dx * dx + dy * dy);
      if (dist < 120) {
        ctx.strokeStyle = 'rgba(0,229,255,' + (0.06 * (1 - dist / 120)) + ')';
        ctx.moveTo(pts[i].x, pts[i].y);
        ctx.lineTo(pts[j].x, pts[j].y);
        ctx.stroke();
      }
    }
  }
  requestAnimationFrame(draw);
}

---

Tech Stack

The entire portfolio is built with zero dependencies:

Component	Technology
Markup	HTML5
Styling	CSS3 (Custom Properties, Animations, Grid, Flexbox)
Logic	Vanilla JavaScript (ES6+)
Fonts	Space Mono, Syne (Google Fonts)
Graphics	Canvas API (particles)
Video	HTML5 Video (Easter egg)

No React. No Vue. No build tools. No npm install. Just open index.html and go.

---

Project Structure

dotuniverse/
├── index.html          # 400+ lines of semantic HTML
├── styles.css          # 800+ lines of CSS with animations
├── script.js           # 1000+ lines of JavaScript
├── assets/
│   └── videos/
│       └── The_Final_Boss_(Port_666).mp4 # Easter egg video
├── .github/
│   ├── FUNDING.yml
│   └── ISSUE_TEMPLATE/
│       ├── bug_report.md
│       └── feature_request.md
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── CODE_OF_CONDUCT.md
├── SECURITY.md
├── ROADMAP.md
└── LICENSE (MIT)

---

Key Code Snippets

Glitch Text Effect (CSS Only)

h1::before, h1::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
h1::before {
  color: #ff003c;
  clip-path: polygon(0 25%, 100% 25%, 100% 50%, 0 50%);
  animation: glitchTop 5s infinite;
}
h1::after {
  color: #00e5ff;
  clip-path: polygon(0 55%, 100% 55%, 100% 78%, 0 78%);
  animation: glitchBot 5s infinite;
}

@keyframes glitchTop {
  0%, 88%, 100% { opacity: 0; transform: translateX(0); }
  89% { opacity: .8; transform: translateX(-4px); }
  91% { opacity: .8; transform: translateX(4px); }
  93% { opacity: 0; }
}

Scroll Reveal Animation

const els = document.querySelectorAll('.tool-card, .platform-card, .ext-card');
els.forEach(el => el.classList.add('reveal'));

const io = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('visible');
      io.unobserve(e.target);
    }
  });
}, { threshold: 0.08 });

els.forEach(el => io.observe(el));

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

Cursor Glow Trail

const trail = [];
for (let i = 0; i < 8; i++) {
  const d = document.createElement('div');
  d.style.cssText = `
    position: fixed; pointer-events: none; border-radius: 50%; z-index: 9999;
    width: ${6 - i * 0.5}px; height: ${6 - i * 0.5}px;
    background: rgba(0, 229, 255, ${0.35 - i * 0.04});
    transition: left ${0.05 + i * 0.03}s, top ${0.05 + i * 0.03}s;
    transform: translate(-50%, -50%);
  `;
  document.body.appendChild(d);
  trail.push(d);
}

window.addEventListener('mousemove', e => {
  trail.forEach(d => {
    d.style.left = e.clientX + 'px';
    d.style.top = e.clientY + 'px';
  });
});

---

Lessons Learned

1. Vanilla JS is powerful — You don't need a framework for everything. This portfolio has animations, a terminal emulator, virtual file system, and Easter eggs — all in pure JavaScript.

2. Easter eggs make it memorable — The BSOD and The Final Boss Easter eggs are what people remember and share. Don't underestimate the power of fun.

3. CSS animations are underrated — The glitch effect, scan line, and neon pulse are all pure CSS. No JavaScript needed.

4. Documentation matters — Having README, CHANGELOG, CONTRIBUTING, CODE_OF_CONDUCT, SECURITY, and ROADMAP files makes the project look professional and trustworthy.

5. Build in public — Sharing my progress on dev.to, LinkedIn, and other platforms has helped me grow from 0 to 2,000+ followers.

---

What's Next

The roadmap includes:

• Phase 2 (Q2 2026): Terminal 2.0 — Piping support, SSH simulation, VIM lite
• Phase 3 (Q3/Q4 2026): Visual & Social — Live stats, dynamic themes, blog integration
• Phase 4 (2027+): Expansion — Achievement system, i18n (Arabic RTL), PWA

---

Try It Out

Live: https://kareem2099.github.io/dotuniverse/

Open the terminal and type:

help          # See all commands
neofetch      # System info
fortune       # Random dev quote
coffee        # Virtual coffee ☕
nmap localhost # Try The Final Boss Easter egg

Star the repo: https://github.com/kareem2099/dotuniverse

---

Connect With Me

Platform	Link
GitHub	@kareem2099
dev.to	@freerave
LinkedIn	freerave
Twitter	@FreeRave2
Email	[e-mail]

---

Support the Project

If you find this useful:

• Star the repository on GitHub
• Share this article with your network
• Contribute — Check out CONTRIBUTING.md
• Sponsor — GitHub Sponsors | Ko-fi | PayPal

---

Built with ☕ and sleep deprivation by FreeRave

All 20+ tools are open-source under the MIT License.

---