Project route layout mobile

tin0312 · Oct 6, 2023 · 9725246 · 9725246
1 parent a689a7f
commit 9725246
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 47 deletions.
diff --git a/src/App.css b/src/App.css
@@ -5,8 +5,8 @@
 }
 body {
   color: white;
-  background: linear-gradient(rgba(0,0,0, .1), rgba(0,0,0, .4)), 
-  url('./images/header.jpg');
+  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;
@@ -172,13 +172,30 @@ body {
     padding-bottom: 20%;
   }
   .about-container {
-    padding-bottom: 15%;
+    padding-bottom: 15% !important;
+  }
+  .project-page {
+    margin-top: 20% !important ;
+    width: 90vw !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;
   }
@@ -196,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 {
@@ -246,7 +269,7 @@ body {
 }
 /* Project section*/
 .project-page {
-  width: 70%;
+  width: 70vw;
   margin: 10% auto;
 }
 .project-header {
@@ -255,37 +278,34 @@ body {
   line-height: 88px;
   position: relative;
 }
-.project-header::after{
-    content: '';
-    position: absolute;
-    display: block;
-    bottom: -3px;
-    height: 0.07em;
-    width: 2em;
-    background: green;
-    margin: 0.6rem 0;
+.project-header::after {
+  content: "";
+  position: absolute;
+  display: block;
+  bottom: -10px;
+  height: 0.07em;
+  width: 2em;
+  background: green;
+  margin: 0.6rem 0;
 }
 .project-container {
-  display: flex;
   background-color: #000;
   height: 50vh;
   margin-bottom: 15%;
-
-}
-.image-container {
-  position: relative;
+  flex-wrap: nowrap;
 }
 .project-thumb-nail {
   width: 100%;
   height: 50vh;
   border-radius: 20px;
   opacity: 1;
 }
-.project-section{
+.project-section {
   gap: 0.8em;
+  height: 50vh !important;
 }
-.project-title{
-  font-size: 3rem;
+.project-title {
+  font-size: 2rem;
 }
 .project-stacks,
 .project-description {
@@ -295,17 +315,37 @@ body {
 .project-stacks {
   margin-left: 1em;
 }
-.link-text{
+/* back-to-top button */
+.back-to-top {
+  position: fixed;
+  bottom: 4rem;
+  right: 4rem;
+  display: flex;
+  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%;
+}
+.link-text {
   position: relative;
   display: inline-block;
-  padding: .6rem;
+  padding: 0.6rem;
   color: #f0e9f2 !important;
-  text-decoration: none !important; 
+  text-decoration: none !important;
   border-bottom: 0.1em solid green;
   z-index: 1000;
 }
 .link-text::after {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   bottom: 0;
@@ -316,25 +356,25 @@ body {
   z-index: -1;
   transition: all 0.2s cubic-bezier(1, 0.68, 0.16, 0.9);
 }
-.link-text:hover::after{
+.link-text:hover::after {
   cursor: pointer;
   right: 0;
   background-color: green;
   color: #f0e9f2;
 }
-.link-text span{
+.link-text span {
   padding-left: 0.6em;
 }
-.work-links{
+.work-links {
   display: flex;
   align-items: center;
 }
-.work-code{
+.work-code {
   height: 2.2em;
   padding-left: 2em;
-  transition: all .3s;
+  transition: all 0.3s;
 }
-.work-code:hover{
+.work-code:hover {
   transform: scale(1.2);
 }
 /* Contact section */

diff --git a/src/Pages/Projects.jsx b/src/Pages/Projects.jsx
@@ -2,14 +2,37 @@ import React from "react";
 import * as Images from "../images";
 import { Container, Row, Col } from "react-bootstrap";
 export default function Projects() {
+
+const backToTop = document.querySelector(".back-to-top")
+let isBackToTop = false
+
+// Conditionally render the button
+function renderToTopButton(isBackToTop){
+  if (backToTop) {
+    backToTop.style.visibility = isBackToTop ? "visible" : "hidden";
+    backToTop.style.opacity = isBackToTop ? "1" : "0";
+    backToTop.style.transform = isBackToTop ? "scale(1)" : "scale(0)";
+  }
+}
+// listen for the scroll event
+window.addEventListener("scroll", () => {
+  if(window.scrollY > 700){
+    isBackToTop = true
+    renderToTopButton(isBackToTop);
+  } else {
+    isBackToTop = false
+    renderToTopButton(isBackToTop);
+  }
+}
+)
   return (
-    <Container fluid className="project-page">
+    <Container fluid className="project-page pb-4">
       <Row className="project-header mb-5">My Work</Row>
       {/* project section-1 */}
-      <Row className="project-container">
+      <Row className="project-container d-flex flex-column flex-lg-row flex-column-reverse h-auto">
         <Col
           lg={4}
-          xs={12}
+          sm={12}
           className="project-section pr-0 pl-0 d-flex flex-column h-100 justify-content-center"
         >
           <h3 className="project-title">Weather App</h3>
@@ -40,16 +63,17 @@ export default function Projects() {
           </div>
         </Col>
 
-        <Col xs={12} lg={8} className="image-container pr-0 pl-0">
+        <Col sm={12} lg={8} className="image-container pr-0 pl-0 mb-4 mb-lg-0">
           <img
             src={Images.weatherThumbNail}
             alt="weather-thumb-nail"
             className="project-thumb-nail"
           />
         </Col>
       </Row>
+
       {/* Project Section-2 */}
-      <Row className="project-container">
+      <Row className="project-container d-flex flex-column flex-lg-row flex-column-reverse h-auto">
         <Col
           lg={4}
           xs={12}
@@ -81,7 +105,7 @@ export default function Projects() {
             </a>
           </div>
         </Col>
-        <Col xs={12} lg={8} className="image-container pr-0 pl-0">
+        <Col xs={12} lg={8} className="image-container pr-0 pl-0 mb-4 mb-lg-0">
           <img
             src={Images.quizThumbNail}
             alt="quiz-thumb-nail"
@@ -91,15 +115,16 @@ export default function Projects() {
       </Row>
 
       {/* Project Section-3 */}
-      <Row className="project-container">
+      <Row className="project-container d-flex flex-column flex-lg-row flex-column-reverse h-auto">
         <Col
           lg={4}
           xs={12}
           className="project-section pr-0 pl-0 d-flex flex-column h-100 justify-content-center"
         >
           <h3 className="project-title">Room Booking System</h3>
           <p className="project-description">
-            An online room booking system to help you reserve your study room with various options 
+            An online room booking system to help you reserve your study room
+            with various options
           </p>
           <ul className="project-stacks">
             <li>HTML</li>
@@ -118,14 +143,14 @@ export default function Projects() {
             </a>
             <a href="https://github.com/tin0312/roomBookingSystem">
               <img
-                 src={Images.githubIcon}
+                src={Images.githubIcon}
                 alt="github-icon"
                 className="work-code"
               />
             </a>
           </div>
         </Col>
-        <Col xs={12} lg={8} className="image-container pr-0 pl-0">
+        <Col xs={12} lg={8} className="image-container pr-0 pl-0 mb-4 mb-lg-0">
           <img
             src={Images.roomsystemThumbNail}
             alt="room-system-thumb-nail"
@@ -135,15 +160,16 @@ export default function Projects() {
       </Row>
 
       {/* Project Section-4 */}
-      <Row className="project-container">
+      <Row className="project-container d-flex flex-column flex-lg-row flex-column-reverse h-auto">
         <Col
           lg={4}
           xs={12}
           className="project-section pr-0 pl-0 d-flex flex-column h-100 justify-content-center"
         >
           <h3 className="project-title">Walk-As-You-Scroll</h3>
           <p className="project-description">
-           A chrome extension to help you track screen time and improve overal health
+            A chrome extension to help you track screen time and improve overal
+            health
           </p>
           <ul className="project-stacks">
             <li>HTML</li>
@@ -160,7 +186,7 @@ export default function Projects() {
             </a>
           </div>
         </Col>
-        <Col xs={12} lg={8} className="image-container pr-0 pl-0">
+        <Col xs={12} lg={8} className="image-container pr-0 pl-0 mb-4 mb-lg-0">
           <img
             src={Images.chromeExtThumbNail}
             alt="chrome-extension-thumb-nail"
@@ -170,15 +196,16 @@ export default function Projects() {
       </Row>
 
       {/* Project Section-5 */}
-      <Row className="project-container">
+      <Row className="project-container d-flex flex-column flex-lg-row flex-column-reverse h-auto">
         <Col
           lg={4}
           xs={12}
           className="project-section pr-0 pl-0 d-flex flex-column h-100 justify-content-center"
         >
           <h3 className="project-title">Password Generator</h3>
           <p className="project-description">
-            A password generator app to help you pick a secure password of choice
+            A password generator app to help you pick a secure password of
+            choice
           </p>
           <ul className="project-stacks">
             <li>HTML</li>
@@ -202,14 +229,21 @@ export default function Projects() {
             </a>
           </div>
         </Col>
-        <Col xs={12} lg={8} className="image-container pr-0 pl-0">
+        <Col xs={12} lg={8} className="image-container pr-0 pl-0 mb-4 mb-lg-0">
           <img
             src={Images.pwAppThumbnail}
             alt="password-app-thumb-nail"
             className="project-thumb-nail"
           />
         </Col>
       </Row>
+      <a href="#top" className="back-to-top" title="Back to Top">
+        <img
+          src= {Images.arrowUp}
+          alt="Back to Top"
+          className="back-to-top__image"s
+        />
+      </a>
     </Container>
   );
 }
diff --git a/src/images/arrow-up.svg b/src/images/arrow-up.svg
diff --git a/src/images/index.js b/src/images/index.js
@@ -19,4 +19,5 @@ export { default as quizThumbNail} from "./quizThumbNail.png"
 export { default as roomsystemThumbNail} from "./roomsystemThumbNail.png"
 export { default as chromeExtThumbNail} from "./chromeExtThumbNail.png"
 export { default as pwAppThumbnail} from "./pwAppThumbnail.png"
+export { default as arrowUp} from "./arrow-up.svg"