tristonarmstrong/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move to css file

Browse Source
This commit is contained in:
Triston Armstrong 2024-07-22 19:16:21 -05:00
parent dbca56d641
commit c8a5933955
No known key found for this signature in database
GPG Key ID: FADE6AC6F956FC52
3 changed files with 75 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
about.html
View File

@ -9,73 +9,9 @@
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.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="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest"> <link rel="manifest" href="./site.webmanifest">
<link rel="stylesheet" href="cum.css">
<title>Klectr | About Me</title> <title>Klectr | About Me</title>
<script src="https://cdn.tailwindcss.com"></script> <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, #33333399 0%, #00000000 30%), radial-gradient(circle at top left, #33333399 0%, #00000000 30%), radial-gradient(circle at bottom, #2b2200 0%, #000 30%);
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> </head>
@ -107,21 +43,23 @@
<div class="my-6 flex flex-col gap-6 "> <div class="my-6 flex flex-col gap-6 ">
<p>Hello 👋, I'm a Software Engineer with a passion for <span <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 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 <span class="font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#ffce00] to-red-500">Open-Source
problem solving, I balance code with exploration and find peace in a cup of hot coffee next to an open fire!</p> Software</span>. With a knack for
problem solving, I balance code with exploration and find peace in a cup of hot ☕ next to an open 🔥!
</p>
<p>My journey in software development began with a curiosity about how things worked behind the <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 scenes", on the web. This led me to working with various companies across
industries from IoT software to revenue cycle management, and industries from IoT software to revenue cycle management, and
even dabbling in enterprise-level projects. Through these experiences, I've developed a strong 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> foundation in debugging, troubleshooting, and finding creative solutions to complex problems.</p>
<div class="flex gap-8 items-center my-4 relative"> <div class="flex gap-8 items-center my-4 relative">
<img src="./me_1.webp" alt="me" <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"> class="rounded-lg rotate-[-12deg] hover:rotate-[0deg] w-40 md:w-60 lg:w-72 ml-auto transition-transform">
<img src="./fam_1.jpeg" alt="family" <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"> class=" h-auto rounded-lg rotate-[12deg] hover:rotate-[0deg] w-40 md:w-60 lg:w-72 mr-auto transition-transform">
<p class="absolute top-[-30px] right-[-280px] w-60 long-cang-regular text-xl hidden lg:block">My family and I <p class="absolute top-[-30px] right-[-280px] w-60 long-cang-regular text-xl hidden lg:block">My family and I
often travel to often travel to
and from and from
@ -185,7 +123,9 @@
<p>What sets me apart is my ability to approach challenges with a humble mindset, recognizing that <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 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 and become more effective in my work.</p>
<p>When I'm not coding, you can find me spending time with
family or exploring new ideas and technologies.</p> family or exploring new ideas and technologies.</p>
</div> </div>

62
cum.css Normal file
View File

@ -0,0 +1,62 @@
@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, #33333399 0%, #00000000 30%), radial-gradient(circle at top left, #33333399 0%, #00000000 30%), radial-gradient(circle at bottom, #2b2200 0%, #000 30%);
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%;
}

59
index.html
View File

@ -9,66 +9,9 @@
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.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="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest"> <link rel="manifest" href="./site.webmanifest">
<link rel="stylesheet" href="cum.css">
<title>Klectr | Home</title> <title>Klectr | Home</title>
<script src="https://cdn.tailwindcss.com"></script> <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, #33333399 0%, #00000000 30%), radial-gradient(circle at top left, #33333399 0%, #00000000 30%), radial-gradient(circle at bottom, #2b2200 0%, #000 30%);
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> </head>