feat: add readme (#6)

* fix: edit home button styling on 404 page

* fix: small typo

* fix: small styling fixes

* feat: update readme with relevant context

Author: mrbrianhobo

README.md

@@ -1,3 +1,48 @@
-# brian.md
+# 🐭 brian.md
 
-🚧 under construction
+my little corner of the web
+
+> 🚧 **under construction**: beware!
+
+built with [astro](https://astro.build/) ([react](https://react.dev/) + [tailwind](https://tailwindcss.com/)) and deployed on [vercel](https://vercel.com/)
+
+typeset in [ibm plex mono](https://www.ibm.com/plex/) and [jetbrains mono](https://www.jetbrains.com/lp/mono/) (pixel accent font in [mondwest](https://pangrampangram.com/products/bitmap-fonts))
+
+## 📁 project structure
+```
+/
+├── public/
+│   └── fonts/                   (various fonts used)
+│   └── favicon.svg
+├── src/
+│   └── pages/                   (page routes)
+│       └── index.astro
+│       └── 404.astro
+│   └── components/              (react/astro island components)
+│   └── layouts/                 (header/footer + page skeleton)
+│   └── main.css                 (global styles)
+└── package.json
+```
+
+## 🪄 commands
+| command                   | action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | installs dependencies                            |
+| `npm run dev`             | starts local dev server at `localhost:3000`      |
+| `npm run build`           | build your production site to `./dist/`          |
+| `npm run preview`         | preview your build locally, before deploying     |
+| `npm run astro ...`       | run cli commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | get help using the astro cli                     |
+
+## 💭 website inspiration
+- [nico.xyz](https://nico.xyz/) 
+- [yihui.work](https://yihui.work/)
+- [ryo.lu](https://ryo.lu/)
+
+## 📚 references
+- [astro docs](https://docs.astro.build/en/getting-started/)
+- [tailwindcss docs](https://tailwindcss.com/docs/installation)
+- [framer motion](https://www.framer.com/motion/)
+- [react hot toast](https://react-hot-toast.com/)
+- [date-fns](https://date-fns.org/)
+- [partytown](https://partytown.builder.io/)

src/pages/404.astro

@@ -21,12 +21,12 @@ import Footer from "../layouts/Footer.astro";
       <p>HMM... LOOKS LIKE THERE'S NOTHING HERE.</p>
       <p>
         WOULD YOU LIKE TO RETURN?
-        <span class="hover:bg-background hover:ease-in duration-150">
+        <span class="rounded hover:bg-background hover:ease-in duration-150">
           <a
-            class="p-1 font-code font-medium text-accent cursor-pointer hover:bg-accent/10 hover:rounded hover:ease-in duration-150"
+            class="px-1 rounded font-code font-medium text-accent cursor-pointer hover:bg-accent/10 hover:ease-in duration-150"
             href="/"
           >
-            GO HOME ↩
+            <span class="pr-1 font-silkscreen">&gt;</span>HOME
           </a>
         </span>
       </p>

src/pages/index.astro

@@ -85,7 +85,7 @@ const wave = {
     >
       <ul class="list-bracket space-y-2">
         <li>I'M AN ENGINEER FOCUSED ON CRYPTO AND WEB3.</li>
-        <li>BASED IN SAN FRANCISCO, CA.</li>
+        <li>BASED IN 🌁 SAN FRANCISCO, CA.</li>
         <ul class="py-1.5 text-muted">
           <li><LastCheckin client:load /></li>
         </ul>
@@ -98,9 +98,9 @@ const wave = {
           <li>
             📊 <a href="https://messari.io" target="_blank"
               ><LinkButton client:load text="MESSARI" /></a
-            > (<span class="hover:bg-background hover:ease-in duration-150"
+            > (<span class="rounded hover:bg-background hover:ease-in duration-150"
               ><a
-                class="px-px font-code font-medium text-accent cursor-pointer hover:bg-accent/10 hover:rounded hover:ease-in duration-150"
+                class="px-px rounded font-code font-medium text-accent cursor-pointer hover:bg-accent/10 hover:ease-in duration-150"
                 href="https://messari.io/protocol-explorer/all-protocols"
                 target="_blank">ON-CHAIN DATA</a
               ></span
@@ -110,9 +110,9 @@ const wave = {
           <li>
             👀 <a href="https://www.dapperlabs.com" target="_blank"
               ><LinkButton client:load text="DAPPER LABS" /></a
-            > (<span class="hover:bg-background hover:ease-in duration-150"
+            > (<span class="rounded hover:bg-background hover:ease-in duration-150"
               ><a
-                class="px-px font-code font-medium text-accent cursor-pointer hover:bg-accent/10 hover:rounded hover:ease-in duration-150"
+                class="px-px rounded font-code font-medium text-accent cursor-pointer hover:bg-accent/10 hover:ease-in duration-150"
                 href="https://flow.com"
                 target="_blank">FLOW</a
               ></span
@@ -121,9 +121,9 @@ const wave = {
           <li>
             🌀 <a href="https://consensys.io" target="_blank"
               ><LinkButton client:load text="CONSENSYS" /></a
-            > (<span class="hover:bg-background hover:ease-in duration-150"
+            > (<span class="rounded hover:bg-background hover:ease-in duration-150"
               ><a
-                class="px-px font-code font-medium text-accent cursor-pointer hover:bg-accent/10 hover:rounded hover:ease-in duration-150"
+                class="px-px rounded font-code font-medium text-accent cursor-pointer hover:bg-accent/10 hover:ease-in duration-150"
                 href="https://bounties.network"
                 target="_blank">BOUNTIES NETWORK</a
               ></span
@@ -145,7 +145,7 @@ const wave = {
           <li>
             🪄 <a href="https://www.innovativedesign.club" target="_blank"
               ><LinkButton client:load text="INNOVATIVE DESIGN" /></a
-            >, LED WEB VARIOUS DEVELOPMENT INITIATIVES (UI/UX & ANIMATIONS)
+            >, LED VARIOUS WEB DEVELOPMENT INITIATIVES (UI/UX & ANIMATIONS)
           </li>
         </ul>
         <li>SOME UNREFINED SIDE PROJECTS:</li>

tailwind.config.cjs

@@ -25,6 +25,7 @@ module.exports = {
         mono: ['"IBM Plex Mono"', ...defaultTheme.fontFamily.mono],
         code: ['"JetBrains Mono"'],
         pixel: ['Mondwest'],
+        silkscreen: ['Silkscreen'],
       },
       listStyleType: {
         bracket: '"> "',