Merge content together for smoother reading

Author: GearsDatapacks

src/website/page/about.gleam

@@ -1,39 +1,89 @@
+import gleam/list
 import lustre/attribute
 import lustre/element.{type Element}
 import lustre/element/html
 import website/component
-import website/page/about
-import website/page/contact
-import website/page/stuff
+import website/component/footer
 
-fn section() {
+fn index() {
   component.text_page("Hello and welcome to my website!", [
     html.text(
       "My name is Surya, known online as Gears. I'm an amateur software developer, investigating functional programming, compilers and Minecraft datapacks.",
     ),
     html.br([]),
-    html.text("More about me in the "),
-    html.a([attribute.href("#about"), attribute.class("underline font-bold")], [
-      html.text("about"),
-    ]),
-    html.text(" section."),
-    html.br([]),
-    html.text("You can check out my finished and ongoing projects in "),
+    html.text("I am currently part of the core team developing the "),
     html.a(
-      [attribute.href("#projects"), attribute.class("underline font-bold")],
-      [html.text("projects")],
+      [
+        attribute.target("_blank"),
+        attribute.class("font-bold hover:underline"),
+        attribute.href("https://gleam.run"),
+      ],
+      [html.text("Gleam programming language")],
     ),
     html.text("."),
     html.br([]),
-    html.text("If you have more questions, you can "),
+    html.text("I also have a "),
+    html.a(
+      [
+        attribute.target("_blank"),
+        attribute.class("font-bold hover:underline"),
+        attribute.href("https://youtube.com/@Gearsdatapacks"),
+      ],
+      [html.text("YouTube channel")],
+    ),
+    html.text(
+      ", where I you can watch my old videos on Minecraft datapacks, as well as videos covering changes to Gleam.",
+    ),
+    html.br([]),
+    html.br([]),
+    html.text(
+      "If you have questions you want to ask, or want to reach out to me, you can send me an email at ",
+    ),
     html.a(
-      [attribute.href("#contact"), attribute.class("underline font-bold")],
-      [html.text("contact me")],
+      [
+        attribute.class("font-bold text-orange-400"),
+        attribute.href("mailto:[email protected]"),
+      ],
+      [html.text("[email protected]")],
+    ),
+    html.text(
+      ",
+    or join my ",
+    ),
+    html.a(
+      [
+        attribute.target("_blank"),
+        attribute.class("font-bold hover:underline"),
+        attribute.href("https://discord.gg/fmPKDqf9ze"),
+      ],
+      [html.text("Discord server")],
     ),
     html.text("."),
   ])
 }
 
 pub fn view() -> Element(a) {
-  component.page("Home", [section(), about.view(), contact.view(), stuff.view()])
+  component.page("Home", [index(), my_stuff()])
+}
+
+pub fn my_stuff() {
+  component.text_page("My Stuff", [
+    html.h2([attribute.class("text-2xl font-bold leading-tight")], [
+      element.text("Links"),
+    ]),
+    html.p([], list.map(footer.socials, social)),
+  ])
+}
+
+fn social(social: footer.Social) -> Element(a) {
+  html.a([attribute.href(social.url), attribute.target("_blank")], [
+    html.img([
+      attribute.src("/images/" <> social.icon),
+      attribute.alt(social.name),
+      attribute.title(social.name),
+      attribute.class("w-icon inline m-1"),
+    ]),
+    element.text(social.description),
+    html.br([]),
+  ])
 }