feat: Adds homepage with a project description and adds a gif to the …

…README
norwoodj · Jun 30, 2024 · 359c96e · 359c96e
1 parent d3657a5
commit 359c96e
Show file tree

Hide file tree

Showing 8 changed files with 802 additions and 759 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/README.md b/README.md
@@ -1,18 +1,16 @@
 # bolas
 
-Bolas is portuguese for "balls". Moro em Portugal agora, e escrevi este projeto aqui, então chamei-o "bolas".
+![bolas](bolas.gif)
+
+Bolas is portuguese for "balls". Morei em Portugal durante três anos entre 2022 e 2025. Escrevi este projeto quando
+estava a morar lá, portanto, chamo-o "bolas".
 
 This is a dumb little physics simulator where you can click and drag in a slingshot-type motion and
 fling balls around a canvas.
 
 This was mostly an excuse to write some rust I could show on my github and to use websockets and the
 actix web framework a bit on a side-project.
 
-Right now there are a lot of improvements to be made:
-
--   Make the physics better, right now the balls stick together at times on collisions
--   Write a better README with a gif of the balls in action
-
 ### Building and Developing Locally
 
 You will need cargo installed to build/run locally. To start the server,

diff --git a/bolas.gif b/bolas.gif
diff --git a/static/arena.css b/static/arena.css
@@ -0,0 +1,11 @@
+html,
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+    border: 0;
+    overflow: hidden;
+    /*  Disable scrollbars */
+    display: block;
+    /* No floating content on sides */
+}
diff --git a/static/arena.html b/static/arena.html
@@ -0,0 +1,9 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="arena.css" />
+        <script defer type="text/javascript" src="arena.js"></script>
+    </head>
+    <body>
+        <canvas id="bolas"></canvas>
+    </body>
+</html>
diff --git a/static/index.js → static/arena.js b/static/index.js → static/arena.js
diff --git a/static/index.css b/static/index.css
@@ -1,11 +1,76 @@
+/**
+ * Body CSS
+ */
+
 html,
 body {
-    width: 100%;
     height: 100%;
-    margin: 0px;
-    border: 0;
-    overflow: hidden;
-    /*  Disable scrollbars */
-    display: block;
-    /* No floating content on sides */
+}
+
+html,
+body,
+input,
+textarea,
+button {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
+}
+
+/**
+ * Header CSS
+ */
+
+header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 2;
+}
+
+.mui-appbar {
+    background-color: #da291c;
+}
+
+header ul.mui-list--inline {
+    margin-bottom: 0;
+}
+
+.mui--text-title {
+    color: #046a38;
+}
+
+.mui-btn {
+    background-color: #046a38;
+    color: #ffe900;
+}
+
+header table {
+    width: 100%;
+}
+
+/**
+ * Content CSS
+ */
+
+#content-wrapper {
+    min-height: 100%;
+
+    /* sticky footer */
+    box-sizing: border-box;
+    margin-bottom: -100px;
+    padding-bottom: 100px;
+}
+
+/**
+ * Footer CSS
+ */
+
+footer {
+    box-sizing: border-box;
+    height: 100px;
+    background-color: #eee;
+    border-top: 1px solid #e0e0e0;
+    padding-top: 35px;
 }
diff --git a/static/index.html b/static/index.html
@@ -1,9 +1,91 @@
+<!doctype html>
 <html>
     <head>
-        <link rel="stylesheet" href="index.css" />
-        <script defer type="text/javascript" src="index.js"></script>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>MUI Landing Page Example</title>
+        <link
+            href="//cdn.muicss.com/mui-latest/css/mui.min.css"
+            rel="stylesheet"
+            type="text/css"
+        />
+        <link href="index.css" rel="stylesheet" type="text/css" />
+        <script src="//cdn.muicss.com/mui-latest/js/mui.min.js"></script>
     </head>
     <body>
-        <canvas id="bolas"></canvas>
+        <header class="mui-appbar mui--z1">
+            <div class="mui-container">
+                <table>
+                    <tr class="mui--appbar-height">
+                        <td class="mui--text-title">Bolas</td>
+                    </tr>
+                </table>
+            </div>
+        </header>
+        <div id="content-wrapper" class="mui--text-center">
+            <div class="mui--appbar-height"></div>
+            <br />
+            <br />
+            <div class="mui--text-display3">Welcome to Bolas</div>
+            <br />
+            <a href="arena.html"
+                ><button class="mui-btn mui-btn--raised">Play</button></a
+            >
+            <br />
+            <br />
+            <p>
+                Welcome to Bolas, a silly physics simulator that I wrote for fun
+                and as a demonstration of my excellent
+                <a href="https://www.rust-lang.org/">Rust</a>
+                and mediocre Javascript programming ability. If you just want to
+                play with the bolas, click the button above. Continue reading
+                for a technical explanation of how this project is implemented
+                and deployed.
+            </p>
+            <p>
+                First off, the name: "bolas" is
+                <a href="https://pt.wikipedia.org/wiki/Portugal">Portuguese</a>
+                for "balls". Morei em Portugal durante três anos entre 2022 e
+                2025. Escrevi este projeto quando estava a morar lá, portanto,
+                chamo-o "bolas".
+            </p>
+            <p>
+                Why is this interesting to you, recruiter? Well, once you've
+                played the game, you'll see there's some interesting physics
+                simulation being done. Critically, the ball movement and
+                collision detection logic is all done server-side, in rust. The
+                javascript frontend merely receives a stream of updates from a
+                <a
+                    href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API"
+                    >websocket</a
+                >
+                connection and draws the balls where it is told to. This is
+                obviously needlessly complicated, but I hope demonstrates my
+                knowledge of websockets, full-stack web development, and rust
+                programming ability. Here's a link to the
+                <a href="https://github.com/norwoodj/bolas">code</a>.
+            </p>
+            <p>
+                I deploy this project on a
+                <a href="https://www.raspberrypi.com/">Raspberry Pi</a> that
+                runs in my house. It exposes this (and several of my other
+                websites) behind
+                <a href="https://cloudflare.com">Cloudflare</a> using a
+                <a href="https://www.cloudflare.com/products/tunnel/"
+                    >cloudflared tunnel</a
+                >. I worked at cloudflare for 5 years, and made contributed
+                substantially to the tunnel project. Cloudflare is also where I
+                learned how to use
+                <a href="https://saltproject.io/index.html">salt</a>, which is
+                how I configure said raspberry pi. The code for doing that is
+                <a href="https://github.com/norwoodj/rpi-salt">here</a>.
+            </p>
+        </div>
+        <footer>
+            <div class="mui-container mui--text-center">
+                Made by <a href="https://github.com/norwoodj">John Norwood</a>
+            </div>
+        </footer>
     </body>
 </html>