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

Backgrounds now have low-res placeholders with seamless loading of the actual background for slow connections

Browse Source
This commit is contained in:
YouHaveTrouble
2024-03-17 11:54:05 +01:00
parent afc3b78888
commit 28bb5de3c9
5 changed files with 100 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
img/lowres/bg-lowres.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

img/lowres/bg-projects-lowres.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

img/lowres/bg-social-lowres.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

index.html
+64 -2
View File
@@ -21,11 +21,12 @@
<body> <body>
<nav> <nav>
<a data-link="about" tabindex="1" href="#about">About me</a> <a data-link="about" tabindex="1" href="#about">About me</a>
<a data-link="socials" tabindex="3" href="#socials">Socials</a> <a data-link="socials" tabindex="2" href="#socials">Socials</a>
<a data-link="projects" tabindex="2" href="#projects">Projects</a> <a data-link="projects" tabindex="3" href="#projects">Projects</a>
</nav> </nav>
<main> <main>
<section id="about"> <section id="about">
<div class="bg"></div>
<article> <article>
<div> <div>
<h1>YouHaveTrouble</h1> <h1>YouHaveTrouble</h1>
@@ -44,6 +45,7 @@
</section> </section>
<hr> <hr>
<section id="socials"> <section id="socials">
<div class="bg"></div>
<h2>Socials</h2> <h2>Socials</h2>
<article> <article>
<a href="https://github.com/YouHaveTrouble" class="social-link" target="_blank" rel="external"> <a href="https://github.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
@@ -90,6 +92,7 @@
</section> </section>
<hr> <hr>
<section id="projects"> <section id="projects">
<div class="bg"></div>
<h2>Projects</h2> <h2>Projects</h2>
<div class="project-scroller"> <div class="project-scroller">
<article> <article>
@@ -259,6 +262,65 @@
</div> </div>
</div> </div>
</article> </article>
<article>
<div class="project-logo">
<img src="/img/interesting-website-of-the-day.png" alt="Interesting website of the day logo" draggable="false" loading="lazy">
</div>
<div class="description">
<h3 class="title">Interesting website of the day</h3>
<p>
Daily showcase of interesting websites from my personal database.
</p>
<div class="links">
<a href="https://interesting-website.yht.one" target="_blank" rel="external" title="Project's website">
<button>
<img src="img/icon/website.svg" alt="website" draggable="false">
</button>
</a>
</div>
</div>
</article>
<article>
<div class="project-logo">
<img src="/img/dumb-forks-generator.png" alt="Dumb forks generator logo" draggable="false" loading="lazy">
</div>
<div class="description">
<h3 class="title">Dumb forks name generator</h3>
<p>
Small PHP name generator for dumb minecraft server software fork names.
</p>
<div class="links">
<a href="https://dumbforks.yht.one" target="_blank" rel="external" title="Project's website">
<button>
<img src="img/icon/website.svg" alt="website" draggable="false">
</button>
</a>
</div>
</div>
</article>
<article>
<div class="project-logo">
<img src="/img/guess-the-anime.png" alt="Guess the anime logo" draggable="false" loading="lazy">
</div>
<div class="description">
<h3 class="title">Guess the Anime</h3>
<p>
A web game where you guess an anime title based off blurred art and a synopsis.
</p>
<div class="links">
<a href="https://guessanime.yht.one" target="_blank" rel="external" title="Project's website">
<button>
<img src="img/icon/website.svg" alt="website" draggable="false">
</button>
</a>
<a href="https://github.com/YouHaveTrouble/GuessTheAnime" target="_blank" rel="external" title="Project's GitHub">
<button>
<img src="img/icon/github.svg" alt="github" draggable="false">
</button>
</a>
</div>
</div>
</article>
</div> </div>
</section> </section>
</main> </main>
main.css
+36 -2
View File
@@ -16,7 +16,6 @@ body {
justify-content: start; justify-content: start;
align-items: start; align-items: start;
color: var(--text-color); color: var(--text-color);
background-image: url("/img/bg.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-blend-mode: darken; background-blend-mode: darken;
@@ -101,17 +100,44 @@ section {
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
position: relative;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: rgba(0,0,0, 0.55);
background-blend-mode: darken;
} }
article { article {
width: 100%; width: 100%;
} }
.bg {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
#about { #about {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-image: url("/img/bg.jpg");
background-color: rgba(0,0,0, 0.55);
background-blend-mode: darken;
}
#about .bg {
background-image: url("/img/lowres/bg-lowres.jpg");
} }
#projects { #projects {
@@ -123,10 +149,14 @@ article {
background-blend-mode: darken; background-blend-mode: darken;
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
background-image: url("/img/bg-projects.jpg");
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed;
height: auto; height: auto;
background-image: url("/img/bg-projects.jpg");
}
#projects .bg {
background-image: url("/img/lowres/bg-projects-lowres.jpg");
} }
#projects .links { #projects .links {
@@ -281,6 +311,10 @@ section h2 {
background-attachment: fixed; background-attachment: fixed;
} }
#socials .bg {
background-image: url("/img/lowres/bg-social-lowres.jpg");
}
#socials article { #socials article {
display: flex; display: flex;
flex-direction: row; flex-direction: row;