202 lines
7.2 KiB
HTML
202 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!--<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">-->
|
|
<link rel="stylesheet" href="index.css">
|
|
<title>thebread.dev</title>
|
|
</head>
|
|
<body>
|
|
<!--
|
|
<div id="content" class="glass-text">
|
|
<h2>soon™</h1>
|
|
<h4>have a look at my <a href="cdn.thebread.dev">cdn</a></h4>
|
|
<h4>or visit my friends <a href="https://emma.pizza">Emma</a> and <a href="https://henhaa.art">Henrik</a></h4>
|
|
</div>
|
|
-->
|
|
<div class="scroll-container">
|
|
<div class="page-bar" top="true">
|
|
<img src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo" style="height: 50%; aspect-ratio: 1; margin-left: 2em">
|
|
<h3 style="margin-left: 2em">thebread.dev</h3>
|
|
<div style="margin-left: auto; margin-right: 2em">
|
|
<label id="theme-switch" for="checkbox_theme">
|
|
<span></span>
|
|
<input type="checkbox" id="checkbox_theme">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="page" first="true">
|
|
<div></div>
|
|
<div class="flex-h center-h center-v">
|
|
<img src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo" style="width: 10vw; aspect-ratio: 1; margin-right: 5em">
|
|
<div>
|
|
<h2>Hi, I'm bread</h2>
|
|
<p>I'm a computer science student from Germany. I'm interested in</p>
|
|
<ul>
|
|
<li>Photography</li>
|
|
<li>Software Development</li>
|
|
<li>Microelectronics and repairs</li>
|
|
</ul>
|
|
<p>The languages I can currently work with:</p>
|
|
<ul class="h-list">
|
|
<li>
|
|
<span id="ts">•</span>
|
|
<span>TypeScript</span>
|
|
</li>
|
|
<li>
|
|
<span id="rs">•</span>
|
|
<span>Rust</span>
|
|
</li>
|
|
<li>
|
|
<span id="html">•</span>
|
|
<span>HTML+CSS</span>
|
|
</li>
|
|
<li>
|
|
<span id="swft">•</span>
|
|
<span>Swift</span>
|
|
</li>
|
|
<li>
|
|
<span id="sh">•</span>
|
|
<span>Shell</span>
|
|
</li>
|
|
<li>
|
|
<span id="sql">•</span>
|
|
<span>SQL</span>
|
|
</li>
|
|
<li>
|
|
<span id="c">•</span>
|
|
<span>C</span>
|
|
</li>
|
|
<li>
|
|
<span id="nix">•</span>
|
|
<span>Nix</span>
|
|
</li>
|
|
</ul>
|
|
<p>Frameworks I'm comfortable with:</p>
|
|
<ul class="h-list">
|
|
<li>
|
|
<img alt="" src="https://api.iconify.design/logos:vue.svg" />
|
|
<span>Vue</span>
|
|
</li>
|
|
<li>
|
|
<img alt="" src="https://api.iconify.design/logos:nestjs.svg" />
|
|
<span>NestJS</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="scroll-hint">
|
|
<span>⏷</span>
|
|
<span>scroll</span>
|
|
<span>⏷</span>
|
|
</div>
|
|
</div>
|
|
<div class="page" wip="true">
|
|
<div class="flex-v center-v center-h">
|
|
<h2>Gallery</h2>
|
|
<p>Most of my images are on my <a href="https://cdn.thebread.dev">cdn</a>, but I will try to "showcase" my images here as well.</p>
|
|
</div>
|
|
</div>
|
|
<div class="page">
|
|
<div class="flex-v center-v center-h">
|
|
<h2>Live Services</h2>
|
|
<div class="flex-h">
|
|
<a href="https://fixiv.net">
|
|
<div class="product">
|
|
<div class="flex-h center-v">
|
|
<h3>fxpixiv</h3>
|
|
<div class="product-placeholder-icon"></div>
|
|
</div>
|
|
<p>Pixiv embed helper</p>
|
|
</div>
|
|
</a>
|
|
<div class="product" placeholder="true">
|
|
<div class="flex-h center-v">
|
|
<div class="product-placeholder-title"></div>
|
|
<div class="product-placeholder-icon"></div>
|
|
</div>
|
|
<div class="product-placeholder-description"></div>
|
|
</div>
|
|
<div class="product" placeholder="true">
|
|
<div class="flex-h center-v">
|
|
<div class="product-placeholder-title"></div>
|
|
<div class="product-placeholder-icon"></div>
|
|
</div>
|
|
<div class="product-placeholder-description"></div>
|
|
</div>
|
|
<div class="product" placeholder="true">
|
|
<div class="flex-h center-v">
|
|
<div class="product-placeholder-title"></div>
|
|
<div class="product-placeholder-icon"></div>
|
|
</div>
|
|
<div class="product-placeholder-description"></div>
|
|
</div>
|
|
</div>
|
|
<p>These are the services currently available for use.</p>
|
|
</div>
|
|
</div>
|
|
<div class="page" wip="true">
|
|
libs and planned stuff
|
|
</div>
|
|
<div class="page" first="true">
|
|
<div></div>
|
|
<div class="flex-v center-h center-v">
|
|
<div class="flex-h center-h center-v">
|
|
<div class="flex-v center-h center-v">
|
|
<h2>Friends</h2>
|
|
<ul class="h-list">
|
|
<li><a href="https://henhaa.art">Henrik</a></li>
|
|
<li><a href="https://emma.pizza">Emma</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<div class="socials">
|
|
<a href="https://mastodon.social/@thebreadco" class="socials-tile" variant="mastodon"></a>
|
|
<a href="https://git.thebread.dev/thebreadcompany" class="socials-tile" variant="git"></a>
|
|
<a href="https://discordapp.com/users/524238008623431680" class="socials-tile" variant="discord"></a>
|
|
<a href="mailto:contact@threbread.dev" class="socials-tile" variant="email"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-bar" bottom="true">
|
|
<div style="margin-left: 2em; margin-right: auto">(c) thebread.dev 2025</div>
|
|
<div style="margin-right: 2em;" class="flex-h txt-list">
|
|
<div>Impressum</div>
|
|
<div>Datenschutzerklärung</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// shortened version of https://stackoverflow.com/a/56550819
|
|
const themeSwitch = document.querySelector('#theme-switch input[type="checkbox"]');
|
|
const themeLabel = document.querySelector('#theme-switch span');
|
|
|
|
// setup
|
|
if(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
document.documentElement.setAttribute("data-theme", "dark");
|
|
themeLabel.innerText = "🌒"
|
|
} else
|
|
themeLabel.innerText = "☀️"
|
|
|
|
|
|
function switchTheme(e) {
|
|
if(e.target.checked) {
|
|
document.documentElement.setAttribute("data-theme", "dark");
|
|
themeSwitch.checked = true;
|
|
themeLabel.innerText = "🌒"
|
|
} else {
|
|
document.documentElement.setAttribute("data-theme", "light");
|
|
themeSwitch.checked = false;
|
|
themeLabel.innerText = "☀️"
|
|
}
|
|
}
|
|
|
|
themeSwitch.addEventListener('change', switchTheme, false);
|
|
if (document.documentElement.getAttribute("data-theme") == "dark"){
|
|
themeSwitch.checked = true;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|