357 lines
16 KiB
HTML
357 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="min-h-full overflow-x-hidden">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
|
|
<link rel="manifest" href="./site.webmanifest">
|
|
<title>Klectr | About Me</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
|
|
|
|
.ubuntu-regular {
|
|
font-family: "Ubuntu", sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ubuntu-bold {
|
|
font-family: "Ubuntu", sans-serif;
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ubuntu-regular-italic {
|
|
font-family: "Ubuntu", sans-serif;
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
|
|
.long-cang-regular {
|
|
font-family: "Long Cang", cursive;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.gradient {
|
|
background: radial-gradient(circle at top right, #333 0%, #000 50%);
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.glow {
|
|
position: relative;
|
|
}
|
|
|
|
.glow::before {
|
|
position: absolute;
|
|
content: 'banana';
|
|
background-color: #ffce00;
|
|
width: 0px;
|
|
height: 0px;
|
|
filter: blur(30px);
|
|
z-index: -1;
|
|
top: -6px;
|
|
left: -4px;
|
|
border-radius: 50%;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
.glow:hover::before {
|
|
position: absolute;
|
|
content: 'banana';
|
|
background-color: #ffce00;
|
|
width: 40px;
|
|
height: 40px;
|
|
filter: blur(30px);
|
|
z-index: -1;
|
|
top: -6px;
|
|
left: -4px;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
<body class="bg-black text-white mx-auto max-w-2xl my-6 ubuntu-regular p-4 gradient">
|
|
<!-- ______________________________________________________________ -->
|
|
<nav class="flex justify-between items-center">
|
|
<a href="" class="glow"><img src="./avatar.png" alt="avatar" width={30} height={30} class="w-10 h-10" /></a>
|
|
<div class="flex gap-6 text-md text-slate-400 ">
|
|
<a href="./index.html" class="hover:text-[#ffce00]">Home</a>
|
|
<a href="./about.html" class="hover:text-[#ffce00] border-b border-[#ffce00]">About</a>
|
|
<a class="hover:text-[#ffce00]">Now</a>
|
|
<a class="hover:text-[#ffce00]">Featured</a>
|
|
</div>
|
|
<a href="mailto:tarmstrong95@proton.me">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="lucide lucide-mail text-slate-400 hover:text-[#ffce00]">
|
|
<rect width="20" height="16" x="2" y="4" rx="2" />
|
|
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
|
</svg>
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- ______________________________________________________________ -->
|
|
<main class="mt-20 text-slate-200">
|
|
<h1 class="text-2xl font-bold text-white">About</h1>
|
|
<p class="text-slate-400">Thanks for stopping by! Here's a bit about me.</p>
|
|
|
|
<div class="my-6 flex flex-col gap-6 ">
|
|
<p>Hello 👋, I'm a Software Engineer with a passion for <span
|
|
class="font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#ffce00] to-red-500">Rust</span> and
|
|
Open-Source Software. With a knack for
|
|
problem solving, I balance code with exploration and find peace in a cup of hot coffee next to an open fire!</p>
|
|
|
|
|
|
<p>My journey in software development began with a curiosity about how things worked behind the
|
|
scenes, on the web. This led me to working with various companies across
|
|
industries from IoT software to revenue cycle management, and
|
|
even dabbling in enterprise-level projects. Through these experiences, I've developed a strong
|
|
foundation in debugging, troubleshooting, and finding creative solutions to complex problems.</p>
|
|
|
|
<div class="flex gap-8 items-center my-4 relative">
|
|
<img src="./me_1.webp" alt="me"
|
|
class="rounded-lg rotate-[-12deg] hover:rotate-[0deg] w-40 md:w-60 lg:w-72 ml-auto">
|
|
<img src="./fam_1.jpeg" alt="family"
|
|
class=" h-auto rounded-lg rotate-[12deg] hover:rotate-[0deg] w-40 md:w-60 lg:w-72 mr-auto">
|
|
<p class="absolute top-[-30px] right-[-280px] w-60 long-cang-regular text-xl">My family and I often travel to
|
|
and from
|
|
Thailand, as we have
|
|
familiy
|
|
there!
|
|
</p>
|
|
<p class="absolute top-0 left-[-230px] w-60 long-cang-regular text-3xl">Me!</p>
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.98231602779492 100.40624372175893"
|
|
width="159.96463205558985" height="200.81248744351785" class="absolute right-[-280px] top-8 rotate-[20deg]">
|
|
<rect x="0" y="0" width="79.98231602779492" height="100.40624372175893" fill="#0000"></rect>
|
|
<g stroke-linecap="round">
|
|
<g transform="translate(33.9592080799398 10.67947049140929) rotate(0 6.5 39.5)">
|
|
<path
|
|
d="M1.11 -0.68 C6.88 6.16, 39.72 27.88, 35.68 41.1 C31.64 54.31, -13.43 72.39, -23.13 78.61 M0.23 1.58 C5.73 8.63, 38.6 29.66, 34.56 42.68 C30.53 55.71, -14.53 73.63, -23.96 79.73"
|
|
stroke="#fff" stroke-width="1" fill="none"></path>
|
|
</g>
|
|
<g transform="translate(33.9592080799398 10.67947049140929) rotate(0 6.5 39.5)">
|
|
<path
|
|
d="M-6.96 61.39 C-14.64 68.08, -19.9 75.47, -23.96 79.73 M-6.96 61.39 C-10.84 66.87, -15.74 70.67, -23.96 79.73"
|
|
stroke="#fff" stroke-width="1" fill="none"></path>
|
|
</g>
|
|
<g transform="translate(33.9592080799398 10.67947049140929) rotate(0 6.5 39.5)">
|
|
<path
|
|
d="M0.85 76.61 C-9.84 77.51, -18.11 79.03, -23.96 79.73 M0.85 76.61 C-5.18 77.98, -12.18 77.71, -23.96 79.73"
|
|
stroke="#fff" stroke-width="1" fill="none"></path>
|
|
</g>
|
|
</g>
|
|
<mask></mask>
|
|
</svg>
|
|
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.98231602779492 100.40624372175893"
|
|
width="159.96463205558985" height="200.81248744351785"
|
|
class="absolute left-[-280px] top-8 rotate-[-20deg] scale-x-[-1]">
|
|
<rect x="0" y="0" width="79.98231602779492" height="100.40624372175893" fill="#0000"></rect>
|
|
<g stroke-linecap="round">
|
|
<g transform="translate(33.9592080799398 10.67947049140929) rotate(0 6.5 39.5)">
|
|
<path
|
|
d="M1.11 -0.68 C6.88 6.16, 39.72 27.88, 35.68 41.1 C31.64 54.31, -13.43 72.39, -23.13 78.61 M0.23 1.58 C5.73 8.63, 38.6 29.66, 34.56 42.68 C30.53 55.71, -14.53 73.63, -23.96 79.73"
|
|
stroke="#fff" stroke-width="1" fill="none"></path>
|
|
</g>
|
|
<g transform="translate(33.9592080799398 10.67947049140929) rotate(0 6.5 39.5)">
|
|
<path
|
|
d="M-6.96 61.39 C-14.64 68.08, -19.9 75.47, -23.96 79.73 M-6.96 61.39 C-10.84 66.87, -15.74 70.67, -23.96 79.73"
|
|
stroke="#fff" stroke-width="1" fill="none"></path>
|
|
</g>
|
|
<g transform="translate(33.9592080799398 10.67947049140929) rotate(0 6.5 39.5)">
|
|
<path
|
|
d="M0.85 76.61 C-9.84 77.51, -18.11 79.03, -23.96 79.73 M0.85 76.61 C-5.18 77.98, -12.18 77.71, -23.96 79.73"
|
|
stroke="#fff" stroke-width="1" fill="none"></path>
|
|
</g>
|
|
</g>
|
|
<mask></mask>
|
|
</svg>
|
|
</div>
|
|
|
|
<p>I bring a unique blend of technical expertise,
|
|
problem-solving enthusiasm, and debugging skills to my work, with a passion for building innovative
|
|
solutions that make a difference. </p>
|
|
|
|
<p>What sets me apart is my ability to approach challenges with a humble mindset, recognizing that
|
|
everyone makes mistakes and learning from those experiences. This has helped me grow as an engineer
|
|
and become more effective in my work. When I'm not coding, you can find me spending time with
|
|
family or exploring new ideas and technologies.</p>
|
|
</div>
|
|
|
|
<br>
|
|
<br>
|
|
|
|
<div class="flex flex-col gap-4 justify-between sm:flex-row">
|
|
<h2 class="text-lg text-slate-400 flex-1">Work</h2>
|
|
<div class="flex flex-col gap-4 flex-[4]">
|
|
<p>My Tech toolbox includes anything related to Typescript, Rust, and Python - but my true love? Open Source
|
|
Software!
|
|
</p>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex gap-2 justify-between">
|
|
<div class="flex gap-2">
|
|
<img src="./vh_logo.png" alt="ventra health" height={50} width={50} class="w-10 h-10 hover:opacity-100" />
|
|
<div>
|
|
<h3>Senior Software Engineer</h3>
|
|
<p class="text-slate-400">Ventra Health</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-slate-400">Aug 2023 - Present</p>
|
|
</div>
|
|
|
|
<div class="flex gap-2 justify-between">
|
|
<div class="flex gap-2">
|
|
<img src="./randstad.png" alt="ventra health" height={50} width={50} class="w-10 h-10 rounded-full" />
|
|
<div>
|
|
<h3>Software Developer</h3>
|
|
<p class="text-slate-400">Randstad Technologies</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-slate-400">In The Past</p>
|
|
</div>
|
|
|
|
<div class="flex gap-2 justify-between">
|
|
<div class="flex gap-2">
|
|
<img src="./dgnet.webp" alt="ventra health" height={50} width={50} class="w-10 h-10 rounded-full" />
|
|
<div>
|
|
<h3>Senior Software Architect</h3>
|
|
<p class="text-slate-400">Damiano Global Corp.</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-slate-400">In The Past</p>
|
|
</div>
|
|
|
|
<div class="flex gap-2 justify-between">
|
|
<div class="flex gap-2">
|
|
<img src="./makers.png" alt="ventra health" height={50} width={50} class="w-10 h-10 rounded-full" />
|
|
<div>
|
|
<h3>FullStack Software Developer</h3>
|
|
<p class="text-slate-400">Makers Ladder LLC</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-slate-400">In The Past</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
<br>
|
|
|
|
<div class="flex flex-col gap-4 justify-between sm:flex-row">
|
|
<h2 class="text-lg text-slate-400 flex-1">Connect</h2>
|
|
<div class="flex flex-col gap-4 flex-[4]">
|
|
<p>Come find me on Twitter and LinkedIn - I'm excited to connect! If you're curious about my thoughts, swing
|
|
by
|
|
my blog <a class="font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#ffce00] to-red-500"
|
|
href="#">blog.tristonarmstrong.com</a>.</p>
|
|
<div class="flex flex-col gap-2 hover:text-slate-400 hover:border-slate-400">
|
|
<div class="flex gap-2 border-inherit">
|
|
<!-- REPOSITORIES -->
|
|
<a href="https://git.tristonarmstrong.com" target="_blank" class="flex-1 border-inherit">
|
|
<div
|
|
class="flex border p-2 rounded-xl justify-between items-center py-3 border-inherit hover:border-slate-100">
|
|
<div class="flex gap-3 text-sm items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="w-4 h-4">
|
|
<circle cx="18" cy="18" r="3" />
|
|
<circle cx="6" cy="6" r="3" />
|
|
<path d="M6 21V9a9 9 0 0 0 9 9" />
|
|
</svg>
|
|
Repositories
|
|
</div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
|
|
<path d="M7 7h10v10" />
|
|
<path d="M7 17 17 7" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- TWITTER -->
|
|
<a href="https://x.com/triston_armstr" target="_blank" class="flex-1 border-inherit">
|
|
<div
|
|
class="flex border p-2 rounded-xl justify-between items-center py-3 border-inherit hover:border-slate-100">
|
|
<div class="flex gap-3 text-sm items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="w-4 h-4">
|
|
<path
|
|
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
|
|
</svg>
|
|
Twitter
|
|
</div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
|
|
<path d="M7 7h10v10" />
|
|
<path d="M7 17 17 7" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex gap-2 border-inherit">
|
|
<!-- LINKED IN -->
|
|
<a href="https://www.linkedin.com/in/triston95strong/" target="_blank" class="flex-1 border-inherit">
|
|
<div
|
|
class="flex border p-2 rounded-xl justify-between items-center py-3 border-inherit hover:border-slate-100">
|
|
<div class="flex gap-3 text-sm items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="w-4 h-4">
|
|
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
|
|
<rect width="4" height="12" x="2" y="9" />
|
|
<circle cx="4" cy="4" r="2" />
|
|
</svg>
|
|
LinkedIn
|
|
</div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
|
|
<path d="M7 7h10v10" />
|
|
<path d="M7 17 17 7" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- INSTAGRAM -->
|
|
<a href="https://www.instagram.com/triston.armstrong/" target="_blank" class="flex-1 border-inherit">
|
|
<div
|
|
class="flex border p-2 rounded-xl justify-between items-center py-3 border-inherit hover:border-slate-100">
|
|
<div class="flex gap-3 text-sm items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="w-4 h-4">
|
|
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
|
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
|
|
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
|
|
</svg>
|
|
Instagram
|
|
</div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
|
|
<path d="M7 7h10v10" />
|
|
<path d="M7 17 17 7" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</body>
|
|
|
|
</html>
|