feat: add posts and photos to archive

flornkm · Jan 22, 2024 · cf2a425 · cf2a425 · vercel · Jan 22, 2024
1 parent aeffdff
commit cf2a425
Show file tree

Hide file tree

Showing 23 changed files with 306 additions and 2 deletions.
diff --git a/pages/archive/index/+Page.tsx b/pages/archive/index/+Page.tsx
@@ -55,7 +55,6 @@ export default function Page() {
             </Button>
           </a>
           <div class="border-b border-b-zinc-100 dark:border-b-zinc-900" />
-
           <a
             href="/archive/copyables"
             class="flex justify-between gap-4 leading-none md:items-center group/link py-4 transition-colors hover:bg-zinc-100 rounded-md dark:hover:bg-zinc-900"
@@ -66,7 +65,43 @@ export default function Page() {
             </p>
             <Button
               type="text"
-              link="/archive/projects"
+              link="/archive/copyables"
+              class="relative md:ml-auto col-span-2 md:col-span-1 group-hover/link:underline"
+              chevron
+            >
+              {m.button_open()}
+            </Button>
+          </a>
+          <div class="border-b border-b-zinc-100 dark:border-b-zinc-900" />
+          <a
+            href="/archive/photos"
+            class="flex justify-between gap-4 leading-none md:items-center group/link py-4 transition-colors hover:bg-zinc-100 rounded-md dark:hover:bg-zinc-900"
+          >
+            <p class="font-medium leading-snug md:col-span-2 flex items-center">
+              <Folder class="flex-shrink-0 text-zinc-400 mr-2" size={20} />
+              Photos
+            </p>
+            <Button
+              type="text"
+              link="/archive/photos"
+              class="relative md:ml-auto col-span-2 md:col-span-1 group-hover/link:underline"
+              chevron
+            >
+              {m.button_open()}
+            </Button>
+          </a>
+          <div class="border-b border-b-zinc-100 dark:border-b-zinc-900" />
+          <a
+            href="/archive/posts"
+            class="flex justify-between gap-4 leading-none md:items-center group/link py-4 transition-colors hover:bg-zinc-100 rounded-md dark:hover:bg-zinc-900"
+          >
+            <p class="font-medium leading-snug md:col-span-2 flex items-center">
+              <Folder class="flex-shrink-0 text-zinc-400 mr-2" size={20} />
+              Posts
+            </p>
+            <Button
+              type="text"
+              link="/archive/posts"
               class="relative md:ml-auto col-span-2 md:col-span-1 group-hover/link:underline"
               chevron
             >

diff --git a/pages/archive/photos/+Page.tsx b/pages/archive/photos/+Page.tsx
@@ -0,0 +1,116 @@
+import { InlineLink } from "#components/Button"
+import { userScrolledDown } from "#hooks/userScrolledDown"
+
+const photos = [
+  {
+    src: "/images/archive/photos/IMG_6790.webp",
+  },
+  {
+    src: "/images/archive/photos/IMG_7283.webp",
+  },
+  {
+    src: "/images/archive/photos/IMG_7352.webp",
+  },
+  {
+    src: "/images/archive/photos/IMG_7413.webp",
+  },
+  {
+    src: "/images/archive/photos/IMG_7433.webp",
+  },
+  {
+    src: "/images/archive/photos/IMG_7472.webp",
+  },
+  {
+    src: "/images/archive/photos/IMG_8001.webp",
+  },
+  {
+    src: "/images/archive/photos/IMG_5541.webp",
+  },
+  {
+    src: "/images/archive/photos/IMG_8004.webp",
+  },
+  {
+    src: "/images/archive/photos/IMG_8120.webp",
+  },
+]
+
+photos.reverse()
+
+export default function Page() {
+  return (
+    <div class="w-full">
+      <section class="w-full pb-24">
+        <div
+          class={
+            "flex items-center lg:mt-6 mb-6  bg-light-zinc/95 backdrop-blur-xl dark:bg-black/90 sticky top-0 lg:top-14 z-50 transition-all " +
+            (userScrolledDown(40)
+              ? "font-medium py-2"
+              : "text-3xl font-semibold lg:py-2")
+          }
+        >
+          <InlineLink link="/archive" class="px-1.5 -ml-1.5" hideWeight>
+            Archive
+          </InlineLink>
+          <p> / </p>
+          <p class="px-1.5 text-zinc-400 dark:text-zinc-600 truncate">Photos</p>
+        </div>
+        <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 w-full gap-4 h-full min-h-screen">
+          <div class="py-0.5 gap-4 flex items-start flex-col h-full">
+            {photos
+              .filter((_, i) => i % 3 === 0)
+              .map((photo) => {
+                return (
+                  <Item>
+                    <img
+                      src={photo.src}
+                      alt={photo.src.split("/").pop()?.split(".")[0]}
+                      class="mx-auto"
+                    />
+                  </Item>
+                )
+              })}
+          </div>
+          <div class="py-0.5 gap-4 flex items-start flex-col">
+            {photos
+              .filter((_, i) => i % 3 === 1)
+              .map((photo) => {
+                return (
+                  <Item>
+                    <img
+                      src={photo.src}
+                      alt={photo.src.split("/").pop()?.split(".")[0]}
+                      class="mx-auto"
+                    />
+                  </Item>
+                )
+              })}
+          </div>
+          <div class="py-0.5 gap-4 flex items-start flex-col">
+            {photos
+              .filter((_, i) => i % 3 === 2)
+              .map((photo) => {
+                return (
+                  <Item>
+                    <img
+                      src={photo.src}
+                      alt={photo.src.split("/").pop()?.split(".")[0]}
+                      class="mx-auto"
+                    />
+                  </Item>
+                )
+              })}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function Item(props: { children: any }) {
+  return (
+    <div class="w-full bg-zinc-100 dark:bg-zinc-900 relative">
+      {" "}
+      {props.children}
+    </div>
+  )
+}
diff --git a/pages/archive/photos/+config.h.ts b/pages/archive/photos/+config.h.ts
@@ -0,0 +1,5 @@
+export default {
+  title: "Photos Archive | Florian - Design Engineer",
+  description: "My latest photos from my archive.",
+  image: "/images/opengraph/og-image-archive.jpg",
+}
diff --git a/pages/archive/posts/+Page.tsx b/pages/archive/posts/+Page.tsx
@@ -0,0 +1,143 @@
+import { InlineLink } from "#components/Button"
+import { userScrolledDown } from "#hooks/userScrolledDown"
+
+type Post = {
+  src: string
+  type: "image" | "video"
+}
+
+const posts = [
+  {
+    src: "/images/archive/posts/domainlist.webp",
+    type: "image",
+  },
+  {
+    src: "/images/archive/posts/image-recognizer.webp",
+    type: "image",
+  },
+  {
+    src: "/images/archive/posts/inlang-timeline.webp",
+    type: "image",
+  },
+  {
+    src: "/images/archive/posts/memoji-laptop.webp",
+    type: "image",
+  },
+  {
+    src: '<div style="padding: 62.50% 0 0 0; position: relative"><div style="height:100%;left:0;position:absolute;top:0;width:100%"><iframe height="100%" width="100%;" src="https://embed.wave.video/0p1fbsjamDWXd9cG" frameborder="0" allow="autoplay; fullscreen" scrolling="no"></iframe></div></div>',
+    type: "video",
+  },
+  {
+    src: "/images/archive/posts/more-is-less.webp",
+    type: "image",
+  },
+  {
+    src: "/images/archive/posts/rabbit-icons.webp",
+    type: "image",
+  },
+  {
+    src: "/images/archive/posts/smart-mirror.webp",
+    type: "image",
+  },
+  {
+    src: "/images/archive/posts/transportation.webp",
+    type: "image",
+  },
+  {
+    src: '<div style="padding: 62.50% 0 0 0; position: relative"><div style="height:100%;left:0;position:absolute;top:0;width:100%"><iframe height="100%" width="100%;" src="https://embed.wave.video/nqAGm3gE4caLM6xP" frameborder="0" allow="autoplay; fullscreen" scrolling="no"></iframe></div></div>',
+    type: "video",
+  },
+] as Post[]
+
+posts.reverse()
+
+export default function Page() {
+  return (
+    <div class="w-full">
+      <section class="w-full pb-24">
+        <div
+          class={
+            "flex items-center lg:mt-6 mb-6  bg-light-zinc/95 backdrop-blur-xl dark:bg-black/90 sticky top-0 lg:top-14 z-50 transition-all " +
+            (userScrolledDown(40)
+              ? "font-medium py-2"
+              : "text-3xl font-semibold lg:py-2")
+          }
+        >
+          <InlineLink link="/archive" class="px-1.5 -ml-1.5" hideWeight>
+            Archive
+          </InlineLink>
+          <p> / </p>
+          <p class="px-1.5 text-zinc-400 dark:text-zinc-600 truncate">Posts</p>
+        </div>
+        <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 w-full gap-4 h-full min-h-screen">
+          <div class="py-0.5 gap-4 flex items-start flex-col h-full">
+            {posts
+              .filter((_, i) => i % 3 === 0)
+              .map((post) => {
+                return (
+                  <Item>
+                    {post.type === "image" ? (
+                      <img
+                        src={post.src}
+                        alt={post.src.split("/").pop()?.split(".")[0]}
+                        class="mx-auto"
+                      />
+                    ) : (
+                      <div dangerouslySetInnerHTML={{ __html: post.src }} />
+                    )}
+                  </Item>
+                )
+              })}
+          </div>
+          <div class="py-0.5 gap-4 flex items-start flex-col">
+            {posts
+              .filter((_, i) => i % 3 === 1)
+              .map((post) => {
+                return (
+                  <Item>
+                    {post.type === "image" ? (
+                      <img
+                        src={post.src}
+                        alt={post.src.split("/").pop()?.split(".")[0]}
+                        class="mx-auto"
+                      />
+                    ) : (
+                      <div dangerouslySetInnerHTML={{ __html: post.src }} />
+                    )}
+                  </Item>
+                )
+              })}
+          </div>
+          <div class="py-0.5 gap-4 flex items-start flex-col">
+            {posts
+              .filter((_, i) => i % 3 === 2)
+              .map((post) => {
+                return (
+                  <Item>
+                    {post.type === "image" ? (
+                      <img
+                        src={post.src}
+                        alt={post.src.split("/").pop()?.split(".")[0]}
+                        class="mx-auto"
+                      />
+                    ) : (
+                      <div dangerouslySetInnerHTML={{ __html: post.src }} />
+                    )}
+                  </Item>
+                )
+              })}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function Item(props: { children: any }) {
+  return (
+    <div class="w-full bg-zinc-100 dark:bg-zinc-900 relative">
+      {" "}
+      {props.children}
+    </div>
+  )
+}
diff --git a/pages/archive/posts/+config.h.ts b/pages/archive/posts/+config.h.ts
@@ -0,0 +1,5 @@
+export default {
+  title: "Photos Archive | Florian - Design Engineer",
+  description: "My latest photos from my archive.",
+  image: "/images/opengraph/og-image-archive.jpg",
+}
diff --git a/public/images/archive/photos/IMG_5541.webp b/public/images/archive/photos/IMG_5541.webp
diff --git a/public/images/archive/photos/IMG_6790.webp b/public/images/archive/photos/IMG_6790.webp
diff --git a/public/images/archive/photos/IMG_7283.webp b/public/images/archive/photos/IMG_7283.webp
diff --git a/public/images/archive/photos/IMG_7352.webp b/public/images/archive/photos/IMG_7352.webp
diff --git a/public/images/archive/photos/IMG_7413.webp b/public/images/archive/photos/IMG_7413.webp
diff --git a/public/images/archive/photos/IMG_7433.webp b/public/images/archive/photos/IMG_7433.webp
diff --git a/public/images/archive/photos/IMG_7472.webp b/public/images/archive/photos/IMG_7472.webp
diff --git a/public/images/archive/photos/IMG_8001.webp b/public/images/archive/photos/IMG_8001.webp
diff --git a/public/images/archive/photos/IMG_8004.webp b/public/images/archive/photos/IMG_8004.webp
diff --git a/public/images/archive/photos/IMG_8120.webp b/public/images/archive/photos/IMG_8120.webp
diff --git a/public/images/archive/posts/domainlist.webp b/public/images/archive/posts/domainlist.webp
diff --git a/public/images/archive/posts/image-recognizer.webp b/public/images/archive/posts/image-recognizer.webp
diff --git a/public/images/archive/posts/inlang-timeline.webp b/public/images/archive/posts/inlang-timeline.webp
diff --git a/public/images/archive/posts/memoji-laptop.webp b/public/images/archive/posts/memoji-laptop.webp
diff --git a/public/images/archive/posts/more-is-less.webp b/public/images/archive/posts/more-is-less.webp
diff --git a/public/images/archive/posts/rabbit-icons.webp b/public/images/archive/posts/rabbit-icons.webp
diff --git a/public/images/archive/posts/smart-mirror.webp b/public/images/archive/posts/smart-mirror.webp
diff --git a/public/images/archive/posts/transportation.webp b/public/images/archive/posts/transportation.webp