chore: Add background gradient and deploy script

.github/workflows/static.yml

@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: ./build
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package.json

@@ -6,12 +6,16 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "framer-motion": "^11.3.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "deploy": "react-scripts build && git add . && git commit -m 'deploy' && git push",
+
+
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

src/App.css

@@ -1,38 +1,110 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC:ital,wght@0,400;0,700;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
+
 .App {
   text-align: center;
+  overflow: hidden;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.header {
+  background: rgb(118, 153, 157);
+  background: linear-gradient(180deg, #416B91 0%, rgba(243, 248, 242, 1) 100%);
+
+  height: 200%;
+  width: 100%;
+
+  padding-bottom: 5%;
+
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.header__items {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  padding: 4%;
+}
+
+.brand-name {
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  font-size: 2.5rem;
+
+  margin: 0;
+  width: 50%;
+
+  text-align: left;
+  /* padding: 4%; */
+}
+
+.logo{
+  width: 150px;
+}
+
+.header__tagline{
+
+
+  margin: 0;
+  width: 100%;
+
+
+  text-align: right;
+  /* padding: 4%; */
+
+
 }
 
-.App-link {
-  color: #61dafb;
+.tagline{
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 2rem;
+  text-align: center;
+
+  margin-top:  5%;
+  margin-bottom:  10%;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.header__content {
+  position: relative;
 }
+.car__name{
+  font-family: "Space Mono", monospace;
+  font-weight: 600;
+  font-style: normal;
+
+
+  letter-spacing: -25px;
+  font-size: 20rem;
+  text-align: center;
+  margin: 0;
+  transform: scale(0.7, 1);
+
+  margin-bottom: 5%;
+
+
+  /* Add gradient fade from top to bottom to text */
+  background: linear-gradient(180deg, #000 60%, rgba(243, 248, 242, 1) 80%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  position: relative;
+  z-index: 5;
+}
+
+
+.car__image{
+  width: 90%;
+
+  position: absolute;
+  top: 85%;
+  left: 52%;
+  transform: translate(-50%, -50%);
+
+  z-index: 10;
+
+  /* Blend the image with the background */
+  /* mix-blend-mode: multiply; */
+}

src/App.js

@@ -1,23 +1,95 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import { motion, useScroll, useAnimation } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+import Details from "./components/details";
 
 function App() {
+  const scrollRef = useRef(null);
+  const ref = useRef(null);
+
+  const { scrollYProgress } = useScroll({
+    target: scrollRef,
+    offset: ["start end", "end start"],
+  });
+
+  const [animationPlayer, setAnimationPlayed] = useState(false);
+
+  const textControls = useAnimation();
+  const carControls = useAnimation();
+
+  const [scrollYPos, setScrollYPos] = useState(0);
+
+  // useEffect(() => {
+  //   return scrollYProgress.on("change", (latest) => {
+  //     const newAnimation = latest > 0.4 ? "stretched" : "default";
+  //     if (newAnimation !== lastAnimation) {
+  //       textControls.start(newAnimation);
+  //       setLastAnimation(newAnimation);
+  //     }
+  //   });
+  // }, [scrollYProgress, textControls, lastAnimation]);
+
+  useEffect(() => {
+    if (scrollYPos > 0.4 && !animationPlayer) {
+      textControls.start("stretched");
+      carControls.start("entrance");
+      setAnimationPlayed(true);
+    }
+  }, [scrollYPos]);
+
+  useEffect(() => {
+    return scrollYProgress.on("change", (latest) => {
+      setScrollYPos(latest);
+    });
+  }, [scrollYProgress]);
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="App" ref={scrollRef}>
+      <div className="header">
+        <div className="header__items">
+          <h1 className="brand-name">PORSCHE</h1>
+          <img
+            className="logo"
+            src="./assets/Porsche-logo.png"
+            alt="Porsche Logo"
+          />
+        </div>
+
+        <div className="header__tagline">
+          <h2 className="tagline">The new 911 GT3 RS. Limits pushed. Again.</h2>
+        </div>
+
+        <div className="header__content">
+          <motion.div
+            variants={{
+              default: { transform: "scale(0.7, 1.25)" },
+              stretched: { transform: "scale(0.7, 2.2)" },
+            }}
+            initial="default"
+            animate={textControls}
+            transition={{ duration: 0.3, type: "linear" }}
+            className="car__name"
+            ref={ref}
+          >
+            PORSCHE
+          </motion.div>
+
+          <motion.img
+            variants={{
+              default: { opacity: 0, x: 200, y: "-50%" },
+              entrance: { opacity: 1, x: "-50%", y: "-50%" },
+            }}
+            initial="default"
+            animate={carControls}
+            transition={{ duration: 0.65, delay: 0.1, type: "circInOut" }}
+            className="car__image"
+            src="./assets/Porsche-911-GT3-RS_waifu2x_noise3_scale2x.png"
+            alt="Porsche Car"
+          ></motion.img>
+        </div>
+      </div>
+
+      <Details />
     </div>
   );
 }

src/components/details.css

@@ -0,0 +1,70 @@
+.details {
+    font-family: "Poppins", sans-serif;
+    font-weight: 200;
+    font-style: normal;
+}
+
+.details p{
+    margin: 5px;
+}
+
+.details__grid {
+    padding: 5%;
+    margin-top: 5%;
+    /* Add styling for the grid container */
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 1rem;
+
+    justify-content: space-around;
+}
+
+.details__column {
+    /* Add styling for the grid columns */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: left;
+}
+
+.details__row {
+    width: 60%;
+}
+
+.row__tag{
+    /* Add styling for the tag rows */
+    font-weight: 300;
+    font-size: 1.5rem;
+
+}
+
+.row__car__name{
+    /* Add styling for the car name row */
+    font-weight: 500;
+    font-size: 2rem;
+}
+
+.row__car__type{
+    /* Add styling for the car type row */
+    letter-spacing: 10px;
+    font-weight: 600;
+    font-size: 2.5rem;
+}
+
+.row__data{
+    /* Add styling for the data rows */
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    font-weight: 400;
+    font-size: 1.2rem;
+}
+
+.more__text{
+    /* Add styling for the car details */
+    text-align: left;
+    font-weight: 300;
+    padding-left: 5%;
+    padding-right: 5%;
+}