Merge branch 'main' into feature/max-width

src/components/Badge.tsx

@@ -0,0 +1,10 @@
+const Badge = ({ value }: { value: string }) => {
+  return (
+    <div className="group flex text-base">
+      <div className="uppercase">{value}</div>
+      <span className="px-2 group-last-of-type:hidden">+</span>
+    </div>
+  )
+}
+
+export default Badge

src/components/WorkPreviewTile.tsx

@@ -4,26 +4,26 @@ 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 (
-    <Fade triggerOnce>
+    <Fade triggerOnce className="group relative">
       <a
         href={link}
-        className={clsx(
-          'group relative w-full overflow-hidden rounded-lg md:rounded-2xl',
-          className
-        )}
+        className={clsx('w-full overflow-hidden rounded-lg md:rounded-2xl', className)}
       >
         <div className="aspect-[2/1] overflow-hidden rounded-lg md:rounded-2xl">
           <CustomImg
             src={src}
             alt={title}
-            className="transition-[transform,opacity] duration-[400ms] ease-in-out group-hover:scale-[1.02] group-hover:opacity-80"
+            className="transition-[transform,opacity] duration-[400ms] ease-in-out group-hover:scale-[1.02]"
           />
         </div>
         <Heading
           size={2}
-          className="left-8 top-4 mt-4 hover:underline sm:max-w-64 md:absolute md:max-w-72 lg:max-w-full"
+          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'
+          )}
         >
           {title} &rarr;
         </Heading>
@@ -36,6 +36,7 @@ type WorkPreviewTileProps = {
   title: string
   link: string
   src: string | undefined
+  titleRight?: boolean | undefined
 } & HTMLAttributes<HTMLDivElement>
 
 export default WorkPreviewTile

src/components/WorkTile.tsx

@@ -68,6 +68,7 @@ type WorkTileWrapperProps = {
   title?: string
   text?: string
   more?: ReactNode
+  badges?: string[]
 } & HTMLAttributes<HTMLDivElement>
 
 export default WorkTile

src/content/kolbord/index.tsx

@@ -35,6 +35,7 @@ const WorkKolbord = () => {
       links={<Links />}
       text="A prototype of an opinionated, free to use, and open source app for reservation of anything. It is meant to provide an alternative to corporate-oriented, heavy, and expensive booking apps."
       more={<More />}
+      badges={['Figma', 'React', 'Payload CMS']}
       top={
         <div className="bg-[#E2BEC0] p-4 sm:p-8">
           <div className="relative mx-auto max-w-screen-lg overflow-hidden before:absolute before:bottom-0 before:right-0 before:top-0 before:z-10 before:w-2 before:bg-[#E2BEC0]">

src/content/mhd/index.tsx

@@ -40,6 +40,7 @@ const WorkMHD = () => {
       more={<More />}
       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={<CustomImg src={mhdHome} />}
+      badges={['Figma']}
     >
       <CustomImg src={mhdTrio} />
       <GridWrapper>

src/pages/Home.tsx

@@ -17,7 +17,12 @@ const Home = () => {
         />
         <WorkPreviewTile title="Kolbord" link="/work/kolbord" src={kolbordPreview} />
         <WorkPreviewTile title="Public library in Košice" link="/work/library" src={vkjbPreview} />
-        <WorkPreviewTile title="Hospital in Martin" link="/work/martin" src={martinPreview} />
+        <WorkPreviewTile
+          title="Hospital in Martin"
+          link="/work/martin"
+          src={martinPreview}
+          titleRight
+        />
       </div>
     </>
   )