Progress towards readiness

2024/.nvmrc

@@ -0,0 +1 @@
+18

2024/app/layout.tsx

@@ -44,9 +44,7 @@ export default function RootLayout({
         <Providers themeProps={{ attribute: 'class', defaultTheme: 'dark' }}>
           <div className="relative flex flex-col h-screen">
             <Navbar />
-            <main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
-              {children}
-            </main>
+            <main className="mx-auto flex-grow">{children}</main>
           </div>
         </Providers>
       </body>

2024/app/page.tsx

@@ -1,3 +1,88 @@
+import { DownloadIcon, GithubIcon } from '@/components/icons';
+import { subtitle, title } from '@/components/primitives';
+import { Button } from '@nextui-org/button';
+import { Card, CardHeader, CardBody, CardFooter } from '@nextui-org/card';
+import { Image } from '@nextui-org/image';
+import { Link } from '@nextui-org/link';
+import { Tooltip } from '@nextui-org/tooltip';
+import WorkCard from '@/components/WorkCard';
+import {
+  BandwidthText,
+  GoogleText,
+  IndeedText,
+  ScoreShotsText,
+} from '@/components/workText';
+
 export default function Home() {
-  return <section className=""></section>;
+  return (
+    <section className="flex flex-col items-center justify-between h-full">
+      <div></div>
+      <Card className="aspect-video flex flex-col gap-8 justify-center">
+        <CardHeader className="absolute z-10 top-0 flex-col items-end">
+          <Link isExternal href="#" aria-label="Github">
+            <Tooltip content="Download Contact">
+              <DownloadIcon className="text-default-500" />
+            </Tooltip>
+          </Link>
+        </CardHeader>
+        <div className="px-24">
+          <div className="inline-block max-w-lg text-center justify-center">
+            <h1 className={title({ color: 'violet', size: 'lg' })}>
+              Aubron&nbsp;
+            </h1>
+            <h1 className={title({ size: 'lg' })}>Wood</h1>
+            <br />
+            <h1 className={subtitle()}>Engineering Leader&nbsp;</h1>
+            <h1 className={subtitle({ color: 'violet' })}>-&nbsp;</h1>
+            <h1 className={subtitle()}>Team Builder&nbsp;</h1>
+            <h1 className={subtitle({ color: 'violet' })}>-&nbsp;</h1>
+            <h1 className={subtitle()}>Product Owner&nbsp;</h1>
+          </div>
+        </div>
+        <div className="flex justify-center gap-4">
+          <Button size="md" variant="ghost">
+            Résumé
+          </Button>
+          <Button
+            as={Link}
+            size="md"
+            variant="ghost"
+            href="mailto:[email protected]"
+          >
+            Email
+          </Button>
+        </div>
+      </Card>
+      <div className="text-center -mb-20 pt-32 shrink opacity-40 hover:opacity-100 hover:mb-0 transition-all w-[100vw]">
+        <h1 className="font-semibold text-default-foreground">my work</h1>
+        <div className="mt-8 w-[970px] gap-4 grid grid-cols-12 grid-rows-1 m-auto">
+          <WorkCard
+            color="indeed"
+            domain="Microfrontend Platform"
+            title="Engineering Team Lead"
+            Icon={IndeedText}
+          />
+          <WorkCard
+            color="google"
+            domain="Material Design System"
+            title="Engineering Team Lead"
+            Icon={GoogleText}
+          />
+          <WorkCard
+            color="bandwidth"
+            domain="Frontend Dashboard"
+            title="Eng Lead, Product Owner"
+            Icon={BandwidthText}
+          />
+          <WorkCard
+            color="scoreshots"
+            domain="Web-based Graphic Design"
+            title="CTO & Cofounder"
+            Icon={ScoreShotsText}
+          />
+        </div>
+        <div className="h-10"></div>
+      </div>
+    </section>
+  );
 }

2024/app/work/[id]/page.tsx

@@ -0,0 +1,83 @@
+import { Card, CardFooter } from '@nextui-org/card';
+import work from '@/config/work';
+import WorkHeader from '@/components/WorkHeader';
+import { Image } from '@nextui-org/image';
+import TechnologyChips from '@/components/TechnologyChips';
+import ColorChips from '@/components/ColorChips';
+
+export default function Page({
+  params,
+}: {
+  params: { id: keyof typeof work };
+}) {
+  console.log(params);
+  const job = work[params.id];
+  return (
+    <div
+      className="overflow-y-auto w-screen"
+      style={{ height: 'calc(100vh - 4rem)' }}
+    >
+      <div className="max-w-7xl mx-auto pb-24">
+        <WorkHeader {...job} />
+        <div className="grid grid-cols-12 mt-4 gap-4">
+          <div className="col-span-3">
+            <Card className="p-4">
+              <span>Design System</span>
+              <span>{job.designSystem}</span>
+              <span>Palette</span>
+              <ColorChips colors={job.palette} />
+              <span>Fonts</span>
+              <span>{job.fonts.join(', ')}</span>
+              <span>Technologies</span>
+              <TechnologyChips technologies={job.technologies} />
+            </Card>
+          </div>
+          <div className="col-span-9">
+            <Card isFooterBlurred>
+              <Image
+                removeWrapper
+                alt="Card background"
+                className="z-0 w-full h-full object-cover"
+                src={job.image}
+              />
+
+              <CardFooter className="text-center absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
+                <p className="w-full text-small text-white">
+                  {job.productSubtitle}
+                </p>
+              </CardFooter>
+            </Card>
+            <Card isFooterBlurred>
+              <Image
+                removeWrapper
+                alt="Card background"
+                className="z-0 w-full h-full object-cover"
+                src={job.image}
+              />
+
+              <CardFooter className="text-center absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
+                <p className="w-full text-small text-white">
+                  {job.productSubtitle}
+                </p>
+              </CardFooter>
+            </Card>
+            <Card isFooterBlurred>
+              <Image
+                removeWrapper
+                alt="Card background"
+                className="z-0 w-full h-full object-cover"
+                src={job.image}
+              />
+
+              <CardFooter className="text-center absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
+                <p className="w-full text-small text-white">
+                  {job.productSubtitle}
+                </p>
+              </CardFooter>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

2024/components/ColorChips.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { Tooltip } from '@nextui-org/tooltip';
+
+interface ColorChipsProps {
+  colors: string[];
+}
+
+const ColorChips: React.FC<ColorChipsProps> = ({ colors }) => (
+  <div className="flex gap-2">
+    {colors.map(color => (
+      <Tooltip key={color} content={color} placement="bottom">
+        <div
+          className="rounded-xl w-8 h-8 border-gray-700 border-1"
+          style={{ backgroundColor: color }}
+        ></div>
+      </Tooltip>
+    ))}
+  </div>
+);
+
+export default ColorChips;

2024/components/TechnologyChips.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { Chip } from '@nextui-org/chip';
+import { Avatar } from '@nextui-org/avatar';
+import { TECHNOLOGIES } from '@/config/work';
+
+interface TechnologyChipsProps {
+  technologies: TECHNOLOGIES[];
+}
+
+const TechnologyChips: React.FC<TechnologyChipsProps> = ({ technologies }) => (
+  <div className="flex gap-1">
+    {technologies.map(technology => (
+      <Chip
+        variant="flat"
+        key={technology}
+        avatar={<Avatar name={technology} src={`/${technology}.svg`} />}
+      >
+        {technology}
+      </Chip>
+    ))}
+  </div>
+);
+
+export default TechnologyChips;

2024/components/WorkCard.tsx

@@ -0,0 +1,37 @@
+import { Card } from '@nextui-org/card';
+import { Link } from '@nextui-org/link';
+import { IconSvgProps } from '@/types';
+
+const colorVariants = {
+  indeed: 'bg-indeed hover:bg-white hover:text-indeed',
+  google: 'bg-google hover:bg-white hover:text-google',
+  scoreshots: 'bg-scoreshots hover:bg-white hover:text-scoreshots',
+  bandwidth: 'bg-bandwidth hover:bg-white hover:text-bandwidth',
+};
+
+interface WorkCardProps {
+  color: keyof typeof colorVariants;
+  title: string;
+  domain: string;
+  Icon: React.FC<IconSvgProps>;
+}
+
+const WorkCard: React.FC<WorkCardProps> = ({ color, Icon, title, domain }) => {
+  return (
+    <Card
+      className={`${colorVariants[color]} col-span-12 sm:col-span-3 h-[120px] p-4 text-white hover:cursor-pointer flex flex-col justify-center text-center group rounded-md`}
+      as={Link}
+      href={`/work/${color}`}
+    >
+      <Icon />
+      <p className="text-sm opacity-0 -mt-8 group-hover:-mt-0 group-hover:opacity-100 transition-all">
+        {domain}
+      </p>
+      <p className="text-xs opacity-0 group-hover:opacity-100 transition-all">
+        {title}
+      </p>
+    </Card>
+  );
+};
+
+export default WorkCard;

2024/components/WorkHeader.tsx

@@ -0,0 +1,28 @@
+import { WorkDetails } from '@/config/work';
+import { Card } from '@nextui-org/card';
+
+interface WorkHeaderProps {}
+
+const WorkHeader: React.FC<WorkDetails> = ({
+  bg,
+  TextIcon,
+  SquareIcon,
+  domain,
+  title,
+}) => {
+  return (
+    <Card
+      className={`${bg} + text-white flex flex-row h-60 items-center justify-center gap-8`}
+    >
+      {SquareIcon ? <SquareIcon height="110" /> : null}
+      <div className="text-center">
+        <TextIcon height="120" />
+        <h2 className="-mt-2">
+          {title} - {domain}
+        </h2>
+      </div>
+    </Card>
+  );
+};
+
+export default WorkHeader;

2024/components/WorkNav.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { Button } from '@nextui-org/button';
+import { Card, CardHeader, CardBody, CardFooter } from '@nextui-org/card';
+import { Image } from '@nextui-org/image';
+import { Link } from '@nextui-org/link';
+import { Tooltip } from '@nextui-org/tooltip';
+import { ScoreShotsText } from './workText';
+import { IconSvgProps } from '@/types';
+
+const colorVariants = {
+  indeed: 'group-hover:text-indeed',
+  google: 'group-hover:text-google',
+  scoreshots: 'group-hover:text-scoreshots',
+  bandwidth: 'group-hover:text-bandwidth',
+};
+
+interface WorkNavProps {
+  color: keyof typeof colorVariants;
+  Icon: React.FC<IconSvgProps>;
+}
+
+const WorkNav: React.FC<WorkNavProps> = ({ color, Icon }) => {
+  return (
+    <div className={`${colorVariants[color]} h-10 -mb-3`}>
+      <Icon height={32} style={{ margin: 'auto' }} />
+    </div>
+  );
+};
+
+export default WorkNav;

2024/components/icons.tsx

@@ -67,3 +67,53 @@ export const SunFilledIcon = ({
     </g>
   </svg>
 );
+
+export const DownloadIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <g fill="currentColor">
+      <path
+        fillRule="evenodd"
+        d="M4 4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4Zm10 5c0-.6.4-1 1-1h3a1 1 0 1 1 0 2h-3a1 1 0 0 1-1-1Zm0 3c0-.6.4-1 1-1h3a1 1 0 1 1 0 2h-3a1 1 0 0 1-1-1Zm0 3c0-.6.4-1 1-1h3a1 1 0 1 1 0 2h-3a1 1 0 0 1-1-1Zm-8-5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm2 4a3 3 0 0 0-3 2v.2c0 .1-.1.2 0 .2v.2c.3.2.6.4.9.4h6c.3 0 .6-.2.8-.4l.2-.2v-.2l-.1-.1A3 3 0 0 0 10 14H7.9Z"
+        clipRule="evenodd"
+      />
+    </g>
+  </svg>
+);
+
+export const DownChevron = ({
+  size = 12,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    fill="none"
+    height={size || height || 24}
+    viewBox="0 0 24 24"
+    width={size || width || 24}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit={10}
+      strokeWidth={1.5}
+    />
+  </svg>
+);