theBreadCompany/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

more layouts, darkmode, css classes, colors, ...

Browse source
This commit is contained in:
theBreadCompany 2025-05-06 01:22:09 +02:00
parent bec504d904
commit 90eb5ef600
1 changed files with 75 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
index.html
View file

@ -3,7 +3,7 @@
<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="https://code.cdn.mozilla.net/fonts/fira.css">-->
<link rel="stylesheet" href="index.css">
<title>thebread.dev</title>
</head>
@ -16,8 +16,7 @@
</div>
-->
<div class="scroll-container">
<div class="page" first="true">
<div class="page-bar" bottom="true">
<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">
@ -27,7 +26,9 @@
</label>
</div>
</div>
<div style="display: flex; justify-content: center; align-items: center">
<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>
@ -37,7 +38,7 @@
<li>Software Development</li>
<li>Microelectronics and repairs</li>
</ul>
<p>The languages I currently know (from best to worst):</p>
<p>The languages I can currently work with:</p>
<ul class="h-list">
<li>
<span id="ts">&bull;</span>
@ -56,8 +57,12 @@
<span>Swift</span>
</li>
<li>
<span id="bash">&bull;</span>
<span>Bash</span>
<span id="sh">&bull;</span>
<span>Shell</span>
</li>
<li>
<span id="sql">&bull;</span>
<span>SQL</span>
</li>
<li>
<span id="c">&bull;</span>
@ -68,6 +73,17 @@
<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">
@ -76,55 +92,79 @@
<span>⏷</span>
</div>
</div>
<div class="page">
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
<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>
<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">
<div class="flex-v center-v center-h">
<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 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>
<p>Pixiv embed helper</p>
</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 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 class="flex-h center-v">
<div class="product-placeholder-title"></div>
<div class="product-placeholder-icon"></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 class="product-placeholder-description"></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 class="flex-h center-v">
<div class="product-placeholder-title"></div>
<div class="product-placeholder-icon"></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 class="product-placeholder-description"></div>
</div>
</div>
<p>These are the services currently available for use.</p>
</div>
</div>
<div class="page">
<div class="page" wip="true">
libs and planned stuff
</div>
<div class="page" first="true">
<div></div>
others, references, social media
<div class="page-bar" top="true">
<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>