diff --git a/index.html b/index.html
index d01f779..2f23b76 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,207 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Dane's Website</title>
+    <meta name="description" content="Hey, I'm Dane. A frontend/fullstack developer from Toronto that enjoys building cool and accessible websites using the latest web technologies.">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="Dane's Website">
+    <meta property="og:description" content="Hey, I'm Dane. A frontend/fullstack developer from Toronto that enjoys building cool and accessible websites using the latest web technologies.">
+    <link rel="canonical" href="https://dane.computer/">
+    <meta property="og:url" content="https://dane.computer/">
+    <style>
+        @layer reset {
+            *,
+            *::before,
+            *::after {
+                box-sizing: border-box;
+            }
+
+            * {
+                margin: 0;
+                padding: 0;
+            }
+
+            html {
+                -webkit-text-size-adjust: none;
+                -webkit-font-smoothing: antialiased;
+                text-rendering: optimizespeed;
+                text-size-adjust: none;
+                color-scheme: dark light;
+                tab-size: 2;
+                scrollbar-gutter: stable;
+                interpolate-size: allow-keywords;
+                line-height: 1.5;
+            }
+
+            body {
+                margin: 0;
+                font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
+                font-synthesis: none;
+            }
+
+            ul[role=list], ol[role=list] {
+                list-style: none;
+                padding: 0;
+            }
+
+            ::marker {
+	            line-height: 0;
+            }
+
+            :focus-visible {
+                outline-offset: 2px;
+            }
+
+            @media (prefers-reduced-motion: no-preference) {
+                html:focus-within {
+                    scroll-behavior: smooth;
+	            }
+            }
+
+            a {
+                color: inherit;
+	            text-underline-offset: 0.2ex;
+            }
+
+            h1, h2,
+            h3, h4 {
+                text-wrap: balance;
+            }
+            
+            a[href] {
+                -webkit-tap-highlight-color: transparent;
+            } 
+
+            p, h1, h2, h3, h4, h5, h6 {
+                overflow-wrap: break-word;
+            }
+
+            p {
+                text-wrap: pretty;
+            }
+
+        }
+
+        .container {
+            max-width: 65ch;
+            margin: 0 auto;
+            padding: 5.5rem 0;
+        }
+
+        .intro {
+            margin-bottom: 2rem;
+        }
+
+        .name {
+            font-size: 2.5rem;
+            font-weight: bold;
+            text-transform: capitalize;
+        }
+
+        .title {
+            font-weight: bold;
+            margin-bottom: 1.5rem;
+        }
+
+        .bio {
+            margin-bottom: 2rem;
+            font-weight: 500;
+        }
+
+        .bio p:not(:last-of-type) {
+            margin-bottom: 1rem;
+        }
+
+        .links {
+            margin-bottom: 2rem;
+        }
+
+        .links p:first-of-type {
+            font-weight: bold;
+        }
+
+        .job {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .work-experience ul {
+            display: flex;
+            flex-direction: column;
+            row-gap: 1rem;
+        }
+
+        @media (width <= 640px) {
+           .container {
+             padding: 3.5rem 1rem;
+           }
+        }
+
+        @media (width <= 600px) {
+            .container {
+                text-align: center;
+            }
+
+            .work-experience .job {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+    </style>
 </head>
 <body>
-    
+    <main class="container">
+        <section class="intro">
+            <h1 class="name">dane miller</h1>
+            <p class="title">senior software developer</p>
+            <aside class="bio">
+                <p>Currently working as a frontend developer at the Bank of Montreal in Toronto.</p>
+                <p>In my spare time I enjoy (re)watching tv shows, listening to music and playing video games.</p>
+                <p>I guess I code from time to time as well. At the moment i&apos;m into all things <a href="https://atproto.com" target="_blank" rel="noopener noreferrer">AT Protocol</a>.</p>
+                <p>Writing code in Typescript, Go, Rust and Gleam.</p>
+            </aside>
+        </section>
+         <section class="links">
+            <h2>where to find me on the world wide web</h2>
+            <ul role="list">
+                <li>
+                    <a href="https://bsky.app/profile/did:plc:qttsv4e7pu2jl3ilanfgc3zn" target="_blank" aria-label="Go to Dane's bluesky profile, opens in a new tab" rel="noopener noreferrer">Bluesky</a>
+                </li>
+                <li>
+                    <a href="https://tangled.org/did:plc:qttsv4e7pu2jl3ilanfgc3zn" target="_blank" aria-label="Go to Dane's Tangled profile, opens in a new tab" rel="noopener noreferrer">Tangled</a>
+                </li>
+                <li>
+                    <a href="mailto:me@dane.computer">E-mail</a>
+                </li>
+            </ul>
+        </section>
+        <section class="work-experience">
+            <h2>work experience</h2>
+            <ul role="list">
+                <li class="job">
+                    <div>
+                        <p class="company">Bank of Montreal</p>
+                        <small class="title">Senior Software Developer</small>
+                    </div>
+                    <p>2021 to present</p>
+                </li>
+                <li class="job">
+                    <div>
+                        <p class="company">Black Professionals In Tech Network</p>
+                        <small class="title">Intermediate Software Developer</small>
+                    </div>
+                    <p>2021 to 2021</p>
+                </li>
+                 <li class="job">
+                    <div>
+                        <p class="company">Wise Publishing</p>
+                        <small class="title">Frontend Developer Intern</small>
+                    </div>
+                    <p>2020 to 2020</p>
+                </li>
+            </ul>
+        </section>
+    </main>
 </body>
 </html>
\ No newline at end of file