feat: use phospher icons & add navbar

sgoudham · Aug 6, 2023 · 2c9877e · 2c9877e
1 parent c4be353
commit 2c9877e
Show file tree

Hide file tree

Showing 11 changed files with 176 additions and 56 deletions.
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -1,6 +1,12 @@
 import { Text } from "./utils/Text";
-import { GitHubSvg, InstagramSvg, LinkedInSvg, TwitterSvg } from "./Images";
+import {
+  GitHubSvg,
+  InstagramSvg,
+  LinkedInSvg,
+  TwitterSvg,
+} from "./icons/SocialMedia";
 import Link from "next/link";
+import { Heart } from "./icons/Heart";
 
 export const Footer = () => {
   console.log(process.env.NEXT_PUBLIC_IS_PREVIEW);
@@ -9,12 +15,12 @@ export const Footer = () => {
       <div className="flex flex-col justify-center items-center gap-y-6 pt-10 pb-20">
         <div className="gap-y-3 text-center">
           <p className="text-lg lg:text-xl xl:text-2xl">
-            Designed With &#9829;
+            Designed With <Heart />
           </p>
           <Text>&copy; {new Date().getFullYear()} Goudham Suresh</Text>
         </div>
         {process.env.NEXT_PUBLIC_IS_PREVIEW && <PreviewBuild />}
-        <SocialMediaIcons />
+        <SocialMediaRow />
       </div>
     </footer>
   );
@@ -47,7 +53,7 @@ const PreviewBuild = () => {
   );
 };
 
-const SocialMediaIcons = () => {
+const SocialMediaRow = () => {
   return (
     <div className="flex gap-3">
       <a

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -1,14 +1,14 @@
-import { ProfilePicture } from "./Images";
+import { Wave } from "./icons/Wave";
 import { H1 } from "./utils/Titles";
 
 export const Header = () => {
   return (
-    <div className="flex flex-col gap-y-2 items-center">
-      <ProfilePicture />
-      <H1>
-        Hiya <div className="inline-block animate-waving-hand">👋</div>, I&#39;m
-        Goudham
-      </H1>
-    </div>
+    <H1>
+      Hiya{" "}
+      <div className="inline-block animate-waving-hand">
+        <Wave />
+      </div>
+      , I&#39;m Goudham
+    </H1>
   );
 };
diff --git a/app/components/Navigation.tsx b/app/components/Navigation.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { ProfilePicture } from "./images/ProfilePicture";
+
+export const NavBar = () => {
+  return (
+    <nav className="border-b-2 border-surface1">
+      <div className="flex flex-row items-center justify-center text-lg lg:text-xl xl:text-2xl">
+        <div className="p-2 flex flex-row gap-x-4 items-center tracking-tight font-bold">
+          <ProfilePicture />
+          <Link href="/" className="transition duration-300 group">
+            <span className="group-hover:text-blue transition-all duration-300">
+              &lt; Home /&gt;
+            </span>
+            <span className="block max-w-0 group-hover:max-w-full transition-all h-0.5 bg-blue duration-300"></span>
+          </Link>
+          <Link
+            href="/projects"
+            className="transition duration-300 group"
+          >
+            <span className="group-hover:text-blue transition-all duration-300">
+              &lt; Projects /&gt;
+            </span>
+            <span className="block max-w-0 group-hover:max-w-full transition-all h-0.5 bg-blue duration-300"></span>
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+};
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
@@ -1,7 +1,7 @@
 import { fetchUserRepositories } from "@/app/lib/api";
+import { Star } from "./icons/Star";
 import Link from "next/link";
 import { H2 } from "./utils/Titles";
-import { StyledLink } from "./utils/StyledLink";
 
 export const Projects = async () => {
   const projects = await fetchUserRepositories().then((res) =>
@@ -19,17 +19,14 @@ export const Projects = async () => {
 
   return (
     <section className="flex flex-col items-center gap-y-3 px-5">
-      <H2>Project Showcase</H2>
+      <H2>Favourite Projects</H2>
       <div className="rounded-lg text-md lg:text-lg xl:text-xl">
         <div className="flex flex-col gap-y-4">
           {projects.map((project) => (
             <Project key={project.name} project={project} />
           ))}
         </div>
       </div>
-      <StyledLink href="/projects" className="self-end">
-        (cont.)
-      </StyledLink>
     </section>
   );
 };
@@ -38,18 +35,20 @@ export const Project = ({ project }: { project: RepositoryData }) => {
   return (
     <Link
       href={project.html_url}
-      className="bg-base w-full rounded-xl border-2 border-mantle focus:outline-none focus:ring-1 focus:ring-blue ring-offset-0 shadow-xl hover:shadow-2xl hover:scale-105 p-3"
+      className="bg-base w-full rounded-xl border-2 border-mantle focus:outline-none focus:ring-1 focus:ring-blue ring-offset-0 shadow-lg hover:scale-105 duration-300 p-3"
     >
-      <div className="flex flex-col gap-y-1">
-        <span className="font-semibold hover:underline">{project.name}</span>
-        {project.description && (
-          <p className="text-sm lg:text-md xl:text-lg text-subtext0">
-            {project.description}
-          </p>
-        )}
+      <div className="flex flex-col gap-y-1 h-full justify-between">
+        <div>
+          <span className="font-semibold hover:underline">{project.name}</span>
+          {project.description && (
+            <div className="text-sm lg:text-md xl:text-lg text-subtext0">
+              {project.description}
+            </div>
+          )}
+        </div>
         <div className="self-end">
           <p className="text-md font-medium bg-mantle rounded-xl px-3">
-            {project.stargazers_count} ⭐
+            {project.stargazers_count} <Star />
           </p>
         </div>
       </div>

diff --git a/app/components/icons/Heart.tsx b/app/components/icons/Heart.tsx
@@ -0,0 +1,18 @@
+export const Heart = () => {
+  return (
+    <svg
+      className="h-5 w-5 lg:h-6 lg:w-6 xl:h-7 xl:w-7 inline-block align-text-bottom"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M128,216S24,160,24,94A54,54,0,0,1,78,40c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32a54,54,0,0,1,54,54C232,160,128,216,128,216Z"
+        fill="red"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="0"
+      />
+    </svg>
+  );
+};
diff --git a/app/components/Images.tsx → app/components/icons/SocialMedia.tsx b/app/components/Images.tsx → app/components/icons/SocialMedia.tsx
@@ -1,25 +1,9 @@
-import Image from "next/image";
-
-const iconColours: string =
+const socialMediaColours: string =
   "h-8 w-8 lg:h-9 lg:w-9 xl:h-10 xl:w-10 fill-surface2 transition group-hover:fill-blue";
 
-export const ProfilePicture = ({}) => {
-  return (
-    <Image
-      src="/profile-picture.png"
-      width={400}
-      height={400}
-      alt="Goudham smiling at the camera"
-      className="w-32 h-32 lg:w-40 lg:h-40 xl:w-48 xl:h-48"
-      quality={100}
-      priority={true}
-    />
-  );
-};
-
 export const GitHubSvg = () => {
   return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" className={iconColours}>
+    <svg viewBox="0 0 24 24" aria-hidden="true" className={socialMediaColours}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -31,23 +15,23 @@ export const GitHubSvg = () => {
 
 export const TwitterSvg = () => {
   return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" className={iconColours}>
+    <svg viewBox="0 0 24 24" aria-hidden="true" className={socialMediaColours}>
       <path d="M20.055 7.983c.011.174.011.347.011.523 0 5.338-3.92 11.494-11.09 11.494v-.003A10.755 10.755 0 0 1 3 18.186c.308.038.618.057.928.058a7.655 7.655 0 0 0 4.841-1.733c-1.668-.032-3.13-1.16-3.642-2.805a3.753 3.753 0 0 0 1.76-.07C5.07 13.256 3.76 11.6 3.76 9.676v-.05a3.77 3.77 0 0 0 1.77.505C3.816 8.945 3.288 6.583 4.322 4.737c1.98 2.524 4.9 4.058 8.034 4.22a4.137 4.137 0 0 1 1.128-3.86A3.807 3.807 0 0 1 19 5.274a7.657 7.657 0 0 0 2.475-.98c-.29.934-.9 1.729-1.713 2.233A7.54 7.54 0 0 0 22 5.89a8.084 8.084 0 0 1-1.945 2.093Z"></path>
     </svg>
   );
 };
 
 export const LinkedInSvg = () => {
   return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" className={iconColours}>
+    <svg viewBox="0 0 24 24" aria-hidden="true" className={socialMediaColours}>
       <path d="M18.335 18.339H15.67v-4.177c0-.996-.02-2.278-1.39-2.278-1.389 0-1.601 1.084-1.601 2.205v4.25h-2.666V9.75h2.56v1.17h.035c.358-.674 1.228-1.387 2.528-1.387 2.7 0 3.2 1.778 3.2 4.091v4.715zM7.003 8.575a1.546 1.546 0 01-1.548-1.549 1.548 1.548 0 111.547 1.549zm1.336 9.764H5.666V9.75H8.34v8.589zM19.67 3H4.329C3.593 3 3 3.58 3 4.297v15.406C3 20.42 3.594 21 4.328 21h15.338C20.4 21 21 20.42 21 19.703V4.297C21 3.58 20.4 3 19.666 3h.003z"></path>
     </svg>
   );
 };
 
 export const InstagramSvg = () => {
   return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" className={iconColours}>
+    <svg viewBox="0 0 24 24" aria-hidden="true" className={socialMediaColours}>
       <path d="M12 3c-2.444 0-2.75.01-3.71.054-.959.044-1.613.196-2.185.418A4.412 4.412 0 0 0 4.51 4.511c-.5.5-.809 1.002-1.039 1.594-.222.572-.374 1.226-.418 2.184C3.01 9.25 3 9.556 3 12s.01 2.75.054 3.71c.044.959.196 1.613.418 2.185.23.592.538 1.094 1.039 1.595.5.5 1.002.808 1.594 1.038.572.222 1.226.374 2.184.418C9.25 20.99 9.556 21 12 21s2.75-.01 3.71-.054c.959-.044 1.613-.196 2.185-.419a4.412 4.412 0 0 0 1.595-1.038c.5-.5.808-1.002 1.038-1.594.222-.572.374-1.226.418-2.184.044-.96.054-1.267.054-3.711s-.01-2.75-.054-3.71c-.044-.959-.196-1.613-.419-2.185A4.412 4.412 0 0 0 19.49 4.51c-.5-.5-1.002-.809-1.594-1.039-.572-.222-1.226-.374-2.184-.418C14.75 3.01 14.444 3 12 3Zm0 1.622c2.403 0 2.688.009 3.637.052.877.04 1.354.187 1.67.31.421.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.671.043.95.052 1.234.052 3.637s-.009 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.67-.163.421-.358.72-.673 1.036a2.79 2.79 0 0 1-1.035.673c-.317.123-.794.27-1.671.31-.95.043-1.234.052-3.637.052s-2.688-.009-3.637-.052c-.877-.04-1.354-.187-1.67-.31a2.789 2.789 0 0 1-1.036-.673 2.79 2.79 0 0 1-.673-1.035c-.123-.317-.27-.794-.31-1.671-.043-.95-.052-1.234-.052-3.637s.009-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.421.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.671-.31.95-.043 1.234-.052 3.637-.052Z"></path>
       <path d="M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm0-7.622a4.622 4.622 0 1 0 0 9.244 4.622 4.622 0 0 0 0-9.244Zm5.884-.182a1.08 1.08 0 1 1-2.16 0 1.08 1.08 0 0 1 2.16 0Z"></path>
     </svg>

diff --git a/app/components/icons/Star.tsx b/app/components/icons/Star.tsx
@@ -0,0 +1,19 @@
+export const Star = () => {
+  return (
+    <svg
+      className="h-5 w-5 xl:h-6 xl:w-6 inline align-text-bottom"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+    >
+      <rect width="256" height="256" fill="none" />
+      <path
+        d="M135.34,28.9l23.23,55.36a8,8,0,0,0,6.67,4.88l59.46,5.14a8,8,0,0,1,4.54,14.07L184.13,147.7a8.08,8.08,0,0,0-2.54,7.89l13.52,58.54a8,8,0,0,1-11.89,8.69l-51.1-31a7.93,7.93,0,0,0-8.24,0l-51.1,31a8,8,0,0,1-11.89-8.69l13.52-58.54a8.08,8.08,0,0,0-2.54-7.89L26.76,108.35A8,8,0,0,1,31.3,94.28l59.46-5.14a8,8,0,0,0,6.67-4.88L120.66,28.9A8,8,0,0,1,135.34,28.9Z"
+        fill="orange"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="0"
+      />
+    </svg>
+  );
+};
diff --git a/app/components/icons/Wave.tsx b/app/components/icons/Wave.tsx
@@ -0,0 +1,51 @@
+export const Wave = () => {
+  return (
+    <svg
+      className="h-9 w-9 lg:h-10 lg:w-10 xl:h-12 xl:w-12 inline-block align-bottom text-peach"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+    >
+      <rect width="256" height="256" fill="none" />
+      <path
+        d="M98,64.31a20,20,0,0,1,34.64-20l28,48.5"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
+      />
+      <path
+        d="M71.35,98.17l-16-27.71A20,20,0,0,1,90,50.46l34,58.89"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
+      />
+      <path
+        d="M156,164.77a40,40,0,0,1,14.64-54.64l-10-17.32a20,20,0,0,1,34.64-20l18,31.18A80,80,0,0,1,74.7,184l-38-65.82a20,20,0,0,1,34.65-20l22,38.1"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
+      />
+      <path
+        d="M192,32a52.12,52.12,0,0,1,32,24"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
+      />
+      <path
+        d="M74.62,232c-11-8.69-19.39-19.48-26.62-32"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
+      />
+    </svg>
+  );
+};
diff --git a/app/components/images/ProfilePicture.tsx b/app/components/images/ProfilePicture.tsx
@@ -0,0 +1,15 @@
+import Image from "next/image";
+
+export const ProfilePicture = ({}) => {
+  return (
+    <Image
+      src="/profile-picture.png"
+      width={400}
+      height={400}
+      alt="Goudham smiling at the camera"
+      className="motion-safe:hover:animate-spin w-12 h-12 lg:w-14 lg:h-14 xl:w-16 xl:h-16"
+      quality={100}
+      priority={true}
+    />
+  );
+};
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import "./globals.css";
 import type { Metadata } from "next";
 import { Raleway } from "next/font/google";
 import { Footer } from "./components/Footer";
+import { NavBar } from "./components/Navigation";
 
 const raleway = Raleway({
   subsets: ["latin"],
@@ -39,8 +40,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${raleway.className} latte dark:mocha bg-base dark:bg-crust text-text flex flex-col overflow-auto h-screen gap-y-10 py-10`}
+        className={`${raleway.className} latte dark:mocha bg-base dark:bg-crust text-text flex flex-col overflow-auto h-screen gap-y-10 pb-10`}
       >
+        <NavBar/>
         {children}
         <Footer />
       </body>

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -2,7 +2,6 @@ import { fetchUserRepositories } from "../lib/api";
 import { Project } from "../components/Projects";
 import { Text } from "../components/utils/Text";
 import { H1 } from "../components/utils/Titles";
-import { StyledLink } from "../components/utils/StyledLink";
 
 export default async function Page() {
   const projects = await fetchUserRepositories().then((res) =>
@@ -14,9 +13,12 @@ export default async function Page() {
   return (
     <div className="self-center max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-4xl flex flex-col gap-y-10 grow">
       <H1>All Projects</H1>
-      <div className="text-center">
+      <div className="flex flex-col mx-3 gap-3 text-center">
         <Text>
-          All my public projects, sorted from the highest starred to the lowest!
+          Here&apos;s a list of all my public projects, they are sorted by most
+          starred. Note that some projects are still under development and/or
+          unfinished, but I&apos;d like to get around to finishing them at some
+          point in the future!
         </Text>
         <Text>
           I promise I&apos;ll implement sorting options soon
@@ -33,11 +35,6 @@ export default async function Page() {
           </div>
         ))}
       </div>
-      <div className="flex justify-center">
-        <StyledLink href="/" className="text-center">
-          Return Home
-        </StyledLink>
-      </div>
     </div>
   );
 }