Merge branch 'main' into feature/scroll-content

package.json

@@ -12,16 +12,15 @@
     "deploy": "vitest run && vite build"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
     "@vercel/analytics": "^1.3.1",
-    "lucide-react": "^0.446.0",
-    "prismjs": "^1.29.0",
     "react": "^18.3.1",
+    "react-awesome-reveal": "^4.3.1",
     "react-before-after-slider-component": "^1.1.8",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
-    "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@types/react-test-renderer": "^18.3.0",

src/components/WorkPreviewTile.tsx

@@ -1,25 +1,43 @@
 import { clsx } from 'clsx'
 import { HTMLAttributes } from 'react'
+import { Fade } from 'react-awesome-reveal'
 import CustomImg from './CustomImg'
 import Heading from './Heading'
 
-const WorkPreviewTile = ({ title, className, link, src }: WorkPreviewTileProps) => {
+const WorkPreviewTile = ({ title, className, link, src, titleRight }: WorkPreviewTileProps) => {
   return (
-    <a href={link} className={clsx('w-full', className)}>
-      <div className="aspect-[2/1]">
-        <CustomImg src={src} alt={title} />
-      </div>
-      <Heading size={2} className="mt-4 hover:underline">
-        {title} &rarr;
-      </Heading>
-    </a>
+    <Fade triggerOnce className="group relative">
+      <a
+        href={link}
+        className={clsx('group w-full overflow-hidden rounded-lg md:rounded-2xl', className)}
+      >
+        <div className="aspect-[2/1] overflow-hidden rounded-lg md:rounded-2xl lg:aspect-[2.5/1]">
+          <CustomImg
+            src={src}
+            alt={title}
+            className="transition-[transform,opacity] duration-[400ms] ease-in-out group-hover:scale-[1.02]"
+          />
+        </div>
+        <Heading
+          size={2}
+          className={clsx(
+            'relative mt-4 inline-flex items-baseline gap-2 md:absolute md:top-4 md:max-w-72 lg:max-w-full',
+            'after:absolute after:bottom-1 after:left-0 after:h-[2px] after:w-full after:max-w-0 after:bg-current after:transition-[max-width] after:ease-out group-hover:after:max-w-full after:md:h-[3px]',
+            titleRight ? 'md:right-8' : 'md:left-8'
+          )}
+        >
+          {title}
+        </Heading>
+      </a>
+    </Fade>
   )
 }
 
 type WorkPreviewTileProps = {
   title: string
   link: string
   src: string | undefined
+  titleRight?: boolean | undefined
 } & HTMLAttributes<HTMLDivElement>
 
 export default WorkPreviewTile

src/components/WorkTile.tsx

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx'
 import { HTMLAttributes, ReactNode, useState } from 'react'
-import Badge from './Badge'
+import { Fade } from 'react-awesome-reveal'
 import Heading from './Heading'
 import Link from './Link'
 import Paragraph from './Paragraph'
@@ -14,7 +14,6 @@ const WorkTile = ({
   top,
   more,
   id,
-  badges,
 }: WorkTileWrapperProps) => {
   const [moreVisible, setMoreVisible] = useState(false)
 
@@ -23,40 +22,41 @@ const WorkTile = ({
       className={clsx('relative flex w-full flex-col gap-8 px-6 pb-12 sm:px-8 md:px-12', className)}
     >
       <span id={id} className="absolute -top-12 block" />
-      {top && <>{top}</>}
-      <div className="flex flex-col gap-4 md:flex-row md:gap-12">
-        {title && (
-          <Heading size={2} className="flex-1 shrink-0">
-            {title}
-          </Heading>
-        )}
-        <div className="flex flex-col gap-4 md:flex-[2]">
-          {text && <Paragraph>{text}</Paragraph>}
-          {badges && (
-            <div className="flex">
-              {badges.map((b) => (
-                <Badge value={b} />
-              ))}
-            </div>
-          )}
-          {more && (
-            <>
-              <div
-                className={clsx(
-                  'overflow-hidden transition-[max-height] duration-500',
-                  moreVisible ? 'max-h-[1000px] ease-in' : 'max-h-0 ease-out'
-                )}
-              >
-                {more}
-              </div>
-              <Link className="cursor-pointer" onClick={() => setMoreVisible(!moreVisible)}>
-                {moreVisible ? 'Hide details...' : 'Show details...'}
-              </Link>
-            </>
+      {top && (
+        <Fade triggerOnce cascade>
+          {top}
+        </Fade>
+      )}
+      <Fade triggerOnce cascade damping={0.1}>
+        <div className="flex flex-col gap-4 md:flex-row md:gap-12">
+          {title && (
+            <Heading size={2} className="flex-1 shrink-0">
+              {title}
+            </Heading>
           )}
+          <div className="flex flex-col gap-6 md:flex-[2]">
+            {text && <Paragraph>{text}</Paragraph>}
+            {more && (
+              <>
+                <div
+                  className={clsx(
+                    'flex flex-col gap-6 overflow-hidden transition-[max-height] duration-500',
+                    moreVisible ? 'max-h-[1000px] ease-in' : 'max-h-0 ease-out'
+                  )}
+                >
+                  {more}
+                </div>
+                <Link className="cursor-pointer" onClick={() => setMoreVisible(!moreVisible)}>
+                  {moreVisible ? 'Hide details...' : 'Show details...'}
+                </Link>
+              </>
+            )}
+          </div>
         </div>
-      </div>
-      <div className="flex flex-col gap-4 md:flex-1">{children}</div>
+      </Fade>
+      <Fade triggerOnce cascade damping={2}>
+        <div className="flex flex-col gap-4 md:flex-1">{children}</div>
+      </Fade>
       {links && <div className="flex flex-col gap-y-2">{links}</div>}
     </div>
   )
@@ -68,7 +68,6 @@ type WorkTileWrapperProps = {
   title?: string
   text?: string
   more?: ReactNode
-  badges?: string[]
 } & HTMLAttributes<HTMLDivElement>
 
 export default WorkTile

src/content/Intro.tsx

@@ -1,16 +1,17 @@
 import Paragraph from '@/components/Paragraph'
+import { Fade } from 'react-awesome-reveal'
 import { catchDetail, catchPhrase } from './phrases'
 
 const Intro = () => {
   return (
-    <>
+    <Fade triggerOnce cascade damping={0.09}>
       <Paragraph big className="px-6 pb-12 sm:px-8 md:px-12">
         {catchPhrase}
       </Paragraph>
       <Paragraph big className="px-6 pb-8 sm:px-8 md:px-12 md:pb-12">
         {catchDetail}
       </Paragraph>
-    </>
+    </Fade>
   )
 }
 

src/content/martin/index.tsx

@@ -29,7 +29,7 @@ const WorkMartin = () => {
       id="martin"
       title="Hospital in Martin"
       more={<More />}
-      text="Identity for a new hospital in Martin. The whole idea behind the proposal is to create well working and easily recognizable visual system from logo, identity and wayfinding."
+      text="Identity and UI for a new hospital in Martin. The whole idea behind the proposal is to create well working and easily recognizable visual system from logo, identity and wayfinding."
       top={<CustomImg src={martinNav} />}
     >
       <CustomImg src={martinNewborn} />

src/content/mhd/index.tsx

@@ -23,12 +23,14 @@ const SECOND_IMAGE = {
 
 const More = () => {
   return (
-    <Paragraph>
-      The original application is very complex and poorly designed. I simplified and polished the
-      user journey to make it more intuitive and less prone to errors. The new UI aims to be clear,
-      highly readable, and easy to use while in transit. This work is 100% guerilla, with a planned
-      pitch to the authorities.
-    </Paragraph>
+    <>
+      <Paragraph>
+        The original application is very complex and poorly designed. I simplified and polished the
+        user journey to make it more intuitive and less prone to errors. The new UI aims to be
+        clear, highly readable, and easy to use while in transit.
+      </Paragraph>
+      <Paragraph>This work is 100% guerilla, with a planned pitch to the authorities.</Paragraph>
+    </>
   )
 }
 

src/content/phrases.ts

@@ -4,7 +4,7 @@ export const catchDetail = `With over 15\u00A0years of experience in UI design a
 
 export const freeTime = `I value both creative and personal freedom, preferring hybrid, purpose-driven, and flexible work. Family time is a non-negotiable, and I put high priority in my time off, enjoying mountain biking, hiking and travel—whether with family or solo when needed.`
 
-export const tech = `Proficient in Figma and Adobe CC, I code in React + Typescript, Tailwind\u00A0CSS, and I speak English and\u00A0French.`
+export const tech = `Proficient in Figma and Adobe CC, I code in React + Typescript, Tailwind\u00A0CSS, and I\u00A0speak English and\u00A0French.`
 
 /* If needed */
 export const catchPhrase2 = `I am a graphic designer with more than 15 years of experience with identity and brand design, UI design, and front-end coding. I believe I could be a valuable asset to your team especially thanks to my ability to seamlessly work in all these fields and ensure the visuals are clean, functional and consistent no matter the medium.`

src/content/vkjb/index.tsx

@@ -19,8 +19,8 @@ const WorkLibrary = () => {
   return (
     <WorkTile
       id="library"
-      title="Public library in Košice"
-      text="Identity for a library in Košice. Very heavy logo complemented with a straightforward typography. Both logo and type visually support the brand and they should become distinctive over time."
+      title="Public library"
+      text="Identity and UI for a public library. Very heavy logo complemented with a straightforward typography. Both logo and type visually support the brand and they should become distinctive over time."
       top={<CustomImg src={poster} />}
       more={<More />}
     >

src/pages/About.tsx

@@ -1,25 +1,30 @@
 import Paragraph from '@/components/Paragraph'
 import CvTimeline from '@/content/CvTimeline'
 import { catchDetail, catchPhrase, freeTime, tech } from '@/content/phrases'
+import { Fade } from 'react-awesome-reveal'
 
 const About = () => {
   return (
     <>
-      <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
-        {catchPhrase}
-      </Paragraph>
-      <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
-        {catchDetail}
-      </Paragraph>
-      <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
-        {tech}
-      </Paragraph>
-      <Paragraph big className="mb-24 px-6 sm:px-8 md:px-12">
-        {freeTime}
-      </Paragraph>
-      <div className="-mb-24 flex flex-col gap-2 bg-cv-light p-6 sm:p-8 md:p-12 dark:bg-cv-dark">
-        <CvTimeline />
-      </div>
+      <Fade triggerOnce cascade damping={0.09}>
+        <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
+          {catchPhrase}
+        </Paragraph>
+        <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
+          {catchDetail}
+        </Paragraph>
+        <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
+          {tech}
+        </Paragraph>
+        <Paragraph big className="mb-24 px-6 sm:px-8 md:px-12">
+          {freeTime}
+        </Paragraph>
+      </Fade>
+      <Fade triggerOnce>
+        <div className="-mb-24 flex flex-col gap-2 bg-cv-light p-6 sm:p-8 md:p-12 dark:bg-cv-dark">
+          <CvTimeline />
+        </div>
+      </Fade>
     </>
   )
 }

src/pages/Home.tsx

@@ -1,24 +1,28 @@
 import WorkPreviewTile from '@/components/WorkPreviewTile'
 import Intro from '@/content/Intro'
 import kolbordPreview from '@/content/kolbord/images/kolbord-home.jpg'
+import martinPreview from '@/content/martin/images/martin-home.jpg'
 import mhdPreview from '@/content/mhd/images/mhd-home.jpg'
-import thankPreview from '@/content/thankful/images/thank-home.jpg'
 import vkjbPreview from '@/content/vkjb/images/vkjb-home.jpg'
 
 const Home = () => {
   return (
     <>
       <Intro />
-      <div className="flex flex-col gap-8 p-6 sm:px-8 md:px-12">
+      <div className="flex flex-col gap-12 p-6 sm:px-8 md:px-12">
         <WorkPreviewTile
           title="Bratislava public transport"
           link="/work/tickets"
           src={mhdPreview}
         />
-
         <WorkPreviewTile title="Kolbord" link="/work/kolbord" src={kolbordPreview} />
-        <WorkPreviewTile title="Thankful" link="/work/thankful" src={thankPreview} />
-        <WorkPreviewTile title="Public library in Košice" link="/work/library" src={vkjbPreview} />
+        <WorkPreviewTile title="Public library" link="/work/library" src={vkjbPreview} />
+        <WorkPreviewTile
+          title="Hospital in Martin"
+          link="/work/martin"
+          src={martinPreview}
+          titleRight
+        />
       </div>
     </>
   )

src/partials/Layout.tsx

@@ -14,7 +14,20 @@ const Layout = ({ outlet }: { outlet?: ReactNode | null }) => {
       <div className="sticky top-0 z-50 mb-12 flex 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">
           {isWork ? (
-            <span className="text-2xl font-medium hover:underline sm:text-3xl">&larr;</span>
+            <span className="flex w-20 items-center transition-transform ease-in-out hover:-translate-x-2">
+              <svg
+                width="32"
+                height="13"
+                viewBox="0 0 32 13"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8.97561 12.5H4.97561L0 6.644V6.356L4.97561 0.5H8.97561L5.13821 4.948L32 4.948V8.052L5.13821 8.052L8.97561 12.5Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
           ) : (
             <Heading size={1} className={clsx('transition-opacity', isWork && 'opacity-0')}>
               Adam Plesník
@@ -25,8 +38,9 @@ const Layout = ({ outlet }: { outlet?: ReactNode | null }) => {
           <NavLink
             className={({ isActive }) =>
               clsx(
-                'cursor-pointer text-2xl font-medium hover:underline sm:text-3xl',
-                isActive && 'underline'
+                'relative cursor-pointer text-2xl font-medium sm:text-3xl',
+                'after:absolute after:bottom-1 after:left-0 after:h-[2px] after:w-full after:max-w-0 after:bg-current after:transition-[max-width] after:ease-in-out hover:after:max-w-full after:sm:h-[3px]',
+                isActive && 'after:max-w-full'
               )
             }
             to="/"
@@ -36,8 +50,9 @@ const Layout = ({ outlet }: { outlet?: ReactNode | null }) => {
           <NavLink
             className={({ isActive }) =>
               clsx(
-                'cursor-pointer text-2xl font-medium hover:underline sm:text-3xl',
-                isActive && 'underline'
+                'relative cursor-pointer text-2xl font-medium sm:text-3xl',
+                'after:absolute after:bottom-1 after:left-0 after:h-[2px] after:w-full after:max-w-0 after:bg-current after:transition-[max-width] after:ease-in-out hover:after:max-w-full after:sm:h-[3px]',
+                isActive && 'after:max-w-full'
               )
             }
             to="/about"