metropolis technologies!
- 3 Devlogs
- 10 Total hours
It's very personal to me :D also i use windows btw
This project was vetted by Shipwrights and is now up for voting. You can ship again after making more updates.
Feedback
Hello!
I love your project.
Everything looks good!
Any questions or concerns can be directed to @Jack Jacobson on slack or the #ask-the-shipwrights channel and know that we can't wait to see what you will make next!
Shipwright walkthrough
@tanzeemrockz
on
metropolis technologies!
1h 29m 22s logged
Yo guys, I just added an f1 score tracker that says what position Max Verstappen got in the last race and his total championship points this season. But OpanF1 was a pain to configure damn cuz a race just ended and it doesn’t like queries at this time lol. Anyways, this is the final project with the f1 tracker
This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.
Feedback
Hiya,
Nice project, however it seems that you've used more than 30% AI usage within this project, please get your AI usage below 30%. For example by rewriting the AI parts of your project.
Awesome project anyway! I'd love to see how this turns out!
For any other questions, create a ticket in Slack—#ask-the-shipwrights.
Shipwright walkthrough
@tanzeemrockz
on
metropolis technologies!
6h 0m 30s logged
I just built this site and i had LOTS of issues and all i wanted to do was add a favicon, bg-image, etc. After a few youtube tutorials, reading the mdn docs and w3 schools page and ESPECIALLY STACK OVERFLOW for 67 million times (not quite but), I finally got it. After tinkering with the look for a million times, i settled on a single round ish? pattern bg image and after considering a grid backgrounf for the millionth time, i just settled on that picture. The hero section also has a bg-image of an F1 car and i tried making pills in the ui using s, i found out that i can never make it shorter horizontally and i finally switched to a and now, everything finally work™!
This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.
Feedback
Hello,
Your README appears to be AI-generated, please rewrite it by hand,
Your UI also appears to be AI-generated/Vibe-coded, pleae rework it by hand.
If you have any questions, DM @kaboom or create a ticket in #ask-the-shipwrights.
Shipwright walkthrough
Ship #1
@tanzeemrockz
on
metropolis technologies!
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™ 💀
@tanzeemrockz
on
metropolis technologies!
2h 17m 3s 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™
