Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Revamped my personal GitHub profile readme! 🎉 I’ve made a fully responsive website inside an SVG, loaded as an image, using HTML, inside markdown, inside a readme.md. Not only is it interactive and supports light/dark mode, but it also includes a fallback for Firefox😂#github

Terkel 𓀒

3,234 subscribers

395,008 views • 2 years ago •via X (Twitter)

Education Science & Technology Comedy #github

Anya Rossi• Live Now

Private livecam show

10 Comments

Terkel Gjervig2 years ago

The animated contribution graph reflects actual data and is updated twice daily with GitHub Actions.

Terkel Gjervig2 years ago

It even works in the GitHub iOS app 🤷

Terkel Gjervig2 years ago

I love undertaking these kinds of absurd projects as they are an exercise in finding creative solutions to technical limitations.

Terkel Gjervig2 years ago

Take a peek at the project and grab the source code from my GitHub: Heads up, though – no promises it'll play nice with every browser or device out there!

Neil Pullman2 years ago

webdev is over. I’m strictly readmedev in 2024

Terkel Gjervig2 years ago

Haha 😂

andrew‏2 years ago

GitHub final boss

Terkel Gjervig2 years ago

😂

EGOIST2 years ago

When is this SVG based frontend framework gonna be released 🤤

Terkel Gjervig2 years ago

Hold my beer ....

Related Videos

it's incredible what you can do with html/css inside of a <foreignobject> inside of a <svg> inside of a <picture> inside of a <img> inside of a markdown file inside of your gitHub readme

it's incredible what you can do with html/css inside of a <foreignobject> inside of a <svg> inside of a <picture> inside of a <img> inside of a markdown file inside of your gitHub readme

scalar

62,718 views • 1 year ago

FINALLY!!! Built this Exclusive Fully Responsive Animated Multifunctional Portfolio Website with Light/Dark mode using HTML, CSS & Javascript How's it? Drop your comments 😊 SOURCE CODE 👇

FINALLY!!! Built this Exclusive Fully Responsive Animated Multifunctional Portfolio Website with Light/Dark mode using HTML, CSS & Javascript How's it? Drop your comments 😊 SOURCE CODE 👇

Raja - impeccify.com 🚀

192,258 views • 3 years ago

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

𝘼𝙈𝘼𝙂𝙄

51,990 views • 1 month ago

Looking for your first job in tech? Your GitHub profile could help you stand out. ✨ Learn how to optimize your bio, profile README, and pinned projects to effectively showcase your skills and impress recruiters. 🚀 Here’s a guide to show you how. 💡

GitHub

24,134 views • 1 year ago

You can now use Claude Code and GitHub CLI directly inside Perplexity Computer. We gave it an open issue on Openclaw. Computer: → Forked the repo → Wrote a plan to fix the bug → Opened Claude Code and implemented it → Submitted a PR via GitHub CLI

You can now use Claude Code and GitHub CLI directly inside Perplexity Computer. We gave it an open issue on Openclaw. Computer: → Forked the repo → Wrote a plan to fix the bug → Opened Claude Code and implemented it → Submitted a PR via GitHub CLI

Computer

416,162 views • 3 months ago

I got annoyed at how many steps it takes to save an SVG as an upscaled PNG, so I made a website that does it for free.

I got annoyed at how many steps it takes to save an SVG as an upscaled PNG, so I made a website that does it for free.

Theo - t3.gg

304,434 views • 1 year ago

we built pookie it's a helper that lives inside Slack it can search messages, generate memes, run code, and connect to your tools (Linear, GitHub, Stripe, even my bank!) fully open source and self hostable

we built pookie it's a helper that lives inside Slack it can search messages, generate memes, run code, and connect to your tools (Linear, GitHub, Stripe, even my bank!) fully open source and self hostable

Aiden Bai

45,831 views • 1 month ago

I turned Thariq's article into an interactive HTML! I was a markdown boy but since I started working at Microsoft I'm using HTML more and more. Our engineers love to send AI-generated HTML to coordinate between SWE/PM on projects since it's easier to read than markdown.

I turned Thariq's article into an interactive HTML! I was a markdown boy but since I started working at Microsoft I'm using HTML more and more. Our engineers love to send AI-generated HTML to coordinate between SWE/PM on projects since it's easier to read than markdown.

Nicolas Bustamante

148,489 views • 1 month ago

zWallet v0.0.1 is an onchain wallet. It is fully open-source. And so simple, it fits inside an html file on IPFS. Rooted on ens.eth, with all of its data sourced and guarded by smart contracts. It is more secure by default.

zWallet v0.0.1 is an onchain wallet. It is fully open-source. And so simple, it fits inside an html file on IPFS. Rooted on ens.eth, with all of its data sourced and guarded by smart contracts. It is more secure by default.

ross.wei

48,027 views • 9 months ago

3. Project Starline is now Google Beam Originally a 3D video chat booth, it has been rebranded as Google Beam and will soon launch inside an HP-branded device, using a light field display and six cameras to create a 3D image of the person you’re chatting with on a video call.

3. Project Starline is now Google Beam Originally a 3D video chat booth, it has been rebranded as Google Beam and will soon launch inside an HP-branded device, using a light field display and six cameras to create a 3D image of the person you’re chatting with on a video call.

Gina Acosta

36,811 views • 1 year ago

inside is not only a beautiful game, it's also perfect for a relaxing break

inside is not only a beautiful game, it's also perfect for a relaxing break

Aurelien

61,575 views • 1 year ago

Using only a GIF, what’s it like inside your head.

Using only a GIF, what’s it like inside your head.

Ordnance Jay Packard Esq. (オードナンス・ジェイ・パッカード)

23,821 views • 4 months ago

The best agent is now open source. II-Agent is now live on GitHub. From a single prompt to a mobile app. From a research brief to an interactive website. From skills to real workflows. Fork it. Extend it. Show us what you build.

The best agent is now open source. II-Agent is now live on GitHub. From a single prompt to a mobile app. From a research brief to an interactive website. From skills to real workflows. Fork it. Extend it. Show us what you build.

Intelligent Internet

20,400 views • 2 months ago

Just remembered, I had made a #threejs html bridge last year using svg foreign object but didn't share Asked claude to finish and deploy it, it did, its now making a plugin for threepipe HTML rendering within a canvas with support for interaction and css animations. link...

Just remembered, I had made a #threejs html bridge last year using svg foreign object but didn't share Asked claude to finish and deploy it, it did, its now making a plugin for threepipe HTML rendering within a canvas with support for interaction and css animations. link...

Palash Bansal

14,436 views • 5 months ago

SparseBox+ v0.1 is out now! Only for iOS 16.0 - 26.1. Download: I took Duy Tran's SparseBox and wrapped it in a much more proper UI! Also included are some extra QoL features. Please read the readme for an important disclaimer regarding StikDebug!

SparseBox+ v0.1 is out now! Only for iOS 16.0 - 26.1. Download: I took Duy Tran's SparseBox and wrapped it in a much more proper UI! Also included are some extra QoL features. Please read the readme for an important disclaimer regarding StikDebug!

lunginspector

40,295 views • 4 months ago

Introducing React Native Enriched Markdown – a new React Native Enriched package by Gregory Moskaliuk! 🚀 It’s a fully native Markdown renderer for React Native that makes Markdown content feel like a first-class part of your app’s UI. ⚡ Purely native performance – lightning-fast parsing with md4c and 100% native text components ✨ Native text & image interactions (select, copy, translate, save, etc.) 📝 Smart rich-text copy (HTML/RTF) + “Copy as Markdown” option 🔗 GitHub link in the 🧵. If you find it useful, a ⭐would mean a lot!

Introducing React Native Enriched Markdown – a new React Native Enriched package by Gregory Moskaliuk! 🚀 It’s a fully native Markdown renderer for React Native that makes Markdown content feel like a first-class part of your app’s UI. ⚡ Purely native performance – lightning-fast parsing with md4c and 100% native text components ✨ Native text & image interactions (select, copy, translate, save, etc.) 📝 Smart rich-text copy (HTML/RTF) + “Copy as Markdown” option 🔗 GitHub link in the 🧵. If you find it useful, a ⭐would mean a lot!

Software Mansion

26,723 views • 4 months ago

The GitHub Copilot CLI is wild. I've never built an iOS app before, but I wanted something that would store my TODO's as GitHub Issues. A few minutes later built it and then talked me through getting it deployed to my phone - INCLUDING setting up oauth login 🤯

The GitHub Copilot CLI is wild. I've never built an iOS app before, but I wanted something that would store my TODO's as GitHub Issues. A few minutes later built it and then talked me through getting it deployed to my phone - INCLUDING setting up oauth login 🤯

Martin Woodward

120,229 views • 4 months ago

Want to build an OpenAI chatbot? Use Chatbot UI! It’s a simple, fully-functional chatbot starter kit using Next.js, TypeScript, and Tailwind CSS. Clone it and start building instantly. GitHub:

Want to build an OpenAI chatbot? Use Chatbot UI! It’s a simple, fully-functional chatbot starter kit using Next.js, TypeScript, and Tailwind CSS. Clone it and start building instantly. GitHub:

Mckay Wrigley

97,807 views • 3 years ago

This is my go-to squat routine. It supports the squat, but it’s also a full practice on its own. Everything happens inside the position. That’s where control, range, and options are built. Save it, practice it.

This is my go-to squat routine. It supports the squat, but it’s also a full practice on its own. Everything happens inside the position. That’s where control, range, and options are built. Save it, practice it.

Cardio Arena

105,963 views • 4 months ago