fix(About page): Uses the Tile component

next.config.js

@@ -5,10 +5,9 @@ const nextConfig = {
  env: {
  SANITY_DATASET: process.env.SANITY_DATASET,
  SANITY_PROJECT_ID: process.env.SANITY_PROJECT_ID,
- SANITY_WEBHOOK_SECRET: process.env.SANITY_WEBHOOK_SECRET,
+ REVALIDATE_TOKEN: process.env.REVALIDATE_TOKEN,
  SANITY_POSTS_WEBHOOK_SECRET: process.env.SANITY_POSTS_WEBHOOK_SECRET,
  SANITY_CAROUSEL_WEBHOOK_SECRET: process.env.SANITY_CAROUSEL_WEBHOOK_SECRET,
- REVALIDATE_TOKEN: process.env.REVALIDATE_TOKEN,
  },
  images: {
  domains: ['cdn.sanity.io'],

src/components/Layout.tsx

@@ -125,7 +125,7 @@ export default function Layout({
  </Link>
  </div>
  <div className="md:flex items-end justify-between">
- <div className="mb-8 md:mb-0">
+ <div className="md:w-80 mb-8 md:mb-0">
  <Tile size="small" title="Work" link="/work" />
  <Tile size="small" title="Personal Projects" />
  <Tile size="small" title="About" link="/about" />

src/components/LinkButton.tsx

@@ -19,8 +19,7 @@ type AnchorProps = Omit<
 > &
  LinkProps;
 
-type Props = {title: string} & AnchorProps &
- (Primary | Secondary | Rounded);
+type Props = {title: string} & AnchorProps & (Primary | Secondary | Rounded);
 
 export default function LinkButton({title, ...props}: Props) {
  if (props.type === 'primary') {

src/components/Logo.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 export default function Logo() {
  return (
  <svg

src/components/Tile.tsx

@@ -4,21 +4,22 @@ interface Props {
  title: string;
  link?: string;
  size: 'small' | 'medium' | 'large';
+ icon?: string;
 }
 
-export default function Tile({title, link, size}: Props) {
+export default function Tile({title, link, size, icon}: Props) {
  const sizeClasses = {
  small: {
  content: 'text-base',
- tile: 'md:w-80 h-10',
+ tile: 'h-10 gap-4',
  },
  medium: {
  content: 'text-3-1/2xl',
- tile: 'w-96 h-20',
+ tile: 'py-5 gap-6',
  },
  large: {
  content: 'text-3-1/2xl',
- tile: 'w-112 h-40',
+ tile: 'py-9 gap-8',
  },
  };
 
@@ -34,7 +35,7 @@ export default function Tile({title, link, size}: Props) {
  <p
  className={`${sizeClasses[size].content} text-black dark:text-white group-hover:-rotate-45 duration-200 transition-transform ease-linear`}
  >
- →
+ {icon ?? '→'}
  </p>
  </Link>
  ) : (
@@ -45,7 +46,7 @@ export default function Tile({title, link, size}: Props) {
  {title}
  </p>
  <p className={`${sizeClasses[size].content} text-black dark:text-white`}>
- wip
+ {icon ?? 'wip'}
  </p>
  </div>
  );

src/pages/about.tsx

@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import Image from 'next/image';
 import Layout from '~/components/Layout';
+import Tile from '~/components/Tile';
 
 const SKILLS = [
  'Product Design',
@@ -50,14 +51,13 @@ export default function About() {
  </div>
  <div className="h-200 rounded relative">
  <Image
- fill
  priority
  src="/images/AnitaLaudado.jpeg"
  alt="A profile picture of me"
  sizes="(min-width: 768px) 700px, 800px"
- /* width={3852}
- height={4815} */
- className="rounded object-cover object-top"
+ width={800}
+ height={600}
+ className="rounded object-cover object-top w-full h-full"
  />
  </div>
  </div>
@@ -66,17 +66,8 @@ export default function About() {
  What I <b>do</b>
  </h2>
  <div>
- {/* TODO: Move this to the Tile component */}
  {SKILLS.map(skill => (
- <div
- key={skill}
- className="w-full flex items-center gap-6 py-5 border-b-1 border-black dark:border-white"
- >
- <p className="text-3-1/2xl text-black dark:text-white">{skill}</p>
- <p className="text-3-1/2xl text-black dark:text-white ml-auto">
- ✦
- </p>
- </div>
+ <Tile key={skill} size="medium" title={skill} icon="✦" />
  ))}
  </div>
  </Layout>

src/pages/work/[slug].tsx

@@ -1,7 +1,7 @@
 import {PortableText, PortableTextReactComponents} from '@portabletext/react';
 import type {GetStaticPropsContext, InferGetStaticPropsType} from 'next';
 import Head from 'next/head';
-import NextImage from 'next/image';
+import Image from 'next/image';
 import ImageBlock from '~/components/ImageBlock';
 import Layout from '~/components/Layout';
 import {parseEsotericImage} from '~/models/asset';
@@ -18,10 +18,10 @@ const components: Partial<PortableTextReactComponents> = {
  ),
  },
  types: {
- fullImage: ({value}) => {
+ editorImage: ({value}) => {
  const imageUrl = parseEsotericImage(value).url();
  return (
- <NextImage src={imageUrl} width={2000} height={1000} alt={value.alt} />
+ <Image src={imageUrl} width={1100} height={1100} alt={value.alt} />
  );
  },
  },