styles: page transtion when clicking on project

peakshift · Dec 27, 2023 · 32adcd6 · 32adcd6
1 parent 6d8c51c
commit 32adcd6
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 47 deletions.
diff --git a/v2/src/Components/ProjectsSelect/ProjectsSelect.tsx b/v2/src/Components/ProjectsSelect/ProjectsSelect.tsx
@@ -1,66 +1,105 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import { projects } from "./projects";
-import Link from "next/link";
 import { serifText } from "@/assets/fonts";
 import Image from "next/image";
 import useEmblaCarousel from "embla-carousel-react";
+import { useRouter } from "next/navigation";
+import Portal from "../Portal/Portal";
+import { motion } from "framer-motion";
 
 interface Props {
   excludeProjects?: string[];
 }
 
 export default function ProjectsSelect({ excludeProjects }: Props) {
   const [emblaRef] = useEmblaCarousel();
+  const router = useRouter();
+
+  const [openProject, setOpenProject] = useState<
+    (typeof projects)[number] | null
+  >(null);
 
   const options = projects.filter(
     (project) => !excludeProjects?.includes(project.slug)
   );
 
+  const onSelectProject = (idx: number) => {
+    const project = options[idx];
+
+    if (project.externalLink) {
+      window.open(project.externalLink, "_blank");
+      return;
+    }
+
+    setOpenProject(project);
+    router.prefetch(`/project/${project.slug}`);
+    setTimeout(() => {
+      router.push(`/project/${project.slug}`);
+    }, 400);
+  };
   return (
-    <div className="" ref={emblaRef}>
-      <ul className="flex gap-24">
-        {options.map((option, idx) => (
-          <li key={idx} className="shrink-0 grow-0 basis-[min(80%,600px)]">
-            <Link
-              href={option.externalLink ?? `/project/${option.slug}`}
-              {...(option.externalLink && {
-                target: "_blank",
-                rel: "noopener noreferrer",
-              })}
-              className={`p-24 flex flex-col uppercase border border-gray-900 max-w-[600px] h-full`}
-              style={{
-                ...(option.backgroundColor && {
-                  backgroundColor: option.backgroundColor,
-                }),
-              }}
+    <>
+      <div className="" ref={emblaRef}>
+        <ul className="flex gap-24">
+          {options.map((option, idx) => (
+            <motion.li
+              initial={false}
+              layout
+              layoutId={`project-${option.slug}`}
+              key={idx}
+              className="shrink-0 grow-0 basis-[min(80%,600px)]"
             >
-              <div className="flex flex-wrap justify-between gap-x-36 gap-y-16 font-medium">
-                <div>
-                  <p className="md:text-body1">{option.tagline} </p>
-                  <p className={`${serifText.className} text-body5`}>
-                    {option.title}
-                  </p>
-                </div>
-                <div>
-                  {option.tags.map((tag) => (
-                    <p key={tag} className="whitespace-nowrap">
-                      / {tag}
+              <button
+                className={`p-24 w-full flex flex-col items-stretch uppercase border-2 max-w-[600px] h-full text-left`}
+                style={{
+                  ...(option.backgroundColor && {
+                    backgroundColor: option.backgroundColor,
+                  }),
+                  borderColor: option.frameColor,
+                }}
+                onClick={() => onSelectProject(idx)}
+              >
+                <div className="flex flex-wrap md:flex-nowrap justify-between gap-x-36 gap-y-16 font-medium">
+                  <div>
+                    <p className="md:text-body1">{option.tagline} </p>
+                    <p className={`${serifText.className} text-body5`}>
+                      {option.title}
                     </p>
-                  ))}
+                  </div>
+                  <div>
+                    {option.tags.map((tag) => (
+                      <p key={tag} className="whitespace-nowrap">
+                        / {tag}
+                      </p>
+                    ))}
+                  </div>
+                </div>
+                <div className="mt-auto mx-auto">
+                  <Image
+                    src={option.image}
+                    alt=""
+                    className="max-w-[450px] w-full my-42 shadow-2xl"
+                  />
                 </div>
-              </div>
-              <div className="mt-auto">
-                <Image
-                  src={option.image}
-                  alt=""
-                  className="max-w-[450px] w-full mx-auto my-42 shadow-2xl"
-                />
-              </div>
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
+              </button>
+            </motion.li>
+          ))}
+        </ul>
+      </div>
+      <Portal id="frame-overlay">
+        {openProject && (
+          <motion.div
+            className="fixed inset-0 border-[10px] z-50"
+            layoutId={`project-${openProject.slug}`}
+            layout
+            style={{
+              backgroundColor: openProject.backgroundColor,
+              borderColor: openProject.frameColor,
+            }}
+          ></motion.div>
+        )}
+      </Portal>
+    </>
   );
 }
diff --git a/v2/src/Components/ProjectsSelect/projects.ts b/v2/src/Components/ProjectsSelect/projects.ts
@@ -10,7 +10,8 @@ type Project = {
   tagline: string;
   tags: string[];
   image: StaticImageData;
-  backgroundColor?: string;
+  backgroundColor: string;
+  frameColor: string;
   backgroundImage?: string;
   externalLink?: string;
 };
@@ -22,6 +23,7 @@ export const projects: Project[] = [
     tagline: "branding freedom money",
     tags: ["experience", "brand"],
     backgroundColor: "#EADC72",
+    frameColor: "#000",
     image: AdoptingBitcoinImage,
   },
   {
@@ -30,6 +32,7 @@ export const projects: Project[] = [
     tagline: "DEMOCRATISING ACCESS TO AI",
     tags: ["experience", "brand"],
     backgroundColor: "#FF6B00",
+    frameColor: "#FF6B00",
     image: AI4ALLImage,
     externalLink: "https://bolt.fun/tournaments/ai4all",
   },
@@ -39,6 +42,7 @@ export const projects: Project[] = [
     tagline: "BUILDING A VIRTUAL INCUBATOR HELPING FOUNDERS GO FROM 0-1",
     tags: ["experience", "community"],
     backgroundColor: "#AF59FE",
+    frameColor: "#AF59FF",
     image: BoltFunImage,
     externalLink: "https://bolt.fun",
   },

diff --git a/v2/src/app/globals.css b/v2/src/app/globals.css
@@ -53,7 +53,6 @@ body {
   position: relative;
   padding: 10px;
   background-color: var(--page-bg-color);
-  transition: background-color 0.5s ease-in-out;
 }
 
 .page-container {
@@ -93,3 +92,18 @@ body {
     display: none;
   }
 }
+
+.fade-in {
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/v2/src/app/project/Components/FadeIn.tsx b/v2/src/app/project/Components/FadeIn.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function FadeIn({ children }: Props) {
+  return <div className="fade-in">{children}</div>;
+}
diff --git a/v2/src/app/project/adopting-bitcoin/page.tsx b/v2/src/app/project/adopting-bitcoin/page.tsx
@@ -19,6 +19,7 @@ import { condensedHeadings, monoText, serifText } from "@/assets/fonts";
 import ColorsPalette from "../Components/ColorsPalette";
 import { Metadata } from "next";
 import ProjectsSelect from "@/Components/ProjectsSelect/ProjectsSelect";
+import FadeIn from "../Components/FadeIn";
 
 export const metadata: Metadata = {
   title: "Adopting Bitcoin",
@@ -27,7 +28,7 @@ export const metadata: Metadata = {
 
 export default function AdoptingBitcoinPage() {
   return (
-    <>
+    <FadeIn>
       <Container id="adopting-bitcoin-page" className="overflow-hidden">
         <section
           id="project-header"
@@ -312,7 +313,7 @@ export default function AdoptingBitcoinPage() {
           <ProjectsSelect excludeProjects={["adopting-bitcoin"]} />
         </section>
       </Container>
-    </>
+    </FadeIn>
   );
 }