Skip to content

Commit

Permalink
feat: Polish
Browse files Browse the repository at this point in the history
  • Loading branch information
@alii
alii committed Sep 20, 2023
1 parent 948892f commit 964357d
Show file tree
Hide file tree
Showing 8 changed files with 88 additions and 74 deletions.
Binary file modified bun.lockb
View file
Binary file not shown.
16 changes: 8 additions & 8 deletions src/components/contact-form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Turnstile} from '@marsidev/react-turnstile';
import {useState} from 'react';
import { Turnstile } from '@marsidev/react-turnstile';
import { useState } from 'react';
import toast from 'react-hot-toast';

export function ContactForm() {
Expand All @@ -8,18 +8,18 @@ export function ContactForm() {

if (submitted) {
return (
<div className="text-center">
<h2 className="text-2xl font-bold">Thanks!</h2>
<p className="text-black/80">I'll get back to you as soon as possible.</p>
<div>
<h2 className="text-2xl">Message received</h2>
<p className="text-black/80">I'll get back to you as soon as possible</p>
</div>
);
}

return (
<>
<div className="space-y-1">
<h2 className="font-title text-lg font-bold">Let's talk 📬</h2>
<p>Drop me a message with the form below, I'll get back to the non-spam</p>
<h2 className="font-semibold">Let's talk 📬</h2>
<p className="text-black/75">Drop me a message with the form below, I'll get back to the non-spam</p>
</div>

<form
Expand Down Expand Up @@ -59,7 +59,7 @@ export function ContactForm() {
</label>

<label htmlFor="body">
<textarea id="body" name="body" rows={5} required placeholder="Your message" className="w-full resize-y" />
<textarea id="body" name="body" rows={5} minLength={10} required placeholder="Your message" className="w-full resize-y" />
</label>

<Turnstile
Expand Down
17 changes: 9 additions & 8 deletions src/components/time.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import clsx from 'clsx';
import {motion} from 'framer-motion';
import {useEffect, useRef, useState} from 'react';
import {daysUntilBirthday, UKTimeFormatter} from '../utils/constants';
import { motion } from 'framer-motion';
import { useEffect, useRef, useState } from 'react';
import { UKTimeFormatter, daysUntilBirthday } from '../utils/constants';

function Night({time}: {time: Date}) {
const canvasRef = useRef<HTMLCanvasElement | null>(null);
Expand Down Expand Up @@ -41,7 +41,7 @@ function Night({time}: {time: Date}) {

<div className="z-10 text-center">
<h2
className={clsx('font-title text-2xl', 'text-glow-sky-900 dark:text-glow-sky-500')}
className={clsx('text-2xl font-light text-glow-sky-900 dark:text-glow-sky-500')}
suppressHydrationWarning
>
{UKTimeFormatter.format(time)}
Expand All @@ -59,7 +59,8 @@ function Day({time}: {time: Date}) {
<div className="flex w-full items-center justify-center">
<div className="opacity-85 flex items-baseline space-x-1 md:space-x-2">
<div className="flex flex-col">
<div className="font-title text-2xl text-white">{UKTimeFormatter.format(time)}</div>
<h2 className="font-light text-2xl text-white">{UKTimeFormatter.format(time)}</h2>

<p
className={clsx('text-center text-xs font-light', 'text-white text-glow-sky-900 dark:text-glow-sky-500')}
>
Expand Down Expand Up @@ -118,13 +119,13 @@ export function Time() {
}, []);

return (
<div className="col-span-3 grid grid-cols-1 gap-6 md:col-span-1">
<div className="col-span-3 grid grid-cols-1 gap-6 md:col-span-1 shrink-0 [&_>_div]:shrink-0">
{isNight ? <Night time={time} /> : <Day time={time} />}

<div className="flex items-center justify-center rounded-2xl bg-indigo-100 text-indigo-500 dark:bg-[#23224c] dark:text-indigo-400">
<div className="text-center">
<p className="text-xs font-light">
<span className="font-title text-xl">{daysUntilBirthday}</span> days
<p className="text-xs">
<span className="text-xl">{daysUntilBirthday}</span> days
<br />
until birthday
</p>
Expand Down
14 changes: 14 additions & 0 deletions src/pages/404.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import Link from "next/link";

export default function Page404() {
return (
<main className="mx-auto max-w-3xl px-6 pb-40 pt-16 space-y-2">
<p className="font-title text-3xl">404</p>
<p>Sorry, I couldn't locate that page for ya</p>

<div>
<Link href="/" className="px-2 py-1 rounded-full bg-pink-500">↖ home</Link>
</div>
</main>
);
}
11 changes: 6 additions & 5 deletions src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import '../globals.css';

import type {AppProps} from 'next/app';
import {Nanum_Myeongjo} from 'next/font/google';
import type { AppProps } from 'next/app';
import { Newsreader } from 'next/font/google';
import font from 'next/font/local';
import Head from 'next/head';
import {Toaster} from 'react-hot-toast';
import { Toaster } from 'react-hot-toast';

const title = Nanum_Myeongjo({
const title = Newsreader({
subsets: ['latin'],
weight: '400',
weight: '200',
style: 'italic',
fallback: ['serif'],
});

Expand Down
8 changes: 8 additions & 0 deletions src/pages/_error.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export default function ErrorPage() {
return (
<main className="mx-auto max-w-3xl px-6 pb-40 pt-16">
<p className="font-title text-3xl">Uh oh...</p>
<p>Apologies, something went wrong there...</p>
</main>
);
}
94 changes: 42 additions & 52 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import clsx from 'clsx';
import dayjs from 'dayjs';
import type {GetStaticProps} from 'next';
import type { GetStaticProps } from 'next';
import Link from 'next/link';
import {HiOutlineExternalLink} from 'react-icons/hi';
import { HiOutlineExternalLink } from 'react-icons/hi';
import {
SiAmazonaws,
SiBabel,
Expand All @@ -20,26 +20,26 @@ import {
SiRedis,
SiSpotify,
SiTailwindcss,
SiTwitter,
SiTypescript,
SiVisualstudiocode,
SiWebpack,
SiWebstorm,
SiYarn,
SiX,
SiYarn
} from 'react-icons/si';
import type {Data} from 'use-lanyard';
import {ContactForm} from '../components/contact-form';
import {CardHoverEffect, hoverClassName} from '../components/hover-card';
import {Time} from '../components/time';
import {useUpdatingLanyard} from '../hooks/lanyard';
import type { Data } from 'use-lanyard';
import { ContactForm } from '../components/contact-form';
import { CardHoverEffect, hoverClassName } from '../components/hover-card';
import { Time } from '../components/time';
import { useUpdatingLanyard } from '../hooks/lanyard';
import matrix from '../images/matrix.gif';
import me from '../images/me.jpg';
import {getMapURL} from '../server/apple-maps';
import {PartialBlogPost, getRecentBlogPosts} from '../server/blog';
import {env} from '../server/env';
import {getLanyard} from '../server/lanyard';
import {age, discordId} from '../utils/constants';
import {formatList} from '../utils/lists';
import { getMapURL } from '../server/apple-maps';
import { PartialBlogPost, getRecentBlogPosts } from '../server/blog';
import { env } from '../server/env';
import { getLanyard } from '../server/lanyard';
import { age, discordId } from '../utils/constants';
import { formatList } from '../utils/lists';

export interface Props {
lanyard: Data;
Expand Down Expand Up @@ -75,36 +75,27 @@ export default function Home(props: Props) {

return (
<main className="mx-auto grid max-w-3xl grid-cols-6 gap-6 px-6 pb-40 pt-16">
<div className="col-span-4 flex items-center justify-center overflow-hidden rounded-2xl bg-pink-200 dark:border-pink-500 dark:bg-pink-500/20 dark:shadow-none dark:backdrop-blur-2xl md:col-span-4 md:h-52">
<div className="flex flex-col items-center space-y-4 px-6 py-8 md:flex-row md:space-x-4 md:space-y-0">
<img
src={me.src}
placeholder="blur"
height={96}
width={96}
className="h-24 w-24 rounded-full border border-pink-500 object-cover"
alt="Photo of me"
/>
<div className="col-span-4 flex flex-col justify-between overflow-hidden rounded-2xl bg-pink-200 px-8 py-8 dark:border-pink-500 dark:bg-pink-500/20 dark:shadow-none dark:backdrop-blur-2xl md:col-span-4 h-52">
<div className="flex">
<Link
className="flex items-center justify-center rounded-full bg-pink-300 dark:bg-pink-500/25 px-2 py-0.5"
href="https://alistair.blog"
target="_blank"
rel="noopener noreferrer"
>
writing ↗️
</Link>
</div>

<div className="space-y-1">
<h1 className="text-center font-title text-xl font-bold text-pink-900 dark:text-pink-300 dark:text-glow-pink-500/50 md:text-left">
<div className="space-y-4">
<div>
<h1 className="text-xl text-pink-900 dark:text-pink-300 dark:text-glow-pink-500/50">
Alistair Smith
</h1>

<p className="text-center text-pink-800 dark:text-pink-300/95 dark:text-glow-pink-500/50 md:text-left">
{age} y/o full stack TypeScript engineer 🪄
<p className="text-pink-600 dark:text-pink-300/80 dark:text-glow-pink-500/50">
{age} y/o full stack typescript engineer
</p>

{/* <div className="flex">
<Link
className="flex items-center justify-center rounded-full bg-pink-500 px-2 py-0.5"
href="https://alistair.blog"
target="_blank"
rel="noopener noreferrer"
>
blog ↗️
</Link>
</div> */}
</div>
</div>
</div>
Expand All @@ -115,13 +106,13 @@ export default function Home(props: Props) {
target="_blank"
rel="noopener noreferrer"
className={clsx(
'flex h-full items-center justify-center rounded-2xl bg-sky-500 text-4xl text-white',
'flex h-full items-center justify-center rounded-2xl bg-neutral-200 dark:bg-neutral-800 text-4xl text-black dark:text-white',
hoverClassName,
)}
>
<span className="sr-only">Twitter</span>
<span className="transform-gpu transition duration-500 group-hover:scale-[1.3]">
<SiTwitter />
<SiX />
</span>
</Link>
</CardHoverEffect>
Expand Down Expand Up @@ -181,7 +172,7 @@ export default function Home(props: Props) {
</span>

<span className="space-y-0.5 px-6 pb-6">
<span className="block font-title font-bold">GitHub</span>
<span className="block font-semibold">GitHub</span>

<span className="block text-sm">My open source work &amp; contributions.</span>
</span>
Expand Down Expand Up @@ -230,7 +221,7 @@ export default function Home(props: Props) {
<span className="absolute inset-0 -z-10">
<img
src={lanyard.spotify.album_art_url}
className="absolute inset-0 h-full w-full bg-black object-cover object-center brightness-50 transition-all duration-500 will-change-[transform,_filter] group-hover:scale-[1.15] group-hover:brightness-[0.4]"
className="absolute inset-0 h-full w-full bg-black object-cover object-center brightness-50 transition-all duration-500 will-change-[transform,_filter] scale-[1.15] group-hover:scale-[1.35] group-hover:brightness-[0.4]"
alt="Album cover art"
/>
</span>
Expand Down Expand Up @@ -266,7 +257,7 @@ export default function Home(props: Props) {
<div className="group relative col-span-3 flex h-full min-h-[13rem] flex-shrink-0 overflow-hidden rounded-2xl">
<img
src={props.map}
className="absolute inset-0 h-full w-full bg-black object-cover object-center"
className="absolute scale-[1.25] inset-0 h-full w-full bg-black object-cover object-center"
alt="A map locating roughly where I am right now"
/>

Expand Down Expand Up @@ -315,7 +306,7 @@ export default function Home(props: Props) {
</div>

<div className="col-span-6 space-y-2 rounded-2xl bg-yellow-200 p-6 dark:bg-indigo-800 md:col-span-4">
<h2 className="font-title text-xl font-bold">
<h2 className="font-semibold">
Hello world <span className="inline dark:hidden">🌻</span>
<span className="hidden dark:inline">⭐</span>
</h2>
Expand All @@ -331,12 +322,12 @@ export default function Home(props: Props) {

<p>
Beyond programming, I'm really interested in music production and you can often catch me spending time messing
with DJ decks and my Maschine. Either that or I'll be out riding my Boosted Board 🛹
with DJ decks and my Maschine. Either that or I'll be out riding my Boosted Board.
</p>
</div>

<div className="col-span-6 space-y-4 rounded-2xl bg-yellow-500 p-6 text-black md:col-span-6">
<h1 className="font-title text-xl">
<div className="col-span-6 space-y-1 rounded-2xl bg-yellow-500 p-6 text-black md:col-span-6">
<h1 className="font-semibold text-black/70">
Recent Blog Posts{' '}
<span className="text-yellow-800">
<Link href="https://alistair.blog">— alistair.blog</Link>
Expand All @@ -351,9 +342,8 @@ export default function Home(props: Props) {
key={post.slug}
href={`https://alistair.blog/${post.slug}`}
>
<h2 className="font-title text-xl font-bold">{post.name}</h2>

<p className="line-clamp-2">{post.excerpt}</p>
<h2 className="text-black">{post.name}</h2>
<p className="line-clamp-2 text-black/80">{post.excerpt}</p>
</Link>
);
})}
Expand Down
2 changes: 1 addition & 1 deletion src/server/blog.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {APIResponse} from 'nextkit';
import { APIResponse } from 'nextkit';

export interface PartialBlogPost {
name: string;
Expand Down

1 comment on commit 964357d

@vercel
Copy link

@vercel vercel bot commented on 964357d Sep 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

website – ./

alistair-phi.vercel.app
website-git-master-alii.vercel.app
website-alii.vercel.app
alistair.cloud
alistair.link
alistair.sh
www.alistair.sh

Please sign in to comment.