Add header, update titles

adamplesnik · Oct 1, 2024 · 4746afe · 4746afe
1 parent 96271a2
commit 4746afe
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 25 deletions.
diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import { PropsWithChildren } from 'react'
 
 const Heading = ({ size = 1, className = '', children }: PropsWithChildren<TitleProps>) => {
-  const defaultClasses = clsx('relative text-zinc-950 font-semibold', className)
+  const defaultClasses = clsx('text-zinc-950 font-semibold', className)
 
   if (size === 1) {
     return <h1 className={clsx(defaultClasses, 'text-xl leading-normal')}>{children}</h1>

diff --git a/src/components/__snapshots__/Tile.test.tsx.snap b/src/components/__snapshots__/Tile.test.tsx.snap
@@ -7,11 +7,11 @@ exports[`Tile 1`] = `
   <div
     className="flex gap-1"
   >
-    <h4
-      className="relative text-zinc-950 font-semibold mb-4 text-lg"
+    <h3
+      className="text-zinc-950 font-semibold mb-6 text-xl opacity-90"
     >
       Test Title
-    </h4>
+    </h3>
   </div>
   Tile
 </div>
@@ -24,11 +24,11 @@ exports[`Tile with badge 1`] = `
   <div
     className="flex gap-1"
   >
-    <h4
-      className="relative text-zinc-950 font-semibold mb-4 text-lg"
+    <h3
+      className="text-zinc-950 font-semibold mb-6 text-xl opacity-90"
     >
       Test Title
-    </h4>
+    </h3>
     <span />
   </div>
   Tile with badge

diff --git a/src/content/Info.tsx → src/content/Header.tsx b/src/content/Info.tsx → src/content/Header.tsx
@@ -1,8 +1,8 @@
 import Heading from '../components/Heading'
 
-const Info = () => {
+const Header = () => {
   return (
-    <div className="mb-6 flex items-center justify-between">
+    <div className="flex items-center justify-between">
       <Heading size={1}>Adam Plesník</Heading>
       <a href="https://github.com/adamplesnik" className="text-zinc-700 hover:text-pink-500">
         <svg
@@ -19,4 +19,4 @@ const Info = () => {
   )
 }
 
-export default Info
+export default Header
diff --git a/src/layouts/Page.tsx b/src/layouts/Page.tsx
@@ -3,7 +3,7 @@ import Footer from '../content/Footer'
 
 const Page = ({ children }: PropsWithChildren<PageProps>) => {
   return (
-    <div className="relative mx-auto mb-12 flex w-full max-w-screen-md  flex-col overflow-hidden p-8 pt-12 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">
       {children}
       <Footer />
     </div>

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,5 +1,5 @@
 import Cv from '../content/Cv'
-import Info from '../content/Info'
+import Header from '../content/Header'
 import KolbordTile from '../content/KolbordTile'
 import LoveToDo from '../content/LoveToDo'
 import PluginTile from '../content/PluginTile'
@@ -10,20 +10,24 @@ import Page from '../layouts/Page'
 
 const Home = () => {
   return (
-    <Page>
-      <Info />
-      <Skills />
-      <div className="flex flex-col md:flex-row md:gap-16">
-        <LoveToDo />
-        <div>
-          <Work />
-          <KolbordTile />
-          <PluginTile />
-          <WebUmeniaTile />
-        </div>
+    <>
+      <div className="to-white-0 sticky top-0 z-10 mx-auto w-full max-w-screen-md bg-gradient-to-b from-white to-80% p-8 pt-12">
+        <Header />
       </div>
-      <Cv />
-    </Page>
+      <Page>
+        <Skills />
+        <div className="flex flex-col md:flex-row md:gap-16">
+          <LoveToDo />
+          <div>
+            <Work />
+            <KolbordTile />
+            <PluginTile />
+            <WebUmeniaTile />
+          </div>
+        </div>
+        <Cv />
+      </Page>
+    </>
   )
 }