YouHaveTrouble/youhavetrouble.github.io
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/youhavetrouble.github.io.git synced 2026-05-11 22:06:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

rework homepage

Browse Source
This commit is contained in:
YouHaveTrouble
2025-06-23 20:05:45 +02:00
parent 962b9bac9d
commit a99f8d188c
6 changed files with 95 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ActivityWidget.astro
-2
View File
@@ -57,7 +57,6 @@ import tinyYHT from '../assets/img/tiny_yht.png';
--ground-color: #8B4513;
--grass-color: #4CAF50;
transition: background-color 1s linear;
border-radius: 0.5rem;
&.night {
--sky-color: #000000;
@@ -73,7 +72,6 @@ import tinyYHT from '../assets/img/tiny_yht.png';
width: 100%;
background-color: var(--ground-color);
transition: background-color 1s linear;
border-radius: 0.5rem;
&::before {
content: '';
src/components/SocialsWidget.astro
+10 -2
View File
@@ -1,5 +1,4 @@
<section>
<h2>Socials</h2>
<div class="grid">
<a href="https://github.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
<img src="/assets/icons/github.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
@@ -34,7 +33,16 @@
<img src="/assets/icons/linkedin.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
<span>LinkedIn</span>
</a>
<a href="mailto://contact@youhavetrouble.me" class="social-link" target="_blank" rel="external">
<a href="https://x.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
<img src="/assets/icons/x.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
<span>X</span>
<a href="https://bsky.app/profile/youhavetrouble.bsky.social" class="social-link" target="_blank"
rel="external">
<img src="/assets/icons/bsky.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
<span>BlueSky</span>
</a>
<a href="mailto://contact@youhavetrouble.me" class="social-link" target="_blank"
rel="external">
<img src="/assets/icons/email.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
<span>Email</span>
</a>
src/pages/index.astro
+77 -8
View File
@@ -12,35 +12,104 @@ const permalink = Astro?.site?.href ?? '/';
<BaseLayout title={title} description={description} permalink={permalink}>
<div class="home-container">
<div class="home-copy">
<div class="window home-copy" data-title="Welcome">
<div>
<h1>Welcome to my little corner of the interwebs</h1>
<p>Feel free to check out what I got in store!</p>
</div>
</div>
<div style="width: 100%;">
<ActivityWidget />
<ViewCounter/>
<div class="window-row">
<div class="window visitor-counter" data-title="Visitors counter" aria-label="Visitors counter">
<ViewCounter />
</div>
<div class="window" data-title="Activity" aria-label="Activity" style="flex: 1; min-width: min(100%, 16rem); ">
<ActivityWidget />
</div>
</div>
<SocialsWidget />
<div class="window-row">
<div class="window socials" data-title="Socials" aria-label="Socials">
<SocialsWidget />
</div>
<div class="window blog" aria-label="Blog" data-title="Blog">
<a href="/blog">I have a blog btw!</a>
<a href="/rss.xml" target="_blank">It also has an RSS feed!</a>
</div>
</div>
<ProjectsFeature />
</div>
</BaseLayout>
<style lang="scss">
.window {
border: 2px solid #d0d0d0;
border-radius: 0.5rem;
flex-direction: column;
position: relative;
overflow-y: hidden;
padding-top: 1.5rem;
min-width: 10rem;
&::before {
content: attr(data-title);
position: absolute;
top: 0;
left: 0;
height: 1.5rem;
width: 100%;
border-bottom: #d0d0d0 solid 2px;
display: flex;
flex-direction: row;
padding-inline: 0.5rem;
}
}
.visitor-counter {
padding: 1.5rem 1rem 0 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.socials {
padding: 2rem 1rem 0 1rem;
flex: 1;
min-width: min(25rem, 100%);
}
.blog {
padding: 2rem 1rem 0 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: min(25rem, 100%);
width: 100%;
max-width: min(25rem, 100%);
}
.window-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1.5rem;
width: 100%;
justify-content: center;
}
.home-container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
margin: 2em 0;
gap: 2rem;
gap: 1.5rem;
.home-copy {
flex: 1;
display: flex;
flex-direction: row;
padding: 0 1em;
width: 100%;
padding-top: 3rem;
h1 {
font-weight: 700;
src/styles/global.css
-10
View File
@@ -218,16 +218,6 @@ td {
margin: 1em 0;
}
input[name='theme-toggle'] {
position: absolute;
opacity: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.tags {
display: flex;
flex-wrap: wrap;