Merge pull request #2 from tin0312/dev

Fix error merging Project route layout
tin0312 · Oct 6, 2023 · 184bfc7 · 184bfc7
2 parents dc23ccb + e16ffcb
commit 184bfc7
Show file tree

Hide file tree

Showing 14 changed files with 335 additions and 234 deletions.
diff --git a/src/App.css b/src/App.css
@@ -5,7 +5,12 @@
 }
 body {
   color: white;
-  background-color: #151515;
+  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)),
+    url("./images/header.jpg");
+  height: 100vh;
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
   font-family: "Syne", sans-serif;
 }
 .site-wrapper {
@@ -167,16 +172,30 @@ body {
     padding-bottom: 20%;
   }
   .about-container {
-    padding-bottom: 15%;
+    padding-bottom: 15% !important;
   }
-  .project-container {
-    padding-bottom: 20%;
+  .project-page {
+    margin-top: 20% !important ;
+    width: 100vw !important;
+  }
+  .project-title {
+    font-size: 1.5rem !important;
+  }
+  .project-stacks,
+  .project-description {
+    font-size: 1rem !important;
+  }
+  .project-header {
+    font-size: 2em !important;
   }
   .contact-container {
     background-color: #151515 !important;
     padding-top: 10%;
     padding-bottom: 15%;
   }
+  .project-thumb-nail {
+    height: 25vh !important;
+  }
   .contact-header {
     font-size: 3em !important;
   }
@@ -194,6 +213,12 @@ body {
     padding-top: 1em;
     padding-bottom: 0.5em;
   }
+  .back-to-top {
+    bottom: 2rem !important;
+    right: 2rem !important;
+    height: 2rem !important;
+    width: 2rem !important;
+  }
 }
 /* About section */
 .about-container {
@@ -244,75 +269,113 @@ body {
 }
 /* Project section*/
 .project-page {
-  margin: 5% auto 0;
+  width: 70vw;
+  margin: 10% auto;
+  background-color: #000;
 }
 .project-header {
-  width: 80%;
-  margin: 0 auto;
   font-family: "Space Grotesk" sans-serif;
-  font-size: 40px;
-  font-weight: 700;
+  font-size: 3em;
   line-height: 88px;
-  letter-spacing: -2.5px;
-}
-.project-container {
-  width: 80%;
-  margin: 2% auto 0;
+  position: relative;
 }
-.project-section {
-  display: flex;
-  flex-direction: column;
+.project-header::after {
+  content: "";
+  position: absolute;
+  display: block;
+  bottom: -10px;
+  height: 0.07em;
+  width: 2em;
+  background: green;
+  margin: 0.6rem 0;
 }
-.image-container {
-  width: 100%;
-  position: relative;
+.project-container {
+  height: 50vh;
+  margin-bottom: 15%;
+  flex-wrap: nowrap;
 }
 .project-thumb-nail {
   width: 100%;
-  height: 70%;
+  height: 50vh;
   border-radius: 20px;
   opacity: 1;
 }
-/* Make a container in each clickable images */
-.middle {
-  transition: 0.5s ease;
-  opacity: 0;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  -ms-transform: translate(-50%, -50%);
-  text-align: center;
-  font-family: "Poppins", sans-serif;
+.project-section {
+  gap: 0.8em;
+  height: 50vh !important;
 }
-.image-container:hover img {
-  cursor: pointer;
-  opacity: 0.4;
+.project-title {
+  font-size: 2rem;
 }
-.image-container:hover .middle {
-  cursor: pointer;
-  opacity: 1;
+.project-stacks,
+.project-description {
+  opacity: 0.6;
+  font-size: 1.2rem;
+}
+.project-stacks {
+  margin-left: 1em;
 }
-.text {
+/* back-to-top button */
+.back-to-top {
+  position: fixed;
+  bottom: 4rem;
+  right: 4rem;
   display: flex;
-  flex-direction: column;
-  gap: 2%;
-  width: 100%;
+  justify-content: center;
+  align-items: center;
+  height: 4rem;
+  width: 4rem;
+  background-color: green;
+  border-radius: 50%;
+  z-index: 10;
+  visibility: hidden;
+  transition: all 0.4s;
+}
+
+.back-to-top__image {
+  height: 70%;
 }
-.text a:hover {
-  color: #4ee1a0;
+.link-text {
+  position: relative;
+  display: inline-block;
+  padding: 0.6rem;
+  color: #f0e9f2 !important;
+  text-decoration: none !important;
+  border-bottom: 0.1em solid green;
+  z-index: 1000;
+}
+.link-text::after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 100%;
+  background: white;
+  height: 100%;
+  z-index: -1;
+  transition: all 0.2s cubic-bezier(1, 0.68, 0.16, 0.9);
+}
+.link-text:hover::after {
   cursor: pointer;
+  right: 0;
+  background-color: green;
+  color: #f0e9f2;
 }
-.text a {
-  text-decoration: none;
-  color: white;
+.link-text span {
+  padding-left: 0.6em;
 }
-
-.project-content {
-  margin-top: 4%;
+.work-links {
+  display: flex;
+  align-items: center;
 }
-.project-stacks {
-  opacity: 0.6;
+.work-code {
+  height: 2.2em;
+  padding-left: 2em;
+  transition: all 0.3s;
+}
+.work-code:hover {
+  transform: scale(1.2);
 }
 /* Contact section */
 .contact-container {