Drop one project, merge cards into one section

TetraTsunami · Nov 25, 2024 · 52b14de · 52b14de
1 parent 3e6c2c4
commit 52b14de
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 32 deletions.
diff --git a/src/components/cards/CertCard.tsx b/src/components/cards/CertCard.tsx
@@ -1,6 +1,3 @@
-import { SizeProp } from "@fortawesome/fontawesome-svg-core";
-import { faCodepen } from "@fortawesome/free-brands-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image, { StaticImageData } from "next/image";
 import HoverCard from "./HoverCard";
 
@@ -9,40 +6,37 @@ export default function CertCard({
     certUrl,
     collectionUrl,
     imageUrl,
+    year,
 }: {
     name: string;
     certUrl: string;
     collectionUrl?: string;
     imageUrl: string | StaticImageData;
+    year: string;
 }) {
     return (
         <HoverCard>
-            <div className="border-grey-300 hover:outlinex group relative h-56 w-full overflow-clip rounded-xl border-4 border-content/80 shadow-xl outline-4 outline-accent transition-transform duration-200 focus-within:outline">
-                <a href={certUrl} className="absolute inset-0">
+            <div className="border-grey-300 hover:outlinex group h-56 overflow-clip rounded-xl border-4 border-content/80 shadow-xl outline-4 outline-accent transition-transform duration-200 focus-within:outline">
+                <a href={certUrl}>
                     <Image
                         src={imageUrl}
                         alt={name}
                         fill
-                        className="h-full w-full rounded-md bg-bkg object-cover"
-                        sizes="(max-width: 600px) 100vw, (max-width 1024px) 66vw, 33vw" />
-                    <div className="absolute bottom-0 left-0 right-0 text-ellipsis whitespace-nowrap bg-bkg/75 shadow-lg">
-                        <span className="text-sm text-slate-900 dark:text-white">
-                            {name}
+                        sizes="(max-width: 600px) 100vw, (max-width 1024px) 66vw, 33vw" 
+                    />
+                    <div className="absolute bottom-0 right-0 text-ellipsis whitespace-nowrap rounded-tl-lg bg-bkg/75 px-2 shadow-lg">
+                        <span className="text-sm font-bold italic text-slate-900 dark:text-white">
+                            {year}
                         </span>
                     </div>
                 </a>
             </div>
             {collectionUrl && (
                 <a
                     href={collectionUrl}
-                    className="absolute bottom-6 right-3 rounded-full shadow-xl"
+                    className="absolute bottom-0 left-0 rounded-tr-lg bg-bkg/75 px-2 text-sm text-slate-900 underline shadow-lg hover:text-accent dark:text-white"
                 >
-                    <FontAwesomeIcon
-                        icon={faCodepen}
-                        className="rounded-full border-4 bg-violet-300 p-4 text-black outline-4 outline-violet-600 hover:outline active:bg-violet-400 group-hover:scale-105 group-hover:hover:scale-110"
-                        size={"xl" as SizeProp}
-                    />
-                    <p className="visible-hidden">Codepen collection</p>
+                    Codepen collection
                 </a>
             )}
         </HoverCard>

diff --git a/src/components/cards/HoverCard.tsx b/src/components/cards/HoverCard.tsx
@@ -1,7 +1,7 @@
 export default function HoverCard({ children, noHoverChildren }: { children: React.ReactNode, noHoverChildren?: React.ReactNode }) {
   return (
     <div>
-      <div className="border-grey-300 group relative block h-52 w-full overflow-hidden rounded-xl border-4 shadow-lg outline-4 outline-violet-600 transition-transform duration-200 hover:scale-105 hover:outline">
+      <div className="border-grey-300 group relative block h-52 w-full overflow-hidden rounded-xl border-4 shadow-lg ring-accent transition-transform duration-200 hover:scale-105 hover:ring-4">
         {children}
       </div>
       <div className="can-hover:hidden">{noHoverChildren}</div>

diff --git a/src/layouts/Projects.tsx b/src/layouts/Projects.tsx
@@ -1,8 +1,6 @@
 import CertCard from "../components/cards/CertCard";
 import ProjectCard from "../components/cards/ProjectCard";
-import GridDivider from "../components/util/GridDivider";
 import {
-    cricket_chat,
     fcc_backend,
     fcc_datavis,
     fcc_frontend,
@@ -19,8 +17,7 @@ import {
 
 export default function Projects() {
     return (
-        <div className="mt-3 grid w-full content-evenly gap-6 pt-3 text-center grid-cols-flow-64">
-            <GridDivider name="2024" />
+        <div className="my-3 grid w-full content-evenly gap-6 pt-3 text-center grid-cols-flow-64">
             <ProjectCard
                 name="UW Events listing"
                 href="https://uwevents.tsuni.dev"
@@ -49,42 +46,45 @@ export default function Projects() {
                 description="A project that embeds Discord statuses in SVGs that can be easily placed anywhere."
                 year="2024"
             />
-            <GridDivider name="2023" />
-            <CertCard
-                name="Back End Development and APIs"
-                certUrl="https://www.freecodecamp.org/certification/Tsuni/back-end-development-and-apis"
-                imageUrl={fcc_backend}
-            />
             <ProjectCard
                 name="The Gouda Times"
                 href="https://gouda.tsuni.dev"
                 imageUrl={cheese}
                 description="A website with cheesey articles based on the New York Times. My project for CheeseHacks 2023, a hackathon hosted by UW-Madison."
                 year="2023"
             />
-            <GridDivider name="2022" />
+            <CertCard
+                name="Back End Development and APIs"
+                certUrl="https://www.freecodecamp.org/certification/Tsuni/back-end-development-and-apis"
+                imageUrl={fcc_backend}
+                year="2023"
+            />
             <CertCard
                 name="Front End Web Development"
                 certUrl="https://www.freecodecamp.org/certification/Tsuni/responsive-web-design"
                 collectionUrl="https://codepen.io/collection/rxMyMz"
                 imageUrl={fcc_webdesign}
+                year="2022"
             />
             <CertCard
                 name="JS Algorithms and Data Structures"
                 certUrl="https://www.freecodecamp.org/certification/Tsuni/javascript-algorithms-and-data-structures"
                 imageUrl={fcc_js}
+                year="2022"
             />
             <CertCard
                 name="Front End Development Libraries"
                 certUrl="https://www.freecodecamp.org/certification/Tsuni/front-end-development-libraries"
                 collectionUrl="https://codepen.io/collection/zxdedJ"
                 imageUrl={fcc_frontend}
+                year="2022"
             />
             <CertCard
                 name="Data Visualization"
                 certUrl="https://www.freecodecamp.org/certification/Tsuni/data-visualization"
                 collectionUrl="https://codepen.io/collection/GoOPLo"
                 imageUrl={fcc_datavis}
+                year="2022"
             />
             <ProjectCard
                 name="Mark Neumann for Congress"
@@ -100,14 +100,13 @@ export default function Projects() {
                 description="The website you're currently on! Built with Next.js, Tailwind CSS, and TypeScript."
                 year="2022"
             />
-            <GridDivider name="2021" />
-            <ProjectCard
+            {/* <ProjectCard
                 name="Cricket Bot"
                 href="https://github.com/TetraTsunami/cricket-bot"
                 imageUrl={cricket_chat}
                 description="A fun little Discord bot with a variety of unique functions (such as image manipulation, pinging Minecraft servers, and more)."
                 year="2021"
-            />
+            /> */}
         </div>
     );
 }