Add about page

Author: GearsDatapacks

src/build.gleam

@@ -17,6 +17,7 @@ pub fn main() {
   let build =
     ssg.new("./priv")
     |> ssg.add_static_route("/", index.view())
+    |> ssg.add_static_route("/about", about.view())
     |> ssg.add_static_dir("./static")
     // |> ssg.add_static_route("/blog", blog.view(posts.all()))
     // |> ssg.add_dynamic_route("/blog", posts, post.view)

src/website/page/about.gleam

@@ -0,0 +1,58 @@
+import lustre/attribute.{attribute}
+import lustre/element/html
+import website/component
+
+pub fn view() {
+  component.page("About", [
+    html.div([attribute.class("mx-auto max-w-3xl")], [
+      html.h1(
+        [attribute.class("text-3xl font-bold leading-tight text-center")],
+        [html.text("About me")],
+      ),
+    ]),
+    html.div(
+      [attribute.class("mx-auto max-w-4xl py-8 leading-8")],
+      [
+        html.p([attribute.class("text-xl")], [
+          html.span([attribute.class("text-2xl font-bold")], [
+            html.text(
+              "I'm Gears; a programmer, Minecraft enthusiast, YouTuber and nerd.",
+            ),
+          ]),
+          html.br([]),
+          html.br([]),
+          html.text(
+            "The programming language I know most about, and therefore use the most, is JavaScript/TypeScript. However, I also know Ruby, MCFunction and Golang, and dabble in Rust and Python.",
+          ),
+          html.br([]),
+          html.text("I make "),
+          html.a(
+            [
+              attribute.target("_blank"),
+              attribute.class("text-blue-500 underline"),
+              attribute.href("https://youtube.com/@Gearsdatapacks"),
+            ],
+            [html.text("YouTube videos")],
+          ),
+          html.text(
+            " about my ongoing struggle with Minecraft datapacks, as well as other fun Minecraft content.",
+          ),
+          html.br([]),
+          html.text(
+            "Projects I've made include a programming language with Minecraft datapacks (not alone), and a Datapack Package Manager.",
+          ),
+          html.br([]),
+          html.text("More information on the "),
+          html.a(
+            [
+              attribute.class("font-bold hover:underline"),
+              attribute.href("/projects/"),
+            ],
+            [html.text("projects")],
+          ),
+          html.text("page."),
+        ]),
+      ],
+    ),
+  ])
+}

src/website/page/index.gleam

@@ -4,14 +4,14 @@ import website/component
 
 pub fn view() {
   component.page("Home", [
-    html.div([attribute.class("mx-auto max-w-3xl px-4 sm:px-6 lg:px-8")], [
+    html.div([attribute.class("mx-auto max-w-3xl")], [
       html.h1(
         [attribute.class("text-3xl font-bold leading-tight text-center")],
         [html.text("Hello and welcome to my website!")],
       ),
     ]),
     html.div(
-      [attribute.class("mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-8 leading-8")],
+      [attribute.class("mx-auto max-w-4xl py-8 leading-8")],
       [
         html.p([attribute.class("text-xl")], [
           html.text("I am Gears, a software developer and Minecraft YouTuber."),