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!
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

@ -8,10 +8,4 @@ body{
top: 0;
left: 0;
z-index: -1;
}
#p-e-1{
background-color: #0C120C;
}
#p-e-2{
background-color: #0C120C;
}

View File

@ -68,17 +68,26 @@ fn HomePage() -> impl IntoView {
</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 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>
}