From 656d2ea33c278be70cd3351566c0b6f5bd049337 Mon Sep 17 00:00:00 2001 From: tin0312 <105316547+tin0312@users.noreply.github.com> Date: Mon, 27 Nov 2023 15:14:21 -0500 Subject: [PATCH] Update project page --- src/App.css | 9 +- src/Pages/Projects.jsx | 189 +++++++++++++++++++++++----------- src/images/apiIcon.png | Bin 0 -> 726 bytes src/images/index.js | 6 +- src/images/pwAppThumbnail.png | Bin 111900 -> 0 bytes src/images/salonThumbNail.png | Bin 0 -> 7917180 bytes src/images/sassIcon.png | Bin 0 -> 1555 bytes src/images/tailwindIcon.png | Bin 0 -> 1123 bytes src/images/typescriptIcon.png | Bin 0 -> 629 bytes 9 files changed, 141 insertions(+), 63 deletions(-) create mode 100644 src/images/apiIcon.png delete mode 100644 src/images/pwAppThumbnail.png create mode 100644 src/images/salonThumbNail.png create mode 100644 src/images/sassIcon.png create mode 100644 src/images/tailwindIcon.png create mode 100644 src/images/typescriptIcon.png diff --git a/src/App.css b/src/App.css index 608faa3..e3dd63f 100644 --- a/src/App.css +++ b/src/App.css @@ -189,7 +189,6 @@ body { font-size: 2em !important; } .contact-container { - background-color: #151515 !important; padding-top: 10%; padding-bottom: 15%; } @@ -307,13 +306,16 @@ body { .project-title { font-size: 2rem; } -.project-stacks, .project-description { opacity: 0.6; font-size: 1.2rem; } .project-stacks { - margin-left: 1em; + gap: 0.4em; +} +.project-stacks li{ + list-style: none; + } /* back-to-top button */ .back-to-top { @@ -382,7 +384,6 @@ body { display: flex; justify-content: space-around; align-items: center; - background-color: #242424; margin: 10% auto 18%; width: 80vw; } diff --git a/src/Pages/Projects.jsx b/src/Pages/Projects.jsx index c43f12d..3c63062 100644 --- a/src/Pages/Projects.jsx +++ b/src/Pages/Projects.jsx @@ -2,28 +2,26 @@ 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"); + const [isBackToTop, setIsBackToTop] = React.useState(false); -const backToTop = document.querySelector(".back-to-top") -const [isBackToTop, setIsBackToTop] = React.useState(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)"; - } -} -window.addEventListener("scroll", () => { - if(window.scrollY > 700){ - setIsBackToTop(true) - renderToTopButton(isBackToTop); - } else { - setIsBackToTop(false) - renderToTopButton(isBackToTop); + // 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)"; + } } -} -) + window.addEventListener("scroll", () => { + if (window.scrollY > 700) { + setIsBackToTop(true); + renderToTopButton(isBackToTop); + } else { + setIsBackToTop(false); + renderToTopButton(isBackToTop); + } + }); return ( My Work @@ -38,12 +36,31 @@ window.addEventListener("scroll", () => {

A weather app to help you update with weather conditions

-