Added routing and other styling

gleam.toml

@@ -17,6 +17,7 @@ version = "1.0.0"
 gleam_stdlib = ">= 0.34.0 and < 2.0.0"
 lustre = ">= 4.4.0 and < 5.0.0"
 lustre_ui = ">= 0.6.0 and < 1.0.0"
+modem = ">= 2.0.1 and < 3.0.0"
 
 [dev-dependencies]
 gleeunit = ">= 1.0.0 and < 2.0.0"

manifest.toml

@@ -31,6 +31,7 @@ packages = [
   { name = "lustre_ui", version = "0.6.0", build_tools = ["gleam"], requirements = ["gleam_community_colour", "gleam_json", "gleam_stdlib", "lustre"], otp_app = "lustre_ui", source = "hex", outer_checksum = "FA1F9E89D89CDD5DF376ED86ABA8A38441CB2E664CD4D402F22A49DA4D7BB56D" },
   { name = "marceau", version = "1.2.0", build_tools = ["gleam"], requirements = [], otp_app = "marceau", source = "hex", outer_checksum = "5188D643C181EE350D8A20A3BDBD63AF7B6C505DE333CFBE05EF642ADD88A59B" },
   { name = "mist", version = "2.0.0", build_tools = ["gleam"], requirements = ["birl", "gleam_erlang", "gleam_http", "gleam_otp", "gleam_stdlib", "glisten", "gramps", "hpack_erl", "logging"], otp_app = "mist", source = "hex", outer_checksum = "981F12FC8BA0656B40099EC876D6F2BEE7B95593610F342E9AB0DC4E663A932F" },
+  { name = "modem", version = "2.0.1", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre"], otp_app = "modem", source = "hex", outer_checksum = "B446119A85DC9C31FEA0DCB204072E40356CB246C9D091CBBF2E4678CDB05A2D" },
   { name = "platform", version = "1.0.0", build_tools = ["gleam"], requirements = [], otp_app = "platform", source = "hex", outer_checksum = "8339420A95AD89AAC0F82F4C3DB8DD401041742D6C3F46132A8739F6AEB75391" },
   { name = "ranger", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "ranger", source = "hex", outer_checksum = "1566C272B1D141B3BBA38B25CB761EF56E312E79EC0E2DFD4D3C19FB0CC1F98C" },
   { name = "repeatedly", version = "2.1.1", build_tools = ["gleam"], requirements = [], otp_app = "repeatedly", source = "hex", outer_checksum = "38808C3EC382B0CD981336D5879C24ECB37FCB9C1D1BD128F7A80B0F74404D79" },
@@ -50,3 +51,4 @@ gleeunit = { version = ">= 1.0.0 and < 2.0.0" }
 lustre = { version = ">= 4.4.0 and < 5.0.0" }
 lustre_dev_tools = { version = ">= 1.5.4 and < 2.0.0" }
 lustre_ui = { version = ">= 0.6.0 and < 1.0.0" }
+modem = { version = ">= 2.0.1 and < 3.0.0" }

src/portfolio.gleam

@@ -1,18 +1,83 @@
+import gleam/uri.{type Uri}
 import lustre
 import lustre/attribute
-import lustre/element
+import lustre/element.{type Element}
 import lustre/element/html
+import lustre/effect.{type Effect}
+import modem
 
-pub fn main() {
-  let styles = [
+type Route {
+  Home
+  Projects
+  Resume
+}
+
+type Msg {
+  OnRouteChange(Route)
+}
+
+fn on_url_change(uri: Uri){
+  case uri.path_segments(uri.path) {
+    ["projects"] -> OnRouteChange(Projects)
+    ["home"] -> OnRouteChange(Home)
+    ["resume"] -> OnRouteChange(Resume)
+    _ -> OnRouteChange(Home)
+  }
+}
+
+fn init(_flags) -> #(Route, Effect(Msg)){
+  #(Home, modem.init(on_url_change))
+}
+
+
+fn update(_, msg: Msg) -> #(Route, Effect(Msg)){
+  case msg {
+    OnRouteChange(route) -> {
+      #(route, effect.none())
+    }
+  }
+}
+
+
+fn view(route: Route) -> Element(Msg) {
+  case route {
+    Home -> {
+      view_home()
+    }
+    Projects -> {
+      view_projects()
+    }
+    Resume -> {
+      view_resume()
+    }
+  }
+}
+
+
+fn view_projects() {
+  html.div([], [element.text("Projects go here")])
+}
+
+fn view_resume() {
+  html.embed([attribute.src("images/Resume.pdf"), attribute.width(800), attribute.height(1200)])
+}
+
+fn view_home() {
+  let h1_style = [
     #("position", "absolute"),
-    #("top", "50%"),
+    #("top", "40%"),
     #("left", "0"),
     #("right", "0"),
+    #("width", "100%"),
     #("text-align", "center"),
     #("margin", "auto"),
+    #("whitespace", "nowrap"),
+    #("overflow", "hidden"),
     #("font-family", "Rajdhani, sans-serif"),
+    //#("background-color", "green"),
+  //#("border-color", "transparent"),
   ]
+
   let nav_style = [
     #("position", "fixed"),
     #("width", "100%"),
@@ -26,30 +91,43 @@ pub fn main() {
   let nav_link_style = [#("margin-right", "10px")]
 
   let nav_pages = [
-    #("postion", "absolute"),
+    #("postion", "fixed"),
     #("width", "100%"),
     #("height", "4vh"),
-    #("justify-content", "flex-start"),
+    #("background-color", "#173363"),
   ]
 
   let nav_ul = [
     #("position", "relative"),
     #("text-align", "center"),
-    #("margin-left", "10px"),
+    #("left", "85%"),
+    #("margin", "10px"),
     #("font-size", "1.5rem"),
-    #("width", "50%"),
+    #("width", "100%"),
     #("font-family", "Rajdhani, sans-serif"),
   ]
 
-  let nav_span = [
-    #("margin-inline", "1rem")
+  let nav_span = [#("margin-inline", "1rem")]
+
+  let footer_style = [
+    #("position", "fixed"),
+    #("top", "95%"),
+    #("left", "0"),
+    #("right", "0"),
+    #("text-align", "center"),
   ]
-  let app =
-    lustre.element(
-      html.div([], [
-        html.h1([attribute.style(styles)], [
-          element.text("Kyle Smith"),
-          html.h6([], [element.text("BrakeZap")]),
+
+      html.div([attribute.class("bg-pan-left")], [
+        html.h6([attribute.style(h1_style)], [
+          element.text("Hi, my name is "),
+          html.h1([], [
+            element.text("Kyle Smith"),
+            html.div([], [element.text("👋")]),
+            html.h6([], [
+              element.text("I am a "),
+              html.h1([], [element.text("Software Engineer")]),
+            ]),
+          ]),
         ]),
         html.nav([attribute.style(nav_style)], [
           html.ul([], [
@@ -77,15 +155,28 @@ pub fn main() {
         ]),
         html.nav([attribute.style(nav_pages)], [
           html.ul([attribute.style(nav_ul)], [
-            html.span([attribute.style(nav_span)], [html.a([attribute.href("#")], [html.text("Projects")]),
-            html.span([attribute.style(nav_span)], [html.a([attribute.href("#")], [html.text("Meows")])])]),
+            html.span([attribute.style(nav_span)], [
+              html.a([attribute.href("/projects")], [html.text("Projects")]),
+              html.span([attribute.style(nav_span)], [
+                html.a([attribute.href("/resume")], [html.text("Resume")]),
+              ]),
+            ]),
           ]),
         ]),
-      ]),
-    )
-  // let app =
-  //   lustre.element(html.div([], [html.text("test")]))
-  let assert Ok(_) = lustre.start(app, "#app", Nil)
+        html.footer([attribute.style(footer_style)], [
+          html.a([attribute.href("https://github.com/BrakeZap/portfolio")], [
+            html.text("Made using Gleam 😊"),
+          ]),
+        ]),
+        //html.div([attribute.style(typing_style)], [element.text("wow")]),
+      ])
+}
 
+pub fn main() {
+
+
+  let app = lustre.application(init, update, view)
+
+  let assert Ok(_) = lustre.start(app, "#app", Nil)
   Nil
 }