From 88cf0c45ded50e56a1cb352865d8dfbad80f7405 Mon Sep 17 00:00:00 2001 From: BrakeZap Date: Fri, 6 Sep 2024 18:56:06 -0700 Subject: [PATCH] Added routing and other styling --- gleam.toml | 1 + manifest.toml | 2 + src/portfolio.gleam | 137 ++++++++++++++++++++++++++++++++++++-------- 3 files changed, 117 insertions(+), 23 deletions(-) diff --git a/gleam.toml b/gleam.toml index b2fa111..58a338b 100644 --- a/gleam.toml +++ b/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" diff --git a/manifest.toml b/manifest.toml index 7c951ae..c8eac29 100644 --- a/manifest.toml +++ b/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" } diff --git a/src/portfolio.gleam b/src/portfolio.gleam index 440dece..4b09eb7 100644 --- a/src/portfolio.gleam +++ b/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 }