Update structure

src/components/WorkPreviewTile.tsx

@@ -4,8 +4,8 @@ import Heading from './Heading'
 
 const WorkPreviewTile = ({ children, title, className, link }: WorkPreviewTileProps) => {
   return (
-    <a href={link} className={clsx('flex w-full flex-col gap-6 p-6 sm:p-8 md:p-12', className)}>
-      <div className="flex flex-col gap-4 md:flex-1">{children}</div>
+    <a href={link} className={clsx('w-full', className)}>
+      <div className="mb-4">{children}</div>
       <Heading size={2} className="hover:underline">
         {title} &rarr;
       </Heading>

src/content/Footer.tsx

@@ -3,11 +3,8 @@ import Paragraph from '@/components/Paragraph'
 
 const Footer = () => {
   return (
-    <Paragraph
-      big
-      className="flex h-svh flex-col justify-end gap-1 px-6 py-8 sm:px-8 md:px-12 md:py-12"
-    >
-      <span className="font-medium">UX–UI designer</span>
+    <Paragraph className="mt-24 flex flex-col justify-end gap-1 bg-zinc-900 px-6 py-8 text-white sm:px-8 md:px-12 md:py-12">
+      <span className="font-medium">Adam Plesník, UX–UI designer</span>
       Bratislava, Slovakia
       <Link href="mailto:adam@adamplesnik.com" className="mt-12">
         adam@adamplesnik.com

src/content/andy/AndyPreview.tsx

@@ -3,7 +3,7 @@ import preview from './images/andy-home.jpg'
 
 const AndyPreview = () => {
   return (
-    <WorkPreviewTile title="Andy Warhol museum logo" link="/work#andy">
+    <WorkPreviewTile title="Andy Warhol museum logo" link="/work/andy">
       <img src={preview} />
     </WorkPreviewTile>
   )

src/content/kolbord/KolbordPreview.tsx

@@ -3,7 +3,7 @@ import preview from './images/kolbord-home.png'
 
 const KolbordPreview = () => {
   return (
-    <WorkPreviewTile title="Kolbord: space booking" link="/work#kolbord">
+    <WorkPreviewTile title="Kolbord: space booking" link="/work/kolbord">
       <img src={preview} />
     </WorkPreviewTile>
   )

src/content/mhd/MhdPreview.tsx

@@ -3,7 +3,7 @@ import preview from './images/mhd-home.jpg'
 
 const MhdPreview = () => {
   return (
-    <WorkPreviewTile title="Ticket-buying redesign" link="/work#mhd">
+    <WorkPreviewTile title="Ticket-buying redesign" link="/work/tickets">
       <img src={preview} />
     </WorkPreviewTile>
   )

src/content/mhd/index.tsx

@@ -37,17 +37,17 @@ const WorkMHD = () => {
       text="A complete redesign of the ticket-buying experience for Bratislava public transport, from an completely new UX to a simpler, more intuitive ticket machine interface."
       top={<img src={mhdHome} />}
     >
-      <img src={mhdTrio} className="mb-4" />
+      <img src={mhdTrio} />
       <MasonryWrapper>
-        <div className="relative mx-auto mb-4 max-w-screen-xl">
+        <div className="relative mx-auto max-w-screen-xl">
           <img src={mhdVideo} alt="" />
           <div className="absolute left-[34.3%] top-[16.3%] w-[31.6%] overflow-hidden">
             <video loop autoPlay playsInline muted className="-mt-[2px]">
               <source src={mhd} type="video/mp4"></source>
             </video>
           </div>
         </div>
-        <div className="relative mx-auto mb-4 max-w-screen-xl">
+        <div className="relative mx-auto max-w-screen-xl">
           <img src={mhdVideo} alt="" />
           <div className="absolute left-[34.3%] top-[16.3%] w-[31.6%] overflow-hidden">
             <video loop autoPlay playsInline muted className="-mt-[2px]">

src/content/thankful/ThankfulPreview.tsx

@@ -3,7 +3,7 @@ import preview from './images/thank-home.jpg'
 
 const ThankfulPreview = () => {
   return (
-    <WorkPreviewTile title="Gratitude journal" link="/work#thankful">
+    <WorkPreviewTile title="Gratitude journal" link="/work/thankful">
       <img src={preview} />
     </WorkPreviewTile>
   )

src/main.tsx

@@ -2,7 +2,12 @@ import { Analytics } from '@vercel/analytics/react'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import WorkAndy from './content/andy/index.tsx'
 import CvPrint from './content/CvPrint.tsx'
+import WorkKolbord from './content/kolbord/index.tsx'
+import WorkMHD from './content/mhd/index.tsx'
+import Thankful from './content/thankful/index.tsx'
+import WorkPhoto from './content/WorkPhoto.tsx'
 import './index.css'
 import About from './pages/About.tsx'
 import Home from './pages/Home.tsx'
@@ -23,6 +28,26 @@ const router = createBrowserRouter([
         element: <Work />,
         errorElement: <Work />,
       },
+      {
+        path: '/work/tickets',
+        element: <WorkMHD />,
+      },
+      {
+        path: '/work/kolbord',
+        element: <WorkKolbord />,
+      },
+      {
+        path: '/work/andy',
+        element: <WorkAndy />,
+      },
+      {
+        path: '/work/thankful',
+        element: <Thankful />,
+      },
+      {
+        path: '/work/photo',
+        element: <WorkPhoto />,
+      },
       {
         path: '/about',
         element: <About />,

src/pages/Home.tsx

@@ -8,11 +8,13 @@ const Home = () => {
   return (
     <>
       <Intro />
-      <KolbordPreview />
-      <MhdPreview />
-      <div className="flex flex-col md:flex-row">
-        <AndyPreview />
-        <ThankfulPreview />
+      <div className="flex flex-col gap-8 p-6 sm:px-8 md:px-12">
+        <KolbordPreview />
+        <MhdPreview />
+        <div className="flex flex-col gap-8 md:flex-row">
+          <AndyPreview />
+          <ThankfulPreview />
+        </div>
       </div>
     </>
   )

src/pages/Work.tsx

@@ -1,19 +1,15 @@
-import WorkAndy from '@/content/andy'
-import WorkKolbord from '@/content/kolbord'
-import WorkMHD from '@/content/mhd'
-import WorkThankful from '@/content/thankful'
-import WorkComparator from '@/content/WorkComparator'
-import WorkPhoto from '@/content/WorkPhoto'
+import AndyPreview from '@/content/andy/AndyPreview'
+import KolbordPreview from '@/content/kolbord/KolbordPreview'
+import MhdPreview from '@/content/mhd/MhdPreview'
+import ThankfulPreview from '@/content/thankful/ThankfulPreview'
 
 const Work = () => {
   return (
-    <div className="flex flex-col gap-32">
-      <WorkMHD />
-      <WorkKolbord />
-      <WorkThankful />
-      <WorkComparator />
-      <WorkAndy />
-      <WorkPhoto />
+    <div className="grid grid-cols-1 gap-10 p-6 sm:px-8 md:grid-cols-2 md:px-12">
+      <MhdPreview />
+      <KolbordPreview />
+      <ThankfulPreview />
+      <AndyPreview />
     </div>
   )
 }

src/partials/Layout.tsx

@@ -7,22 +7,22 @@ const Layout = () => {
   return (
     <div className="flex flex-col pt-8">
       <ScrollRestoration />
-      <div className="sticky top-0 z-50 mb-16 flex h-16 w-full items-baseline gap-8 bg-gradient-to-b from-white/80 px-6 pt-5 sm:px-8 md:px-12 dark:from-zinc-800/80">
+      <div className="sticky top-0 z-50 mb-12 flex h-16 w-full items-baseline gap-8 bg-gradient-to-b from-white/80 px-6 pt-5 sm:px-8 md:px-12 dark:from-zinc-800/80">
         <a href="/" className="cursor-pointer">
           <Heading size={1}>Adam Plesník</Heading>
         </a>
         <div className="flex flex-1 justify-end gap-4">
           <NavLink
             className={({ isActive }) =>
-              clsx('cursor-pointer text-2xl font-medium hover:underline', isActive && 'underline')
+              clsx('cursor-pointer text-2xl font-medium hover:underline', isActive && '')
             }
             to="/work"
           >
             Work
           </NavLink>
           <NavLink
             className={({ isActive }) =>
-              clsx('cursor-pointer text-2xl font-medium hover:underline', isActive && 'underline')
+              clsx('hover: cursor-pointer text-2xl font-medium', isActive && 'underline')
             }
             to="/about"
           >