fix:

- frame color - improve tickets row animation - add title to page
peakshift · Dec 26, 2023 · 6a2c86e · 6a2c86e
1 parent 9ea4bf0
commit 6a2c86e
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 37 deletions.
diff --git a/v2/src/Components/Frame/Frame.tsx b/v2/src/Components/Frame/Frame.tsx
@@ -1,7 +1,6 @@
 import React from "react";
+import styles from "./styles.module.css";
 
 export default function Frame() {
-  return (
-    <div className="fixed border-[10px] border-primary inset-0 z-30 pointer-events-none"></div>
-  );
+  return <div className={styles.frame}></div>;
 }
diff --git a/v2/src/Components/Frame/styles.module.css b/v2/src/Components/Frame/styles.module.css
@@ -0,0 +1,10 @@
+.frame {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  pointer-events: none;
+
+  --color: var(--frame-color, var(--primary));
+  border-color: var(--color);
+  border-width: 10px;
+}
diff --git a/v2/src/Components/Navbar/Navbar.tsx b/v2/src/Components/Navbar/Navbar.tsx
@@ -73,7 +73,7 @@ export default function Navbar() {
   return (
     <>
       <motion.nav
-        className="sticky w-full top-10 left-10 z-30 bg-inherit border-b-2 md:border-b-0 border-gray-300"
+        className="sticky w-full top-10 left-10 z-30 bg-inherit border-b-2 md:border-b-0 border-gray-500 border-opacity-20"
         initial="hide"
         animate="show"
         variants={{
@@ -137,6 +137,9 @@ export default function Navbar() {
       <FocusLock disabled={!isOpen}>
         <motion.nav
           variants={sideNavVariants}
+          transition={{
+            ease: "easeInOut",
+          }}
           initial={isOpen ? "show" : "hide"}
           animate={isOpen ? "show" : "hide"}
           className="fixed top-0 inset-x-0 bg-[var(--page-bg-color)] p-32 border-b border-gray-200 z-40"

diff --git a/v2/src/app/globals.css b/v2/src/app/globals.css
@@ -7,12 +7,19 @@
 @property --page-bg-color {
   syntax: "<color>";
   initial-value: #fff;
-  inherits: false;
+  inherits: true;
+}
+
+@property --final-frame-color {
+  syntax: "<color>";
+  initial-value: #000;
+  inherits: true;
 }
 
 :root {
   --primary: #dd1e3e;
   --page-bg-color: #fff;
+  --final-frame-color: var(--frame-color, var(--primary));
 }
 
 html {

diff --git a/v2/src/app/home/layout.tsx b/v2/src/app/home/layout.tsx
@@ -1,5 +1,3 @@
-import Frame from "@/Components/Frame/Frame";
-
 export const metadata = {
   title: "Peak Shift Ltd",
   description: "WE CRAFT DIGITAL PRODUCTS BUILT ON WEB, MOBILE & BITCOIN.",
@@ -10,10 +8,5 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return (
-    <>
-      {children}
-      <Frame />
-    </>
-  );
+  return <>{children}</>;
 }
diff --git a/v2/src/app/layout.tsx b/v2/src/app/layout.tsx
@@ -18,6 +18,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={sansText.className}>
         <Navbar />
+        <Frame />
         {children}
       </body>
     </html>

diff --git a/v2/src/app/project/Components/SetPageColor.tsx b/v2/src/app/project/Components/SetPageColor.tsx
@@ -2,23 +2,27 @@
 import { useLayoutEffect } from "react";
 
 interface Props {
-  color: string;
+  backgroundColor: string;
+  textColor: string;
+  frameColor: string;
 }
 
-export default function SetPageColor({ color }: Props) {
+export default function SetPageColor({
+  backgroundColor,
+  textColor,
+  frameColor,
+}: Props) {
   useLayoutEffect(() => {
-    // set color of --page-bg-color to yellow
-    document.body.style.setProperty("--page-bg-color", color);
-    // set color of --text-color to black
-    document.body.style.setProperty("--text-color", "black");
+    document.body.style.setProperty("--page-bg-color", backgroundColor);
+    document.body.style.setProperty("--text-color", textColor);
+    document.body.style.setProperty("--frame-color", frameColor);
 
     return () => {
-      // set color of --page-bg-color to white
-      document.body.style.setProperty("--page-bg-color", "white");
-      // set color of --text-color to black
-      document.body.style.setProperty("--text-color", "black");
+      document.body.style.setProperty("--page-bg-color", "");
+      document.body.style.setProperty("--text-color", "");
+      document.body.style.setProperty("--frame-color", "");
     };
-  }, [color]);
+  }, []);
 
   return null;
 }
diff --git a/v2/src/app/project/adopting-bitcoin/TicketsRow.tsx b/v2/src/app/project/adopting-bitcoin/TicketsRow.tsx
@@ -11,27 +11,34 @@ const MAX_TICKET_WIDTH = 400;
 export default function TicketsRow() {
   const [mounted, setMounted] = useState(false);
 
-  const { current: shuffledTickets } = useRef(
+  const [shuffledTickets] = useState(
     shuffleArray([Ticket1Image, Ticket2Image, Ticket3Image])
   );
+  const [initialPosition] = useState(Math.random() > 0.5 ? "left" : "right");
+  const [duration] = useState(Math.random() * 10 + 30);
 
-  const { current: initialPosition } = useRef(
-    Math.random() > 0.5 ? "left" : "right"
-  );
-
-  const { current: duration } = useRef(Math.random() * 10 + 30);
+  const [numTickets, setNumTickets] = useState(0);
+  const [ticketWidth, setTicketWidth] = useState(0);
 
   useEffect(() => {
     setMounted(true);
-  }, []);
 
-  if (!mounted) return null;
+    const handleResize = () => {
+      const windowWidth = window.innerWidth;
+      const ticketWidth = Math.min(MAX_TICKET_WIDTH, windowWidth / 4);
+      const numTickets = Math.floor((windowWidth * 2) / ticketWidth);
+      setNumTickets(numTickets);
+      setTicketWidth(ticketWidth);
+    };
 
-  const windowWidth = window.innerWidth;
+    handleResize();
 
-  const ticketWidth = Math.min(MAX_TICKET_WIDTH, windowWidth / 4);
+    window.addEventListener("resize", handleResize);
 
-  const numTickets = Math.floor((windowWidth * 2) / ticketWidth);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  if (!mounted) return null;
 
   return (
     <div className="-rotate-12">

diff --git a/v2/src/app/project/adopting-bitcoin/assets/website.png b/v2/src/app/project/adopting-bitcoin/assets/website.png
diff --git a/v2/src/app/project/adopting-bitcoin/page.tsx b/v2/src/app/project/adopting-bitcoin/page.tsx
@@ -16,11 +16,21 @@ import MerchImage from "./assets/merch.png";
 
 import { condensedHeadings, monoText, serifText } from "@/assets/fonts";
 import ColorsPalette from "../Components/ColorsPalette";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Adopting Bitcoin",
+  description: "Designing the largest Bitcoin conference in El Salvador",
+};
 
 export default function AdoptingBitcoinPage() {
   return (
     <>
-      <SetPageColor color={projectData.pageColor} />
+      <SetPageColor
+        backgroundColor={projectData.pageColor}
+        frameColor={projectData.pageColor}
+        textColor="#000"
+      />
       <Container className="overflow-hidden">
         <section
           id="project-header"
@@ -61,7 +71,7 @@ export default function AdoptingBitcoinPage() {
           </p>
           <TicketsRow />
         </section>
-        <section className="grid grid-cols-1 md:grid-cols-2 gap-x-100 py-80">
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-x-100 gap-y-24 py-80">
           <div>
             <Image
               src={ALightningSummitinElSalvadorImage}