63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
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>© 2026 Sudeste. Built with Hono + HTMX + TailwindCSS on Cloudflare Workers.</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
`
|