mirror of
https://github.com/YouHaveTrouble/youhavetrouble.github.io.git
synced 2026-05-11 22:06:56 +00:00
Backgrounds now have low-res placeholders with seamless loading of the actual background for slow connections
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
+64
-2
@@ -21,11 +21,12 @@
|
||||
<body>
|
||||
<nav>
|
||||
<a data-link="about" tabindex="1" href="#about">About me</a>
|
||||
<a data-link="socials" tabindex="3" href="#socials">Socials</a>
|
||||
<a data-link="projects" tabindex="2" href="#projects">Projects</a>
|
||||
<a data-link="socials" tabindex="2" href="#socials">Socials</a>
|
||||
<a data-link="projects" tabindex="3" href="#projects">Projects</a>
|
||||
</nav>
|
||||
<main>
|
||||
<section id="about">
|
||||
<div class="bg"></div>
|
||||
<article>
|
||||
<div>
|
||||
<h1>YouHaveTrouble</h1>
|
||||
@@ -44,6 +45,7 @@
|
||||
</section>
|
||||
<hr>
|
||||
<section id="socials">
|
||||
<div class="bg"></div>
|
||||
<h2>Socials</h2>
|
||||
<article>
|
||||
<a href="https://github.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
|
||||
@@ -90,6 +92,7 @@
|
||||
</section>
|
||||
<hr>
|
||||
<section id="projects">
|
||||
<div class="bg"></div>
|
||||
<h2>Projects</h2>
|
||||
<div class="project-scroller">
|
||||
<article>
|
||||
@@ -259,6 +262,65 @@
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -16,7 +16,6 @@ body {
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
color: var(--text-color);
|
||||
background-image: url("/img/bg.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-blend-mode: darken;
|
||||
@@ -101,17 +100,44 @@ section {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
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 {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: 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 {
|
||||
@@ -123,10 +149,14 @@ article {
|
||||
background-blend-mode: darken;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
background-image: url("/img/bg-projects.jpg");
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
height: auto;
|
||||
background-image: url("/img/bg-projects.jpg");
|
||||
}
|
||||
|
||||
#projects .bg {
|
||||
background-image: url("/img/lowres/bg-projects-lowres.jpg");
|
||||
}
|
||||
|
||||
#projects .links {
|
||||
@@ -281,6 +311,10 @@ section h2 {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
#socials .bg {
|
||||
background-image: url("/img/lowres/bg-social-lowres.jpg");
|
||||
}
|
||||
|
||||
#socials article {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
Reference in New Issue
Block a user