162 lines
6.6 KiB
HTML
162 lines
6.6 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" first="true">
|
|
<div class="page-bar" bottom="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 style="display: flex; justify-content: center; align-items: center">
|
|
<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 currently know (from best to worst):</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="bash">•</span>
|
|
<span>Bash</span>
|
|
</li>
|
|
<li>
|
|
<span id="c">•</span>
|
|
<span>C</span>
|
|
</li>
|
|
<li>
|
|
<span id="nix">•</span>
|
|
<span>Nix</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="scroll-hint">
|
|
<span>⏷</span>
|
|
<span>scroll</span>
|
|
<span>⏷</span>
|
|
</div>
|
|
</div>
|
|
<div class="page">
|
|
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
|
<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 style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
|
<h2>Live Services</h2>
|
|
<div class="display: flex; flex-direction: row;">
|
|
<div class="product">
|
|
<div style="display: flex; align-items: center">
|
|
<h3>fxpixiv</h3>
|
|
<div style="width: 50px; height: 50px; background-color: lightgray; margin-left: auto; border-radius: 4px"></div>
|
|
</div>
|
|
<p>Pixiv embed helper</p>
|
|
</div>
|
|
<div class="product" placeholder="true">
|
|
<div style="display: flex; align-items: center">
|
|
<div style="width: 70px; height: 16px; background-color: lightgray; border-radius: 4px; margin: 18.72px 0"></div>
|
|
<div style="width: 50px; height: 50px; background-color: lightgray; margin-left: auto; border-radius: 4px"></div>
|
|
</div>
|
|
<div style="width: 120px; height: 16px; background-color: lightgray; margin-right: auto; margin-top: 16px; margin-bottom: 16px; border-radius: 4px"></div>
|
|
</div>
|
|
<div class="product" placeholder="true">
|
|
<div style="display: flex; align-items: center">
|
|
<div style="width: 70px; height: 16px; background-color: lightgray; border-radius: 4px; margin: 18.72px 0"></div>
|
|
<div style="width: 50px; height: 50px; background-color: lightgray; margin-left: auto; border-radius: 4px"></div>
|
|
</div>
|
|
<div style="width: 120px; height: 16px; background-color: lightgray; margin-right: auto; margin-top: 16px; margin-bottom: 16px; border-radius: 4px"></div>
|
|
</div>
|
|
<div class="product" placeholder="true">
|
|
<div style="display: flex; align-items: center">
|
|
<div style="width: 70px; height: 16px; background-color: lightgray; border-radius: 4px; margin: 18.72px 0"></div>
|
|
<div style="width: 50px; height: 50px; background-color: lightgray; margin-left: auto; border-radius: 4px"></div>
|
|
</div>
|
|
<div style="width: 120px; height: 16px; background-color: lightgray; margin-right: auto; margin-top: 16px; margin-bottom: 16px; border-radius: 4px"></div>
|
|
</div>
|
|
</div>
|
|
<p>These are the services currently available for use.</p>
|
|
</div>
|
|
</div>
|
|
<div class="page">
|
|
libs and planned stuff
|
|
</div>
|
|
<div class="page" first="true">
|
|
<div></div>
|
|
others, references, social media
|
|
<div class="page-bar" top="true">
|
|
</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>
|