created timeline drawings

README.md

@@ -1,3 +1,10 @@
 # LiamJFitzpatrick.com
 
-This project is my personal portfolio website. Highlighting some of my accomplishments and skills. Hope you enjoy!
+This project is my personal portfolio website. Highlighting some of my accomplishments and skills. Hope you enjoy!
+
+
+## some notes
+
+color template
+
+https://coolors.co/4d3f64-0c120c-e4fde1-fb710e-1d3d5d

website/assets/profesh-exp.js

@@ -0,0 +1,48 @@
+
+var number_exp = 3;
+
+
+function drawConnections() {
+    let count = 1;
+    const canvas_el = document.getElementById("p-e-canvas");
+    const content_el = document.getElementById("p-e-content");
+    const content_box = content_el.getBoundingClientRect();
+    canvas_el.setAttribute("width", content_box.width);
+    canvas_el.setAttribute("height", content_box.height);
+    canvas_el.setAttribute("top", content_box.top);
+    canvas_el.setAttribute("left", content_box.left);
+    const ctx = canvas_el.getContext("2d");
+    ctx.strokeStyle = "#E4FDE1";
+    ctx.fillStyle = "#E4FDE1";
+    for (let count = 1; count <= (number_exp-1); count++) {
+        let cur_id_str = `p-e-${count}`;
+        let nex_id_str = `p-e-${count+1}`;
+        let cur_ele = document.getElementById(cur_id_str);
+        let next_ele = document.getElementById(nex_id_str);
+        let cur_box = cur_ele.getBoundingClientRect();
+        let next_box = next_ele.getBoundingClientRect();
+        let center_x = (cur_box.left + cur_box.right) / 2;
+        let center_y = (cur_box.top + cur_box.bottom) / 2;
+        let next_x = (next_box.left + next_box.right) / 2;
+        let next_y = (next_box.top + next_box.bottom) / 2;
+
+        ctx.beginPath();
+        ctx.moveTo(center_x, center_y);
+        ctx.lineTo(next_x, next_y);
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.moveTo(center_x, cur_box.bottom);
+        ctx.arc(center_x, cur_box.bottom, 5, 0, Math.PI);
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.moveTo(center_x, next_box.top);
+        ctx.arc(center_x, next_box.top, 5, 0, Math.PI, true);
+        ctx.fill();
+    }
+}
+
+window.addEventListener("scroll", (event) => {
+    drawConnections();
+});

website/assets/static_css.css

@@ -1,4 +1,11 @@
 body{
     background-color: #0C120C;
     color: #E4FDE1;
+}
+
+#p-e-canvas{
+    position:fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
 }

website/src/app.rs

@@ -1,5 +1,5 @@
 use leptos::prelude::*;
-use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
+use leptos_meta::{provide_meta_context, MetaTags, Script, Stylesheet, Title};
 use leptos_router::{
     components::{Route, Router, Routes}, path, StaticSegment
 };
@@ -36,6 +36,8 @@ pub fn App() -> impl IntoView {
 
         <Stylesheet href="/static_css.css" />
 
+        <Script src="/profesh-exp.js" />
+
         // sets the document title
         <Title text="My Portfolio"/>
 
@@ -54,6 +56,7 @@ pub fn App() -> impl IntoView {
 #[component]
 fn HomePage() -> impl IntoView {
     view! {
+        <canvas id="p-e-canvas"></canvas>
         <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">
@@ -61,7 +64,30 @@ fn HomePage() -> impl IntoView {
                 <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>
+                projects outlined on this website. If you want to hire me or ask questions about my projects reach out to me "<a class="underline" href="mailto:liam.fitzpatrick@live.com">here</a>.</P>
+            </div>
+        </div>
+        <H1>"Professional Experience"</H1>
+
+        <div id="p-e-content" class="min-h-screen">
+            
+            <div id="p-e-1" class="border border-4 m-auto mt-4 rounded w-1/2 h-fit bg-[#0C120C]">
+                <div class="ml-8">
+                    <H2>"Modeling Simulation & Analysis Engineer"</H2>
+                    <H3>"Northrop Grumman Corporation"</H3>
+                    <P>plop</P>
+                </div>
+            </div>
+            <div class="my-16 mx-auto w-fit bg-[#0C120C]">
+                <p>2023</p>
+            </div>
+            <div id="p-e-2" class="border border-4 m-auto rounded w-3/5 h-32 bg-[#0C120C]">
+            </div>
+            <div class="my-16 mx-auto w-fit bg-[#0C120C]">
+                <p>2021</p>
+            </div>
+            <div id="p-e-3" class="border border-4 m-auto rounded w-3/5 h-32 bg-[#0C120C]">
+                <H2>Graduation</H2>
             </div>
         </div>
     }