Initial portfolio scaffold: Hono + HTMX + TailwindCSS

2026-04-12 19:37:06 -03:00
commit 9ec85f92cf
14 changed files with 386 additions and 0 deletions
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -0,0 +1,62 @@
+import { html } from 'hono/html'
+
+export const Layout = (props: { children: any }) => html`
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Sudeste - API Testing Automation Team Lead & Self-taught Engineer" />
+  <title>Sudeste - Portfolio</title>
+  <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            dracula: {
+              bg: '#282a36',
+              fg: '#f8f8f2',
+              selection: '#44475a',
+              comment: '#6272a4',
+              cyan: '#8be9fd',
+              green: '#50fa7b',
+              orange: '#ffb86c',
+              pink: '#ff79c6',
+              purple: '#bd93f9',
+              red: '#ff5555',
+              yellow: '#f1fa8c',
+            }
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="bg-dracula-bg text-dracula-fg min-h-screen">
+  <nav class="fixed top-0 w-full bg-dracula-bg/90 backdrop-blur border-b border-dracula-selection z-50">
+    <div class="max-w-4xl mx-auto px-4 py-3">
+      <div class="flex justify-between items-center">
+        <a href="/" class="text-xl font-bold text-dracula-purple">Sudeste</a>
+        <div class="space-x-4">
+          <a href="#about" class="hover:text-dracula-cyan transition">About</a>
+          <a href="#projects" class="hover:text-dracula-cyan transition">Projects</a>
+          <a href="#skills" class="hover:text-dracula-cyan transition">Skills</a>
+          <a href="#experience" class="hover:text-dracula-cyan transition">Experience</a>
+          <a href="#contact" class="hover:text-dracula-cyan transition">Contact</a>
+        </div>
+      </div>
+    </div>
+  </nav>
+  <main class="max-w-4xl mx-auto px-4 pt-24 pb-12">
+    ${props.children}
+  </main>
+  <footer class="border-t border-dracula-selection mt-16 py-8">
+    <div class="max-w-4xl mx-auto px-4 text-center text-dracula-comment">
+      <p>&copy; 2026 Sudeste. Built with Hono + HTMX + TailwindCSS on Cloudflare Workers.</p>
+    </div>
+  </footer>
+</body>
+</html>
+`