Adding Style

.github/pull_request_template.md

@@ -1,4 +1,3 @@
-## Pull Request Template
 <!--
 Add a gif from here https://giphy.com
 -->

.nvmrc

@@ -1 +1 @@
-16.13.2
+18.17.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "alex-dev",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "scripts": {
     "start": "react-scripts start",
@@ -10,6 +10,8 @@
     "purge": "rm -rf node_modules"
   },
   "dependencies": {
+    "framer-motion": "^11.2.10",
+    "npm": "^10.8.1",
     "react": "18.2.0",
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "18.2.0",

src/App.css

@@ -9,7 +9,7 @@
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
-  padding: 200px 0;
+  height: 101vh;
 }
 
 .section-hero {
@@ -22,6 +22,7 @@
 .section-biscuit {
   background: #fbfbfd;
   padding-top: 100px;
+  width: 100%;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
@@ -35,6 +36,7 @@
   background: #000;
   color: #fff;
   padding-top: 100px;
+  width: 100%;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
@@ -44,13 +46,13 @@
   background: #fbfbfd;
   padding-top: 100px;
   text-align: center;
+  width: 100%;
   margin-left: auto;
   margin-right: auto;
 }
 
 .flex-row {
   flex-flow: row wrap;
-  max-width: 980px;
   margin-left: auto;
   margin-right: auto;
 }
@@ -87,12 +89,13 @@
 
 .biscuit-image-row {
   display: grid;
-  grid-template-columns: auto auto auto;
+  grid-template-columns: 4fr 1fr 4fr;
   margin: auto;
-  gap: 2px;
+  gap: 1px;
 }
 
 .biscuit-image {
+  margin: auto;
   width: 650px;
   height: 750px;
   border-radius: 5px;

src/components/BiscuitSection/biscuit.tsx

@@ -1,38 +1,41 @@
-import React, { type FC } from "react"
+import React, { useRef, type FC } from "react"
 import biscuitOutside from "./Assets/biscuit-outside.png"
 import biscuitPortrait from "./Assets/biscuit-portrait.jpg"
 import biscuitSocks from "./Assets/biscuit-socks.jpg"
 import type { BasicContent } from "../../../types"
+import { Section } from "../Section/section"
 
 export const Biscuit: FC<BasicContent> = ({ heading, caption, intro }) => (
-  <section className="section section-biscuit section-biscuit-layout">
-    <div className="flex-row">
-      <h2 className="profile-heading" data-testid="biscuit-heading">
-        {heading}
-      </h2>
-      <p className="profile-caption" data-testid="biscuit-caption">
-        {caption}
-      </p>
-      <p className="profile-intro" data-testid="biscuit-intro">
-        {intro}
-      </p>
+  <Section>
+    <div className="section-biscuit section-biscuit-layout">
+      <div className="flex-row">
+        <h2 className="profile-heading" data-testid="biscuit-heading">
+          {heading}
+        </h2>
+        <p className="profile-caption" data-testid="biscuit-caption">
+          {caption}
+        </p>
+        <p className="profile-intro" data-testid="biscuit-intro">
+          {intro}
+        </p>
+      </div>
+      <div className="biscuit-image-row" data-testid="biscuit-image-row">
+        <img
+          src={biscuitOutside}
+          alt="biscuit-left"
+          className="biscuit-image biscuit-image-mobile"
+        />
+        <img
+          src={biscuitPortrait}
+          alt="biscuit-middle"
+          className="biscuit-image"
+        />
+        <img
+          src={biscuitSocks}
+          alt="biscuit-right"
+          className="biscuit-image biscuit-image-mobile biscuit-image-ipad"
+        />
+      </div>
     </div>
-    <div className="biscuit-image-row" data-testid="biscuit-image-row">
-      <img
-        src={biscuitOutside}
-        alt="biscuit-left"
-        className="biscuit-image biscuit-image-mobile"
-      />
-      <img
-        src={biscuitPortrait}
-        alt="biscuit-middle"
-        className="biscuit-image"
-      />
-      <img
-        src={biscuitSocks}
-        alt="biscuit-right"
-        className="biscuit-image biscuit-image-mobile biscuit-image-ipad"
-      />
-    </div>
-  </section>
+  </Section>
 )

src/components/CoolSection/cool.tsx

@@ -1,12 +1,13 @@
 import React, { type FC } from "react"
 import type { BasicContent } from "../../../types"
+import { Section } from "../Section/section"
 
 export const Cool: FC<BasicContent> = ({ heading, caption, intro }) => (
-  <section className="section section-cool">
-    <div className="flex-row">
+  <Section>
+    <div className="flex-row section-cool">
       <h2 className="profile-heading">{heading}</h2>
       <p className="profile-caption">{caption}</p>
       <p className="profile-intro">{intro}</p>
     </div>
-  </section>
+  </Section>
 )

src/components/HeroSection/hero.tsx

@@ -1,10 +1,11 @@
-import React, { type FC } from "react"
+import React, { useRef, type FC } from "react"
 import profilePicture from "./Assets/profile-picture.jpeg"
 import type { BasicContent } from "../../../types"
+import { Section } from "../Section/section"
 
 export const Hero: FC<BasicContent> = ({ heading, caption, intro }) => (
-  <section className="section section-hero">
-    <div className="flex-row">
+  <Section>
+    <div className="section-hero flex-row">
       <img
         src={profilePicture}
         alt="profile of Alex"
@@ -23,5 +24,5 @@ export const Hero: FC<BasicContent> = ({ heading, caption, intro }) => (
         need a graphic here to push the other sections out of initial view
       </code>
     </div>
-  </section>
+  </Section>
 )

src/components/Section/section.tsx

@@ -0,0 +1,21 @@
+import { useRef, type ReactNode } from "react"
+import { motion, useInView } from "framer-motion"
+
+export const Section = ({ children }: { children: ReactNode }): ReactNode => {
+  const ref = useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { once: true })
+
+  return (
+    <motion.section
+      ref={ref}
+      style={{
+        transform: isInView ? "none" : "translateY(200px)",
+        opacity: isInView ? 1 : 0,
+        transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 0.5s",
+      }}
+      className="section"
+    >
+      {children}
+    </motion.section>
+  )
+}

src/components/WorkSection/work.tsx

@@ -1,15 +1,16 @@
 import React, { type FC } from "react"
 import type { BasicContent } from "../../../types"
+import { Section } from "../Section/section"
 
 export const Work: FC<BasicContent> = ({ heading, caption, intro }) => (
-  <section className="section section-work">
-    <div className="flex-row">
+  <Section>
+    <div className="flex-row section-work">
       <h2 className="profile-heading">{heading}</h2>
       <p className="profile-caption-invert">{caption}</p>
       <p className="profile-intro">{intro}</p>
       <code style={{ display: "none" }}>
         github things? screenshots? links?
       </code>
     </div>
-  </section>
+  </Section>
 )