move to css file
This commit is contained in:
parent
dbca56d641
commit
c8a5933955
84
about.html
84
about.html
@ -9,73 +9,9 @@
|
||||
<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">
|
||||
<link rel="stylesheet" href="cum.css">
|
||||
<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, #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>
|
||||
|
||||
|
||||
@ -107,21 +43,23 @@
|
||||
<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>
|
||||
<span class="font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#ffce00] to-red-500">Open-Source
|
||||
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
|
||||
scenes, on the web. This led me to working with various companies across
|
||||
<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">
|
||||
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"
|
||||
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
|
||||
often travel to
|
||||
and from
|
||||
@ -185,7 +123,9 @@
|
||||
|
||||
<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
|
||||
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>
|
||||
</div>
|
||||
|
||||
|
||||
62
cum.css
Normal file
62
cum.css
Normal 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
59
index.html
@ -9,66 +9,9 @@
|
||||
<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">
|
||||
<link rel="stylesheet" href="cum.css">
|
||||
<title>Klectr | Home</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, #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>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user