waaaaaavy

2026-06-08 16:18:01 -06:00 · 2022-11-24 20:34:49 -05:00
parent 4c55e70b82
commit 0af6855c85
9 changed files with 274 additions and 157 deletions
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Noah Paige</title>
  </head>
  <body>
    <div id="root"></div>
@@ -1,11 +1,11 @@
 {
-  "name": "from-scratch",
+  "name": "portfolio-site",
  "version": "0.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "from-scratch",
+      "name": "portfolio-site",
      "version": "0.0.0",
      "dependencies": {
        "daisyui": "^2.41.0",
@@ -13,6 +13,7 @@
        "react-dom": "^18.2.0"
      },
      "devDependencies": {
+        "@tailwindcss/typography": "^0.5.8",
        "@types/react": "^18.0.24",
        "@types/react-dom": "^18.0.8",
        "@vitejs/plugin-react": "^2.2.0",
@@ -549,6 +550,34 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz",
+      "integrity": "sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/@types/prop-types": {
      "version": "15.7.5",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -1560,6 +1589,24 @@
        "node": ">=10"
      }
    },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -14,6 +14,7 @@
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.8",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
@@ -1,44 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}

-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+html,
+body {
+  height: 100vh;
+  overflow: hidden;
+}
@@ -1,45 +1,212 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import './App.css'
+import { useState } from "react";
+import "./App.css";

 function App() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
+  const curves = [
+    "M0,192L48,176C96,160,192,128,288,112C384,96,480,96,576,101.3C672,107,768,117,864,138.7C960,160,1056,192,1152,181.3C1248,171,1344,117,1392,90.7L1440,64L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z",
+    "M0,192L48,202.7C96,213,192,235,288,213.3C384,192,480,128,576,122.7C672,117,768,171,864,181.3C960,192,1056,160,1152,170.7C1248,181,1344,235,1392,261.3L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z",
+    "M0,256L48,261.3C96,267,192,277,288,245.3C384,213,480,139,576,101.3C672,64,768,64,864,85.3C960,107,1056,149,1152,160C1248,171,1344,149,1392,138.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z",
+    "M0,32L48,64C96,96,192,160,288,165.3C384,171,480,117,576,112C672,107,768,149,864,176C960,203,1056,213,1152,192C1248,171,1344,117,1392,90.7L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z",
+    "M0,96L48,122.7C96,149,192,203,288,229.3C384,256,480,256,576,240C672,224,768,192,864,165.3C960,139,1056,117,1152,144C1248,171,1344,245,1392,282.7L1440,320L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z",
+    "M0,160L48,170.7C96,181,192,203,288,186.7C384,171,480,117,576,112C672,107,768,149,864,186.7C960,224,1056,256,1152,250.7C1248,245,1344,203,1392,181.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z",
+    "M0,64L48,101.3C96,139,192,213,288,218.7C384,224,480,160,576,128C672,96,768,96,864,133.3C960,171,1056,245,1152,250.7C1248,256,1344,192,1392,160L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z",
+    "M0,192L48,181.3C96,171,192,149,288,154.7C384,160,480,192,576,186.7C672,181,768,139,864,149.3C960,160,1056,224,1152,234.7C1248,245,1344,203,1392,181.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z",
+    "M0,192L48,202.7C96,213,192,235,288,213.3C384,192,480,128,576,122.7C672,117,768,171,864,181.3C960,192,1056,160,1152,170.7C1248,181,1344,235,1392,261.3L1440,288L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z",
+  ];

  return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
+    <div className="overflow-scroll">
+      <div className="snap-mandatory snap-y overflow-scroll h-screen bg-base-200">
+        <div className="snap-center h-screen">
+          <div className="relative h-screen w-screen">
+            <div className="absolute top-0 bg-blue-500 h-12 w-screen" />
+            <svg
+              className="drop-shadow-xl absolute top-11 fill-blue-500 "
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1440 320"
+              preserveAspectRatio="none"
+              height="6rem"
+              width="100%"
+            >
+              <path className="" fill-opacity="1" d={curves[0]}></path>
+            </svg>
+            <svg
+              className="drop-shadow-xl absolute bottom-11 fill-blue-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1440 320"
+              preserveAspectRatio="none"
+              height="6rem"
+              width="100%"
+            >
+              <path fill-opacity="1" d={curves[1]}></path>
+            </svg>
+            <div className="absolute bottom-0 bg-blue-500 h-12 w-screen" />
+          </div>
+          <div className="hero h-screen relative -translate-y-full ">
+            <div className="hero-content text-center">
+              <div className="max-w-md">
+                <h1 className="text-5xl font-bold">
+                  It's over Anakin! I have the high ground.
+                </h1>
+                <p className="py-6">
+                  Provident cupiditate voluptatem et in. Quaerat fugiat ut
+                  assumenda excepturi exercitationem quasi. In deleniti eaque
+                  aut repudiandae et a id nisi.
+                </p>
+                <button className="btn btn-primary">Get Started</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="snap-center h-screen">
+          <div className="relative h-screen w-screen">
+            <div className="absolute top-0 bg-blue-500 h-12 w-screen" />
+            <svg
+              className="drop-shadow-xl absolute top-11 fill-blue-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1440 320"
+              preserveAspectRatio="none"
+              height="6rem"
+              width="100%"
+            >
+              <path fill-opacity="1" d={curves[2]}></path>
+            </svg>
+            <svg
+              className="drop-shadow-xl absolute bottom-10 fill-blue-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1440 320"
+              preserveAspectRatio="none"
+              height="6rem"
+              width="100%"
+            >
+              <path fill-opacity="1" d={curves[3]}></path>
+            </svg>
+            <div className="absolute bottom-0 bg-blue-500 h-11 w-screen" />
+          </div>
+          <div className="hero h-screen relative -translate-y-full ">
+            <div className="hero-content text-center">
+              <div className="max-w-md">
+                <h1 className="text-5xl font-bold">
+                  YoU uNdErEsTiMaTe My PoWeR!!
+                </h1>
+                <p className="py-6">
+                  Provident cupiditate voluptatem et in. Quaerat fugiat ut
+                  assumenda excepturi exercitationem quasi. In deleniti eaque
+                  aut repudiandae et a id nisi.
+                </p>
+                <button className="btn btn-primary">Get Started</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="snap-center h-screen">
+          <div className="relative h-screen w-screen">
+            <div className="absolute top-0 bg-blue-500 h-12 w-screen" />
+            <svg
+              className="drop-shadow-xl absolute top-11 fill-blue-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1440 320"
+              preserveAspectRatio="none"
+              height="6rem"
+              width="100%"
+            >
+              <path fill-opacity="1" d={curves[4]}></path>
+            </svg>
+            <svg
+              className="drop-shadow-xl absolute bottom-10 fill-blue-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1440 320"
+              preserveAspectRatio="none"
+              height="6rem"
+              width="100%"
+            >
+              <path fill-opacity="1" d={curves[5]}></path>
+            </svg>
+            <div className="absolute bottom-0 bg-blue-500 h-11 w-screen" />
+          </div>
+          <div className="hero h-screen relative -translate-y-full ">
+            <div className="hero-content text-center">
+              <div className="max-w-md">
+                <h1 className="text-5xl font-bold">
+                  It was said that you would, destroy the Sith, not join them.
+                </h1>
+                <p className="py-6">
+                  Provident cupiditate voluptatem et in. Quaerat fugiat ut
+                  assumenda excepturi exercitationem quasi. In deleniti eaque
+                  aut repudiandae et a id nisi.
+                </p>
+                <button className="btn btn-primary">Get Started</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="snap-center h-screen">
+          <div className="relative h-screen w-screen">
+            <div className="absolute top-0 bg-blue-500 h-12 w-screen" />
+            <svg
+              className="drop-shadow-xl absolute top-11 fill-blue-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1440 320"
+              preserveAspectRatio="none"
+              height="6rem"
+              width="100%"
+            >
+              <path fill-opacity="1" d={curves[6]}></path>
+            </svg>
+            <svg
+              className="drop-shadow-xl absolute bottom-10 fill-blue-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1440 320"
+              preserveAspectRatio="none"
+              height="6rem"
+              width="100%"
+            >
+              <path fill-opacity="1" d={curves[7]}></path>
+            </svg>
+            <div className="absolute bottom-0 bg-blue-500 h-11 w-screen" />
+          </div>
+          <div className="hero h-screen relative -translate-y-full ">
+            <div className="hero-content text-center">
+              <div className="max-w-md">
+                <h1 className="text-5xl font-bold">
+                  You were my brother, Anakin.
+                </h1>
+                <p className="py-6">
+                  Provident cupiditate voluptatem et in. Quaerat fugiat ut
+                  assumenda excepturi exercitationem quasi. In deleniti eaque
+                  aut repudiandae et a id nisi.
+                </p>
+                <button className="btn btn-primary">Get Started</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer className="footer p-10 bg-blue-500 text-neutral-content snap-center">
+          <div>
+            <span className="footer-title">Services</span>
+            <a className="link link-hover">Branding</a>
+            <a className="link link-hover">Design</a>
+            <a className="link link-hover">Marketing</a>
+            <a className="link link-hover">Advertisement</a>
+          </div>
+          <div>
+            <span className="footer-title">Company</span>
+            <a className="link link-hover">About us</a>
+            <a className="link link-hover">Contact</a>
+            <a className="link link-hover">Jobs</a>
+            <a className="link link-hover">Press kit</a>
+          </div>
+          <div>
+            <span className="footer-title">Legal</span>
+            <a className="link link-hover">Terms of use</a>
+            <a className="link link-hover">Privacy policy</a>
+            <a className="link link-hover">Cookie policy</a>
+          </div>
+        </footer>
      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-      <h1 className="text-3xl bg-blue-200 font-bold underline">
-      Hello world!
-      </h1>
-      <div className="rating gap-1">
-  <input type="radio" name="rating-3" className="mask mask-heart bg-red-400" />
-  <input type="radio" name="rating-3" className="mask mask-heart bg-orange-400" checked />
-  <input type="radio" name="rating-3" className="mask mask-heart bg-yellow-400" />
-  <input type="radio" name="rating-3" className="mask mask-heart bg-lime-400" />
-  <input type="radio" name="rating-3" className="mask mask-heart bg-green-400" />
-</div>
    </div>
-    
-  )
+  );
 }

-export default App
+export default App;
@@ -1,74 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.css'

 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
@@ -8,5 +8,17 @@ module.exports = {
  theme: {
    extend: {},
  },
-  plugins: [require("daisyui")],
+  plugins: [
+    require('@tailwindcss/typography'),
+    require("daisyui")
+  ],
+  daisyui: {
+    styled: true,
+    themes: true,
+    base: true,
+    utils: true,
+    logs: true,
+    rtl: false,
+    darkTheme: "dark",
+  }
 }
@@ -4,5 +4,5 @@ import tailwindcss from 'tailwindcss'

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()]
+  plugins: [react()]
 })