Merge branch 'main' into feature/max-width

adamplesnik · Jan 17, 2025 · 11e175a · 11e175a
2 parents 4c2d38f + d161bde
commit 11e175a
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 80 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,16 +14,13 @@
   "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",

diff --git a/src/components/WorkPreviewTile.tsx b/src/components/WorkPreviewTile.tsx
@@ -9,7 +9,7 @@ const WorkPreviewTile = ({ title, className, link, src, titleRight }: WorkPrevie
     <Fade triggerOnce className="group relative">
       <a
         href={link}
-        className={clsx('w-full overflow-hidden rounded-lg md:rounded-2xl', className)}
+        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">
           <CustomImg
@@ -21,11 +21,12 @@ const WorkPreviewTile = ({ title, className, link, src, titleRight }: WorkPrevie
         <Heading
           size={2}
           className={clsx(
-            'top-4 mt-4 hover:underline sm:max-w-64 md:absolute md:max-w-72 lg:max-w-full',
-            titleRight ? 'right-8' : 'left-8'
+            'relative mt-4 inline-flex items-baseline gap-2 sm:max-w-64 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-black 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} &rarr;
+          {title}
         </Heading>
       </a>
     </Fade>

diff --git a/src/content/Intro.tsx b/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>
   )
 }
 

diff --git a/src/content/vkjb/index.tsx b/src/content/vkjb/index.tsx
@@ -19,8 +19,8 @@ const WorkLibrary = () => {
   return (
     <WorkTile
       id="library"
-      title="Public library in Košice"
-      text="Identity and UI 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 />}
     >

diff --git a/src/pages/About.tsx b/src/pages/About.tsx
@@ -1,11 +1,12 @@
 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 (
     <>
-      <div className="mx-auto w-full max-w-screen-2xl">
+      <Fade triggerOnce cascade damping={0.09} className="mx-auto w-full max-w-screen-2xl">
         <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
           {catchPhrase}
         </Paragraph>
@@ -18,12 +19,12 @@ const About = () => {
         <Paragraph big className="mb-24 px-6 sm:px-8 md:px-12">
           {freeTime}
         </Paragraph>
-      </div>
-      <div className="-mb-24 flex flex-col gap-2 bg-cv-light pb-12 dark:bg-cv-dark">
-        <div className="mx-auto w-full max-w-screen-2xl p-6 sm:p-8 md:p-12">
+      </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>
-      </div>
+      </Fade>
     </>
   )
 }

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -16,7 +16,7 @@ const Home = () => {
           src={mhdPreview}
         />
         <WorkPreviewTile title="Kolbord" link="/work/kolbord" src={kolbordPreview} />
-        <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"

diff --git a/src/partials/Layout.tsx b/src/partials/Layout.tsx
@@ -11,41 +11,54 @@ const Layout = ({ outlet }: { outlet?: ReactNode | null }) => {
   return (
     <div className="flex flex-col pt-8">
       <ScrollRestoration />
-      <div className="sticky top-0 z-50 mb-12 bg-gradient-to-b from-white/80 pt-5 dark:from-zinc-800/80">
-        <div className="mx-auto flex w-full max-w-screen-2xl items-baseline gap-8 px-6 sm:px-8 md:px-12">
-          <a href="/" className="cursor-pointer">
-            {isWork ? (
-              <span className="text-2xl font-medium hover:underline sm:text-3xl">&larr;</span>
-            ) : (
-              <Heading size={1} className={clsx('transition-opacity', isWork && 'opacity-0')}>
-                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 sm:text-3xl',
-                  isActive && 'underline'
-                )
-              }
-              to="/"
-            >
-              Work
-            </NavLink>
-            <NavLink
-              className={({ isActive }) =>
-                clsx(
-                  'cursor-pointer text-2xl font-medium hover:underline sm:text-3xl',
-                  isActive && 'underline'
-                )
-              }
-              to="/about"
-            >
-              About
-            </NavLink>
-          </div>
+      <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="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="black"
+                />
+              </svg>
+            </span>
+          ) : (
+            <Heading size={1} className={clsx('transition-opacity', isWork && 'opacity-0')}>
+              Adam Plesník
+            </Heading>
+          )}
+        </a>
+        <div className="flex flex-1 justify-end gap-4">
+          <NavLink
+            className={({ isActive }) =>
+              clsx(
+                '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-black after:transition-[max-width] after:ease-in-out hover:after:max-w-full after:sm:h-[3px]',
+                isActive && 'after:max-w-full'
+              )
+            }
+            to="/"
+          >
+            Work
+          </NavLink>
+          <NavLink
+            className={({ isActive }) =>
+              clsx(
+                '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-black after:transition-[max-width] after:ease-in-out hover:after:max-w-full after:sm:h-[3px]',
+                isActive && 'after:max-w-full'
+              )
+            }
+            to="/about"
+          >
+            About
+          </NavLink>
         </div>
       </div>
       {outlet ? outlet : <Outlet />}