Skip to content

NissonCX/death-stranding-profile

Repository files navigation

Death Stranding GitHub Profile

An intricate, Death Stranding-inspired aesthetic visualization tool for your GitHub Profile README. Render your contributions, languages, and statistics as highly customized, game-themed SVGs.

Built with vinext (Vite + Next.js), React 19, and optimized for Cloudflare Workers.

๐ŸŒŸ Visualizations (Previews)

Below are live previews of the generated SVGs using the GitHub username torvalds (Linux creator Linus Torvalds). You can use these endpoints in your GitHub profile README.md to display your dynamically updating stats by replacing torvalds with your own GitHub username.

๐Ÿ”ฅ Header & Separator

Introduce your profile with the iconic aesthetic.

Header Separator

๐Ÿ“Š Git Stats & Languages

Detailed analytical readouts of your coding history.

Stats Languages

๐Ÿ—บ๏ธ Isometric Heatmap & Contributions

Your daily commits translated into a topographical map.

Heatmap Contributions Box

๐Ÿฆถ Footer

End your profile transmission.

Footer


โœจ Features & Architecture

  • Chiral Aesthetic (Pure SVG): Handcrafted cut-corner polygons, animated scanlines, and the authentic color palette (Bridges Cyan #1EA5C7 & Porter Gold #FBC02D) natively drawn via SVG. No heavy headless browsers.
  • Embedded Web Fonts: The iconic Sackers Gothic font is encoded and baked directly into the SVG as base64, ensuring it renders flawlessly on the GitHub markdown engine across all operating systems.
  • Dynamic Content & Caching: Connects seamlessly with the GitHub GraphQL & REST APIs to map your commits, PRs, stars, and language stats.
  • Edge Deployment: Built on Next.js App Router API design but fully ported to run on Cloudflare Workers edge nodes. This ensures ultra-fast, zero-cold-start delivery generation.

โš™๏ธ Cuff-Links API Endpoints

You can dynamically customize your profile terminal by appending these parameters to the generator URLs of your deployed instance. Everything natively stacks vertically using standard <p align="center"><img>... arrays in your README.

Endpoint Parameters & Uses
/api/header/<username> ?hideAvatar=true - Omits your GitHub profile picture to create a cleaner, data-only wide terminal banner.
/api/text Build your custom dossier. Use ?title= for the category header, and ?lines=... with ;; as line-breaks.
(e.g., ?title=PERSONNEL_FILE&lines=ROLE:%20PORTER;;LIFESPAN:%2024)
/api/separator/<username> ?style=strand - Draws a structural dotted connection strand.
?style=chiral - Renders an ambient Chiral matter transition bar.
/api/stats/<username> Fully localized dynamic assessment grade (S/A/B/C) evaluating your commits, PR merges, and repo connections.

๐Ÿ› ๏ธ Tech Stack

  • vinext (Vite-based Next.js Alternative)
  • React 19 RSC (React Server Components)
  • Tailwind CSS 4
  • Cloudflare Workers
  • opentype.js (Font-to-path baking for pristine SVG typography)

๐Ÿ™ Acknowledgements

This project was built on the shoulders of porters who connected the network before us. Special thanks to:

  • CommitCraft by WJZ-P: A huge inspiration for the concept of bringing immersive game-like data visualizers into GitHub repository READMEs.
  • death-stranding-ui by flagrede: The foundational CSS and aesthetic guidelines that made replicating the Cuff-Links feel possible in web formats.

Building bridges, one pull request at a time.

About

An intricate, Death Stranding-inspired aesthetic visualization generator for your GitHub Profile README. ๐Ÿ“ฆ๐ŸŒง๏ธ

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors