hero page with image and intro

leptos_components/src/components/buttons.rs

@@ -1,5 +1,4 @@
 use leptos::prelude::*;
-use leptos::logging;
 
 pub enum ButtonStyle {
     Primary,
@@ -25,7 +24,7 @@ pub fn Button(
     let mut stylestring = "";
     match style_type {
         ButtonStyle::Primary => {
-            stylestring = "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded";
+            stylestring = "transition ease-in-out delay-150 hover:scale-110 border-2 py-2 px-4 rounded";
         },
         ButtonStyle::Secondary => {
             stylestring = "bg-gray-300 hover:bg-gray-500 text-black font-semibold py-2 px-4 rounded";
@@ -43,7 +42,6 @@ pub fn Button(
             stylestring = "bg-[#0a0c1b] hover:bg-[#171d3a] text-white font-bold py-2 px-4 rounded shadow-lg transition duration-300 ease-in-out transform hover:scale-105";
         }
     }
-    logging::log!("{}", stylestring);
     view! {
         <button class={stylestring}>{children()}</button>
     }

leptos_components/src/components/card.rs

@@ -0,0 +1,30 @@
+use leptos::prelude::*;
+
+pub enum CardStyle {
+    Primary,
+}
+
+
+// Horizontal Card
+#[component]
+pub fn HCard<'a>(
+    #[prop(optional)]
+    style: Option<CardStyle>,
+    img_path: &'a str,
+
+) -> impl IntoView {
+    let style_type;
+    if style.is_none() {
+        style_type = CardStyle::Primary;
+    } else {
+        style_type = style.unwrap();
+    }
+    let mut stylestring = "";
+    match style_type {
+        CardStyle::Primary => {
+            stylestring = "font-sans text-2xl";
+        }
+    }
+    view! {
+    }
+}

leptos_components/src/components/mod.rs

@@ -1 +1,3 @@
-pub mod buttons;
+pub mod buttons;
+pub mod text;
+pub mod card;

leptos_components/src/components/text.rs

@@ -0,0 +1,97 @@
+use leptos::prelude::*;
+
+pub enum TextStyle {
+    Primary
+}
+
+#[component]
+pub fn H1(
+    #[prop(optional)]
+    style: Option<TextStyle>,
+    children: Children,
+) -> impl IntoView {
+    let style_type;
+    if style.is_none() {
+        style_type = TextStyle::Primary;
+    } else {
+        style_type = style.unwrap();
+    }
+    let mut stylestring = "";
+    match style_type {
+        TextStyle::Primary => {
+            stylestring = "font-sans text-2xl";
+        }
+    }
+    view! {
+        <h1 class={stylestring}>{children()}</h1>
+    }
+}
+
+#[component]
+pub fn H2(
+    #[prop(optional)]
+    style: Option<TextStyle>,
+    children: Children,
+) -> impl IntoView {
+    let style_type;
+    if style.is_none() {
+        style_type = TextStyle::Primary;
+    } else {
+        style_type = style.unwrap();
+    }
+    let mut stylestring = "";
+    match style_type {
+        TextStyle::Primary => {
+            stylestring = "font-sans text-xl";
+        }
+    }
+    view! {
+        <h2 class={stylestring}>{children()}</h2>
+    }
+}
+
+#[component]
+pub fn H3(
+    #[prop(optional)]
+    style: Option<TextStyle>,
+    children: Children,
+) -> impl IntoView {
+    let style_type;
+    if style.is_none() {
+        style_type = TextStyle::Primary;
+    } else {
+        style_type = style.unwrap();
+    }
+    let mut stylestring = "";
+    match style_type {
+        TextStyle::Primary => {
+            stylestring = "font-sans text-lg";
+        }
+    }
+    view! {
+        <h3 class={stylestring}>{children()}</h3>
+    }
+}
+
+#[component]
+pub fn P(
+    #[prop(optional)]
+    style: Option<TextStyle>,
+    children: Children,
+) -> impl IntoView {
+    let style_type;
+    if style.is_none() {
+        style_type = TextStyle::Primary;
+    } else {
+        style_type = style.unwrap();
+    }
+    let mut stylestring = "";
+    match style_type {
+        TextStyle::Primary => {
+            stylestring = "font-serif text-base";
+        }
+    }
+    view!{
+        <p class={stylestring}>{children()}</p>
+    }
+}

website/Cargo.toml

@@ -65,7 +65,7 @@ tailwind-input-file = "style/tailwind.css"
 # The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
 #
 # Optional. Env: LEPTOS_ASSETS_DIR.
-assets-dir = "public"
+assets-dir = "assets"
 
 # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
 site-addr = "127.0.0.1:5000"

website/assets/static_css.css

@@ -0,0 +1,4 @@
+body{
+    background-color: #0C120C;
+    color: #E4FDE1;
+}

website/src/app.rs

@@ -1,11 +1,10 @@
 use leptos::prelude::*;
 use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
 use leptos_router::{
-    components::{Route, Router, Routes},
-    StaticSegment,
+    components::{Route, Router, Routes}, path, StaticSegment
 };
-use leptos_components::components::buttons::Button;
-use leptos_components::components::buttons::ButtonStyle;
+use leptos_components::components::buttons::{Button, ButtonStyle};
+use leptos_components::components::text::{H1, H2, H3, P};
 
 pub fn shell(options: LeptosOptions) -> impl IntoView {
     view! {
@@ -35,14 +34,16 @@ pub fn App() -> impl IntoView {
         // id=leptos means cargo-leptos will hot-reload this stylesheet
         <Stylesheet id="leptos" href="/pkg/website.css"/>
 
+        <Stylesheet href="/static_css.css" />
+
         // sets the document title
-        <Title text="Welcome to Leptos"/>
+        <Title text="My Portfolio"/>
 
         // content for this welcome page
         <Router>
             <main>
                 <Routes fallback=|| "Page not found.".into_view()>
-                    <Route path=StaticSegment("") view=HomePage/>
+                    <Route path=path!("/") view=HomePage/>
                 </Routes>
             </main>
         </Router>
@@ -52,13 +53,16 @@ pub fn App() -> impl IntoView {
 /// Renders the home page of your application.
 #[component]
 fn HomePage() -> impl IntoView {
-    // Creates a reactive value to update the button
-    let count = RwSignal::new(0);
-    let on_click = move |_| *count.write() += 1;
-
     view! {
-        <h1>"Welcome to Leptos!"</h1>
-        <button on:click=on_click>"Click Me: " {move || count.get()}</button>
-        <Button style=ButtonStyle::Cyberpunk on:click=on_click>"Click Me: " {move || count.get()}</Button>
+        <div class="flex flex-row min-h-screen justify-center items-center">
+            <img class="max-w-lg rounded" src="/founder_portrait.jpg" />
+            <div class="flex flex-col m-4 p-2 items-start max-w-lg">
+                <H1>Hi!</H1>
+                <H2>"I'm Liam Fitzpatrick."</H2>
+                <P>"I'm an engineer with expertise in modeling, simulation, and process improvement. I have a proven ability 
+                to develop innovative solutions, optimize complex systems, and lead successful projects. I have some of my experiences 
+                projects outlined on this website. If you want to hire me or ask questions about my projects reach out to me "<a href="mailto:liam.fitzpatrick@live.com">here</a></P>
+            </div>
+        </div>
     }
 }

website/style/main.scss

@@ -1,4 +1,7 @@
 body {
 	font-family: sans-serif;
 	text-align: center;
-}
+	color: #E4FDE1;
+	background-color: #4D3F64;
+}
+