diff --git a/astro.config.mjs b/astro.config.mjs
index cadd3f0..81bed64 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -2,4 +2,6 @@
import { defineConfig } from 'astro/config'
// https://astro.build/config
-export default defineConfig({})
+export default defineConfig({
+ site: 'https://srjuggernaut.dev'
+})
diff --git a/public/DefaultOG.png b/public/DefaultOG.png
new file mode 100644
index 0000000..5d39764
Binary files /dev/null and b/public/DefaultOG.png differ
diff --git a/src/components/SrJuggernautLogo.astro b/src/components/SrJuggernautLogo.astro
new file mode 100644
index 0000000..cd1560d
--- /dev/null
+++ b/src/components/SrJuggernautLogo.astro
@@ -0,0 +1,71 @@
+---
+interface Props {
+ width?: number
+ height?: number
+ className?: string
+}
+const { width = 200, height = 200, className } = Astro.props
+---
+
+
diff --git a/src/components/layout/Basic.astro b/src/components/layout/Basic.astro
new file mode 100644
index 0000000..d02a185
--- /dev/null
+++ b/src/components/layout/Basic.astro
@@ -0,0 +1,58 @@
+---
+import Footer from '@/components/layout/Footer.astro'
+import Header from '@/components/layout/Header.astro'
+import '@/index.css'
+import { containerClass } from '@/styles/container'
+import '@fontsource-variable/roboto'
+import { getSecret } from 'astro:env/server'
+import { css, cx } from '@styled-system/css'
+export interface Props {
+ title?: string
+ description?: string
+ imageUrl?: string
+}
+
+const { title, description, imageUrl } = Astro.props
+const permalink = new URL(Astro.url.pathname, Astro.site).href
+const seoTitle =
+ title === undefined ? 'SrJuggernaut Dev' : `${title} | SrJuggernaut Dev`
+const seoDescription =
+ description === undefined ? 'SrJuggernaut developer site' : description
+const seoImage =
+ imageUrl === undefined ? 'https://srjuggernaut.dev/DefaultOG.png' : imageUrl
+
+const bodyClass = css({
+ display: 'flex',
+ flexDirection: 'column',
+ minHeight: '100vh'
+})
+
+const mainClass = cx(containerClass, css({ flexGrow: 1 }))
+---
+
+
+
+
+
+
+
+
+
+ {seoTitle}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro
new file mode 100644
index 0000000..35dab28
--- /dev/null
+++ b/src/components/layout/Footer.astro
@@ -0,0 +1,93 @@
+---
+import { css, cx } from '@styled-system/css'
+import { containerClass } from '@/styles/container'
+
+interface FooterSection {
+ title?: string
+ links: {
+ label: string
+ href: string
+ }[]
+}
+
+const sections: FooterSection[] = [
+ {
+ title: 'Code & Work',
+ links: [
+ { label: 'GitHub', href: 'https://github.com/SrJuggernaut' },
+ { label: 'Gitea Instance', href: 'https://git.srjuggernaut.dev/' }
+ ]
+ },
+ {
+ title: 'Social & Contact',
+ links: [
+ { label: 'Twitter', href: 'https://twitter.com/SrJuggernaut' },
+ {
+ label: 'Blue Sky',
+ href: 'https://bsky.app/profile/jugger.srjuggernaut.dev'
+ }
+ ]
+ }
+]
+
+const footerContainerClass = cx(
+ containerClass,
+ css({
+ display: 'grid',
+ gridTemplateColumns: 'repeat(auto-fit, minmax(256px, 1fr))',
+ gap: 'lg md'
+ })
+)
+
+const footerSectionTitleClass = css({
+ display: 'block',
+ fontWeight: 'bold',
+ fontSize: 'h4',
+ textAlign: 'center'
+})
+
+const footerSectionListClass = css({
+ listStyle: 'none'
+})
+
+const footerSectionItemClass = css({
+ paddingInlineStart: 'sm',
+ textIndent: '-xs',
+ '&:before': {
+ content: '"⟫"',
+ paddingInline: 'xs'
+ }
+})
+
+const footerLegendClass = css({
+ paddingBlock: 'md',
+ textAlign: 'center',
+ fontSize: 'sm'
+})
+
+const footerLegendHeartClass = css({
+ color: 'red'
+})
+---
+
+
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
new file mode 100644
index 0000000..b52565b
--- /dev/null
+++ b/src/components/layout/Header.astro
@@ -0,0 +1,22 @@
+---
+import { css, cx } from '@styled-system/css'
+import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
+import Button from '@/components/ui/button.astro'
+import { containerClass } from '@/styles/container'
+import Menu from './header/Menu.astro'
+
+const headerClass = css({})
+---
+
+
diff --git a/src/components/layout/header/Menu.astro b/src/components/layout/header/Menu.astro
new file mode 100644
index 0000000..9d897ea
--- /dev/null
+++ b/src/components/layout/header/Menu.astro
@@ -0,0 +1,85 @@
+---
+import { css, cx } from '@styled-system/css'
+import { menu } from '@styled-system/recipes/menu'
+import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
+import Button from '@/components/ui/button.astro'
+
+const dialogClass = css({
+ marginLeft: 'auto',
+ width: '100%',
+ maxWidth: '256px',
+ height: '100%',
+ maxHeight: '100vh',
+ backgroundColor: 'neutral.3',
+ color: 'neutral.12',
+ transition: 'transform 0.3s',
+ transitionTimingFunction: 'easeOutQuint',
+ transform: 'translateX(0%)',
+ '@starting-style': {
+ transform: 'translateX(100%)'
+ },
+ _backdrop: {
+ transition: 'background-color 0.45s',
+ transitionTimingFunction: 'easeOutQuint',
+ backgroundColor: 'neutral.1/75',
+ '@starting-style': {
+ backgroundColor: 'neutral.1/0'
+ }
+ }
+})
+const dialogHeaderClass = css({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between'
+})
+
+const links = [{ label: 'Home', href: '/' }]
+---
+
+
+
+
+
diff --git a/src/layouts/Basic.astro b/src/layouts/Basic.astro
deleted file mode 100644
index 319a7d4..0000000
--- a/src/layouts/Basic.astro
+++ /dev/null
@@ -1,18 +0,0 @@
----
-import '@/index.css'
-import '@fontsource-variable/roboto'
----
-
-
-
-
-
-
-
-
- SrJuggernaut Dev
-
-
-
-
-
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0ccb43c..2aab0dc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
---
import { css } from '@styled-system/css'
-import BasicLayout from '@/layouts/Basic.astro'
+import BasicLayout from '@/components/layout/Basic.astro'
---