Update readme

Author: shiro

README.md

@@ -1,5 +1,46 @@
-# Blog of a programming rabbit
+<div align="center">
+    <h1>Blog of a programming rabbit</h1>
+    <h3>My personal blog and portfolio website on which I discuss new technologies, libraries and awesome hacks that make the world go round.</h3>
 
-https://shiro.github.io/blog/
+[![GitHub](https://img.shields.io/badge/GitHub-code-blue?logo=github)](https://github.com/shiro/blog)
+[![MIT License](https://img.shields.io/github/license/shiro/blog?color=43A047&logo=linux&logoColor=white)](https://github.com/shiro/blog/blob/master/LICENSE)
+[![Build](https://img.shields.io/github/actions/workflow/status/shiro/blog/CI.yml?color=00897B&logo=github-actions&logoColor=white)](https://github.com/shiro/blog/actions/workflows/CI.yml)
+[![Donate](https://img.shields.io/badge/Ko--Fi-donate-orange?logo=ko-fi&color=E53935)](https://ko-fi.com/C0C3RTCCI)
 
-Still under development, check back soon!
+</div>
+
+<div align="center">
+    <h3>Deployed at <a href="https://usagi.io">usagi.io</a></h3>
+</div>
+
+Built with a bleeding edge tech stack that enables quick development combined with amazing developer experience!
+
+- 🪛 **Full stack**, built with [Solid Start](https://start.solidjs.com) + custom plugins/components
+- 📦 **Small bundle size** using the [Solid.js](https://www.solidjs.com) framework
+- 🖌️ **CSS in JS** with no runtime JS code, using [Linaria](https://linaria.dev)
+- 💾 **Statically built**, deployed on [Github pages](https://pages.github.com)
+- ❤️ **Open source**, made with love
+
+---
+
+<div align="center">
+    <b>If you like open source, consider supporting</b>
+    <br/>
+    <br/>
+    <a href='https://ko-fi.com/C0C3RTCCI' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
+</div>
+
+## Run it locally
+
+Clone the repository and run:
+
+```bash
+yarn install
+yarn dev
+```
+
+For more, check out the [Solid Start documentation](https://start.solidjs.com).
+
+## Authors
+
+- Matic Utsumi Gačar <[email protected]>

src/Footer.tsx

@@ -0,0 +1,27 @@
+import { JSX, Component } from "solid-js";
+import { css } from "@linaria/core";
+import cn from "classnames";
+import IconText from "~/components/IconText";
+
+interface Props {
+  children?: JSX.Element;
+  style?: JSX.CSSProperties;
+  class?: string;
+}
+
+const Footer: Component<Props> = (props) => {
+  const { children, class: $class, ...rest } = $destructure(props);
+
+  return (
+    <div
+      class={cn($class, "content-container mt-auto pb-4 pt-4 text-center")}
+      {...rest}>
+      Check the code on{" "}
+      <a href="https://gtithub.com/shiro/blog" target="_blank">
+        <IconText icon="github" class="pl-1" /> Github
+      </a>
+    </div>
+  );
+};
+
+export default Footer;

src/about/AboutSite.tsx

@@ -72,10 +72,7 @@ const AboutSite: Component<Props> = (props) => {
           </li>
         </ul>
       </LabeledBox>
-      <LabeledBox
-        label="about me"
-        // class="flex flex-col justify-stretch"
-        style={{ "grid-area": "about" }}>
+      <LabeledBox label="about me" style={{ "grid-area": "about" }}>
         <p>I solve engineering problems to improve lives.</p>
         <p>
           My passion is building full-stack applications that have a lasting

src/app.tsx

@@ -7,6 +7,7 @@ import { config } from "~/config";
 import Header from "~/Header";
 import { routes } from "~/routes";
 import BackgroundImage from "~/BackgroundImage";
+import Footer from "~/Footer";
 
 export default function App() {
   return (
@@ -24,6 +25,7 @@ export default function App() {
           <div class="content-container">
             <Suspense>{props.children}</Suspense>
           </div>
+          <Footer />
         </MetaProvider>
       )}>
       {routes}

src/components/IconText.tsx

@@ -6,19 +6,24 @@ import Icon from "~/components/Icon";
 interface Props extends ComponentProps<"span"> {
   // TODO add all sizes
   size?: "small" | "sub" | "body" | "heading1" | "heading2" | "heading3";
-  className?: string;
+  class?: string;
   icon?: string;
   description?: string;
   children?: JSX.Element;
   onclick?: () => void;
 }
 
 const IconText: Component<Props> = (props) => {
-  const { className, children, icon, description, ...rest } =
-    $destructure(props);
+  const {
+    class: $class,
+    children,
+    icon,
+    description,
+    ...rest
+  } = $destructure(props);
 
   return (
-    <span class={cn(_IconText, className)} {...rest}>
+    <span class={cn(_IconText, $class)} {...rest}>
       {icon ? <Icon icon={icon} description={description} /> : children}
     </span>
   );

src/entry-server.tsx

@@ -26,7 +26,9 @@ export default createHandler(() => {
             {import.meta.env.DEV ? preloadSSRDev() : preloadSSR()}
           </head>
           <body>
-            <div id="app">{children}</div>
+            <div id="app" class="flex min-h-[100vh] flex-col">
+              {children}
+            </div>
             {scripts}
           </body>
         </html>