feat:

- created projects page and projectcard component - added memoji to homepage - changed heading sizing in link/tech/projects page
idkzsh · Sep 9, 2023 · 50a4f97 · 50a4f97
1 parent 665070e
commit 50a4f97
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 23 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/app/links/page.tsx b/app/links/page.tsx
@@ -1,18 +1,15 @@
 import LinkCard from "@/components/link-card";
-import { FaLinkedin, FaGithub, FaDiscord } from "react-icons/fa";
+import { FaLinkedin, FaGithub, FaDiscord, FaSpotify } from "react-icons/fa";
 import { FaXTwitter } from "react-icons/fa6";
 import { MdOutlineAlternateEmail } from "react-icons/md";
 import Link from "next/link";
-import Head from "next/head";
+
 
 export default function Links() {
   return (
     <>
-      <Head>
-        <title>idkz</title> {/* Set the page title here */}
-      </Head>
       <div className="gap-4 flex flex-col items-center justify-center w-[80vw] max-w-[800px] h-[70vh] mb-11">
-        <h2 className="flex justify-start min-w-[300px] w-[95%] ">LINKS</h2>
+        <h2 className="flex justify-start min-w-[300px] w-[95%] text-sm">LINKS</h2>
         <hr className="border-[0.5px] border-secondary min-w-[300px] w-[95%] " />
         <div className="flex gap-3 flex-wrap w-full justify-center">
           <Link href="mailto:[email protected]">
@@ -52,14 +49,24 @@ export default function Links() {
             target="_blank"
             href="https://discord.com/users/615693931509972993"
           >
-            {" "}
             <LinkCard
               title="Discord"
               bg="bg-indigo-500"
               color="text-indigo-500"
               icon={<FaDiscord />}
             />
           </Link>
+          <Link
+            target="_blank"
+            href="https://open.spotify.com/user/4djpn5qmz682f8zitccyfljde?si=1d3752df943d4e60"
+          >
+            <LinkCard
+              title="Spotify"
+              bg="bg-green-500"
+              color="text-green-500"
+              icon={<FaSpotify />}
+            />
+          </Link>
         </div>
       </div>
     </>

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -0,0 +1,18 @@
+import ProjectCard from "@/components/project-card";
+import React from "react";
+
+const Projects = () => {
+  return (
+    <>
+      <div className="gap-4 flex flex-col items-center justify-center w-[80vw] max-w-[800px] h-[70vh] mb-11">
+        <h2 className="flex justify-start min-w-[300px] w-[95%] text-sm">PROJECTS</h2>
+        <hr className="border-[0.5px] border-secondary min-w-[300px] w-[95%] " />
+        <div className="flex gap-3 flex-wrap w-full justify-center">
+            <ProjectCard title="coming soon"/>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Projects;
diff --git a/app/tech/page.tsx b/app/tech/page.tsx
@@ -11,7 +11,7 @@ export default function Tech() {
   return (
     <>
       <div className="gap-4 flex flex-col items-center justify-center w-[80vw] max-w-[800px] h-[800px] max-h-[80vh] mb-11">
-        <h2 className="flex justify-start min-w-[300px] w-[95%] ">TECH</h2>
+        <h2 className="flex justify-start min-w-[300px] w-[95%] text-sm">TECH</h2>
         <hr className="border-[0.5px] border-secondary min-w-[300px] w-[95%] " />
         <div className="flex gap-3 flex-wrap w-full justify-center">
           <TechCard

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -59,11 +59,21 @@ const Footer = () => {
             </div>
           )}
         </Link>
-        <div className="flex flex-col justify-center items-center">
-          <div className="text-xl">
-            <FaDiagramProject />
-          </div>
-        </div>
+        <Link href="/projects">
+          {path === "/projects" ? (
+            <div className="flex flex-col justify-center items-center">
+              <div className="text-3xl text-teal-600">
+                <FaDiagramProject />
+              </div>
+            </div>
+          ) : (
+            <div className="flex flex-col justify-center items-center">
+              <div className="text-xl">
+                <FaDiagramProject />
+              </div>
+            </div>
+          )}
+        </Link>
       </div>
     </div>
   );

diff --git a/components/Home.tsx b/components/Home.tsx
@@ -1,14 +1,21 @@
 const Home = () => {
   return (
-    <div className="flex flex-col h-[40vh] max-w-[800px] w-full justify-center items-center">
-      <div className="flex w-[350px] items-center justify-start">
-        <div className="text-teal-600 text-4xl font-bold p-2">Zach</div>
-        <div className="text-4xl font-bold">Wong</div>
+    <div className="flex flex-wrap h-[40vh] max-w-[850px] w-full justify-center items-center gap-3">
+      <div>
+        <div className="flex w-[350px] items-center justify-start">
+          <div className="text-teal-600 text-4xl font-bold p-2">Zach</div>
+          <div className="text-4xl font-bold">Wong</div>
+        </div>
+        <div className="text-4xl w-[350px] px-2 font-thin">
+          full stack developer
+        </div>
+        <div className="flex w-[350px] justify-end items-center px-2 gap-1">
+          I like to <span className=" text-teal-600">build</span> cool stuff
+        </div>
       </div>
-      <div className="text-4xl w-[350px] px-2 font-thin">full stack developer</div>
-      <div>I like to build cool stuff</div>
+      <img src="memoji.png" className="w-[150px]" />
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/components/Spacer.tsx b/components/Spacer.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const Spacer = () => {
   return (
-    <div className='w-full h-10'></div>
+    <div className='w-full h-5'></div>
   )
 }
 

diff --git a/components/project-card.tsx b/components/project-card.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+interface Props {
+  icon?: React.ReactNode;
+  iconAlt?: string;
+  title: string;
+  color?: string;
+  bg?: string;
+}
+
+const ProjectCard = ({ icon, title, color, bg, iconAlt }: Props) => {
+  return (
+    <div
+      className={` text-2xl flex justify-center gap-2 items-center w-[300px] h-[60px] bg-card rounded-lg`}
+    >
+      <div
+        className={`flex items-center justify-center ${color} ${bg} w-8 h-8 rounded-lg bg-opacity-10`}
+      >
+
+      </div>
+      <span className="text-sm">{title}</span>
+    </div>
+  );
+};
+
+export default ProjectCard;
diff --git a/public/memoji.jpg b/public/memoji.jpg
diff --git a/public/memoji.png b/public/memoji.png