DEV Community

Varshan Gowda
Varshan Gowda

Posted on

#github, #opensource, #webdev, #programming

#webdev #github #opensource #showdev

How I Built & Deployed 100+ Responsive, Glassmorphic Web Apps & Systems CLI Tools on GitHub

Have you ever wanted to challenge yourself, diversify your tech stack, and build a massive portfolio of open-source utilities all at the same time?

Recently, I decided to go all-in. I wanted to showcase extreme versatility across multiple programming paradigms, developer utilities, interactive frontends, and system automation tools.

To do this, I built, structured, and deployed exactly 100 distinct, fully functional, and beautifully designed open-source repositories to my GitHub profile.

In this article, I’ll share the architecture behind this massive expansion, the visual theme engine I designed, the diverse tech stacks I utilized, and how you can clone, run, and contribute to these utilities.

🎨 The UI Core: Dynamic Dark Glassmorphism

To ensure that all 100 frontend apps felt premium and visually consistent, I designed a central glassmorphism theme framework. The design tokens utilize:

  • Backgrounds: Pitch obsidian (#0A0A0F to #12121A) dynamic radial HSL mesh backdrops.
  • Cards: Frosted transparent backing (rgba(26, 26, 40, 0.45)) utilizing -webkit-backdrop-filter and glowing borders.
  • Typographic Grids: Clean, modern Inter sans-serif grids loaded dynamically.

Across the frontends, I designed 12 distinct, high-fidelity color palettes (including Cyberpunk Neon, Nord Ice, Dracula Purple, Solarized Light, and Gruvbox Retro) to give each app its own unique personality and style.

🛠️ The Tech Stacks (Multi-Language Matrix)

A true polyglot software portfolio should showcase more than just web frontends. That's why I distributed the codebases across 7 distinct programming languages & runtimes to demonstrate a broad systems, automation, and backend footprint:

1. Web Frontends (HTML5, Vanilla CSS3, ES6 JavaScript)

Interactive micro-frontends including circular countdown Pomodoro focus clocks, financial ledgers, pixel art canvas designers, HTML5 audio synthesizers, and SVG path custom animators.

2. Python (CLI & Data Science)

Robust CLI scripts, log warning scanners, directory cleanup scripts, terminal ASCII chart generators, and config YAML linters.

3. Go (Systems & Concurrency)

High-performance parallel TCP port scanners, schema validation systems, and concurrent cron scheduling engines.

4. Rust (Systems Engineering)

Extremely fast MD5 checksum tools, SHA password encryption modules, and cryptography hashing interfaces.

5. C++ (Algorithms & Math)

B-Plus search database tree modules, 3x3 algebraic matrix multipliers, Hill matrix ciphers, and Dijkstra routers.

6. Node.js (CLI Helpers)

Object structural diff tools, file syncer engines, and automated task runners.

7. Bash & DevOps Scripts

Log rotation engines, automated database backup vaults, and subdomain auditing tools.

🚀 Highlights of the 10-Category Repository Registry

The 100-repository collection is divided into 10 core functional domains, making it a comprehensive developer toolbox:

  1. 🛠️ Dev Tools: Markdown previewers, regex compilers, JSON trees, SVG path drawers.
  2. 🎮 Retro Games: Physics-based canvas games (Snake, Tetris, Pong, Wordle, Flappy Bird, Space Invaders).
  3. 📈 Life Trackers: Cash flow ledgers, workout planners, hydro loggers, calendar grids.
  4. 🧮 Calculators: Timezone adjustments, metric converters, loan calculators.
  5. 🔐 Security Sandboxes: AES encryptors, RSA keypairs, interactive SQLi & XSS security simulators.
  6. 💼 Business Analytics: Invoice designers, salary take-home estimators, crypto portfolio allocation charts.
  7. 🎨 CSS Playgrounds: Flexbox visualizers, CSS Grid builders, 3D transform skew tools, organic border generators.
  8. 📊 Data Science: CSV to JSON parsers, YAML/XML converters, trend line graph plotters.
  9. 🖼️ Graphic Tools: QR decrypters, UPC/EAN barcode generators, palette extractors.
  10. 🧬 Science Simulators: Bubble/Insertion sorting visualizers, periodic tables, trig unit circles, DNA codon transcription tools.

🤝 Clone, Explore, and Contribute!

All 100 repositories are 100% open-source, public, and documented with standard .gitignore settings, active Shields badges, and clean readme guides.

  • 🌟 GitHub Profile: Check out the complete portfolio and follow my journey at github.com/VARSHAN69.
  • 📂 Source Code: You can view, clone, and fork any of the 100 repositories directly from the profile list.

Which utility or retro game do you find most useful? Drop a comment below, star the repository on GitHub, and let's collaborate on building the next generation of developer utilities!

Top comments (0)