layout and sketching
This commit is contained in:
parent
eb001a377d
commit
bec504d904
1 changed files with 147 additions and 41 deletions
188
index.html
188
index.html
|
|
@ -4,53 +4,159 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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="https://code.cdn.mozilla.net/fonts/fira.css">
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
<title>thebread.dev</title>
|
<title>thebread.dev</title>
|
||||||
<style>
|
|
||||||
html {
|
|
||||||
background-image: url('https://cdn.thebread.dev/photos/.IMG_2206.JPG.webp');
|
|
||||||
font-family: "Fira sans", sans-serif;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
color: white;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: unset;
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: unset;
|
|
||||||
}
|
|
||||||
.glass-text {
|
|
||||||
font-size: 5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
position: relative;
|
|
||||||
color: rgba(255, 255, 255, 0.8);;
|
|
||||||
}
|
|
||||||
.glass-text::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!--
|
||||||
<div id="content" class="glass-text">
|
<div id="content" class="glass-text">
|
||||||
<h2>soon™</h1>
|
<h2>soon™</h1>
|
||||||
<h4>have a look at my <a href="cdn.thebread.dev">cdn</a></h4>
|
<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>
|
<h4>or visit my friends <a href="https://emma.pizza">Emma</a> and <a href="https://henhaa.art">Henrik</a></h4>
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue