From: tenkyuu <hello@tenkyuu.dev>
Date: Wed, 30 Oct 2024 01:34:54 +0000 (+0800)
Subject: partial update
X-Git-Url: https://git.bochard.net/?a=commitdiff_plain;h=4d92ba3b1308255782bf24fa4acfa565ac1b6809;p=mysite.git

partial update
---

diff --git a/assets/images/static/background-cover.jpg b/assets/images/static/background-cover.jpg
deleted file mode 100644
index 18368cc..0000000
Binary files a/assets/images/static/background-cover.jpg and /dev/null differ
diff --git a/assets/images/static/crd-cover-1.jpg b/assets/images/static/crd-cover-1.jpg
new file mode 100644
index 0000000..18368cc
Binary files /dev/null and b/assets/images/static/crd-cover-1.jpg differ
diff --git a/assets/images/static/crd-cover-2.jpeg b/assets/images/static/crd-cover-2.jpeg
new file mode 100644
index 0000000..4be914b
Binary files /dev/null and b/assets/images/static/crd-cover-2.jpeg differ
diff --git a/css/styles.css b/css/styles.css
index d21c1e0..d244035 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -31,6 +31,7 @@ body {
   flex-direction: column;
   color: var(--textcolor1);
   height: 1000rem;
+  background-color: #0e0e0d;
 }
 header {
   position: fixed;
@@ -177,39 +178,21 @@ header {
 
 
 /* MAIN */
-main {
-  padding-top: 7rem;
-}
 section {
-  
+  position: relative;
+  height: 100vh;
 }
-.background-cover {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  object-position: center;
-  object-fit: cover;
-  filter: blur(1px) brightness(70%) contrast(90%);
-  pointer-events: none;
+.bg-1 {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url(/assets/images/static/background-cover-1.jpg);
 }
-.background-cover-1 {
-  position: absolute;
+.background-cover {
+  background-position: center;
+  background-size: cover;
   height: 100%;
   width: 100%;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  object-position: center;
-  object-fit: cover;
-  filter: blur(1px) brightness(70%) contrast(90%);
+  filter: blur(1px) brightness(50%) contrast(90%);
   pointer-events: none;
+  user-select: none;
 }
 .intro {
   position: absolute;
@@ -224,7 +207,66 @@ section {
 .tagline {
   font-size: 1.9rem;
   color: var(--textcolor2);
+}
+
 
+
+/* LINK CARDS */
+.crd-link {
+  display: flex;
+  justify-content: center;
+  text-decoration: none;
+  background-size: cover;
+  background-position: center;
+  filter: saturate(0) blur(0.5px) brightness(90%);
+  transition: filter 0.2s ease-in-out;
+  padding-top: 4rem;
+}
+.crd-link:hover {
+  filter: saturate(1) blur(0) brightness(100%);
+}
+.crd-link:hover .fa-arrow-right {
+  right: 0;
+  visibility: visible;
+  opacity: 1;
+}
+.crd-content-ctn-1,
+.crd-content-ctn-2,
+.crd-content-ctn-3  {
+  color: var(--linkcolor);
+  width: 80%;
+  height: 25rem;
+  position: relative;
+}
+.crd-title,
+.crd-tagline {
+  text-shadow: 2px 2px 4px #000;
+}
+.crd-title {
+  font-size: 7rem;
+  width: 100%;
+}
+.crd-tagline {
+  font-size: 1.7rem;
+  width: 100%;
+}
+.fa-arrow-right {
+  font-size: 5rem;
+  position: absolute;
+  bottom: 0;
+  right: 3rem;
+  padding: 2rem;
+  transition: 0.2s ease-in-out;
+  visibility: hidden;
+  opacity: 0;
+  color: var(--linkcolor);
+  filter: drop-shadow( 1px 1px 2px #000);
+}
+.crd-1 {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url(/assets/images/static/crd-cover-1.jpg);
+}
+.crd-2 {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url(/assets/images/static/crd-cover-2.jpeg);
 }
 
 
diff --git a/index.html b/index.html
index 33a9ae9..67a9807 100644
--- a/index.html
+++ b/index.html
@@ -128,24 +128,29 @@
 
 
   <main>
-    <section class="heading">
-      <img src="assets/images/static/background-cover-1.jpg"
-           alt="an image captured inside a house which is mad of woods while the bluesky can be seen outside."
-           class="background-cover"
-           loading="lazy"
-           decoding="async">
+    <section>
+      <div class="background-cover bg-1"></div>
       <div class="intro">
         <h1 class="my-name">bocharudo.</h1>
         <p class="tagline">I code on paper and create websites out of it.</p>
       </div>
     </section>
 
-    <section class="link-cards">
-      <img src=""
-           alt="an image captured inside a house which is mad of woods while the bluesky can be seen outside."
-           class="background-cover-1"
-           loading="lazy"
-           decoding="async">
+    <section class="cards">
+      <a href="photos.html" class="crd-link crd-1">
+        <div class="crd-content-ctn-1">
+          <h1 class="crd-title">Photos.</h1>
+          <p class="crd-tagline">Glimpses and memories through my lens, captured specks of our world.</p>
+          <i class="fas fa-arrow-right"></i>
+        </div>
+      </a>
+      <a href="projects.html" class="crd-link crd-2">
+        <div class="crd-content-ctn-1">
+          <h1 class="crd-title">Projects.</h1>
+          <p class="crd-tagline">Websites I've made from codes written using pen and paper.</p>
+          <i class="fas fa-arrow-right"></i>
+        </div>
+      </a>
     </section>
   </main>