got the canvas to draw a line between divs

website/assets/profesh-exp.js

@@ -0,0 +1,37 @@
+
+var number_exp = 2;
+
+
+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";
+    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();
+    }
+}
+
+window.addEventListener("scroll", (event) => {
+    drawConnections();
+});

website/assets/static_css.css

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

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,21 @@ 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">
+                <div class="ml-8">
+                    <H2>"Modeling Simulation & Analysis Engineer"</H2>
+                    <H3>"Northrop Grumman Corporation"</H3>
+                    <P>plop</P>
+                </div>
+            </div>
+            <div id="p-e-2" class="border border-4 m-auto rounded w-3/5 h-32 mt-16">
             </div>
         </div>
     }