metropolis technologies!

Ship #1 Changes requested

@tanzeemrockz on metropolis technologies! · about 2 hours ago

I made Metropolis Technologies as my personal site and project hub under CyberSlayerCorpz. I built it with HTML5 and Tailwind CSS, with a dark grid background, custom Google Sans typography, cyan accents, and custom Neon Dragon cursors.

The most annoying part was honestly Tailwind 😭. I spent way too long fighting with items-center, grid-cols-2, colours, and the Tailwind config. I also ran into issues with the Google Fonts / preconnect setup, which made debugging even more fun.

I’m pretty happy with how the final site turned out, especially the project cards and overall dark/cyberpunk look. It’s deployed on GitHub Pages and has sections for my projects, about info, and links.

This was made for the Hack Club Stardance Personal Site mission, and I tracked 2 hours and 2 minutes with Hackatime.

The site is live, the repo is public, and after all that Tailwind pain, it finally works™ 💀

1 devlog
2h
Personal Site

Try project → See source code →

Open comments for this post

@tanzeemrockz on metropolis technologies! · about 2 hours ago

2h 2m 14s logged

I spent 2 hours fighting Tailwind for a personal site
This project was made for the Hack Club Stardance Personal Site mission.
The mission is basically to build and deploy your own personal website, with stuff like HTML + CSS, a public repo with a README, a fully deployed site, and multiple sections/pages.
So naturally I decided to make Metropolis Technologies, a personal hub for the projects and random stuff I build under CyberSlayerCorpz.
The original idea was pretty simple: dark UI, grid background, cyan accents, project cards, links, done.
Then Tailwind happened.
I got stuck on the most stupid things 😭
For some reason, getting items-center to behave properly was way more annoying than it should’ve been. Then grid-cols-2 decided it didn’t want to cooperate either. I also spent way too long changing colours and trying to get everything set up properly with the Tailwind config.
And then I had Google Fonts.
The / preconnect stuff somehow ended up causing problems with the rest of my setup, which sent me down another rabbit hole of wondering why perfectly normal things weren’t behaving normally.
Eventually I got everything working and ended up with this:

dark grid background

cyan accents

responsive project cards

custom Google Sans typography

custom cursor setup

sections for my projects, about, and links

deployed with GitHub Pages

The final result is pretty much what I originally wanted, and I’m actually pretty happy with how the project cards turned out.
I tracked the whole thing with Hackatime and ended up spending 2 hours and 2 minutes on it.
Honestly, a concerning amount of that time was probably just me staring at Tailwind classes and asking myself why grid-cols-2 wasn’t doing the ONE JOB I GAVE IT 💀
But yeah, it’s finally live and this is my submission for the Stardance Personal Site mission 🫡
Tech: HTML5 + Tailwind CSS + Google Fonts
Time: 2h 02m
Mission: Hack Club Stardance — Personal Site
Status: finally works™