portfolio/about.html

278 lines
12 KiB
HTML
Raw Normal View History

2024-07-21 03:36:30 +00:00
<!DOCTYPE html>
<html lang="en" class="h-full">
<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');
.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;
}
.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>As a friendly and understanding software engineer, 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, I've had the privilege of working on various projects across
industries.</p>
<p>My journey in software development began with a curiosity about how things worked behind the
scenes. This led me to explore different areas, 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>
<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 gap-4 justify-between">
<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 Node.js, Rust, REST, React, and much more - 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="./vh_logo.png" alt="ventra health" height={50} width={50} class="w-10 h-10" />
<div>
<h3>Software Developer</h3>
<p class="text-slate-400">Randstad Technologies</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="./vh_logo.png" alt="ventra health" height={50} width={50} class="w-10 h-10" />
<div>
<h3>Senior Software Architect</h3>
<p class="text-slate-400">Damiano Global Corp.</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="./vh_logo.png" alt="ventra health" height={50} width={50} class="w-10 h-10" />
<div>
<h3>FullStack Software Developer</h3>
<p class="text-slate-400">Makers Ladder LLC</p>
</div>
</div>
<p class="text-slate-400">Aug 2023 - Present</p>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="flex gap-4 justify-between">
<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 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="#" 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="#" 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="#" 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>
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="#" 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>