Skip to content

Update projects and navigation. #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 12, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
)}
>
Expand Down
17 changes: 0 additions & 17 deletions src/components/Footer.tsx

This file was deleted.

44 changes: 16 additions & 28 deletions src/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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 = () => {
Expand All @@ -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
Expand All @@ -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}>
Expand All @@ -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>
Expand Down
8 changes: 7 additions & 1 deletion src/components/Page.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import clsx from "clsx";
import Head from "next/head";
import * as React from "react";
import { Header } from "./";
Expand Down Expand Up @@ -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>
Expand Down
57 changes: 42 additions & 15 deletions src/components/Project.tsx
Original file line number Diff line number Diff line change
@@ -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"
)}
>
Expand All @@ -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>
);
};
9 changes: 3 additions & 6 deletions src/components/ProjectGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/Spacer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
)}
/>
Expand Down
8 changes: 2 additions & 6 deletions src/components/index.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>;
};
26 changes: 19 additions & 7 deletions src/data/projects/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 }],
};
28 changes: 14 additions & 14 deletions src/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
12 changes: 6 additions & 6 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down Expand Up @@ -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>
Expand Down
Loading