Kremta-Website/about/index.html

105 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html lang="en"> <head><!-- favicon --><link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"><link rel="sitemap" href="/sitemap-index.xml"><meta name="theme-name" content="pages"><meta name="msapplication-TileColor" content="#000000"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff"><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000"><meta name="generator" content="Astro v5.13.2"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5"><title>
Kristian Emil Takvam
</title><meta name="description" content="About me
"><meta name="author" content="Kristian Takvam"><meta property="og:title" content="Kristian Emil Takvam
"><meta property="og:description" content="About me
"><meta property="og:type" content="website"><meta property="og:url" content="https://kremtastic.github.io/about/"><meta property="og:image" content="https://kremtastic.github.io/_astro/kristianFilter.CYLPXh_z.jpg"><meta name="twitter:title" content="Kristian Emil Takvam
"><meta name="twitter:description" content="About me
"><meta name="twitter:image" content="https://kremtastic.github.io/_astro/kristianFilter.CYLPXh_z.jpg"><meta name="twitter:card" content="summary_large_image"><!-- Katex --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" integrity="sha384-zh0CIslj+VczCZtlzBcjt5ppRcsAmDnRem7ESsYwWwg3m/OaJ2l4x7YBZl9Kxxib" crossorigin="anonymous"><script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js" integrity="sha384-Rma6DA2IPUwhNxmrB/7S3Tno0YY7sFu9WSYMCuulLhIqYSGZ2gKCJWIqhBWqMQfh" crossorigin="anonymous"></script><script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script><!-- https://docs.astro.build/en/guides/view-transitions --><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="swap"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.DXDO1ZkE.js"></script><script type="application/json" data-tooltips-options>{"interactive":false,"delay":[333,0]}</script><script type="module" src="/_astro/Tooltips.astro_astro_type_script_index_0_lang.Bx2cGmPu.js"></script><link rel="stylesheet" href="/_astro/about.DDk7dmDO.css">
<link rel="stylesheet" href="/_astro/about.CglLAhJL.css"><script type="module" src="/_astro/page.DlXkxCA4.js"></script></head> <body> <!-- ---
// Twinkling Star Background
const numStars = 1600;
const stars = Array.from({ length: numStars }).map(() => ({
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
size: `${Math.random() * 2 + 1}px`,
delay: `${7 * Math.random()}s`,
// hsl: `hsl(${Math.random() * 360}, 100%, 50%)`, // background: ${hsl};
}));
---
<div
class="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden"
>
{
stars.map(({ left, top, size, delay }) => (
<div
class="absolute bg-none dark:bg-yellow-50 rounded-full animate-twinkle"
style={`
left: ${left};
top: ${top};
width: ${size};
height: ${size};
animation-delay: ${delay};
`}
/>
))
}
</div> --><!-- Gradient Cycle Background --><!-- <div
class="gradient animate-cycleBg fixed top-0 left-0 w-full h-full -z-1 pointer-events-none overflow-hidden"
/>
<style>
.gradient {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
}
</style> --><!-- Single Image Background --><!-- <style>
html::before {
content: "";
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: url(/src/assets/backgrounds/bwca-dusk.png) no-repeat center center;
background-size: cover;
z-index: -1;
pointer-events: none;
}
</style> --><!-- Dual Image Background --> <header class="container glass py-2 z-30 mb-4 lg:mt-4 lg:rounded-lg sticky top-0" data-astro-transition-persist="astro-zg46k4mb-1"> <nav class="relative flex flex-wrap items-center justify-between"> <!-- navbar toggler --> <input id="nav-toggle" type="checkbox" class="hidden"> <label for="nav-toggle" class="order-0 cursor-pointer flex items-center md:hidden text-txt-p dark:text-darkmode-txt-p lg:order-1"> <svg id="show-button" class="h-6 fill-current block" viewBox="0 0 20 20"> <title>Menu Open</title> <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path> </svg> <svg id="hide-button" class="h-6 fill-current hidden" viewBox="0 0 20 20"> <title>Menu Close</title> <polygon points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2" transform="rotate(45 10 10)"></polygon> </svg> </label> <!-- /navbar toggler --> <ul id="nav-menu" class="text-center lg:text-left order-3 hidden w-full pb-6 md:order-1 md:flex md:w-auto md:space-x-2 md:pb-0 lg:space-x-4"> <li class=""> <a href="/" class="block p-2 font-secondary font-semibold text-txt-p transition dark:text-darkmode-txt-p lg:px-2 lg:py-3 false"> Home </a> </li><li class=""> <a href="/about" class="block p-2 font-secondary font-semibold text-txt-p transition dark:text-darkmode-txt-p lg:px-2 lg:py-3 active"> About </a> </li><li class=""> <a href="/docs" class="block p-2 font-secondary font-semibold text-txt-p transition dark:text-darkmode-txt-p lg:px-2 lg:py-3 false"> Docs </a> </li><li class=""> <a href="/blog" class="block p-2 font-secondary font-semibold text-txt-p transition dark:text-darkmode-txt-p lg:px-2 lg:py-3 false"> Blog </a> </li><li class=""> <a href="/portfolio" class="block p-2 font-secondary font-semibold text-txt-p transition dark:text-darkmode-txt-p lg:px-2 lg:py-3 false"> Portfolio </a> </li> </ul> <div class="order-1 ml-auto flex items-center md:order-2 lg:ml-0"> <a class="mr-4 inline-block border-border text-xl text-txt-p dark:border-darkmode-border dark:text-darkmode-txt-p" href="/search" aria-label="search"> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M456.69 421.39 362.6 327.3a173.81 173.81 0 0 0 34.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 0 0 327.3 362.6l94.09 94.09a25 25 0 0 0 35.3-35.3zM97.92 222.72a124.8 124.8 0 1 1 124.8 124.8 124.95 124.95 0 0 1-124.8-124.8z"></path></svg> </a> <div class="inline-flex a mr-2"> <input class="absolute opacity-0" id="theme-switcher" data-theme-switcher type="checkbox"> <label class="relative inline-block h-4 w-6 cursor-pointer" for="theme-switcher"> <span class="sr-only">theme switcher</span> <span class="absolute -top-1 left-0 flex h-6 w-6 items-center justify-center rounded-full"> <svg class="absolute z-10 opacity-100 dark:opacity-0" viewBox="0 0 24 24" height="21" width="21"> <path fill="#000" d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"></path> </svg> <svg class="absolute z-10 opacity-0 dark:opacity-100" viewBox="0 0 24 24" height="21" width="21"> <path fill="#fff" d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path> </svg> </span> </label> </div> <script data-astro-rerun>
const defaultTheme = "system";
function getTheme(defaultTheme) {
var darkMode = defaultTheme === "dark" ? true : false;
if (localStorage.getItem("theme") === "system") {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
darkMode = true;
}
} else if (localStorage.getItem("theme") === "dark") {
darkMode = true;
} else if (localStorage.getItem("theme") === "light") {
darkMode = false;
}
return darkMode;
}
function setTheme(darkMode) {
// Update DOM
darkMode
? document.documentElement.classList.add("dark")
: document.documentElement.classList.remove("dark");
// Update localStorage
localStorage.setItem("theme", darkMode ? "dark" : "light");
}
// This prevents flickering back to default theme before the page is fully loaded
setTheme(getTheme(defaultTheme));
document.addEventListener("astro:page-load", () => {
setTheme(getTheme(defaultTheme));
// Theme switcher
var themeSwitch = document.querySelectorAll("[data-theme-switcher]");
themeSwitch.forEach((el) => {
el.addEventListener("change", (e) => {
setTheme(e.target.checked);
});
});
});
</script> </div> </nav> </header> <main id="main-content" class="flex-1"> <section class="section-sm"> <div class="container"> <div class="row justify-center"> <div class="glass rounded-lg text-center p-8 md:col-10 lg:col-7 intersect:animate-fadeUp opacity-0 intersect-no-queue"> <img src="/_astro/kristianFilter.CYLPXh_z_Z5wD3p.webp" alt loading="eager" decoding="async" fetchpriority="auto" width="1024" height="1024" class="mx-auto mb-6 rounded-lg w-64"> <h2 class="h3 mb-6">Kristian Emil Takvam</h2> <h4 id="about-me">About me</h4>
<h2 id="">🎓</h2>
<p>Currently a software engineering masters student working on virtual reality and serious games development</p>
<h2 id="-1">🎮</h2>
<p>Expect plenty of game devrelated posts here as its one of my biggest passions</p>
<h2 id="-2">💪</h2>
<p>Outside of tech, I love competing in powerlifting and chasing new PRs</p> </div> </div> </div> </section> </main> <footer class="glass container lg:my-4 lg:rounded-lg intersect:animate-fadeUp opacity-0"> <div class="row py-2 lg:py-0 items-center flex-wrap-reverse"> <div class="text-center lg:col-6 lg:mb-0 lg:text-left"> <ul> <li class="m-2 inline-block"> <a href="/terms">&copy; Kristian Emil Takvam 2025</a> |
<a href="https://github.com/astrogon/astrogon" target="_blank"> <strong>Astrogon</strong></a> theme by
<a href="https://reednel.com/" target="_blank"> <strong>Reed Nelson</strong></a> </li> </ul> </div> <div class="text-center lg:col-6 lg:my-0 flex items-center justify-center lg:justify-end"> <ul class="py-2 flex items-center"><li class="inline-block px-1 intersect:animate-fade opacity-0"><a class="glass-t rounded text-txt-p dark:text-darkmode-txt-p flex h-9 w-9 items-center justify-center text-center" aria-label="GitHub" href="https://www.github.com/Kremtastic" target="_blank" rel="noopener noreferrer nofollow"><span class="sr-only">GitHub</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" class="w-6 h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></li><li class="inline-block px-1 intersect:animate-fade opacity-0"><a class="glass-t rounded text-txt-p dark:text-darkmode-txt-p flex h-9 w-9 items-center justify-center text-center" aria-label="LinkedIn" href="https://www.linkedin.com/in/kristian-emil-takvam-70a475215/" target="_blank" rel="noopener noreferrer nofollow"><span class="sr-only">LinkedIn</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-6 h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></a></li><li class="inline-block px-1 intersect:animate-fade opacity-0"><a class="glass-t rounded text-txt-p dark:text-darkmode-txt-p flex h-9 w-9 items-center justify-center text-center" aria-label="RSS" href="/rss.xml" target="_blank" rel="noopener noreferrer nofollow"><span class="sr-only">RSS</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-6 h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z"></path></svg></a></li></ul> </div> </div> </footer> <!-- <ObserverScript /> --> </body></html>