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
public/assets/icons/bsky.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="600" height="530" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 742 B

public/assets/icons/x.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="300" height="300.251" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 308 B

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
+76 -7
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>
<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;