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 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>
|
||||
<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>
|
||||
<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>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue