created timeline drawings

This commit is contained in:
Liam Fitzpatrick 2024-12-31 16:47:20 -05:00
parent 7af9f3b1a0
commit 591430f2f4
4 changed files with 32 additions and 11 deletions

View File

@ -1,3 +1,10 @@
# LiamJFitzpatrick.com
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

View File

@ -1,5 +1,5 @@
var number_exp = 2;
var number_exp = 3;
function drawConnections() {
@ -13,6 +13,7 @@ function drawConnections() {
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}`;
@ -29,6 +30,16 @@ function drawConnections() {
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();
}
}

View File

@ -9,9 +9,3 @@ body{
left: 0;
z-index: -1;
}
#p-e-1{
background-color: #0C120C;
}
#p-e-2{
background-color: #0C120C;
}

View File

@ -71,14 +71,23 @@ fn HomePage() -> impl IntoView {
<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 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 id="p-e-2" class="border border-4 m-auto rounded w-3/5 h-32 mt-16">
<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>
}