mirror of
https://github.com/TommyTran732/tommytran.io.git
synced 2025-11-03 23:35:36 +01:00
1214 lines
36 KiB
HTML
1214 lines
36 KiB
HTML
<!doctype html>
|
|
<html
|
|
lang="en"
|
|
dir="ltr"
|
|
class="scroll-smooth"
|
|
data-default-appearance="dark"
|
|
data-auto-appearance="false"><head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script>
|
|
<meta charset="utf-8">
|
|
|
|
<meta http-equiv="content-language" content="en">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<meta name="theme-color">
|
|
|
|
|
|
|
|
<title>About Me · Tommy's Space</title>
|
|
<meta name="title" content="About Me · Tommy's Space">
|
|
|
|
|
|
|
|
|
|
<meta name="description" content="Tommy's personal website">
|
|
|
|
|
|
|
|
|
|
<link rel="canonical" href="http://localhost:1313/posts/about/">
|
|
|
|
|
|
|
|
|
|
<meta name="author" content="Tommy Tran">
|
|
|
|
|
|
|
|
|
|
|
|
<link href="https://github.com/TommyTran732" rel="me">
|
|
|
|
|
|
|
|
|
|
|
|
<link href="https://git.metropolis.nexus/Tommy" rel="me">
|
|
|
|
|
|
|
|
|
|
|
|
<link href="https://matrix.to/#/@tommy:metropolis.nexus" rel="me">
|
|
|
|
|
|
|
|
|
|
|
|
<link href="https://t.me/tommytran732" rel="me">
|
|
|
|
|
|
|
|
|
|
|
|
<link href="https://x.com/TommyTran732" rel="me">
|
|
|
|
|
|
|
|
|
|
|
|
<link href="https://www.linkedin.com/in/tommytran732" rel="me">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link href="/.well-known/pgp-key.txt" rel="me">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta property="og:url" content="http://localhost:1313/posts/about/">
|
|
<meta property="og:site_name" content="Tommy's Space">
|
|
<meta property="og:title" content="About Me">
|
|
<meta property="og:description" content="Tommy's personal website">
|
|
<meta property="og:locale" content="en">
|
|
<meta property="og:type" content="article">
|
|
<meta property="article:section" content="posts">
|
|
<meta property="article:published_time" content="2022-09-02T00:00:00+00:00">
|
|
<meta property="article:modified_time" content="2022-09-02T00:00:00+00:00">
|
|
<meta property="og:image" content="http://localhost:1313/posts/about/featured.jpg">
|
|
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="http://localhost:1313/posts/about/featured.jpg">
|
|
<meta name="twitter:title" content="About Me">
|
|
<meta name="twitter:description" content="Tommy's personal website">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link
|
|
type="text/css"
|
|
rel="stylesheet"
|
|
href="/css/main.bundle.min.7946532fa78157bafb1b4340d4074792811f18177af35790b3a0cb90566ce1cda3edd782eb92e134849964d14b6d9185c9d4ded2a12dcf5b706cb6a275c0cce0.css"
|
|
integrity="sha512-eUZTL6eBV7r7G0NA1AdHkoEfGBd681eQs6DLkFZs4c2j7deC65LhNISZZNFLbZGFydTe0qEtz1twbLaidcDM4A==">
|
|
|
|
|
|
|
|
<script
|
|
type="text/javascript"
|
|
src="/js/appearance.min.6f41174b3a05b680820fe08cadbfa5fb7a7ca347b76a0955cdc68b9d8aca1ce24f0547e138cea33bcc7904d551a90afcb1cc7f2d9fe8557075d501419046c08c.js"
|
|
integrity="sha512-b0EXSzoFtoCCD+CMrb+l+3p8o0e3aglVzcaLnYrKHOJPBUfhOM6jO8x5BNVRqQr8scx/LZ/oVXB11QFBkEbAjA=="></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="/lib/zoom/zoom.min.umd.a527109b68c082a70f3697716dd72a9d5aa8b545cf800cecbbc7399f2ca6f6e0ce3e431f2062b48bbfa47c9ea42822714060bef309be073f49b9c0e30d318d7b.js" integrity="sha512-pScQm2jAgqcPNpdxbdcqnVqotUXPgAzsu8c5nyym9uDOPkMfIGK0i7+kfJ6kKCJxQGC+8wm+Bz9JucDjDTGNew=="></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script
|
|
defer
|
|
type="text/javascript"
|
|
id="script-bundle"
|
|
src="/js/main.bundle.min.9df4fc14d50efcc9aa4cfc2b6f348e365f421f5ad491278f8f48c0360cf2f93f08882fda6da162d7ace8e5add57c2df4ac46bd3861306b1d4c452cd31f448d64.js"
|
|
integrity="sha512-nfT8FNUO/MmqTPwrbzSONl9CH1rUkSePj0jANgzy+T8IiC/abaFi16zo5a3VfC30rEa9OGEwax1MRSzTH0SNZA=="
|
|
data-copy="Copy"
|
|
data-copied="Copied"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="/lib/jquery/jquery.slim.min.b0dca576e87d7eaa5850ae4e61759c065786cdb6489d68fcc82240539eebd5da522bdb4fda085ffd245808c8fe2acb2516408eb774ef26b5f6015fc6737c0ea8.js" integrity="sha512-sNylduh9fqpYUK5OYXWcBleGzbZInWj8yCJAU57r1dpSK9tP2ghf/SRYCMj+KsslFkCOt3TvJrX2AV/Gc3wOqA=="></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
<script type="application/ld+json">
|
|
[{
|
|
"@context": "https://schema.org",
|
|
"@type": "Article",
|
|
"articleSection": "Posts",
|
|
"name": "About Me",
|
|
"headline": "About Me",
|
|
|
|
|
|
"inLanguage": "en",
|
|
"url" : "http:\/\/localhost:1313\/posts\/about\/",
|
|
"author" : {
|
|
"@type": "Person",
|
|
"name": "Tommy Tran"
|
|
},
|
|
"copyrightYear": "2022",
|
|
"dateCreated": "2022-09-02T00:00:00\u002b00:00",
|
|
"datePublished": "2022-09-02T00:00:00\u002b00:00",
|
|
|
|
"dateModified": "2022-09-02T00:00:00\u002b00:00",
|
|
|
|
|
|
|
|
"mainEntityOfPage": "true",
|
|
"wordCount": "149"
|
|
}]
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body class="flex flex-col h-screen m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32 text-lg bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600">
|
|
<div id="the-top" class="absolute flex self-center">
|
|
<a
|
|
class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"
|
|
href="#main-content">
|
|
<span class="font-bold text-primary-600 pe-2 dark:text-primary-400">↓</span>
|
|
Skip to main content
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<div class="min-h-[148px]"></div>
|
|
<div class="fixed inset-x-0 z-100">
|
|
<div
|
|
id="menu-blur"
|
|
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div>
|
|
<div class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div
|
|
class="main-menu flex items-center justify-between py-6 md:justify-start gap-x-3 pt-[2px] pr-2 md:pr-4 pb-[3px] pl-0">
|
|
|
|
|
|
|
|
<div class="flex flex-1 items-center justify-between">
|
|
<nav class="flex space-x-3">
|
|
|
|
<a href="/" class="text-base font-medium">
|
|
Tommy’s Space
|
|
</a>
|
|
|
|
</nav>
|
|
|
|
<nav class="hidden md:flex items-center gap-x-5 md:ml-12 h-12">
|
|
|
|
|
|
|
|
<a
|
|
href="/posts/about/"
|
|
|
|
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
|
aria-label="About"
|
|
title="About Me">
|
|
|
|
|
|
<p class="text-base font-medium">
|
|
About
|
|
</p>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a
|
|
href="https://privsec.dev"
|
|
target="_blank"
|
|
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
|
aria-label="Blog"
|
|
title="">
|
|
|
|
|
|
<p class="text-base font-medium">
|
|
Blog
|
|
</p>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a
|
|
href="/posts/projects/"
|
|
|
|
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
|
aria-label="Projects"
|
|
title="My Projects">
|
|
|
|
|
|
<p class="text-base font-medium">
|
|
Projects
|
|
</p>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a
|
|
href="/posts/contact/"
|
|
|
|
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
|
aria-label="Contact"
|
|
title="Contact Information">
|
|
|
|
|
|
<p class="text-base font-medium">
|
|
Contact
|
|
</p>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a
|
|
href="/posts/hire-me/"
|
|
|
|
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
|
aria-label="Hire Me!"
|
|
title="I am open to work!">
|
|
|
|
|
|
<p class="text-base font-medium">
|
|
Hire Me!
|
|
</p>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a
|
|
href=""
|
|
|
|
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
|
|
|
title="">
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button
|
|
id="search-button"
|
|
aria-label="Search"
|
|
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
|
title="Search (/)">
|
|
<span class="relative block icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
|
|
</span>
|
|
</button>
|
|
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
<div class="flex md:hidden items-center gap-x-5 md:ml-12 h-12">
|
|
<span></span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button
|
|
id="search-button-mobile"
|
|
aria-label="Search"
|
|
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
|
title="Search (/)">
|
|
<span class="relative block icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
|
|
</span>
|
|
</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="-my-2 md:hidden">
|
|
<div id="menu-button" class="block">
|
|
|
|
<div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
|
|
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/></svg>
|
|
</span>
|
|
</div>
|
|
<div
|
|
id="menu-wrapper"
|
|
class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]">
|
|
<ul
|
|
class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
|
|
<li id="menu-close-button">
|
|
<span
|
|
class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">
|
|
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
|
|
</span>
|
|
</span>
|
|
</li>
|
|
|
|
|
|
|
|
<li class="mt-1">
|
|
<a
|
|
href="/posts/about/"
|
|
|
|
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
|
aria-label="About"
|
|
title="About Me">
|
|
|
|
|
|
<p class="text-bg font-bg">
|
|
About
|
|
</p>
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="mt-1">
|
|
<a
|
|
href="https://privsec.dev"
|
|
|
|
target="_blank"
|
|
|
|
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
|
aria-label="Blog"
|
|
title="">
|
|
|
|
|
|
<p class="text-bg font-bg">
|
|
Blog
|
|
</p>
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="mt-1">
|
|
<a
|
|
href="/posts/projects/"
|
|
|
|
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
|
aria-label="Projects"
|
|
title="My Projects">
|
|
|
|
|
|
<p class="text-bg font-bg">
|
|
Projects
|
|
</p>
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="mt-1">
|
|
<a
|
|
href="/posts/contact/"
|
|
|
|
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
|
aria-label="Contact"
|
|
title="Contact Information">
|
|
|
|
|
|
<p class="text-bg font-bg">
|
|
Contact
|
|
</p>
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="mt-1">
|
|
<a
|
|
href="/posts/hire-me/"
|
|
|
|
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
|
aria-label="Hire Me!"
|
|
title="I am open to work!">
|
|
|
|
|
|
<p class="text-bg font-bg">
|
|
Hire Me!
|
|
</p>
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="mt-1">
|
|
<a
|
|
href=""
|
|
|
|
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
|
|
|
title="">
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script
|
|
type="text/javascript"
|
|
src="/js/background-blur.min.00a57c73ea12f2cab2980c3c3d649e89f6d82f190f74bbe2b67f2f5e39ab7d032ece47086400ca05396758aace13299da49aca43ea643d2625e62c506267a169.js"
|
|
integrity="sha512-AKV8c+oS8sqymAw8PWSeifbYLxkPdLvitn8vXjmrfQMuzkcIZADKBTlnWKrOEymdpJrKQ+pkPSYl5ixQYmehaQ=="
|
|
data-blur-id="menu-blur"></script>
|
|
|
|
|
|
<div class="relative flex flex-col grow">
|
|
<main id="main-content" class="grow">
|
|
|
|
|
|
<article>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="hero" class="h-[150px] md:h-[200px]"></div>
|
|
|
|
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom">
|
|
|
|
|
|
|
|
<img
|
|
id="background-image"
|
|
src="/posts/about/featured_hu_67c3d29107c6a118.jpg"
|
|
alt="About Me"
|
|
loading="eager"
|
|
decoding="async"
|
|
fetchpriority="high"
|
|
class="absolute inset-0 w-full h-full object-cover"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
|
|
<div
|
|
class="absolute inset-0 opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal"></div>
|
|
</div>
|
|
|
|
|
|
<div
|
|
id="background-blur"
|
|
class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
|
|
|
|
|
|
<script
|
|
type="text/javascript"
|
|
src="/js/background-blur.min.00a57c73ea12f2cab2980c3c3d649e89f6d82f190f74bbe2b67f2f5e39ab7d032ece47086400ca05396758aace13299da49aca43ea643d2625e62c506267a169.js"
|
|
integrity="sha512-AKV8c+oS8sqymAw8PWSeifbYLxkPdLvitn8vXjmrfQMuzkcIZADKBTlnWKrOEymdpJrKQ+pkPSYl5ixQYmehaQ=="
|
|
data-blur-id="background-blur"
|
|
data-image-id="background-image"
|
|
data-image-url="/posts/about/featured_hu_67c3d29107c6a118.jpg"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<header id="single_header" class="mt-5 max-w-prose">
|
|
|
|
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
|
|
About Me
|
|
</h1>
|
|
<div class="mt-1 mb-6 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flex flex-row flex-wrap items-center">
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flex author">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<img
|
|
class="!mt-0 !mb-0 h-24 w-24 rounded-full me-4"
|
|
width="96"
|
|
height="96"
|
|
alt="Tommy Tran"
|
|
src="/avatar_hu_222307ea33a3cf7d.png"
|
|
data-zoom-src="/avatar.png">
|
|
|
|
|
|
<div class="place-self-center">
|
|
|
|
<div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">
|
|
Author
|
|
</div>
|
|
<div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
|
|
Tommy Tran
|
|
</div>
|
|
|
|
|
|
<div class="text-sm text-neutral-700 dark:text-neutral-400">System Administrator and Technical Writer</div>
|
|
|
|
<div class="text-2xl sm:text-lg">
|
|
<div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
|
|
|
|
|
|
<a
|
|
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
|
|
href="https://github.com/TommyTran732"
|
|
target="_blank"
|
|
aria-label="Github"
|
|
title="Github"
|
|
rel="me noopener noreferrer"
|
|
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" 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"/></svg>
|
|
</span></span></a
|
|
>
|
|
|
|
|
|
|
|
<a
|
|
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
|
|
href="https://git.metropolis.nexus/Tommy"
|
|
target="_blank"
|
|
aria-label="Gitlab"
|
|
title="Gitlab"
|
|
rel="me noopener noreferrer"
|
|
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M510.486,284.482l-27.262-83.963c.012.038.016.077.028.115-.013-.044-.021-.088-.033-.132v-.01L429.1,33.871a21.328,21.328,0,0,0-20.445-14.6A21.038,21.038,0,0,0,388.466,34L337.094,192.154H175L123.533,33.989A21.033,21.033,0,0,0,103.35,19.274h-.113A21.467,21.467,0,0,0,82.86,34L28.888,200.475l-.008.021v0c-.013.042-.019.084-.033.127.012-.038.017-.077.029-.115L1.514,284.482a30.6,30.6,0,0,0,11.117,34.283L248.893,490.427c.035.026.074.041.109.067.1.072.2.146.3.214-.1-.065-.187-.136-.282-.2l0,0c.015.012.033.02.05.031s.027.015.041.024l.006,0a11.992,11.992,0,0,0,1.137.7c.054.03.1.068.157.1l0,0c.033.016.064.038.1.054s.053.02.077.032.038.015.056.023c.044.021.092.034.136.057.205.1.421.178.633.264.2.082.389.177.592.248l.025.011c.034.012.064.028.1.04s.083.032.125.046l.05.012c.053.016.11.024.163.039.019.006.042.009.063.015.284.086.579.148.872.213.115.026.225.062.341.083.017,0,.032.009.05.012.038.008.073.021.112.027.062.011.122.031.186.04.049.007.1,0,.151.012h.033a11.918,11.918,0,0,0,1.7.136h.019a11.971,11.971,0,0,0,1.7-.136h.033c.05-.008.1,0,.153-.012s.124-.029.187-.04c.038-.006.073-.019.11-.027.017,0,.032-.009.049-.012.118-.023.231-.059.349-.084.288-.064.578-.126.861-.21.019-.006.039-.008.059-.014.055-.017.113-.024.169-.041.016-.006.035-.007.051-.012.044-.013.086-.032.129-.047s.063-.028.1-.041l.026-.01c.214-.076.417-.175.627-.261s.394-.154.584-.245c.047-.023.1-.036.142-.059.018-.009.04-.015.058-.024s.053-.02.078-.033.068-.04.1-.056l0,0c.056-.028.106-.069.161-.1a12.341,12.341,0,0,0,1.132-.695c.029-.02.062-.035.092-.056.008-.006.017-.009.024-.015.035-.026.076-.043.11-.068l236.3-171.666A30.6,30.6,0,0,0,510.486,284.482ZM408.8,49.48l46.342,142.674H362.46Zm-305.6,0,46.428,142.675H56.948ZM26.817,299.251a6.526,6.526,0,0,1-2.361-7.308l20.34-62.42L193.835,420.6Zm38.245-82.972h92.411L223.354,419.22Zm183.416,273.83c-.047-.038-.092-.079-.138-.118-.009-.008-.018-.018-.028-.026-.091-.075-.18-.152-.268-.231-.172-.15-.341-.3-.5-.462.014.012.029.022.043.035l.055.046a12.191,12.191,0,0,0,1.091.929l.012.011c.018.013.033.03.051.045C248.689,490.263,248.58,490.19,248.478,490.109Zm7.514-48.482L217.226,322.21,182.839,216.279H329.253Zm7.935,48.107c-.091.079-.178.157-.27.233l-.032.028c-.047.038-.091.079-.136.117-.1.08-.209.152-.313.229.018-.013.033-.032.053-.044l.009-.009a11.69,11.69,0,0,0,1.086-.926c.014-.013.03-.024.044-.036s.038-.03.054-.047C264.262,489.435,264.1,489.586,263.927,489.734Zm90.7-273.455h92.4l-18.91,24.23-139.468,178.7Zm130.567,82.967L318.2,420.563,467.284,229.538l20.258,62.393A6.528,6.528,0,0,1,485.189,299.246Z"/></svg>
|
|
</span></span></a
|
|
>
|
|
|
|
|
|
|
|
<a
|
|
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
|
|
href="https://matrix.to/#/@tommy:metropolis.nexus"
|
|
target="_blank"
|
|
aria-label="Matrix"
|
|
title="Matrix"
|
|
rel="me noopener noreferrer"
|
|
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path fill="currentColor" d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg></span></span></a
|
|
>
|
|
|
|
|
|
|
|
<a
|
|
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
|
|
href="https://t.me/tommytran732"
|
|
target="_blank"
|
|
aria-label="Telegram"
|
|
title="Telegram"
|
|
rel="me noopener noreferrer"
|
|
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>
|
|
</span></span></a
|
|
>
|
|
|
|
|
|
|
|
<a
|
|
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
|
|
href="https://x.com/TommyTran732"
|
|
target="_blank"
|
|
aria-label="X-Twitter"
|
|
title="X-Twitter"
|
|
rel="me noopener noreferrer"
|
|
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg></span></span></a
|
|
>
|
|
|
|
|
|
|
|
<a
|
|
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
|
|
href="https://www.linkedin.com/in/tommytran732"
|
|
target="_blank"
|
|
aria-label="Linkedin"
|
|
title="Linkedin"
|
|
rel="me noopener noreferrer"
|
|
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" 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"/></svg>
|
|
</span></span></a
|
|
>
|
|
|
|
|
|
|
|
<a
|
|
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
|
|
href="mailto:contact@tommytran.io"
|
|
target="_blank"
|
|
aria-label="Email"
|
|
title="Email"
|
|
rel="me noopener noreferrer"
|
|
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1c-27.64 140.9 68.65 266.2 199.1 285.1c19.01 2.888 36.17-12.26 36.17-31.49l.0001-.6631c0-15.74-11.44-28.88-26.84-31.24c-84.35-12.98-149.2-86.13-149.2-174.2c0-102.9 88.61-185.5 193.4-175.4c91.54 8.869 158.6 91.25 158.6 183.2l0 16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98 .0036c-7.299 0-13.2 4.992-15.12 11.68c-24.85-12.15-54.24-16.38-86.06-5.106c-38.75 13.73-68.12 48.91-73.72 89.64c-9.483 69.01 43.81 128 110.9 128c26.44 0 50.43-9.544 69.59-24.88c24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3C495.1 107.1 361.2-9.332 207.8 20.73zM239.1 304.3c-26.47 0-48-21.56-48-48.05s21.53-48.05 48-48.05s48 21.56 48 48.05S266.5 304.3 239.1 304.3z"/></svg>
|
|
</span></span></a
|
|
>
|
|
|
|
|
|
|
|
<a
|
|
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
|
|
href="/.well-known/pgp-key.txt"
|
|
target="_blank"
|
|
aria-label="Pgpkey"
|
|
title="Pgpkey"
|
|
rel="me noopener noreferrer"
|
|
><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path fill="currentColor" d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zm40-176c-22.1 0-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40s-17.9 40-40 40z"/></svg></span></span></a
|
|
>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="mb-5"></div>
|
|
|
|
|
|
|
|
</header>
|
|
|
|
|
|
<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="min-w-0 min-h-0 max-w-fit">
|
|
|
|
|
|
<div class="article-content max-w-prose mb-20">
|
|
<p>Hello! 👋</p>
|
|
<p>I’m Thien, though you may know me as Tommy. With over five years of experience as a Linux system administrator, I specialize in managing a diverse range of Linux distributions, including Red Hat, Debian, SUSE, and Arch Linux. Recently, I’ve been diving into the world of containers and immutable distributions, which I find both innovative and exciting.</p>
|
|
<p>Like most Linux users, I am an open source enthusiast and publish most of the projects made in my free time on <a
|
|
href="https://github.com/tommytran732"
|
|
target="_blank"
|
|
>GitHub</a>. I also made a couple of small contributions to various projets as well.</p>
|
|
<p>I host several services, such as Matrix and Mastodon, free of charge. If you’re curious, feel free to explore <a
|
|
href="https://metropolis.nexus"
|
|
target="_blank"
|
|
>Metropolis Nexus</a>, where you might find resources or services that suit your needs.</p>
|
|
<p>Together with friends I connected with through GrapheneOS, I co-author a blog, <a
|
|
href="https://privsec.dev"
|
|
target="_blank"
|
|
>PrivSec.dev</a>, where we explore topics related to privacy and security.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script
|
|
type="text/javascript"
|
|
src="/js/page.min.54b6f4371722649edbe871e431d8670d670878c22be8f36e229fe53cc9b786fe25a834def5e6de621f7a3e37b72bc8cd73839aa5ed907ed6cbd45cd3e1b0fa20.js"
|
|
integrity="sha512-VLb0NxciZJ7b6HHkMdhnDWcIeMIr6PNuIp/lPMm3hv4lqDTe9ebeYh96Pje3K8jNc4Oape2QftbL1FzT4bD6IA=="
|
|
data-oid="views_posts/about/index.md"
|
|
data-oid-likes="likes_posts/about/index.md"></script>
|
|
|
|
</section>
|
|
|
|
|
|
<footer class="pt-8 max-w-prose print:hidden">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="pt-8">
|
|
<hr class="border-dotted border-neutral-300 dark:border-neutral-600">
|
|
<div class="flex justify-between pt-3">
|
|
<span class="flex flex-col">
|
|
|
|
<a
|
|
class="flex text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
|
|
href="/posts/contact/">
|
|
<span class="leading-6">
|
|
<span class="inline-block rtl:rotate-180">←</span> Contact Information
|
|
</span>
|
|
</a>
|
|
|
|
|
|
</span>
|
|
<span class="flex flex-col items-end">
|
|
|
|
<a
|
|
class="flex text-right text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
|
|
href="/posts/hire-me/">
|
|
<span class="leading-6">
|
|
I am open to work! <span class="inline-block rtl:rotate-180">→</span>
|
|
</span>
|
|
</a>
|
|
|
|
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</footer>
|
|
</article>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div
|
|
id="scroll-to-top"
|
|
class="fixed bottom-24 end-6 z-50 transform translate-y-4 opacity-0 duration-200">
|
|
<a
|
|
href="#the-top"
|
|
class="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
|
|
aria-label="Scroll to top"
|
|
title="Scroll to top">
|
|
↑
|
|
</a>
|
|
</div>
|
|
|
|
</main><footer id="site-footer" class="py-10 print:hidden">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<nav class="flex flex-row pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400 overflow-x-auto py-2">
|
|
<ul class="flex list-none flex-row">
|
|
|
|
<li class=" flex mb-1 text-end sm:mb-0 sm:me-7 sm:last:me-0 me-4">
|
|
<a
|
|
class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2 flex items-center"
|
|
href=""
|
|
title="">
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
|
|
<p class="text-sm text-neutral-500 dark:text-neutral-400">
|
|
©
|
|
2025
|
|
Tommy Tran
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p class="text-xs text-neutral-500 dark:text-neutral-400">
|
|
|
|
|
|
Powered by <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
|
|
href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
|
|
href="https://blowfish.page/" target="_blank" rel="noopener noreferrer">Blowfish</a>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
mediumZoom(document.querySelectorAll("img:not(.nozoom)"), {
|
|
margin: 24,
|
|
background: "rgba(0,0,0,0.5)",
|
|
scrollOffset: 0,
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<script
|
|
type="text/javascript"
|
|
src="/js/process.min.ee03488f19c93c2efb199e2e3014ea5f3cb2ce7d45154adb3399a158cac27ca52831db249ede5bb602700ef87eb02434139de0858af1818ab0fb4182472204a4.js"
|
|
integrity="sha512-7gNIjxnJPC77GZ4uMBTqXzyyzn1FFUrbM5mhWMrCfKUoMdsknt5btgJwDvh+sCQ0E53ghYrxgYqw+0GCRyIEpA=="></script>
|
|
|
|
|
|
</footer>
|
|
<div
|
|
id="search-wrapper"
|
|
class="invisible fixed inset-0 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh] z-500"
|
|
data-url="http://localhost:1313/">
|
|
<div
|
|
id="search-modal"
|
|
class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800">
|
|
<header class="relative z-10 flex items-center justify-between flex-none px-2">
|
|
<form class="flex items-center flex-auto min-w-0">
|
|
<div class="flex items-center justify-center w-8 h-8 text-neutral-400">
|
|
<span class="relative block icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
|
|
</span>
|
|
</div>
|
|
<input
|
|
type="search"
|
|
id="search-query"
|
|
class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-2 focus:outline-transparent"
|
|
placeholder="Search"
|
|
tabindex="0">
|
|
</form>
|
|
<button
|
|
id="close-search-button"
|
|
class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
|
|
title="Close (Esc)">
|
|
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
|
|
</span>
|
|
</button>
|
|
</header>
|
|
<section class="flex-auto px-2 overflow-auto">
|
|
<ul id="search-results">
|
|
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|