Merge pull request #3 from adamplesnik/feature/tune-footer

Feature/tune footer
adamplesnik · Oct 2, 2024 · 12a4446 · 12a4446
2 parents faa7b02 + 70a18eb
commit 12a4446
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Adam Plesník, design engineer, Bratislava, Slovakia" />
     <title>Adam Plesník, design engineer</title>
   </head>
   <body

diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,5 @@
+user-agent: *
+allow: *
+
+user-agent: *
+disallow: /blog
diff --git a/src/components/Icon.test.tsx b/src/components/Icon.test.tsx
@@ -0,0 +1,17 @@
+import { toJson } from '@/utils/toJson'
+import { Cog } from 'lucide-react'
+import renderer from 'react-test-renderer'
+import { expect, test } from 'vitest'
+import Icon from './Icon'
+
+test('Icon', () => {
+  const component = renderer.create(<Icon Icon={Cog} />)
+  const tree = toJson(component)
+  expect(tree).toMatchSnapshot()
+})
+
+test('Icon with class name', () => {
+  const component = renderer.create(<Icon Icon={Cog} className="test" />)
+  const tree = toJson(component)
+  expect(tree).toMatchSnapshot()
+})
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -0,0 +1,8 @@
+import clsx from 'clsx'
+import { LucideIcon } from 'lucide-react'
+
+const Icon = ({ Icon, className }: { Icon: LucideIcon; className?: string }) => {
+  return <Icon className={clsx('size-5 translate-y-1', className)} strokeWidth={1.5} />
+}
+
+export default Icon
diff --git a/src/components/Tile.tsx b/src/components/Tile.tsx
@@ -2,6 +2,7 @@ import { clsx } from 'clsx'
 import { MousePointerClick } from 'lucide-react'
 import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react'
 import Heading from './Heading'
+import Icon from './Icon'
 
 const Tile = ({
   sub,
@@ -20,7 +21,7 @@ const Tile = ({
       {children}
       {links && (
         <div className="flex items-baseline gap-2">
-          <MousePointerClick className="size-4" />
+          <Icon Icon={MousePointerClick} />
           <div className="flex flex-col gap-1">{links}</div>
         </div>
       )}

diff --git a/src/components/__snapshots__/Icon.test.tsx.snap b/src/components/__snapshots__/Icon.test.tsx.snap
@@ -0,0 +1,117 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Icon 1`] = `
+<svg
+  className="lucide lucide-cog size-5 translate-y-1"
+  fill="none"
+  height={24}
+  stroke="currentColor"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={1.5}
+  viewBox="0 0 24 24"
+  width={24}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"
+  />
+  <path
+    d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+  />
+  <path
+    d="M12 2v2"
+  />
+  <path
+    d="M12 22v-2"
+  />
+  <path
+    d="m17 20.66-1-1.73"
+  />
+  <path
+    d="M11 10.27 7 3.34"
+  />
+  <path
+    d="m20.66 17-1.73-1"
+  />
+  <path
+    d="m3.34 7 1.73 1"
+  />
+  <path
+    d="M14 12h8"
+  />
+  <path
+    d="M2 12h2"
+  />
+  <path
+    d="m20.66 7-1.73 1"
+  />
+  <path
+    d="m3.34 17 1.73-1"
+  />
+  <path
+    d="m17 3.34-1 1.73"
+  />
+  <path
+    d="m11 13.73-4 6.93"
+  />
+</svg>
+`;
+
+exports[`Icon with class name 1`] = `
+<svg
+  className="lucide lucide-cog size-5 translate-y-1 test"
+  fill="none"
+  height={24}
+  stroke="currentColor"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={1.5}
+  viewBox="0 0 24 24"
+  width={24}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"
+  />
+  <path
+    d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+  />
+  <path
+    d="M12 2v2"
+  />
+  <path
+    d="M12 22v-2"
+  />
+  <path
+    d="m17 20.66-1-1.73"
+  />
+  <path
+    d="M11 10.27 7 3.34"
+  />
+  <path
+    d="m20.66 17-1.73-1"
+  />
+  <path
+    d="m3.34 7 1.73 1"
+  />
+  <path
+    d="M14 12h8"
+  />
+  <path
+    d="M2 12h2"
+  />
+  <path
+    d="m20.66 7-1.73 1"
+  />
+  <path
+    d="m3.34 17 1.73-1"
+  />
+  <path
+    d="m17 3.34-1 1.73"
+  />
+  <path
+    d="m11 13.73-4 6.93"
+  />
+</svg>
+`;
diff --git a/src/content/Tech.tsx b/src/content/Tech.tsx
@@ -1,19 +1,20 @@
 import Em from '@/components/Em'
+import Icon from '@/components/Icon'
 import Tile from '@/components/Tile'
 import { Sparkles } from 'lucide-react'
 
 const skills: { tech: string; description: string }[] = [
   {
     tech: 'React',
-    description: 'TSX, state as minimal as it gets, queries, micro components, API.',
+    description: 'TSX, state, queries, micro components, API.',
   },
-  { tech: 'Tailwind CSS', description: 'Atomic CSS everywhere.' },
-  { tech: 'CSS + Sass', description: 'Where the Tailwind CSS is not enough.' },
+  { tech: 'Tailwind CSS', description: 'Utility first.' },
+  { tech: 'HTML, CSS, Sass', description: 'SEO, a11y, animations, transitions.' },
   {
     tech: 'Theme refactoring',
-    description: 'Reorganization and tuning of front-end parts of large app',
+    description: 'Reorganization and tuning of front-end.',
   },
-  { tech: 'Figma', description: 'Mockups and prototypes.' },
+  { tech: 'Figma', description: 'Mockups and prototypes, design systems, modes.' },
   { tech: '...and more', description: 'Payload CMS, Angular, Vue.js, Vaadin + Java' },
 ]
 
@@ -23,10 +24,10 @@ const Tech = () => {
       <ul className="grid gap-4 md:grid-flow-col-dense md:grid-rows-3">
         {skills.map((skill, i) => (
           <li key={i} className="group flex items-baseline gap-2">
-            <Sparkles className="size-4 opacity-0 group-first:opacity-100" />
+            <Icon Icon={Sparkles} className="opacity-0 group-first:opacity-100" />
             <span className="flex flex-col gap-1">
               <Em>{skill.tech}</Em>
-              <span className="block text-sm">{skill.description}</span>
+              <span className="block text-sm text-zinc-500">{skill.description}</span>
             </span>
           </li>
         ))}

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -14,7 +14,10 @@ const Home = () => {
       <div className="sticky top-0 z-10 mx-auto w-full max-w-screen-md bg-gradient-to-b from-slate-50 p-8 pt-12 dark:from-gray-900 print:max-w-screen-sm print:bg-none">
         <Header />
       </div>
-      <div className="mx-auto mb-12 flex w-full max-w-screen-md flex-col overflow-hidden p-8 print:max-w-screen-sm">
+      <div
+        className="mx-auto mb-12 flex w-full max-w-screen-md flex-col overflow-hidden p-8 print:max-w-screen-sm"
+        role="main"
+      >
         <Intro />
         <AboutMe />
         <Tech />

diff --git a/src/partials/Footer.tsx b/src/partials/Footer.tsx
@@ -1,14 +1,19 @@
 import Em from '@/components/Em'
+import Icon from '@/components/Icon'
 import Link from '@/components/Link'
+import { Trees } from 'lucide-react'
 
 const Footer = () => {
   return (
-    <div className="mt-4 flex w-full flex-col gap-4 border-t border-t-zinc-300 pt-8 text-sm sm:justify-between">
-      <Em>Adam Plesník, Bratislava, Slovakia</Em>
-      <div className="flex flex-col gap-2 sm:items-end">
-        <Link href="https://github.com/adamplesnik">github.com/adamplesnik</Link>
-        <Link href="https://www.linkedin.com/in/adamplesnik/">linkedin.com/in/adamplesnik</Link>
-        <Link href="mailto:adam@adamplesnik.com">adam@adamplesnik.com</Link>
+    <div className="mt-4 flex w-full items-baseline gap-3 border-t border-t-zinc-300 pt-8 text-sm">
+      <Icon Icon={Trees} className="text-zinc-800" />
+      <div>
+        <Em className="block pb-6">Adam Plesník, Bratislava, Slovakia</Em>
+        <div className="flex flex-col gap-2">
+          <Link href="mailto:adam@adamplesnik.com">adam@adamplesnik.com</Link>
+          <Link href="https://github.com/adamplesnik">github.com/adamplesnik</Link>
+          <Link href="https://www.linkedin.com/in/adamplesnik/">linkedin.com/in/adamplesnik</Link>
+        </div>
       </div>
     </div>
   )

diff --git a/src/partials/Header.tsx b/src/partials/Header.tsx
@@ -5,7 +5,11 @@ const Header = () => {
   return (
     <div className="flex items-center justify-between">
       <Heading size={1}>Adam Plesník</Heading>
-      <Link href="https://github.com/adamplesnik" className="print:hidden">
+      <Link
+        href="https://github.com/adamplesnik"
+        className="print:hidden"
+        aria-label="Open my Github page"
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 98 96"