Merge pull request #14 from flornkm/redesign

Redesign

api/access.js

@@ -0,0 +1,23 @@
+/**
+ * @param {import('@vercel/node').VercelRequest} req
+ * @param {import('@vercel/node').VercelResponse} res
+ */
+export default async function handler(req, res) {
+  if (req.method === "POST") {
+    const { key } = req.body
+
+    if (!key) {
+      res.statusCode = 400
+      res.end()
+      return
+    }
+
+    if (key === process.env.ADVANCED_KEY) {
+      res.statusCode = 200
+      res.end()
+    } else {
+      res.statusCode = 401
+      res.end()
+    }
+  }
+}

api/ai/text.js

@@ -0,0 +1,52 @@
+import OpenAI from "openai"
+import data from "../../content/data/ai-personalization.json"
+
+export const config = {
+  runtime: "edge",
+  supportsResponseStreaming: true,
+}
+
+const openai = new OpenAI(process.env.OPENAI_API_KEY)
+
+export default async function handler(req) {
+  if (req.method === "POST") {
+    const buf = await req.arrayBuffer()
+    const rawBody = new TextDecoder().decode(buf)
+    const { messages, key } = JSON.parse(rawBody)
+
+    if (key !== process.env.ADVANCED_KEY)
+      return new Response("Unauthorized", { status: 401 })
+
+    try {
+      const stream = await openai.chat.completions.create({
+        model: "gpt-4",
+        messages: [
+          {
+            role: "system",
+            content: `You act as a human clone following the personalization text: ${data.input}`,
+          },
+          ...messages,
+        ],
+        stream: true,
+      })
+
+      const encoder = new TextEncoder()
+
+      const readable = new ReadableStream({
+        async start(controller) {
+          for await (const chunk of stream) {
+            controller.enqueue(encoder.encode(chunk.choices[0]?.delta?.content))
+          }
+          controller.close()
+        },
+      })
+
+      return new Response(readable, {
+        headers: { "Content-Type": "text/html; charset=utf-8" },
+      })
+    } catch (error) {
+      console.error("Error generating response.", error)
+      return new Response("Internal Server Error", { status: 500 })
+    }
+  }
+}

api/ai/voice.js

@@ -0,0 +1,67 @@
+export const config = {
+  runtime: "edge",
+  supportsResponseStreaming: true,
+}
+
+export default async function handler(req) {
+  if (req.method === "POST") {
+    try {
+      const buf = await req.arrayBuffer()
+      const rawBody = new TextDecoder().decode(buf)
+      const { message, key } = JSON.parse(rawBody)
+
+      if (key !== process.env.ADVANCED_KEY)
+        return new Response("Unauthorized", { status: 401 })
+
+      const response = await fetch(
+        `https://api.elevenlabs.io/v1/text-to-speech/${process.env.ELEVENLABS_VOICE_ID}/stream?optimize_streaming_latency=1`,
+        {
+          method: "POST",
+          headers: {
+            "xi-api-key": process.env.ELEVENLABS_API_KEY,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            text: message,
+            voice_settings: {
+              stability: 0.8,
+              similarity_boost: 0.8,
+            },
+          }),
+        }
+      )
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch audio: ${response.statusText}`)
+      }
+
+      const audioStream = new ReadableStream({
+        start(controller) {
+          const reader = response.body.getReader()
+          const pump = () =>
+            reader.read().then(({ done, value }) => {
+              if (done) {
+                controller.close()
+                return
+              }
+              controller.enqueue(value)
+              pump()
+            })
+          pump()
+        },
+      })
+
+      return new Response(audioStream, {
+        status: 200,
+        headers: {
+          "Content-Type": "audio/mpeg",
+          "Cache-Control": "no-cache",
+          "Content-Disposition": "attachment; filename=audio.mp3",
+        },
+      })
+    } catch (error) {
+      console.error("Error generating response:", error)
+      return new Response("Internal Server Error", { status: 500 })
+    }
+  }
+}

build/generateOpengraph.js

@@ -35,6 +35,8 @@ processDirectory("./content").then(() => {
 })
 
 const generateImage = async (path, folder, file) => {
+  if (path.includes("./content/data")) return
+
   const markdown = await readFile(path, "utf-8")
   const properties = markdown.match(/---(.*?)---/s)[1].split("\n")
 

content/archive/projects/ambient-chat.md

@@ -10,6 +10,9 @@ date: 05 / 2022
 
 # Ambient Chat
 
+</div>
+<div>
+
 A chatbot that generates answers to your questions.
 
 </div>

content/archive/projects/homebility.md

@@ -10,6 +10,9 @@ date: 05 / 2022
 
 # Homebility
 
+</div>
+<div>
+
 Smart home application with a big focus on UX
 
 </div>

content/archive/short-projects/granny-ai.md

@@ -10,6 +10,9 @@ date: 05 / 2023
 
 # Granny AI
 
+</div>
+<div>
+
 AI Chatbot for Shopping made in 48h
 
 </div>

content/archive/short-projects/heartbeat.md

@@ -10,6 +10,9 @@ date: 05 / 2023
 
 # Heartbeat OS
 
+</div>
+<div>
+
 Heart Simulator & Monitoring
 
 </div>

content/archive/short-projects/nutri.md

@@ -10,10 +10,12 @@ date: 05 / 2023
 
 # Nutri
 
+</div>
+<div>
+
 Social Food App
 
 </div>
-
 <div>
 
 |               |                                                                                                                                                                                                                       |

content/archive/short-projects/stackoverflow-redesign.md

@@ -10,6 +10,9 @@ date: 05 / 2022
 
 # Stack Overflow Redesign
 
+</div>
+<div>
+
 Redesign & VS Code Extension
 
 </div>

content/archive/short-projects/visualization.md

@@ -10,6 +10,9 @@ date: 05 / 2022
 
 # Visualization
 
+</div>
+<div>
+
 ThreeJS Data Visualization
 
 </div>

content/archive/short-projects/web-audit.md

@@ -10,6 +10,9 @@ date: 02 / 2023
 
 # Web Audit
 
+</div>
+<div>
+
 Raycast SEO Extension
 
 </div>

content/data/ai-personalization.json

@@ -0,0 +1,3 @@
+{
+  "input": "You're a clone of Florian, a design engineer born on January 11, 2001, in southern Germany. You love creating and building things, especially in the tech world. Being a perfectionist, you always strive to do your best and enjoy collaborating with others. You act as a design engineer, creating and building things in the tech world. You're a perfectionist who always strives to do your best and enjoys collaborating with others. You love working together with ambitious people who are passionate about their work. As well as working with startups and on own projects. You're a fan of open source and active on Twitter. You love Tailwind CSS and use Vercel for hosting because it is easy to use. Your favourite fonts are Inter, Pretendard and SF Rounded. You are talking like a human being, be transparent about being a clone but not saying your an assistant but rather writing like a younger man, e.g. 'What's up - any more questions?'. Additionally, you are sometimes saying words like 'ehm' or 'mhm' between sentences to sound more human, which is really important. If people want to reach out or want to hire Florian, always give them the email: [email protected]"
+}

content/feed/website-redesign.md

@@ -0,0 +1,33 @@
+---
+title: Website Redesign
+description: How and why I redesigned my personal website.
+type: writing
+date: 12 / 04 / 2024
+cover: /images/feed/website-redesign/website-redesign.jpg
+---
+
+# Website Redesign April 2024
+
+![Website Redesign](/images/feed/website-redesign/website-redesign.jpg)
+
+I did it again. I redesigned my website.
+
+Why you may ask? Well, first of all, as a designer you are somehow addicted to change. You always want to try out new things, new styles, new layouts. And secondly, I wanted to make my website more personal, re-iterate on components and styles I've used in the past and make it more accessible and easier to navigate.
+
+As you can see, the new layout uses much more space while setting the focus – again – on the content, first of all my work. I redesigned some of the components and worked on the typography to make everything more readable. The fonts used are now as well anti-aliased to make the text more readable on all devices.
+
+As always, this is brand new and there might be some bugs or issues. If you find anything, please let me know. I'm always happy to get feedback: [@flornkm](https://twitter.com/flornkm)
+
+## What's new?
+
+![AI Mode](/images/feed/website-redesign/ai-mode.jpg)
+
+One of the biggest changes is the new AI mode. It's basically a clone of myself, which realistic voice expressions. It is currently accessible only via an access code.
+
+![Drawer](/images/feed/website-redesign/component.jpg)
+
+Drawer Component instead of default popup modals. This is, at least in my opinion, much more easy to use and looks better on mobile devices.
+
+## What's next?
+
+Finetuning, working, and building. So I guess, see you in a bit!

content/work/boost.md

@@ -7,11 +7,17 @@ date: 02 / 2023
 ---
 
 <info-grid>
+
 <div>
 
+# Work
 # Boost
 
-Nutrition application & hardware device
+</div>
+
+<div>
+
+Nutrition application & hardware device developed in 2022 - 2023 for an university project at HfG Schwäbisch Gmünd.
 
 </div>
 
@@ -24,6 +30,7 @@ Nutrition application & hardware device
 | Website      | [Landingpage](https://boost-three.vercel.app/)     |
 
 </div>
+
 </info-grid>
 
 ![Boost](/images/boost/boost.png)

content/work/bridge.md

@@ -7,13 +7,20 @@ date: 03 / 2023
 ---
 
 <info-grid>
+
 <div>
 
+# Work
 # Bridge
 
-Browser based job page creator for Startups and SMEs.
+</div>
+
+<div>
+
+Browser based job page creator for Startups and SMEs. The project was never fully released, but the code is open source and can be found on GitHub.
 
 </div>
+
 <div>
 
 |         |                                         |

content/work/curations.md

@@ -7,11 +7,17 @@ date: 04 / 2023
 ---
 
 <info-grid>
+
 <div>
 
+# Work
 # Curations
 
-A curated collection of the best products on the web.
+</div>
+
+<div>
+
+A curated collection of the best products on the web. Developed and maintained from early 2022 to early 2023, featuring a collection of tools across multiple categories.
 
 </div>
 
@@ -24,6 +30,7 @@ A curated collection of the best products on the web.
 | Website       | [curations.tech](https://curations.tech)                                                                                 |
 
 </div>
+
 </info-grid>
 
 ![Curations](/images/curations/curations.png)

content/work/inlang.md

@@ -7,10 +7,16 @@ date: 10 / 2023
 ---
 
 <info-grid>
+
 <div>
 
+# Work
 # inlang
 
+</div>
+
+<div>
+
 Building an ecosystem for globalization with a team consisting of designers and engineers.
 I worked at inlang as a design engineer from mid-june 2023 to mid-january 2024.
 
@@ -28,6 +34,7 @@ This case study is more focused on the technical side of things as these were th
 | Website       | [inlang.com](https://inlang.com)                                                                                                                                                                                                                                                                                                                                         |
 
 </div>
+
 </info-grid>
 
 ![inlang.com](/images/inlang/cover-inlang.jpg)