mirror of
https://github.com/hazemKrimi/personal-website.git
synced 2026-05-01 18:00:26 +00:00
457 lines
29 KiB
HTML
457 lines
29 KiB
HTML
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head><script src="/livereload.js?mindelay=10&v=2&port=40885&path=livereload" data-no-instant defer></script>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="theme-color" content="#BD1839" />
|
|
|
|
<meta
|
|
name="description"
|
|
content="UI component library utilizing Vite and Storybook to be used in my personal projects."
|
|
>
|
|
<meta
|
|
name="keywords"
|
|
content='Hazem Krimi, Software Engineer, Software Developer, Full Stack Developer, JavaScript, TypeScript, React.js, Node.js, Go, Golang, Scala, Kotlin, SQL, GraphQL, MongoDB, Corda'
|
|
>
|
|
<meta name="robots" content="index, follow">
|
|
<meta property="og:title" content="Crimson Quirks UI | Hazem Krimi">
|
|
<meta
|
|
property="og:description"
|
|
content="UI component library utilizing Vite and Storybook to be used in my personal projects."
|
|
>
|
|
<meta
|
|
property="og:image"
|
|
content="http://localhost:40885/images/big-face.webp"
|
|
>
|
|
<meta property="og:url" content="http://localhost:40885/projects/crimson-quirks-ui/">
|
|
|
|
|
|
|
|
|
|
<link rel="canonical" href="http://localhost:40885/projects/crimson-quirks-ui/">
|
|
<link rel="icon" sizes="192x192" href="http://localhost:40885/android-chrome-192x192.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="http://localhost:40885/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:40885/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:40885/favicon-16x16.png">
|
|
<link rel="icon" type="image/x-icon" href="http://localhost:40885/favicon.ico">
|
|
|
|
<link rel="stylesheet" href="http://localhost:40885/css/baseof.min.css">
|
|
<link rel="stylesheet" href="http://localhost:40885/css/partials.min.css">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="http://localhost:40885/css/single.min.css" />
|
|
|
|
|
|
<title>
|
|
|
|
Crimson Quirks UI | Hazem Krimi
|
|
|
|
</title>
|
|
|
|
<script defer src="http://localhost:40885/js/baseof.min.js"></script>
|
|
<script defer src="http://localhost:40885/js/mobile-navigation.min.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<header>
|
|
<div id="header-face">
|
|
<img src="http://localhost:40885/images/small-face.webp" alt="Hazem Krimi's face" />
|
|
<span>Hazem Krimi</span>
|
|
</div>
|
|
<div id="menus">
|
|
|
|
<a href="/" >Home</a>
|
|
|
|
<a href="/about" >About</a>
|
|
|
|
<a href="/projects" >Projects</a>
|
|
|
|
<a href="/blog" >Blog</a>
|
|
|
|
<a href="/hazem-krimi.pdf" target="_blank">Resume</a>
|
|
|
|
</div>
|
|
<div id="links">
|
|
<a
|
|
aria-label="Hazem Krimi's Github profile"
|
|
href="https://github.com/hazemKrimi" target="_blank"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clip-path="url(#clip0_193_2670)">
|
|
<path class='github' d="M9 18.9999C4 20.4999 4 16.4999 2 15.9999M16 21.9999V18.1299C16.0375 17.6531 15.9731 17.1737 15.811 16.7237C15.6489 16.2737 15.3929 15.8634 15.06 15.5199C18.2 15.1699 21.5 13.9799 21.5 8.51994C21.4997 7.12376 20.9627 5.78114 20 4.76994C20.4559 3.54844 20.4236 2.19829 19.91 0.999938C19.91 0.999938 18.73 0.649938 16 2.47994C13.708 1.85876 11.292 1.85876 9 2.47994C6.27 0.649938 5.09 0.999938 5.09 0.999938C4.57638 2.19829 4.54414 3.54844 5 4.76994C4.03013 5.78864 3.49252 7.1434 3.5 8.54994C3.5 13.9699 6.8 15.1599 9.94 15.5499C9.611 15.8899 9.35726 16.2953 9.19531 16.7399C9.03335 17.1844 8.96681 17.658 9 18.1299V21.9999" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_193_2670">
|
|
<rect width="24" height="24" fill="white"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's Twitter or X profile"
|
|
href="https://twitter.com/HazemKrimi"
|
|
target="_blank"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clip-path="url(#clip0_193_2669)">
|
|
<path class='twitter' d="M18.2439 2.25H21.5519L14.3249 10.51L22.8269 21.75H16.1699L10.9559 14.933L4.98991 21.75H1.67991L9.40991 12.915L1.25391 2.25H8.07991L12.7929 8.481L18.2439 2.25ZM17.0829 19.77H18.9159L7.08391 4.126H5.11691L17.0829 19.77Z" fill="black"/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_193_2669">
|
|
<rect width="24" height="24" fill="white"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's Linkedin profile"
|
|
href="https://www.linkedin.com/in/hazemkrimi" target="_blank">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path class='linkedin' d="M16 8C17.5913 8 19.1174 8.63214 20.2426 9.75736C21.3679 10.8826 22 12.4087 22 14V21H18V14C18 13.4696 17.7893 12.9609 17.4142 12.5858C17.0391 12.2107 16.5304 12 16 12C15.4696 12 14.9609 12.2107 14.5858 12.5858C14.2107 12.9609 14 13.4696 14 14V21H10V14C10 12.4087 10.6321 10.8826 11.7574 9.75736C12.8826 8.63214 14.4087 8 16 8Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class='linkedin' d="M6 9H2V21H6V9Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class='linkedin' d="M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's Email"
|
|
href="mailto:me@hazemkrimi.tech"
|
|
target="_blank"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path class='mail' d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class='mail' d="M22 6L12 13L2 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's content RSS feed"
|
|
href="http://localhost:40885/index.xml"
|
|
target="_blank"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path class='rss' d="M9.53812 14.4619C10.2017 15.1221 10.7278 15.9073 11.086 16.772C11.4442 17.6368 11.6274 18.564 11.625 19.5001C11.625 19.7984 11.5065 20.0846 11.2955 20.2956C11.0845 20.5065 10.7984 20.6251 10.5 20.6251C10.2016 20.6251 9.91548 20.5065 9.7045 20.2956C9.49353 20.0846 9.375 19.7984 9.375 19.5001C9.375 18.2071 8.86139 16.9672 7.94715 16.0529C7.03291 15.1387 5.79293 14.6251 4.5 14.6251C4.20163 14.6251 3.91548 14.5065 3.70451 14.2956C3.49353 14.0846 3.375 13.7984 3.375 13.5001C3.375 13.2017 3.49353 12.9155 3.70451 12.7046C3.91548 12.4936 4.20163 12.3751 4.5 12.3751C5.43604 12.3725 6.36328 12.5557 7.22807 12.9139C8.09286 13.2721 8.87803 13.7983 9.53812 14.4619ZM4.5 7.87506C4.20163 7.87506 3.91548 7.99359 3.70451 8.20457C3.49353 8.41554 3.375 8.70169 3.375 9.00006C3.375 9.29843 3.49353 9.58458 3.70451 9.79556C3.91548 10.0065 4.20163 10.1251 4.5 10.1251C6.9864 10.1251 9.37097 11.1128 11.1291 12.8709C12.8873 14.6291 13.875 17.0137 13.875 19.5001C13.875 19.7984 13.9935 20.0846 14.2045 20.2956C14.4155 20.5065 14.7016 20.6251 15 20.6251C15.2984 20.6251 15.5845 20.5065 15.7955 20.2956C16.0065 20.0846 16.125 19.7984 16.125 19.5001C16.125 16.4169 14.9002 13.4601 12.7201 11.2799C10.54 9.09983 7.58314 7.87506 4.5 7.87506ZM15.9019 8.09819C14.4081 6.59603 12.6313 5.40511 10.6741 4.59438C8.71695 3.78365 6.61842 3.36921 4.5 3.37506C4.20163 3.37506 3.91548 3.49359 3.70451 3.70457C3.49353 3.91554 3.375 4.20169 3.375 4.50006C3.375 4.79843 3.49353 5.08458 3.70451 5.29556C3.91548 5.50653 4.20163 5.62506 4.5 5.62506C6.32283 5.61997 8.12857 5.97655 9.81264 6.67415C11.4967 7.37176 13.0257 8.39653 14.3109 9.68912C15.6035 10.9744 16.6283 12.5033 17.3259 14.1874C18.0235 15.8715 18.3801 17.6772 18.375 19.5001C18.375 19.7984 18.4935 20.0846 18.7045 20.2956C18.9155 20.5065 19.2016 20.6251 19.5 20.6251C19.7984 20.6251 20.0845 20.5065 20.2955 20.2956C20.5065 20.0846 20.625 19.7984 20.625 19.5001C20.6309 17.3816 20.2164 15.2831 19.4057 13.326C18.5949 11.3688 17.404 9.59192 15.9019 8.09819ZM4.875 17.6251C4.57833 17.6251 4.28832 17.713 4.04165 17.8779C3.79497 18.0427 3.60271 18.2769 3.48918 18.551C3.37565 18.8251 3.34594 19.1267 3.40382 19.4177C3.4617 19.7087 3.60456 19.9759 3.81434 20.1857C4.02412 20.3955 4.29139 20.5384 4.58237 20.5962C4.87334 20.6541 5.17494 20.6244 5.44903 20.5109C5.72311 20.3973 5.95738 20.2051 6.12221 19.9584C6.28703 19.7117 6.375 19.4217 6.375 19.1251C6.375 18.7272 6.21697 18.3457 5.93566 18.0644C5.65436 17.7831 5.27283 17.6251 4.875 17.6251Z" fill="black"/>
|
|
</svg>
|
|
|
|
</a>
|
|
<div class="vertical-separator"></div>
|
|
<a
|
|
href="#"
|
|
class="theme-toggler"
|
|
aria-label="Theme toggler"
|
|
>
|
|
<svg class='moon' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M23.7259 14.3764C23.6052 14.2554 23.4538 14.1695 23.2879 14.128C23.1221 14.0866 22.9481 14.0911 22.7846 14.141C20.9897 14.6838 19.0812 14.7293 17.2625 14.2727C15.4437 13.8161 13.7829 12.8745 12.457 11.5484C11.1311 10.2221 10.1897 8.56099 9.73324 6.74189C9.27675 4.92278 9.32225 3.01388 9.86488 1.2186C9.91524 1.05501 9.92006 0.880785 9.87883 0.714661C9.83759 0.548537 9.75186 0.396799 9.63085 0.275766C9.50984 0.154733 9.35814 0.0689834 9.19205 0.0277403C9.02596 -0.0135029 8.85177 -0.00867944 8.68822 0.0416917C6.20667 0.802025 4.02809 2.32582 2.4625 4.39624C1.09335 6.21439 0.258206 8.37838 0.0508907 10.6451C-0.156425 12.9118 0.272303 15.1915 1.28891 17.2279C2.30551 19.2643 3.86972 20.9769 5.80579 22.1732C7.74186 23.3695 9.97308 24.0021 12.2488 23.9999C14.9037 24.0081 17.4881 23.1448 19.6053 21.5426C21.6753 19.9766 23.1988 17.7976 23.9589 15.3156C24.0087 15.1526 24.0133 14.9791 23.9723 14.8137C23.9313 14.6484 23.8461 14.4972 23.7259 14.3764ZM18.4733 20.0385C16.4795 21.5405 14.0104 22.2716 11.5204 22.0973C9.03039 21.9229 6.68719 20.8547 4.92212 19.0894C3.15705 17.3241 2.08893 14.9805 1.91438 12.49C1.73982 9.99955 2.47059 7.52982 3.97216 5.53548C4.95044 4.24331 6.21519 3.19585 7.66687 2.47553C7.58418 3.05601 7.5425 3.6416 7.54215 4.22794C7.54557 7.47309 8.83596 10.5843 11.1301 12.879C13.4243 15.1737 16.535 16.4643 19.7794 16.4678C20.3668 16.4676 20.9535 16.4259 21.535 16.343C20.8142 17.7952 19.7661 19.0603 18.4733 20.0385Z" fill="black"/>
|
|
</svg>
|
|
|
|
<svg class='sun' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clip-path="url(#clip0_193_2685)">
|
|
<path d="M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_193_2685">
|
|
<rect width="24" height="24" fill="white"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
</a>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
id="nav-toggler"
|
|
aria-label="Mobile navigation toggler"
|
|
>
|
|
<svg id='burger' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
|
|
<svg id='close' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 6L6 18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M6 6L18 18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
|
|
</a>
|
|
</header>
|
|
|
|
<nav id="mobile-navigation">
|
|
<div id="menus">
|
|
|
|
<a href="/" >Home</a>
|
|
|
|
<a href="/about" >About</a>
|
|
|
|
<a href="/projects" >Projects</a>
|
|
|
|
<a href="/blog" >Blog</a>
|
|
|
|
<a href="/hazem-krimi.pdf" target="_blank">Resume</a>
|
|
|
|
</div>
|
|
<hr>
|
|
<div id="links">
|
|
<a
|
|
href="#"
|
|
class="theme-toggler"
|
|
aria-label="Theme toggler"
|
|
>
|
|
<svg class='moon' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M23.7259 14.3764C23.6052 14.2554 23.4538 14.1695 23.2879 14.128C23.1221 14.0866 22.9481 14.0911 22.7846 14.141C20.9897 14.6838 19.0812 14.7293 17.2625 14.2727C15.4437 13.8161 13.7829 12.8745 12.457 11.5484C11.1311 10.2221 10.1897 8.56099 9.73324 6.74189C9.27675 4.92278 9.32225 3.01388 9.86488 1.2186C9.91524 1.05501 9.92006 0.880785 9.87883 0.714661C9.83759 0.548537 9.75186 0.396799 9.63085 0.275766C9.50984 0.154733 9.35814 0.0689834 9.19205 0.0277403C9.02596 -0.0135029 8.85177 -0.00867944 8.68822 0.0416917C6.20667 0.802025 4.02809 2.32582 2.4625 4.39624C1.09335 6.21439 0.258206 8.37838 0.0508907 10.6451C-0.156425 12.9118 0.272303 15.1915 1.28891 17.2279C2.30551 19.2643 3.86972 20.9769 5.80579 22.1732C7.74186 23.3695 9.97308 24.0021 12.2488 23.9999C14.9037 24.0081 17.4881 23.1448 19.6053 21.5426C21.6753 19.9766 23.1988 17.7976 23.9589 15.3156C24.0087 15.1526 24.0133 14.9791 23.9723 14.8137C23.9313 14.6484 23.8461 14.4972 23.7259 14.3764ZM18.4733 20.0385C16.4795 21.5405 14.0104 22.2716 11.5204 22.0973C9.03039 21.9229 6.68719 20.8547 4.92212 19.0894C3.15705 17.3241 2.08893 14.9805 1.91438 12.49C1.73982 9.99955 2.47059 7.52982 3.97216 5.53548C4.95044 4.24331 6.21519 3.19585 7.66687 2.47553C7.58418 3.05601 7.5425 3.6416 7.54215 4.22794C7.54557 7.47309 8.83596 10.5843 11.1301 12.879C13.4243 15.1737 16.535 16.4643 19.7794 16.4678C20.3668 16.4676 20.9535 16.4259 21.535 16.343C20.8142 17.7952 19.7661 19.0603 18.4733 20.0385Z" fill="black"/>
|
|
</svg>
|
|
|
|
<svg class='sun' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clip-path="url(#clip0_193_2685)">
|
|
<path d="M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_193_2685">
|
|
<rect width="24" height="24" fill="white"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's content RSS feed"
|
|
href="http://localhost:40885/index.xml"
|
|
target="_blank"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path class='rss' d="M9.53812 14.4619C10.2017 15.1221 10.7278 15.9073 11.086 16.772C11.4442 17.6368 11.6274 18.564 11.625 19.5001C11.625 19.7984 11.5065 20.0846 11.2955 20.2956C11.0845 20.5065 10.7984 20.6251 10.5 20.6251C10.2016 20.6251 9.91548 20.5065 9.7045 20.2956C9.49353 20.0846 9.375 19.7984 9.375 19.5001C9.375 18.2071 8.86139 16.9672 7.94715 16.0529C7.03291 15.1387 5.79293 14.6251 4.5 14.6251C4.20163 14.6251 3.91548 14.5065 3.70451 14.2956C3.49353 14.0846 3.375 13.7984 3.375 13.5001C3.375 13.2017 3.49353 12.9155 3.70451 12.7046C3.91548 12.4936 4.20163 12.3751 4.5 12.3751C5.43604 12.3725 6.36328 12.5557 7.22807 12.9139C8.09286 13.2721 8.87803 13.7983 9.53812 14.4619ZM4.5 7.87506C4.20163 7.87506 3.91548 7.99359 3.70451 8.20457C3.49353 8.41554 3.375 8.70169 3.375 9.00006C3.375 9.29843 3.49353 9.58458 3.70451 9.79556C3.91548 10.0065 4.20163 10.1251 4.5 10.1251C6.9864 10.1251 9.37097 11.1128 11.1291 12.8709C12.8873 14.6291 13.875 17.0137 13.875 19.5001C13.875 19.7984 13.9935 20.0846 14.2045 20.2956C14.4155 20.5065 14.7016 20.6251 15 20.6251C15.2984 20.6251 15.5845 20.5065 15.7955 20.2956C16.0065 20.0846 16.125 19.7984 16.125 19.5001C16.125 16.4169 14.9002 13.4601 12.7201 11.2799C10.54 9.09983 7.58314 7.87506 4.5 7.87506ZM15.9019 8.09819C14.4081 6.59603 12.6313 5.40511 10.6741 4.59438C8.71695 3.78365 6.61842 3.36921 4.5 3.37506C4.20163 3.37506 3.91548 3.49359 3.70451 3.70457C3.49353 3.91554 3.375 4.20169 3.375 4.50006C3.375 4.79843 3.49353 5.08458 3.70451 5.29556C3.91548 5.50653 4.20163 5.62506 4.5 5.62506C6.32283 5.61997 8.12857 5.97655 9.81264 6.67415C11.4967 7.37176 13.0257 8.39653 14.3109 9.68912C15.6035 10.9744 16.6283 12.5033 17.3259 14.1874C18.0235 15.8715 18.3801 17.6772 18.375 19.5001C18.375 19.7984 18.4935 20.0846 18.7045 20.2956C18.9155 20.5065 19.2016 20.6251 19.5 20.6251C19.7984 20.6251 20.0845 20.5065 20.2955 20.2956C20.5065 20.0846 20.625 19.7984 20.625 19.5001C20.6309 17.3816 20.2164 15.2831 19.4057 13.326C18.5949 11.3688 17.404 9.59192 15.9019 8.09819ZM4.875 17.6251C4.57833 17.6251 4.28832 17.713 4.04165 17.8779C3.79497 18.0427 3.60271 18.2769 3.48918 18.551C3.37565 18.8251 3.34594 19.1267 3.40382 19.4177C3.4617 19.7087 3.60456 19.9759 3.81434 20.1857C4.02412 20.3955 4.29139 20.5384 4.58237 20.5962C4.87334 20.6541 5.17494 20.6244 5.44903 20.5109C5.72311 20.3973 5.95738 20.2051 6.12221 19.9584C6.28703 19.7117 6.375 19.4217 6.375 19.1251C6.375 18.7272 6.21697 18.3457 5.93566 18.0644C5.65436 17.7831 5.27283 17.6251 4.875 17.6251Z" fill="black"/>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's Email"
|
|
href="mailto:me@hazemkrimi.tech"
|
|
target="_blank"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path class='mail' d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class='mail' d="M22 6L12 13L2 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's Linkedin profile"
|
|
href="https://www.linkedin.com/in/hazemkrimi"
|
|
target="_blank"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path class='linkedin' d="M16 8C17.5913 8 19.1174 8.63214 20.2426 9.75736C21.3679 10.8826 22 12.4087 22 14V21H18V14C18 13.4696 17.7893 12.9609 17.4142 12.5858C17.0391 12.2107 16.5304 12 16 12C15.4696 12 14.9609 12.2107 14.5858 12.5858C14.2107 12.9609 14 13.4696 14 14V21H10V14C10 12.4087 10.6321 10.8826 11.7574 9.75736C12.8826 8.63214 14.4087 8 16 8Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class='linkedin' d="M6 9H2V21H6V9Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class='linkedin' d="M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's Twitter or X profile"
|
|
href="https://twitter.com/HazemKrimi"
|
|
target="_blank"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clip-path="url(#clip0_193_2669)">
|
|
<path class='twitter' d="M18.2439 2.25H21.5519L14.3249 10.51L22.8269 21.75H16.1699L10.9559 14.933L4.98991 21.75H1.67991L9.40991 12.915L1.25391 2.25H8.07991L12.7929 8.481L18.2439 2.25ZM17.0829 19.77H18.9159L7.08391 4.126H5.11691L17.0829 19.77Z" fill="black"/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_193_2669">
|
|
<rect width="24" height="24" fill="white"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's Github profile"
|
|
href="https://github.com/hazemKrimi"
|
|
target="_blank"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clip-path="url(#clip0_193_2670)">
|
|
<path class='github' d="M9 18.9999C4 20.4999 4 16.4999 2 15.9999M16 21.9999V18.1299C16.0375 17.6531 15.9731 17.1737 15.811 16.7237C15.6489 16.2737 15.3929 15.8634 15.06 15.5199C18.2 15.1699 21.5 13.9799 21.5 8.51994C21.4997 7.12376 20.9627 5.78114 20 4.76994C20.4559 3.54844 20.4236 2.19829 19.91 0.999938C19.91 0.999938 18.73 0.649938 16 2.47994C13.708 1.85876 11.292 1.85876 9 2.47994C6.27 0.649938 5.09 0.999938 5.09 0.999938C4.57638 2.19829 4.54414 3.54844 5 4.76994C4.03013 5.78864 3.49252 7.1434 3.5 8.54994C3.5 13.9699 6.8 15.1599 9.94 15.5499C9.611 15.8899 9.35726 16.2953 9.19531 16.7399C9.03335 17.1844 8.96681 17.658 9 18.1299V21.9999" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_193_2670">
|
|
<rect width="24" height="24" fill="white"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main>
|
|
|
|
<div id="container">
|
|
<div>
|
|
<nav aria-label="breadcrumb" class="breadcrumb">
|
|
<ol>
|
|
|
|
|
|
<li>
|
|
<a href="http://localhost:40885/">Home</a>
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
<a href="http://localhost:40885/projects/">Projects</a>
|
|
</li>
|
|
|
|
|
|
<li class="active">
|
|
<a
|
|
aria-current="page"
|
|
class=""
|
|
href="http://localhost:40885/projects/crimson-quirks-ui/"
|
|
>
|
|
Crimson Quirks UI
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
|
|
<section id="metadata">
|
|
<h1>Crimson Quirks UI</h1>
|
|
<div>
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path class="calendar" d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class="calendar" d="M16 2V6" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class="calendar" d="M8 2V6" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class="calendar" d="M3 10H21" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg> 17 March 2025</span>
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path class="clock" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class="clock" d="M12 6V12L16 14" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg> 0 minute(s) read</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="content">
|
|
<div>
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
|
|
<aside id="table-of-contents">
|
|
<span>Table of contents</span>
|
|
<nav id="TableOfContents"></nav>
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
|
|
|
|
<footer>
|
|
<div id="footer-face">
|
|
<img src="http://localhost:40885/images/small-face.webp" alt="Hazem Krimi" />
|
|
<span>Hazem Krimi</span>
|
|
</div>
|
|
<div id="links">
|
|
<a
|
|
aria-label="Hazem Krimi's Github profile"
|
|
href="https://github.com/hazemKrimi"
|
|
target="_blank"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clip-path="url(#clip0_193_2670)">
|
|
<path class='github' d="M9 18.9999C4 20.4999 4 16.4999 2 15.9999M16 21.9999V18.1299C16.0375 17.6531 15.9731 17.1737 15.811 16.7237C15.6489 16.2737 15.3929 15.8634 15.06 15.5199C18.2 15.1699 21.5 13.9799 21.5 8.51994C21.4997 7.12376 20.9627 5.78114 20 4.76994C20.4559 3.54844 20.4236 2.19829 19.91 0.999938C19.91 0.999938 18.73 0.649938 16 2.47994C13.708 1.85876 11.292 1.85876 9 2.47994C6.27 0.649938 5.09 0.999938 5.09 0.999938C4.57638 2.19829 4.54414 3.54844 5 4.76994C4.03013 5.78864 3.49252 7.1434 3.5 8.54994C3.5 13.9699 6.8 15.1599 9.94 15.5499C9.611 15.8899 9.35726 16.2953 9.19531 16.7399C9.03335 17.1844 8.96681 17.658 9 18.1299V21.9999" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_193_2670">
|
|
<rect width="24" height="24" fill="white"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's Twitter or X profile"
|
|
href="https://twitter.com/HazemKrimi"
|
|
target="_blank"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clip-path="url(#clip0_193_2669)">
|
|
<path class='twitter' d="M18.2439 2.25H21.5519L14.3249 10.51L22.8269 21.75H16.1699L10.9559 14.933L4.98991 21.75H1.67991L9.40991 12.915L1.25391 2.25H8.07991L12.7929 8.481L18.2439 2.25ZM17.0829 19.77H18.9159L7.08391 4.126H5.11691L17.0829 19.77Z" fill="black"/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_193_2669">
|
|
<rect width="24" height="24" fill="white"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's Linkedin profile"
|
|
href="https://www.linkedin.com/in/hazemkrimi"
|
|
target="_blank"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path class='linkedin' d="M16 8C17.5913 8 19.1174 8.63214 20.2426 9.75736C21.3679 10.8826 22 12.4087 22 14V21H18V14C18 13.4696 17.7893 12.9609 17.4142 12.5858C17.0391 12.2107 16.5304 12 16 12C15.4696 12 14.9609 12.2107 14.5858 12.5858C14.2107 12.9609 14 13.4696 14 14V21H10V14C10 12.4087 10.6321 10.8826 11.7574 9.75736C12.8826 8.63214 14.4087 8 16 8Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class='linkedin' d="M6 9H2V21H6V9Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class='linkedin' d="M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's Email"
|
|
href="mailto:me@hazemkrimi.tech"
|
|
target="_blank"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path class='mail' d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path class='mail' d="M22 6L12 13L2 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
|
|
</a>
|
|
<a
|
|
aria-label="Hazem Krimi's content RSS feed"
|
|
href="http://localhost:40885/index.xml"
|
|
target="_blank"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path class='rss' d="M9.53812 14.4619C10.2017 15.1221 10.7278 15.9073 11.086 16.772C11.4442 17.6368 11.6274 18.564 11.625 19.5001C11.625 19.7984 11.5065 20.0846 11.2955 20.2956C11.0845 20.5065 10.7984 20.6251 10.5 20.6251C10.2016 20.6251 9.91548 20.5065 9.7045 20.2956C9.49353 20.0846 9.375 19.7984 9.375 19.5001C9.375 18.2071 8.86139 16.9672 7.94715 16.0529C7.03291 15.1387 5.79293 14.6251 4.5 14.6251C4.20163 14.6251 3.91548 14.5065 3.70451 14.2956C3.49353 14.0846 3.375 13.7984 3.375 13.5001C3.375 13.2017 3.49353 12.9155 3.70451 12.7046C3.91548 12.4936 4.20163 12.3751 4.5 12.3751C5.43604 12.3725 6.36328 12.5557 7.22807 12.9139C8.09286 13.2721 8.87803 13.7983 9.53812 14.4619ZM4.5 7.87506C4.20163 7.87506 3.91548 7.99359 3.70451 8.20457C3.49353 8.41554 3.375 8.70169 3.375 9.00006C3.375 9.29843 3.49353 9.58458 3.70451 9.79556C3.91548 10.0065 4.20163 10.1251 4.5 10.1251C6.9864 10.1251 9.37097 11.1128 11.1291 12.8709C12.8873 14.6291 13.875 17.0137 13.875 19.5001C13.875 19.7984 13.9935 20.0846 14.2045 20.2956C14.4155 20.5065 14.7016 20.6251 15 20.6251C15.2984 20.6251 15.5845 20.5065 15.7955 20.2956C16.0065 20.0846 16.125 19.7984 16.125 19.5001C16.125 16.4169 14.9002 13.4601 12.7201 11.2799C10.54 9.09983 7.58314 7.87506 4.5 7.87506ZM15.9019 8.09819C14.4081 6.59603 12.6313 5.40511 10.6741 4.59438C8.71695 3.78365 6.61842 3.36921 4.5 3.37506C4.20163 3.37506 3.91548 3.49359 3.70451 3.70457C3.49353 3.91554 3.375 4.20169 3.375 4.50006C3.375 4.79843 3.49353 5.08458 3.70451 5.29556C3.91548 5.50653 4.20163 5.62506 4.5 5.62506C6.32283 5.61997 8.12857 5.97655 9.81264 6.67415C11.4967 7.37176 13.0257 8.39653 14.3109 9.68912C15.6035 10.9744 16.6283 12.5033 17.3259 14.1874C18.0235 15.8715 18.3801 17.6772 18.375 19.5001C18.375 19.7984 18.4935 20.0846 18.7045 20.2956C18.9155 20.5065 19.2016 20.6251 19.5 20.6251C19.7984 20.6251 20.0845 20.5065 20.2955 20.2956C20.5065 20.0846 20.625 19.7984 20.625 19.5001C20.6309 17.3816 20.2164 15.2831 19.4057 13.326C18.5949 11.3688 17.404 9.59192 15.9019 8.09819ZM4.875 17.6251C4.57833 17.6251 4.28832 17.713 4.04165 17.8779C3.79497 18.0427 3.60271 18.2769 3.48918 18.551C3.37565 18.8251 3.34594 19.1267 3.40382 19.4177C3.4617 19.7087 3.60456 19.9759 3.81434 20.1857C4.02412 20.3955 4.29139 20.5384 4.58237 20.5962C4.87334 20.6541 5.17494 20.6244 5.44903 20.5109C5.72311 20.3973 5.95738 20.2051 6.12221 19.9584C6.28703 19.7117 6.375 19.4217 6.375 19.1251C6.375 18.7272 6.21697 18.3457 5.93566 18.0644C5.65436 17.7831 5.27283 17.6251 4.875 17.6251Z" fill="black"/>
|
|
</svg>
|
|
|
|
</a>
|
|
</div>
|
|
<p id="copyright"></p>
|
|
<script>
|
|
const copyright = (document.querySelector(
|
|
'#copyright'
|
|
).innerHTML = `Hazem Krimi © ${new Date().getFullYear()}`);
|
|
</script>
|
|
</footer>
|
|
|
|
|
|
</body>
|
|
</html>
|