From e5186462f3e4aacfe8eb1c6f23421f31b3d7b756 Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Sun, 26 Feb 2023 19:57:23 -0600
Subject: [PATCH] Switch to new fonts, darker background with gradient

---
 src/components/AppWrapper.tsx |   6 +-
 src/components/ItemCard.tsx   |   4 +-
 src/pages/index.tsx           | 288 ++++++++++++++++++----------------
 src/styles/globals.scss       |   4 +
 4 files changed, 165 insertions(+), 137 deletions(-)

diff --git a/src/components/AppWrapper.tsx b/src/components/AppWrapper.tsx
index 12d6f6c..4eeba19 100644
--- a/src/components/AppWrapper.tsx
+++ b/src/components/AppWrapper.tsx
@@ -18,7 +18,7 @@ type WrapperProps = {
 };
 
 const AppWrapper: FunctionComponent<WrapperProps> = ({current, children, hideNavigation, className}: WrapperProps) => {
-    return <main className="min-h-screen bg-gradient-to-tl from-zinc-900 via-zinc-400/10 to-zinc-900 text-zinc-50">
+    return <main className={classNames("body-gradient min-h-screen text-zinc-50", className)}>
         {!hideNavigation ? <Disclosure as="nav">
             {({open}) => (
                 <>
@@ -38,14 +38,14 @@ const AppWrapper: FunctionComponent<WrapperProps> = ({current, children, hideNav
                             </div>
                             <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
                                 <div className="hidden sm:ml-6 sm:block">
-                                    <div className="flex space-x-4">
+                                    <div className="flex space-x-4 text-lg font-roboto  ">
                                         {navigation.map((item) => (
                                             <Link
                                                 key={item.name}
                                                 href={item.href}
                                                 className={classNames(
                                                     item.id == current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-800/60 hover:text-white',
-                                                    'px-2.5 py-1 rounded-md text-sm font-medium text-lg'
+                                                    'px-2.5 py-1 rounded-md'
                                                 )}
                                                 aria-current={item.id == current ? 'page' : undefined}
                                             >
diff --git a/src/components/ItemCard.tsx b/src/components/ItemCard.tsx
index e711398..706914a 100644
--- a/src/components/ItemCard.tsx
+++ b/src/components/ItemCard.tsx
@@ -53,8 +53,8 @@ const ItemCard = ({banner, bannerBlur, title, description, links, location, bann
                 <div
                     className="col-span-12 sm:col-span-9 lg:col-span-8 max-h-full overflow-hidden drop-shadow-2xl pb-2 md:p-1 pl-2">
                     <Link href={{pathname: location}}
-                          className="text-lg sm:text-2xl md:text-3xl font-semibold">{title}</Link>
-                    <div className="description mt-0 md:mt-1.5 text-base sm:text-xl md:text-xl overflow-hidden"
+                          className="text-lg sm:text-2xl md:text-3xl font-semibold font-roboto">{title}</Link>
+                    <div className="description mt-0 md:mt-1.5 text-base sm:text-xl md:text-xl font-light overflow-hidden"
                          onClick={(e) => {
                              e.stopPropagation();
                              navigate();
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fa33fcf..efb1a6a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,160 +1,184 @@
-import {type NextPage} from "next";
+import { type NextPage } from "next";
 import Head from "next/head";
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
 import ItemCard from "../components/ItemCard";
-import {getPlaiceholder} from "plaiceholder";
-import {useBreakpointValue} from "../utils/helpers";
-import type {Project} from "../utils/types";
+import { getPlaiceholder } from "plaiceholder";
+import { useBreakpointValue } from "../utils/helpers";
+import type { Project } from "../utils/types";
 import Link from "next/link";
+import Balancer from "react-wrap-balancer";
 import AppWrapper from "../components/AppWrapper";
 
 type ProjectWithBlur = Project & { bannerBlur: string };
 
-
 type HomeStaticProps = {
-    projects: ProjectWithBlur[];
-}
+  projects: ProjectWithBlur[];
+};
 
 export async function getStaticProps() {
-    const projects: Project[] = [
+  const projects: Project[] = [
+    {
+      title: "Portal",
+      banner: "/portal/banner.jpeg",
+      location: "/portal",
+      longDescription:
+        "An advanced membership & event management system for my university's premier computer science organization.",
+      shortDescription:
+        "Advanced membership & event management system for students",
+      links: [
         {
-            title: "Portal",
-            banner: "/portal/banner.jpeg",
-            location: "/portal",
-            longDescription: "An advanced membership & event management system for my university's premier computer science organization.",
-            shortDescription: "Advanced membership & event management system for students",
-            links: [
-                {
-                    icon: "github",
-                    location: "https://github.com/UTSA-ACM/Portal"
-                },
-                {
-                    icon: "external",
-                    location: "https://portal.acmutsa.org/"
-                }
-            ]
+          icon: "github",
+          location: "https://github.com/UTSA-ACM/Portal",
         },
         {
-            title: "Phototag",
-            banner: "/phototag.png",
-            location: "/phototag",
-            longDescription: `Using Google's Vision API and supporting metadata formats on Windows, Phototag makes it easy to quickly add rich, descriptive tags to your photos, saving you time and effort.`,
-            shortDescription: "Effortlessly add rich & descriptive tags to your photos with Phototag.",
-            links: [
-                {
-                    icon: "github",
-                    location: "https://github.com/Xevion/phototag"
-                },
-                {
-                    icon: "external",
-                    location: "https://phototag.xevion.dev"
-                }
-            ]
+          icon: "external",
+          location: "https://portal.acmutsa.org/",
+        },
+      ],
+    },
+    {
+      title: "Phototag",
+      banner: "/phototag.png",
+      location: "/phototag",
+      longDescription: `Using Google's Vision API and supporting metadata formats on Windows, Phototag makes it easy to quickly add rich, descriptive tags to your photos, saving you time and effort.`,
+      shortDescription:
+        "Effortlessly add rich & descriptive tags to your photos with Phototag.",
+      links: [
+        {
+          icon: "github",
+          location: "https://github.com/Xevion/phototag",
         },
         {
-            title: "Paths",
-            banner: "/paths.png",
-            location: "/paths",
-            shortDescription: "Discover the power of graph traversal algorithms with my interactive application.",
-            longDescription: `Discover the power of graph traversal algorithms with my interactive Unity application!
+          icon: "external",
+          location: "https://phototag.xevion.dev",
+        },
+      ],
+    },
+    {
+      title: "Paths",
+      banner: "/paths.png",
+      location: "/paths",
+      shortDescription:
+        "Discover the power of graph traversal algorithms with my interactive application.",
+      longDescription: `Discover the power of graph traversal algorithms with my interactive Unity application!
              Easily generate and edit graphs, create mazes, and experiment with different algorithm configurations to find the most efficient path.`,
-            links: [
-                {
-                    icon: "github",
-                    location: "https://github.com/Xevion/Paths",
-                }
-            ]
+      links: [
+        {
+          icon: "github",
+          location: "https://github.com/Xevion/Paths",
+        },
+      ],
+    },
+    {
+      title: "Grain",
+      banner: "/grain/banner.jpeg",
+      bannerSettings: { quality: 100 },
+      location: "/grain",
+      shortDescription:
+        "An experimental React app to generate beautiful backgrounds with noise filters.",
+      longDescription:
+        "Quickly generate beautiful backgrounds with noise filters. Built with React, hosted on Vercel, and rendered using simple SVG noise filters (just HTML & CSS).",
+      links: [
+        {
+          icon: "external",
+          location: "https://grain.xevion.dev",
         },
         {
-            title: "Grain",
-            banner: "/grain/banner.jpeg",
-            bannerSettings: {quality: 100},
-            location: "/grain",
-            shortDescription: "An experimental React app to generate beautiful backgrounds with noise filters.",
-            longDescription: "Quickly generate beautiful backgrounds with noise filters. Built with React, hosted on Vercel, and rendered using simple SVG noise filters (just HTML & CSS).",
-            links: [
-                {
-                    icon: 'external',
-                    location: "https://grain.xevion.dev"
-                },
-                {
-                    icon: "github",
-                    location: "https://github.com/Xevion/grain"
-                }
-            ]
-        }
-    ];
+          icon: "github",
+          location: "https://github.com/Xevion/grain",
+        },
+      ],
+    },
+  ];
 
-    return {
-        props: {
-            projects: await Promise.all(projects.map(async project => {
-                const {base64} = await getPlaiceholder(project.banner, {size: 16});
-                return {
-                    ...project,
-                    bannerBlur: base64
-                };
-            }))
-        }
-    }
+  return {
+    props: {
+      projects: await Promise.all(
+        projects.map(async (project) => {
+          const { base64 } = await getPlaiceholder(project.banner, {
+            size: 16,
+          });
+          return {
+            ...project,
+            bannerBlur: base64,
+          };
+        })
+      ),
+    },
+  };
 }
 
 const buttons = [
-    {text: "GitHub", href: "https://github.com/Xevion"},
-    {text: "Contact", href: "/contact"},
-    {text: "Resume", href: "/resume"}
-]
+  { text: "GitHub", href: "https://github.com/Xevion" },
+  { text: "Contact", href: "/contact" },
+  { text: "Resume", href: "/resume" },
+];
 
-const Home: NextPage<HomeStaticProps> = ({projects}: HomeStaticProps) => {
-    const useLong = useBreakpointValue("sm", true, false);
+const Home: NextPage<HomeStaticProps> = ({ projects }: HomeStaticProps) => {
+  const useLong = useBreakpointValue("sm", true, false);
 
-    // use-tailwind-breakpoint
-    useEffect(() => {
-        typeof window !== "undefined" ? window.dispatchEvent(new Event("resize")) : null;
-    }, []);
+  // use-tailwind-breakpoint
+  useEffect(() => {
+    typeof window !== "undefined"
+      ? window.dispatchEvent(new Event("resize"))
+      : null;
+  }, []);
 
-    return (
-        <>
-            <Head>
-                <title>Xevion.dev</title>
-                <meta name="description" content="My personal website."/>
-                <link rel="icon" href="/favicon.ico"/>
-            </Head>
-            <AppWrapper hideNavigation={true} className="overflow-x-hidden">
-            <div className="flex justify-center items-center h-screen w-screen overflow-hidden">
-                    <div className="top-0 p-3 absolute w-full flex justify-end">
-                        <span
-                            className="leading-3 bg-yellow-300 rounded-md text-black font-bold font-inter p-2">WIP</span>
-                    </div>
-                    <div className="w-full flex flex-col items-center h-40">
-                        <div className="text-4xl sm:text-5xl pb-3">Hi. I&apos;m Ryan Walters.</div>
-                        <div className="text-lg text-zinc-200">Full Stack Software Developer</div>
-                        <div className="w-full flex justify-center py-2 space-x-2">
-                            {buttons.map(({text, href}) =>
-                                <Link href={href} key={href}>
-                                    <div className="p-2 rounded-sm bg-zinc-900 hover:bg-zinc-800">
-                                        {text}
-                                    </div>
-                                </Link>
-                            )}
-                        </div>
-                    </div>
-                </div>
-                <div id="projects"
-                    className="flex py-12 sm:py-8 min-h-screen flex-row md:items-center justify-center">
-                    <div className="h-full w-full max-w-[95%] lg:max-w-[85%] xl:max-w-[70%] mx-auto">
-                        <div className="flex h-full m-1 flex-col justify-start gap-y-1">
-                            {
-                                projects.map((project, index) =>
-                                    <ItemCard key={index} {...project}
-                                              description={useLong ? project.longDescription : project.shortDescription}/>
-                                )
-                            }
-                        </div>
-                    </div>
-                </div>
-            </AppWrapper>
-        </>
-    );
+  return (
+    <>
+      <Head>
+        <title>Xevion.dev</title>
+        <meta name="description" content="My personal website." />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <AppWrapper hideNavigation={true} className="overflow-x-hidden">
+        <div className="flex h-screen w-screen items-center justify-center overflow-hidden">
+          <div className="flex w-full flex-col items-center justify-start">
+            <nav className="animate-fade-in">
+              <ul className="flex items-center justify-center gap-4">
+                {buttons.map(({ text, href }) => (
+                  <Link
+                    key={href}
+                    className="text-sm  text-zinc-500 duration-500 hover:text-zinc-300"
+                    href={href}
+                  >
+                    {text}
+                  </Link>
+                ))}
+              </ul>
+            </nav>
+            <div className="cursor-default select-none py-10 font-hanken text-4xl font-black tracking-widest sm:text-9xl">
+              XEVION
+            </div>
+            <div className="text-sm text-zinc-500 text-center">
+              <Balancer>
+                Building software at <Link href="">Black Pearl Technology</Link> during my undergrad. <br/>
+                Always open to new opportunities.
+              </Balancer>
+            </div>
+          </div>
+        </div>
+        <div
+          id="projects"
+          className="flex min-h-screen flex-row justify-center py-12 sm:py-8 md:items-center"
+        >
+          <div className="mx-auto h-full w-full max-w-[95%] lg:max-w-[85%] xl:max-w-[70%]">
+            <div className="m-1 flex h-full flex-col justify-start gap-y-1">
+              {projects.map((project, index) => (
+                <ItemCard
+                  key={index}
+                  {...project}
+                  description={
+                    useLong ? project.longDescription : project.shortDescription
+                  }
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </AppWrapper>
+    </>
+  );
 };
 
 export default Home;
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 47f5c21..a3294cf 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -8,6 +8,10 @@
 @tailwind components;
 @tailwind utilities;
 
+.body-gradient {
+  background-image: linear-gradient(to top left, black, rgb(161 161 170 / 0.1), black);
+}
+
 @mixin active {
   .elements {
     @apply grid opacity-100;