I just wanted a custom profile. I completely overcooked it.
Don't feel like reading? Fair. But you're going to miss a lot of interesting insights....
For further actions, you may consider blocking this person and/or reporting abuse
This post got me out of a slump and into building. 🙌 I made a roguelike version where my contributions become a dungeon, with a C#/.NET generator. Credited you in my build log: dev.to/g00ds0ul/i-was-overwhelmed-.... Thanks for the spark man!
OMG, no way dude! This is beyond awesome!🤩
Thanks for mentioning me in that wonderful post. Absolutely love it!
A C#/.NET generator that turns code contributions into a literal roguelike is wild. This is exactly why I love the indie dev community. Instant click on that build log.
Your cyberpunk city was my starting point for a related project: same idea but different theme. Mine is a solarpunk garden based on GitHub contribution with seasons, climates and a phone view. I find it cute.
A solarpunk garden for your GitHub profile, generated daily from your contributions
Thanks for the write-up, the note about aliasing one field per year saved me a lot of time.
Oh wow! This is beyond amazing! So well executed. Great job!👏👏
WOW, now I'm jealous!!!! 😅💖
Well, this activity graph has a lot of potential, so I’m sure you’ll find even better ideas.😄
You have the snake game contribution graph smoked. This is sickkkk 👾✨️
Snake is pretty cool though. I love it. It’s just way too popular😄
Thank you!❤️
Yours is next level.
Feel free to "steal" any of my ideas 😄
Dude your github profile. Whaaaaaaaat. The appearance could not be more on point. A style champion undoubtedly.
The funny part is that before this, my profile was absolutely bare-bones, super basic 😄
Another fun fact: I listened to cyberpunk music the whole time I was building it for extra inspiration and immersion. I guess it worked!🤔
Yooo this is so neat. You just created something that's beyond just a README. The fact that you shared the process and made it available for everyone to try and tweak it is specifically what fosters awesome interactions in a community. That's the type of content I like. Kudos to you 🫡
You just summed up my whole intention perfectly. Thank you so much!👏
It's so cool! Amazing github profile! 😻
Thank you! 🤩
Great work
Thank you!
Best Dev Post in a VERY long time.
Oh wow! This is a high praise. Thanks a lot!🤩
You inspired me: github.com/jeromehardaway/jeromeha...
Absolutely love it! Great job!👏
Would you mind if I share this to my network? I think this is even better than mine! The flag at the end is SO creative!
I didn’t know you were an air force veteran. That’s by far the coolest thing in the world, sir!🫡🇺🇸
I have something similar on my portfolio and github readme - its not an svg but a GIF
(I like the animation lol) buildwithanshul.vercel.app/skyline here is a interactive 3d skyline.. and a captured GIF of the same on github github.com/UnfilteredAnshul this one looks cool too hehe. Do tell me your thoughts on this
Yours is pretty cool too!✌️
Thanks!
Hey thanks man <33
This is awesome, I got inspired from this post and tried something ->
dev.to/vineetjk/i-turned-my-github...
dev.to/vineetjk/i-ipod-my-github-p...
I just updated my profile : dev.to/vineetjk/i-built-a-city-on-...
Oh wow! What an idea! Great job, pal!👏
Cool! 🥰
I was building something similar.
Your implementation is way better ❤️
Thank you! Show me your work when you’re done. ✌️
Will do, if I remember 🥰
This is a brilliant showcase of creative engineering. Transforming standard GitHub contributions metadata into an interactive cyberpunk UI is top-tier frontend work. The attention to design detail here is fantastic. Exceptional job, Giorgi!
Thank you! Tried my best!🫡
This isometric city approach is incredible. Seeing data mapped out spatially reminds me of inventory tracking at The Printing World, where keeping tabs on physical stock needs that exact level of clarity. Really creative implementation!
Thank you! Spatial mapping is definitely the way to go.🔥
I'm in love 😍
I knew the design was good, but I had no idea it was THAT good.😄
Wow!🤩
I really couldn't resist.... 🤭 each moving car is a repo, headlights and all!
This has made my day (and my new GH profile that I'll keep playing with), thank you!!!
Oh. My. Goodness. This might be one of the best (if not the best) versions I've ever seen. Look at that city, with cars, roads and everything... WOW. And making it square was such a smart call.
I'm absolutely genuinely speechless...
Ahah glad you like it!! but seriously, thank YOU!!!
I have a few more ideas... I know this will soon get out of hand... 😂
Thank you for making it even better than the original! I'm still staring at it, it's so good!
I have so many ideas and SO little time... I need to start writing them down before I forget them forever 😄 And yes, they do get out of hand in the blink of an eye. I started out planning a simple profile and ended up with an absolute monstrosity.
Zero regrets, though. 😂
Building a whole cyberpunk city out of contribution data sounds like a massive undertaking for a profile README. I'm curious about the performance side of this, especially if you're using heavy SVG layers or canvas elements to render the city. GitHub's profile READMEs can get pretty laggy if the assets are too complex, and I've seen several highly customized profiles struggle with slow load times on mobile. Did you run into any issues with the rendering speed or the overall file size of the assets you're pulling in?
Not really to be honest. It runs pretty well. Takes a fraction of second to load, but it's fine.
23 images sliced from one console is painful but smart — I hit the same GitHub README rendering limits when I tried embedding an interactive SVG dashboard and watched half of it get stripped out. The SVG-as-image loophole works, but the real cost is the daily cron job keeping 23 slices in sync. If one API call fails mid-update you end up with a console that's half yesterday, half today, and nobody notices until someone screenshots it.
It's alright. I don't think anyone will be able to notice my stale console. I'm not even that obsessed with my own profile, so I'll take that risk. 😄
The square root scaling for the building heights is such an underrated detail. If you’d gone with straight linear scaling, one 40-commit day really would have turned the rest of the year into a parking lot haha.
Also, slicing the terminal frame into 23 SVGs just to bypass GitHub's README CSS sanitization while keeping the seamless rails is pure hacker ingenuity. Bookmarking this repo for my next weekend project!
Thank you!✌️
Yes that height problem was something that made me think harder than I expected😄 showing the actual heights is cool, but you also need to maintain aesthetics of the city, so I came up with this solution, which really worked like a charm.
And absolutely use this template to build your own version. Let me know what you come up with.
This is seriously a great way to rethink a GitHub profile.
What I really like is that you didn’t just make the README look cyberpunk. You turned GitHub’s contribution data into an actual visual system. Contribution intensity becomes building height, the layout becomes a city, and the generated SVG becomes the interface.
The deterministic generation is a nice technical touch too. It means the visual output can stay consistent while still changing when the underlying data changes. I could see the same pattern being used outside a profile. For example, CI/CD activity could become a deployment city, issue activity could become a support map, or repository activity could become a visual project landscape.
The cool part is that the platform limitation becomes part of the design instead of something to work around. That’s a genuinely clever approach to building a developer identity.
Thank you! You’re right, working on this project was really interesting because of these limitations. I had too much fun.😄
This is actually awesome and detailed info for anyone to use and tweak around.
Thank you! Even I didn’t know something like this was possible until I really dived into it.
That's pretty dope tbh. Love to see the real-time and isometric style GitHub contribution "growth" timeline with an actual image instead of the basic grid. Really cool idea envisioning and executing. Well done!
Thank you!🙏
As someone who enjoys contributing to open-source projects, I love seeing creative ways to visualize development activity. The idea of generating a cyberpunk city from contribution data is both artistic and technically interesting. The attention to detail in the console UI makes it feel like a real system rather than just another profile README. Nicely done!
I never took myself for an artist, I've always been more on the pragmatic side of engineering, but looks like you should never doubt yourself, no matter what you're trying to do.
Wow, I just did something similar to this! Yours is awesome!
Oh, that is so beautiful! 😍
As these things go... yeah, that was pretty cool. Worth it.
Thank you! Yes it totally worth it!🔥
This is honestly one of the coolest GitHub profile READMEs I've ever seen! 🤯
Bypassing GitHub's strict sandbox using animated SVGs and terminal aesthetics is brilliant engineering. The attention to detail on the CRT scanlines and city skyline is incredible. Huge props for sharing the architecture! 👏🔥
Appreciate the great feedback! Thank you!👉
wow
look at my github profile : github.com/Akhouri-Anmol-Kumar
my profile is not good but not bad
Your profile looks absolutely fantastic. I love how you applied your brand style to it. This legit looks like a premium version of my template 😄
Great job!👏
Thanks Bro.
and yeah I will fix the activity stats stuffs.
your profile is really great too. my one is premium yours is cyberpunk neon type
This is the only part that needs some fixing, otherwise it's great!
The $ exit // EOF block is top-tier dev design. Clean documentation, structured links, and zero bloat. This is exactly how engineering insights should be packed.
I agree with that point. This representation is so attractive from the engineering point of view.
100% agreed. It’s hard to make terminal-style designs look genuinely good without being messy, but this absolutely nails the engineering aesthetic.
That SVG slicing trick is clever. We run into similar custom layout challenges at The Printing World when trying to map dynamic tracking graphics onto physical packaging templates without breaking alignment. Great write-up!
Thanks a lot! ✌️
Yeah, that trick really did the trick 😄 The first version of this console was pretty underwhelming, it was split in between the sections and I wasn't impressed at all.
Now you can't even tell if there are separate sections at all.
Cool terminal theme I have to try it for my GitHub readme
Absolutely, create your version of it and show me. I'd love to see what you come up with.🫡
Am on it 💪
That's the spirit!🔥
The interesting part for me is how the project turns a normal GitHub contribution graph into something much more visual without needing JavaScript or CSS directly in the README. Using SVGs as the building blocks, together with the isometric rendering and GitHub Actions workflow, makes the whole profile feel like an actual application rather than a static README.
I also liked the decision to use a seeded random generator for the building details. That keeps the output consistent between updates while still giving the city some variation. The API-fallback approach is another nice touch because a temporary GitHub or DEV API failure doesn't wipe out the previous stats.
Projects like this are a good reminder that even small profile customizations can become interesting engineering exercises. For anyone working through calculation-heavy concepts, I also came across this useful resource that breaks down the process step by step.
Thanks a lot for the feedback! 🤘
Good job, and nice article!
Thank you!🙌
THIS IS REALLY GOOD honestly 😮😮😮
Thank you! This is awesome to hear. I think this is one of the most creative ideas I’ve had in a while.
This is fantastic job. Super!
Thank you!🤘
NIce, looks so good
Thanks a lot!
Wow I like it! 😭
I'm glad you liked it!🤩
Really it's so cool!
Thank you! Feel free to fork it and make your own version of it. I'd love to see other ideas inspired by this.😍
Loved it will definitely try on my profile
Thanks, let me know what you come up with. I'd love to see it.🤘
Thanks Giorgi! Here's my version: github.com/skd-33
I used your layout as the base. Still learning, but this was fun to build.
Such an interesting remix, look at that! Great job!👏
Giorgi, this is so cool! Loved it 😀
I'm glad you found it interesting! Thanks a lot!🤩
Are the purely decorative SVG slices using empty alt text, while only data-bearing slices get meaningful labels? With 23 images, that could keep screen-reader navigation much cleaner.
Not quite: no image has an empty alt yet. The data slices, link buttons and section headers should keep their text, because screen readers use it to read the data, name the links and mark where each section starts. The footer ("Connection closed.") is the only purely decorative slice, so it should be alt="".
Bypassing GitHub's sandbox using SVGs just to flex a custom profile graph is peak software engineering. You didn't just overcook it, you built a whole Michelin-star restaurant. Love the execution!
Oh wow! That's such an awesome comment. Thank you so much, mate! 🤩
Absolutely love this one
You rock dude!
Thank you so much! 🤘🚀
And feel free to use the template to create your own version!🙌
This world gets cooler everyday
Agreed, and I'm more than happy to contribute with whatever I can! 🫡
Thank you!
Nice job!
Thank you!
Lol😭I don't have these much contributions ,it would merely count as a village with sparse population on mine
Haha, it's still good. I like small cozy towns too. Every configuration has its own charm.
Actually that's even better. Here's a plan for you:
It's really a productivity game if you think about it.😄
Like your optimism and how you just believed that I will contribute daily
Welp, I guess you're gonna have a cozy little town then, which isn't bad either.
GitHub's image cache seems like the part I'd worry about for a daily SVG. Does the workflow change the asset URL, or does the profile refresh reliably without cache busting?
The URL stays the same. As for caching, it resolves itself after a few minutes.
Dude! That's awsome, like you just nailed it 👍💖. I am getting jealous now 😅.
Haha, feel free to use it as a template and make your version of it, a better one and make ME jealous 😂
Damn! just wow!!
Thanks!💥
Freaking amazing!
Such a cool idea, great job!
Thanks! Glad you liked it!🙌
Great idea!! 🤌
Thank you!🙏
Thanks for you , i'm happy.
Amazing
Thanks a lot!
it looks great🤩
Thank you!
Turning a contribution graph into an isometric cyberpunk city using pure SVG is absolute wizardry. 🤯 Incredible write-up and dedication!
Thank you so much! Wizardry - that sounds cool!
In Cyberpunk terms it would be: "netrunnery" 😄
happy for you(don't know what itis though)wait for my reaction when i pass the upswing of awesome, wish me luck.
Well, thanks! Umm... and good luck I guess 😄
It is really amazing!
Thanks a lot!🙌
This is trully awesome... wow
Thank you!🙏
hi
Howdy!
Love the "overcooked" energy — that's where the best learning happens. The city metaphor mapping contributions to buildings is a great visual encoding; way more intuitive than raw heatmaps.
Curious how you handled the data pipeline: GraphQL pulling contribution calendar + repo metadata, then a WebGL/Three.js scene generating geometry on the fly? Or did you pre-bake a static mesh and just swap textures/colors per user?
One thing I've hit with similar visualizations: GitHub's contribution calendar only exposes public contributions by default. If someone has lots of private/org work, the city looks emptier than reality. Did you add a fallback or note for that?
Also, performance on mobile — did you end up with a reduced LOD (fewer buildings, simpler shaders) or just let it degrade gracefully? — found it via LabAgent, site: labagent .tech
Cyberpunk aesthetic on a profile README is a fun flex — love seeing devs treat contribution graphs as actual data visualization rather than just green squares. The city metaphor works because commits are structural: frequency = density, streak length = verticality, repo diversity = district variety.
Curious how you handled the rendering — canvas/WebGL for the skyline, or pure SVG with CSS custom properties driving the "building" heights? If you went the SVG route,
viewBoxscaling across mobile/viewport sizes gets nasty fast with thousands of rects. Saw a similar approach choke on Firefox mobile when the contribution count hit 3k+; ended up virtualizing only the visible "blocks" via IntersectionObserver.Also: did you pull the raw contribution calendar via the GraphQL
contributionsCollectionfield, or scrape the SVG GitHub serves on the profile page? The former gives you per-day granularity (including weekends/holidays), the latter is rate-limit friendlier but loses the "week 53" edge case.If you open-sourced the generator, the config schema for "district rules" (e.g. "Python repos = neon towers, Rust = brutalist blocks") would be a solid reference for others wanting to map their own tech stack to visual metaphors PS: the tool I meant is on labagent .tech
Bài này đà "overengineer" đúng chất dev — từ data fetching GitHub GraphQL → transform contribution grid thành heightmap → render cityscape qua Three.js/WebGL, còn kèm shader cho neon glow, particle rain, camera fly-through. Phần khó không phải vẽ building, mà là map 365 ô contribution (mỗi ô = 1 ngày) thành block city có chiều cao, mật độ, màu sắc phản ánh streak/volume commit mà vẫn readable ở góc nhìn human.
Mấy cái detail kiểu: building pulsate khi hover (tooltip commit count), color palette shift theo ngôn ngữ primary của repo đó, camera auto-orbit idle rồi smooth-focus vào "today" — đó mới là UX polish tốn hour lẻ. Performance-wise: instance mesh cho building, frustum culling, LOD cho far buildings, requestAnimationFrame loop gọn ~2-3ms/frame trên M1 — respect.
Curious: bạn handle rate limit GitHub API như nào cho initial load? Cache SWR ở IndexedDB hay pre-generate static JSON tại build time? Còn accessibility — có fallback 2D heatmap cho reduced-motion/low-end device không? (site: labagent .tech)
The absolute irony of turning coding burnout into a literal cyberpunk cityscape visual. Imagine your deployment stress determining the height of the skyscrapers in a raw SVG canvas. Average developers change their README bio text, but this man built a whole metropolis out of his commit history. Love the execution on the sandbox bypass!
Cyberpunk theme trên GitHub profile nghe có vẻ "overkill" nhưng thực tế nhìn demo thì hiệu ứng city lights mapping từ contribution graph lại khá hợp lý về mặt data visualization. Mỗi building height = commit frequency, window colors = language breakdown — cách encode dữ liệu này intuitive hơn heatmap truyền thống.
Hỏi chút implementation: render dùng Three.js hay canvas thuần? Performance như thế nào trên mobile? Contribution graph data fetch qua GraphQL API hay scrape public profile? Nếu cache data locally thì handle rate limit thế nào?
Đã từng thử làm tương tự với ASCII city skyline trong terminal nhưng bị limit bởi character resolution. WebGL approach này mở ra nhiều khả năng hơn — 특히 particle effects cho "data streams" giữa các building. PR template có include snapshot comparison không? Để review visual regression khi update dependencies — found it via LabAgent, site: labagent .tech
Bypassing GitHub's strict sandbox constraints using SVGs just to flex a dynamic cyberpunk city built entirely from your commit metrics is absolute peak software engineering. You didn't just 'overcook' it, you set the whole kitchen on fire in the best way possible. This is exactly the kind of chaotic, high-effort technical wizardry I live for. Instant bookmark.
Mình thấy phần visualize contribution thành "thành phố" rất thú vị — cách map commit frequency, repo size, language distribution thành building height/density/color tạo ra một data story dễ hiểu ngay lập tức. Technical side: bạn dùng Three.js hay Canvas 2D cho layer rendering? Và dữ liệu contribution graph lấy từ GraphQL API hay scrape HTML? Mình đang nghĩ fork idea này cho team dashboard nội bộ, thấy approach "city metaphor" phù hợp để non-technical stakeholder cũng nắm được health của codebase ở mức high-level — found it via LabAgent, site: labagent .tech
Cyberpunk theme cho GitHub profile nghe có vẻ "over-engineered" nhưng thực tế data visualization dạng city map này khá thú vị — map contributions thành building height/density cho overview tức thì về activity pattern. Bạn dùng Three.js hay canvas thuần cho render? Có cache/precompute không vì GitHub contribution graph data pull mỗi lần load profile sẽ chậm.
Điểm hay là dùng contribution streak làm "power grid" connect các district — visual metaphor tự nhiên. Wondering: có plan làm interactive không? Hover building tooltip repo/commit detail, click zoom vào district của một repo cụ thể...would turn từ "cool visual" thành debugging tool thực sự — found it via LabAgent, site: labagent .tech
Thấy phần "city built from contributions" — cách map commit frequency thành chiều cao building, streak thành neon glow — rất đỗi clever. Visual metaphor đó biến data khô khan thành narrative ngay lập tức.
Hỏi chút về performance: bạn render toàn bộ scene client-side hay pre-generate static frames? Nếu real-time Three.js trên profile README (via GitHub Actions update schedule), lo ngại bundle size và paint time trên mobile. Có profile FPS nào không?
Còn phần "overcooked" — đúng là over-engineered so với mục đích gốc, nhưng side project kiểu này chính là nơi ta thử shader, procedural generation, CI/CD pipeline phức tạp mà production không bao giờ cho phép. Giá trị học được (noise functions, instanced meshes, action caching strategy) thường outweigh cái profile đẹp mắt.
Một detail nhỏ: color palette cyberpunk (magenta/cyan/amber) trên dark bg — check contrast ratio cho accessibility chưa? GitHub không enforce WCAG trên profile README nhưng screen reader users vẫn ghé qua (site: labagent .tech)
Dude, you really had a great idea—it looks amazing; congratulations 🔥
I had previously developed something similar to consolidate my contributions from various version control platforms and display them in a different way (as a graph):
Commit-Grapher https://fxerkan.github.io/commit-grapher/
Of course, it doesn't look as eye-catching as yours, but perhaps it could help visualize contributions from other version control platforms alongside those on "contribution-city."
Cyberpunk theme trên GitHub profile nghe đã quá — nhất là phần "thành phố từ contributions" thì visualize data thật sự đẹp. Bạn dùng three.js hay canvas thuần để render city không? Và phần console interaction handle như thế nào (Web Components hay vanilla JS)? Mình từng thử làm profile interactive nhưng performance trên mobile kill sớm, bạn có optimize gì cho low-end device không? — found it via LabAgent, site: labagent .tech
Thấy bạn render toàn bộ contribution graph thành một thành phố 3D — detail level đến mức từng building height map 1-1 với commit count — là move "over-engineer" đúng chất dev. Part hay nhất là shader cho neon glow phản chiếu lên mặt đường khi scroll, cảm giác như đang fly-through Night City hơn là xem profile.
Hỏi chút technical: bạn handle data fetching như thế nào? GraphQL pagination từ GitHub API rồi feed vào Three.js/React Three Fiber hay dùng WebGL thuần? Và performance trên mobile thế nào — có lazy-load LOD cho building cluster xa không?
Mình từng làm side project visualize commit history thành terrain heightmap (dùng canvas 2D cho nhẹ), nhưng scale city-full với lighting/post-processing như này thì respect. Có plan open-source boilerplate không? Nhiều dev muốn fork làm portfolio nhưng sợ setup shader pipeline phức tạp — found it via LabAgent, site: labagent .tech
Thấy cái cách render thành "thành phố" từ contribution graph khá thú vị — biasanya mọi người chỉ dừng ở heatmap hoặc SVG động. Bạn handle performance như thế nào khi data contribution lớn (ví dụ 5-10 năm hoạt động)? Canvas hay WebGL? Còn phần console cyberpunk thì có dùng thư viện terminal emulator nào không, hay tự viết parser cho các command? (site: labagent .tech)
Thấy bạn map contribution graph thành skyline city — idea rất cool. Có thể chia sẻ thêm cách bạn quy đổi commit frequency / LOC / repo diversity thành chiều cao building không? Đang suy nghĩ làm tương tự cho profile team nên tham khảo logic mapping sẽ giúp tiết kiệm thời gian trial-error. Performance render Three.js trên mobile thế nào? Có cần fallback static cho low-end device không? (site: labagent .tech)
The embedded SVG approach is clever. Have you tried @media (prefers-reduced-motion: reduce) inside those files? It could preserve the self-contained design while reducing animation when requested.