Update projects, navigation. (#78)

Author: jsonnull

src/components/Button.tsx

@@ -11,7 +11,7 @@ export const Button = ({
     return (
         <div
             className={clsx(
-                "cursor-pointer bg-zinc-900 p-3 px-6 font-semibold text-white dark:bg-zinc-200 dark:font-bold dark:text-black",
+                "cursor-pointer bg-zinc-900 p-3 px-6 rounded text-white dark:bg-zinc-200 dark:font-bold dark:text-black",
                 className
             )}
         >

src/components/Footer.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { MutableRefObject, useCallback, useEffect, useRef, useState } from "react";
-import { GitHub, Home, Twitter } from "react-feather";
+import { MutableRefObject, ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { GitHub, Home } from "react-feather";
 import { Theme } from "./Theme";
 
 const PADDING = 8;
@@ -75,7 +75,7 @@ const Separator = ({ className }: { className?: string }) => {
 const styles = {
     text: "dark:font-semibold text-white dark:text-black",
     homeText: "font-semibold dark:font-bold",
-    underline: "underline-themed",
+    underline: "sm:hover:underline",
 };
 
 export const Header = () => {
@@ -86,11 +86,11 @@ export const Header = () => {
         <div
             className={clsx(
                 styles.text,
-                "pointer-events-none fixed inset-x-0 bottom-0 flex sm:inset-x-8 sm:bottom-8"
+                "pointer-events-none fixed inset-x-4 bottom-4 flex sm:inset-x-8 sm:bottom-8"
             )}
         >
             <nav
-                className="pointer-events-auto relative flex w-full items-center bg-black/80 py-4 pl-4 pr-2 backdrop-blur dark:bg-white/80 sm:mx-auto sm:w-auto sm:rounded-md sm:px-6 sm:pr-4"
+                className="pointer-events-auto relative mx-auto flex w-auto items-center rounded-md bg-black/80 px-6 py-4 backdrop-blur dark:bg-white/80"
                 ref={navRef as any}
             >
                 <div
@@ -112,13 +112,13 @@ export const Header = () => {
                         />
                     </Link>
                     <Separator />
-                    <ul className="flex gap-3 sm:gap-6">
+                    <ul className="flex items-center gap-3 sm:gap-6">
                         {(
                             [
                                 ["/projects/", "projects", projectsRef],
                                 // ['/blog/', 'blog'],
                                 ["/about/", "about", aboutRef],
-                            ] as [string, string, MutableRefObject<HTMLAnchorElement>][]
+                            ] as [string, ReactNode, MutableRefObject<HTMLAnchorElement>][]
                         ).map(([url, title, ref]) => {
                             return (
                                 <li key={url}>
@@ -128,30 +128,18 @@ export const Header = () => {
                                 </li>
                             );
                         })}
+                        <li>
+                            <Link
+                                href={"https://github.com/jsonnull"}
+                                className={clsx(styles.underline)}
+                                target="_blank"
+                            >
+                                <GitHub width={18} height={18} className="" />
+                            </Link>
+                        </li>
                     </ul>
                     <Separator className="pr-1 sm:pr-4" />
                     <Theme onChange={(theme) => setTheme(theme)} />
-                    <Separator className="hidden px-1 sm:block sm:px-4" />
-                    <ul className="ml-auto flex items-center gap-1 leading-none text-zinc-400 dark:text-zinc-600 sm:gap-2">
-                        {(
-                            [
-                                [GitHub, "https://github.com/jsonnull"],
-                                [Twitter, "https://twitter.com/jsonnull"],
-                            ] as [any, string][]
-                        ).map(([Icon, href]) => {
-                            return (
-                                <a
-                                    href={href}
-                                    key={href}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="rounded-full p-2 hover:bg-zinc-600 hover:text-white dark:hover:bg-zinc-400 dark:hover:text-black"
-                                >
-                                    <Icon width={18} height={18} />
-                                </a>
-                            );
-                        })}
-                    </ul>
                 </div>
             </nav>
         </div>

src/components/Header.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import Head from "next/head";
 import * as React from "react";
 import { Header } from "./";
@@ -30,7 +31,12 @@ export const Page = ({
     }
 
     return (
-        <div className="flex min-h-screen flex-col bg-white text-black dark:bg-black dark:text-zinc-200">
+        <div
+            className={clsx(
+                "flex min-h-screen flex-col bg-white text-black dark:bg-black dark:text-zinc-200",
+                "decoration-black underline-offset-2 dark:decoration-zinc-200"
+            )}
+        >
             <Head>
                 {/* Meta tags */}
                 <title>{title} | Jason Nall</title>

src/components/Page.tsx

@@ -1,28 +1,54 @@
 import clsx from "clsx";
+import { Project as ProjectType } from "../types";
 
 export const Project = ({
-    name,
-    description,
-    progress = 100,
-    milestone,
+    project,
     className,
     retired,
 }: {
-    name: string;
-    description: string;
-    progress?: number;
-    milestone: string;
+    project: ProjectType;
     className?: string;
     retired?: boolean;
 }) => {
+    const { name, description, milestones, tags, website } = project;
+    const { name: milestone, progress = 100 } = milestones[0];
+
+    let title = <h3 className="text-xl font-semibold leading-tight">{name}</h3>;
+
     return (
-        <div className={clsx(className, "flex flex-col", retired && "text-dimmed")}>
-            <div className="rounded-t pb-4 text-xl font-semibold">{name}</div>
-            <div className="pb-6 text-sm">{description}</div>
+        <section className={clsx(className, "flex flex-col", retired && "text-dimmed")}>
+            <div className="flex flex-row items-center gap-2">
+                {website && (
+                    <a href={website.url} target="_blank" className="hover:underline">
+                        {title}
+                    </a>
+                )}
+                {!website && title}
+            </div>
+            <div className="text pt-4">
+                {description}{" "}
+                {website && (
+                    <a
+                        href={website.url}
+                        target="_blank"
+                        className="text-dimmed text-sm hover:underline"
+                    >
+                        {website.title}
+                    </a>
+                )}
+            </div>
+            {tags?.length && (
+                <div className="flex flex-row gap-2 pt-4 text-sm">
+                    {tags.map((tag) => (
+                        <div className="text-dimmed">{tag}</div>
+                    ))}
+                </div>
+            )}
+            <div className="mt-auto h-6" />
             <div
                 className={clsx(
-                    "mt-auto flex",
-                    "border border-solid border-zinc-500",
+                    "flex",
+                    "rounded border border-solid border-zinc-500",
                     "pattern-lines pattern-bg-transparent pattern-fg-zinc-500"
                 )}
             >
@@ -31,14 +57,15 @@ export const Project = ({
                         "m-[-1px] flex h-6 min-w-[120px] items-center pl-2 pr-1",
                         "text-sm text-zinc-100 dark:font-bold dark:text-black",
                         "bg-zinc-900 dark:bg-zinc-200",
-                        retired && "bg-zinc-700 dark:bg-zinc-400"
+                        retired && "bg-zinc-500 dark:bg-zinc-500",
+                        progress === 100 ? "rounded" : "rounded-l"
                     )}
                     style={{ width: `calc(${progress}% + 2px)` }}
                 >
                     {milestone && <div>{milestone}</div>}
                     {progress !== 100 && <div className="ml-auto">{progress}%</div>}
                 </div>
             </div>
-        </div>
+        </section>
     );
 };

src/components/Project.tsx

@@ -11,14 +11,11 @@ export const ProjectGrid = ({
 }) => {
     return (
         <div className={clsx("grid grid-flow-row grid-cols-1 gap-16 md:grid-cols-2")}>
-            {projects.map(({ name, description, milestones }) => {
+            {projects.map(project => {
                 return (
                     <Project
-                        key={name}
-                        name={name}
-                        description={description}
-                        milestone={milestones[0].name}
-                        progress={milestones[0].progress}
+                        project={project}
+                        key={project.name}
                         retired={retired}
                     />
                 );

src/components/ProjectGrid.tsx

@@ -6,9 +6,9 @@ export const Spacer = (props: SpacerProps) => {
     return (
         <div
             className={clsx(
-                "extraWide" in props && "pb-48",
-                "wide" in props && "pb-32",
-                "medium" in props && "pb-16",
+                "extraWide" in props && "pb-36 pb-48",
+                "wide" in props && "pb-24 sm:pb-32",
+                "medium" in props && "pb-12 sm:pb-16",
                 "small" in props && "pb-8"
             )}
         />

src/components/Spacer.tsx

@@ -1,7 +1,6 @@
 import clsx from "clsx";
 import * as React from "react";
 
-export * from "./Footer";
 export * from "./Header";
 export * from "./Page";
 export * from "./Title";
@@ -15,9 +14,6 @@ export const Wrapper = (props: { children: React.ReactNode; className?: string }
 };
 
 export const Heading = (props: { children: React.ReactNode; className?: string }) => {
-    return (
-        <h1 className={clsx("text-3xl font-semibold tracking-tight", props.className)}>
-            {props.children}
-        </h1>
-    );
+    // <h1 className={clsx("text-2xl font-semibold text-zinc-500", props.className)}>
+    return <h1 className={clsx("text-xl font-semibold", props.className)}>{props.children}</h1>;
 };

src/components/index.tsx

@@ -6,21 +6,33 @@ export const alea: Project = {
     milestones: [{ name: "v1", progress: 15 }],
 };
 
+export const configuration: Project = {
+    name: "Configuration",
+    description:
+        "System configuration for all of my development machines, defined using Nix and home-manager.",
+    milestones: [{ name: "Currently maintaining", progress: 100 }],
+    tags: ["nix", "home-manager", "neovim", "lua"],
+    website: { url: "https://github.com/jsonnull/configuration", title: "jsonnull/configuration" },
+};
+
+export const electronTrpc: Project = {
+    name: "electron-trpc",
+    description: "Ergonomic and type-safe solution for building IPC in Electron.",
+    milestones: [{ name: "Currently maintaining", progress: 100 }],
+    tags: ["electron", "trpc"],
+    website: { url: "https://www.electron-trpc.dev", title: "electron-trpc.dev" },
+};
+
 export const jsonnull: Project = {
     name: "jsonnull.com",
     description: "My personal blog, where I share technical work.",
     milestones: [{ name: "Redesign", progress: 50 }],
+    tags: ["next.js", "tailwind"],
+    website: { url: "https://github.com/jsonnull/jsonnull.com", title: "jsonnull/jsonnull.com" },
 };
 
 export const novel: Project = {
     name: "Novel",
     description: "I'm writing an epic fantasy novel!",
     milestones: [{ name: "First draft", progress: 5 }],
 };
-
-export const configuration: Project = {
-    name: "Configuration",
-    description:
-        "System configuration for all of my development machines, defined using Nix and home-manager.",
-    milestones: [{ name: "Currently maintaining", progress: 100 }],
-};

src/data/projects/index.ts

@@ -3,24 +3,24 @@
 @tailwind utilities;
 
 ::-moz-selection {
-  color: white;
-  background: rgba(109, 117, 153, 0.99);
-  text-shadow: none;
-  opacity: 1;
+    color: white;
+    background: rgba(109, 117, 153, 0.99);
+    text-shadow: none;
+    opacity: 1;
 }
 
 ::selection {
-  color: white;
-  background: rgba(109, 117, 153, 0.99);
-  text-shadow: none;
-  opacity: 1;
+    color: white;
+    background: rgba(109, 117, 153, 0.99);
+    text-shadow: none;
+    opacity: 1;
 }
 
 @layer components {
-  .text-dimmed {
-    @apply text-zinc-700 dark:text-zinc-400;
-  }
-  .underline-themed {
-    @apply sm:hover:underline decoration-zinc-400 dark:decoration-zinc-600;
-  }
+    .text-dimmed {
+        @apply text-zinc-500;
+    }
+    .underline-themed {
+        @apply decoration-zinc-500 hover:decoration-black sm:underline;
+    }
 }

src/global.css

@@ -2,12 +2,12 @@ import clsx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
 import React from "react";
-import { ArrowRight } from "react-feather";
+import { ArrowRight, GitHub } from "react-feather";
 import { Heading, Page, Wrapper } from "../components";
 import { Button } from "../components/Button";
 import { ProjectGrid } from "../components/ProjectGrid";
 import { Spacer } from "../components/Spacer";
-import { configuration, jsonnull } from "../data/projects";
+import { electronTrpc, jsonnull } from "../data/projects";
 import { profileDataURI } from "../lib/profileDataURI";
 
 export const Title = ({ className }: { className?: string }) => {
@@ -44,17 +44,17 @@ const Home = () => {
             <TitleSection />
             <Spacer extraWide />
             <div className="flex flex-col items-center">
-                <Heading>Recent Projects</Heading>
+                <Heading>Projects</Heading>
             </div>
             <Spacer medium />
-            <ProjectGrid projects={[jsonnull, configuration]} />
+            <ProjectGrid projects={[electronTrpc, jsonnull]} />
             <Spacer medium />
             <div className="flex justify-center">
                 <Link href="/projects">
                     <Button>
-                        <div className="underline-themed flex items-center">
+                        <div className="flex items-center gap-2 sm:hover:underline">
                             See my other projects
-                            <ArrowRight size={18} className="ml-2" />
+                            <ArrowRight size={18} />
                         </div>
                     </Button>
                 </Link>