big refactor

besaid.zone e673b5f8 5649e778

verified
Changed files
+200 -2
+200 -2
index.html
··· 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 - <title>Document</title> 7 </head> 8 <body> 9 - 10 </body> 11 </html>
··· 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 + <title>Dane's Website</title> 7 + <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."> 8 + <link rel="icon" type="image/svg+xml" href="/favicon.svg"> 9 + <meta property="og:type" content="website"> 10 + <meta property="og:title" content="Dane's Website"> 11 + <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."> 12 + <link rel="canonical" href="https://dane.computer/"> 13 + <meta property="og:url" content="https://dane.computer/"> 14 + <style> 15 + @layer reset { 16 + *, 17 + *::before, 18 + *::after { 19 + box-sizing: border-box; 20 + } 21 + 22 + * { 23 + margin: 0; 24 + padding: 0; 25 + } 26 + 27 + html { 28 + -webkit-text-size-adjust: none; 29 + -webkit-font-smoothing: antialiased; 30 + text-rendering: optimizespeed; 31 + text-size-adjust: none; 32 + color-scheme: dark light; 33 + tab-size: 2; 34 + scrollbar-gutter: stable; 35 + interpolate-size: allow-keywords; 36 + line-height: 1.5; 37 + } 38 + 39 + body { 40 + margin: 0; 41 + font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace; 42 + font-synthesis: none; 43 + } 44 + 45 + ul[role=list], ol[role=list] { 46 + list-style: none; 47 + padding: 0; 48 + } 49 + 50 + ::marker { 51 + line-height: 0; 52 + } 53 + 54 + :focus-visible { 55 + outline-offset: 2px; 56 + } 57 + 58 + @media (prefers-reduced-motion: no-preference) { 59 + html:focus-within { 60 + scroll-behavior: smooth; 61 + } 62 + } 63 + 64 + a { 65 + color: inherit; 66 + text-underline-offset: 0.2ex; 67 + } 68 + 69 + h1, h2, 70 + h3, h4 { 71 + text-wrap: balance; 72 + } 73 + 74 + a[href] { 75 + -webkit-tap-highlight-color: transparent; 76 + } 77 + 78 + p, h1, h2, h3, h4, h5, h6 { 79 + overflow-wrap: break-word; 80 + } 81 + 82 + p { 83 + text-wrap: pretty; 84 + } 85 + 86 + } 87 + 88 + .container { 89 + max-width: 65ch; 90 + margin: 0 auto; 91 + padding: 5.5rem 0; 92 + } 93 + 94 + .intro { 95 + margin-bottom: 2rem; 96 + } 97 + 98 + .name { 99 + font-size: 2.5rem; 100 + font-weight: bold; 101 + text-transform: capitalize; 102 + } 103 + 104 + .title { 105 + font-weight: bold; 106 + margin-bottom: 1.5rem; 107 + } 108 + 109 + .bio { 110 + margin-bottom: 2rem; 111 + font-weight: 500; 112 + } 113 + 114 + .bio p:not(:last-of-type) { 115 + margin-bottom: 1rem; 116 + } 117 + 118 + .links { 119 + margin-bottom: 2rem; 120 + } 121 + 122 + .links p:first-of-type { 123 + font-weight: bold; 124 + } 125 + 126 + .job { 127 + display: flex; 128 + justify-content: space-between; 129 + } 130 + 131 + .work-experience ul { 132 + display: flex; 133 + flex-direction: column; 134 + row-gap: 1rem; 135 + } 136 + 137 + @media (width <= 640px) { 138 + .container { 139 + padding: 3.5rem 1rem; 140 + } 141 + } 142 + 143 + @media (width <= 600px) { 144 + .container { 145 + text-align: center; 146 + } 147 + 148 + .work-experience .job { 149 + display: flex; 150 + flex-direction: column; 151 + } 152 + } 153 + </style> 154 </head> 155 <body> 156 + <main class="container"> 157 + <section class="intro"> 158 + <h1 class="name">dane miller</h1> 159 + <p class="title">senior software developer</p> 160 + <aside class="bio"> 161 + <p>Currently working as a frontend developer at the Bank of Montreal in Toronto.</p> 162 + <p>In my spare time I enjoy (re)watching tv shows, listening to music and playing video games.</p> 163 + <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> 164 + <p>Writing code in Typescript, Go, Rust and Gleam.</p> 165 + </aside> 166 + </section> 167 + <section class="links"> 168 + <h2>where to find me on the world wide web</h2> 169 + <ul role="list"> 170 + <li> 171 + <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> 172 + </li> 173 + <li> 174 + <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> 175 + </li> 176 + <li> 177 + <a href="mailto:me@dane.computer">E-mail</a> 178 + </li> 179 + </ul> 180 + </section> 181 + <section class="work-experience"> 182 + <h2>work experience</h2> 183 + <ul role="list"> 184 + <li class="job"> 185 + <div> 186 + <p class="company">Bank of Montreal</p> 187 + <small class="title">Senior Software Developer</small> 188 + </div> 189 + <p>2021 to present</p> 190 + </li> 191 + <li class="job"> 192 + <div> 193 + <p class="company">Black Professionals In Tech Network</p> 194 + <small class="title">Intermediate Software Developer</small> 195 + </div> 196 + <p>2021 to 2021</p> 197 + </li> 198 + <li class="job"> 199 + <div> 200 + <p class="company">Wise Publishing</p> 201 + <small class="title">Frontend Developer Intern</small> 202 + </div> 203 + <p>2020 to 2020</p> 204 + </li> 205 + </ul> 206 + </section> 207 + </main> 208 </body> 209 </html>