105 lines
No EOL
19 KiB
HTML
105 lines
No EOL
19 KiB
HTML
<!DOCTYPE html><html lang="en" data-astro-cid-sckkx6r4> <head><meta charset="UTF-8"><meta name="description" content="Astro description"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.0.6"><title>aleidk</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><!-- Reset and normilize styles --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir"><link rel="stylesheet" href="/_astro/blog.Ema8tGxn.css" />
|
|
<style>.card[data-astro-cid-dohjnao5]{background-color:var(--prj-surface-2);color:var(--prj-surface-text);border:1px solid var(--prj-surface-2);border-radius:var(--prj-border-radius);box-shadow:5px 5px 5px 5px var(--prj-shadow);padding:var(--prj-spacing-2) var(--prj-spacing-3)}.card[data-astro-cid-dohjnao5] a{text-decoration-line:none}.card[data-astro-cid-dohjnao5] a:hover{text-decoration-line:underline}.title[data-astro-cid-dohjnao5]>:last-child{margin-bottom:var(--prj-spacing-2)}button[data-astro-cid-n7iexiqw]{font-size:1rem;padding:var(--prj-spacing-1) var(--prj-spacing-3);background-color:var(--prj-accent-bg);color:var(--prj-accent-text);border-radius:6px;border-color:var(--prj-accent-bg);cursor:pointer;margin-bottom:0;box-shadow:0 0 0 0 var(--prj-accent-bg);transition:color .2s,background-color .2s,translate .2s,box-shadow .2s}button[data-astro-cid-n7iexiqw]:hover{--anim-translation-value: -5px;background-color:transparent;color:var(--prj-text);translate:var(--anim-translation-value) var(--anim-translation-value);box-shadow:calc(var(--anim-translation-value) * -2) calc(var(--anim-translation-value) * -2) 0 0 var(--prj-accent-bg)}#portrait[data-astro-cid-j7pv25f6]{border-radius:50%;border:5px solid var(--prj-text)}#hero[data-astro-cid-j7pv25f6]{min-height:50vh}
|
|
</style><script type="module" src="/_astro/hoisted.k2hAFL8r.js"></script>
|
|
<script type="module" src="/_astro/page.mPDbXx0N.js"></script><style>[data-astro-transition-scope="astro-mljbisf2-1"] { view-transition-name: astro-mljbisf2-1; }@layer astro { ::view-transition-old(astro-mljbisf2-1) {
|
|
animation-duration: 180ms;
|
|
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
animation-fill-mode: both;
|
|
animation-name: astroFadeOut; }::view-transition-new(astro-mljbisf2-1) {
|
|
animation-duration: 180ms;
|
|
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
animation-fill-mode: both;
|
|
animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-mljbisf2-1) {
|
|
animation-duration: 180ms;
|
|
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
animation-fill-mode: both;
|
|
animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-mljbisf2-1) {
|
|
animation-duration: 180ms;
|
|
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
animation-fill-mode: both;
|
|
animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-mljbisf2-1"],
|
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-mljbisf2-1"] {
|
|
animation-duration: 180ms;
|
|
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
animation-fill-mode: both;
|
|
animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-mljbisf2-1"],
|
|
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-mljbisf2-1"] {
|
|
animation-duration: 180ms;
|
|
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
animation-fill-mode: both;
|
|
animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-mljbisf2-1"],
|
|
[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-mljbisf2-1"] {
|
|
animation-duration: 180ms;
|
|
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
animation-fill-mode: both;
|
|
animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-mljbisf2-1"],
|
|
[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-mljbisf2-1"] {
|
|
animation-duration: 180ms;
|
|
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
animation-fill-mode: both;
|
|
animation-name: astroFadeIn; }</style></head> <body data-astro-cid-sckkx6r4 data-astro-transition-scope="astro-mljbisf2-1"> <header class="position-sticky py-1 py-lg-3" data-astro-cid-sckkx6r4> <div id="main-navbar" class="pt-1" data-astro-cid-5blmo7yk> <nav class="navbar navbar-desktop d-none d-lg-block container" data-astro-cid-5blmo7yk> <ul class="list-unstyle hstack" data-astro-cid-5blmo7yk> <li class="nav-item" data-astro-cid-5blmo7yk> <a class="nav-link" href="/" data-astro-cid-5blmo7yk> Home </a> </li><li class="nav-item" data-astro-cid-5blmo7yk> <a class="nav-link" href="/blog" data-astro-cid-5blmo7yk> Blog </a> </li><li class="nav-item" data-astro-cid-5blmo7yk> <a class="nav-link" href="/portafolio" data-astro-cid-5blmo7yk> Portafolio </a> </li><li class="nav-item" data-astro-cid-5blmo7yk> <a class="nav-link" href="/curriculum" data-astro-cid-5blmo7yk> Curriculum </a> </li><li class="nav-item" data-astro-cid-5blmo7yk> <a class="nav-link" href="/contact" data-astro-cid-5blmo7yk> Contact </a> </li> </ul> </nav> <div class="text-end d-lg-none" data-astro-cid-5blmo7yk> <button id="btn-toggle" class="off-canvas-toggle" data-target="#mobile-nav" data-astro-cid-4artp6fm> <svg width="40px" height="40px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="" stroke-width="0.00024000000000000003" transform="rotate(0)" data-astro-cid-4artp6fm><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(1.1999999999999993,1.1999999999999993), scale(0.9)" data-astro-cid-4artp6fm><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="2.88" fill="none" strokewidth="0" data-astro-cid-4artp6fm></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.384" data-astro-cid-4artp6fm></g><g id="SVGRepo_iconCarrier" data-astro-cid-4artp6fm> <path d="M2 5.5C2 4.94772 2.44772 4.5 3 4.5H21C21.5523 4.5 22 4.94772 22 5.5V6.5C22 7.05228 21.5523 7.5 21 7.5H3C2.44772 7.5 2 7.05228 2 6.5V5.5Z" fill="#cad3f5" data-astro-cid-4artp6fm></path> <path d="M2 11.5C2 10.9477 2.44772 10.5 3 10.5H21C21.5523 10.5 22 10.9477 22 11.5V12.5C22 13.0523 21.5523 13.5 21 13.5H3C2.44772 13.5 2 13.0523 2 12.5V11.5Z" fill="#cad3f5" data-astro-cid-4artp6fm></path> <path d="M3 16.5C2.44772 16.5 2 16.9477 2 17.5V18.5C2 19.0523 2.44772 19.5 3 19.5H21C21.5523 19.5 22 19.0523 22 18.5V17.5C22 16.9477 21.5523 16.5 21 16.5H3Z" fill="#cad3f5" data-astro-cid-4artp6fm></path> </g></svg> <span class="visually-hidden" data-astro-cid-4artp6fm>Open sidebar</span> </button> <div id="mobile-nav" class="off-canvas" data-astro-cid-72tffjxc> <div class="off-canvas-content" data-astro-cid-72tffjxc data-astro-transition-persist="astro-xoxbhhdm-2"> <button class="off-canvas-toggle" data-target="#mobile-nav" data-astro-cid-72tffjxc> <svg width="40px" height="40px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" data-astro-cid-72tffjxc><g id="SVGRepo_bgCarrier" stroke-width="0" data-astro-cid-72tffjxc></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-72tffjxc></g><g id="SVGRepo_iconCarrier" data-astro-cid-72tffjxc><path fill="#cad3f5" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" data-astro-cid-72tffjxc></path></g></svg> </button> <div class="content" data-astro-cid-72tffjxc> <nav class="navbar navbar-mobile" data-astro-cid-5blmo7yk> <ul class="list-unstyle text-start" data-astro-cid-5blmo7yk> <li class="nav-item mb-3" data-astro-cid-5blmo7yk> <a class="nav-link" href="/" data-astro-cid-5blmo7yk> Home </a> </li><li class="nav-item mb-3" data-astro-cid-5blmo7yk> <a class="nav-link" href="/blog" data-astro-cid-5blmo7yk> Blog </a> </li><li class="nav-item mb-3" data-astro-cid-5blmo7yk> <a class="nav-link" href="/portafolio" data-astro-cid-5blmo7yk> Portafolio </a> </li><li class="nav-item mb-3" data-astro-cid-5blmo7yk> <a class="nav-link" href="/curriculum" data-astro-cid-5blmo7yk> Curriculum </a> </li><li class="nav-item mb-3" data-astro-cid-5blmo7yk> <a class="nav-link" href="/contact" data-astro-cid-5blmo7yk> Contact </a> </li> </ul> </nav> </div> </div> <div class="off-canvas-backdrop off-canvas-toggle" data-target="#mobile-nav" data-astro-cid-72tffjxc></div> </div> </div> </div> </header> <main data-astro-cid-sckkx6r4> <div id="layout-loading-spinner" class="d-none" data-astro-cid-sckkx6r4> <div class="spinner" data-astro-cid-lolztsa2 style="--size: 200px;--bgColor: var(--prj-bg);"> <div class="container" data-astro-cid-lolztsa2 style="--size: 200px;--bgColor: var(--prj-bg);"> <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="" data-astro-cid-lolztsa2 style="--size: 200px;--bgColor: var(--prj-bg);"> <g id="SVGRepo_bgCarrier" stroke-width="0" data-astro-cid-lolztsa2 style="--size: 200px;--bgColor: var(--prj-bg);"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-lolztsa2 style="--size: 200px;--bgColor: var(--prj-bg);"></g> <g id="SVGRepo_iconCarrier" data-astro-cid-lolztsa2 style="--size: 200px;--bgColor: var(--prj-bg);"> <path class="animation animation-normal" d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4" stroke="#cad3f5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-lolztsa2 style="--size: 200px;--bgColor: var(--prj-bg);"></path> <path class="animation animation-reverse" d="M36 24C36 17.3726 30.6274 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36V36" stroke="#cad3f5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-lolztsa2 style="--size: 200px;--bgColor: var(--prj-bg);"></path> </g> </svg> </div> </div> </div> <section id="hero" class="bg-image flex-center" style="--bg-image: url(https://placehold.co/600x400)" data-astro-cid-j7pv25f6> <div class="hstack gap-5" data-astro-cid-j7pv25f6> <!-- <Image --> <!-- id="portrait" --> <!-- src={portrait} --> <!-- alt="portrait of Alexander Navarro" --> <!-- loading="eager" --> <!-- width={200} --> <!-- /> --> <div data-astro-cid-j7pv25f6> <h1 class="my-0" data-astro-cid-j7pv25f6>Alexander Navarro</h1> <p data-astro-cid-j7pv25f6>
|
|
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet,
|
|
repudiandae veritatis totam animi ut facere omnis. Quasi, tempore
|
|
porro, neque officia nisi error quia deleniti nesciunt provident vitae
|
|
consequuntur quod?
|
|
</p> </div> </div> </section> <section data-astro-cid-j7pv25f6> <h2 class="text-center" data-astro-cid-j7pv25f6>Featured Work</h2> <div class="grid grid-cols-1 grid-lg-cols-3 gap-4" data-astro-cid-j7pv25f6> <div class="card vstack anim-hover-zoom" data-astro-cid-dohjnao5> <div class="title" data-astro-cid-dohjnao5> </div> <div class="content flex-grow" data-astro-cid-dohjnao5> <img src="https://placehold.co/600x400" alt="project img" class="border-radius" data-astro-cid-j7pv25f6> <h3 class="fs-4 text-center my-1" data-astro-cid-j7pv25f6>Project N°1</h3> <p class="text-justify" data-astro-cid-j7pv25f6>
|
|
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
|
|
cillum sint consectetur cupidatat.
|
|
</p> <div class="text-end" data-astro-cid-j7pv25f6> <a href="" data-astro-cid-j7pv25f6>See more...</a> </div> </div> <div class="footer" data-astro-cid-dohjnao5> </div> </div> <div class="card vstack anim-hover-zoom" data-astro-cid-dohjnao5> <div class="title" data-astro-cid-dohjnao5> </div> <div class="content flex-grow" data-astro-cid-dohjnao5> <img src="https://placehold.co/600x400" alt="project img" class="border-radius" data-astro-cid-j7pv25f6> <h3 class="fs-4 text-center my-1" data-astro-cid-j7pv25f6>Project N°1</h3> <p class="text-justify" data-astro-cid-j7pv25f6>
|
|
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
|
|
cillum sint consectetur cupidatat.
|
|
</p> <div class="text-end" data-astro-cid-j7pv25f6> <a href="" data-astro-cid-j7pv25f6>See more...</a> </div> </div> <div class="footer" data-astro-cid-dohjnao5> </div> </div> <div class="card vstack anim-hover-zoom" data-astro-cid-dohjnao5> <div class="title" data-astro-cid-dohjnao5> </div> <div class="content flex-grow" data-astro-cid-dohjnao5> <img src="https://placehold.co/600x400" alt="project img" class="border-radius" data-astro-cid-j7pv25f6> <h3 class="fs-4 text-center my-1" data-astro-cid-j7pv25f6>Project N°1</h3> <p class="text-justify" data-astro-cid-j7pv25f6>
|
|
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
|
|
cillum sint consectetur cupidatat.
|
|
</p> <div class="text-end" data-astro-cid-j7pv25f6> <a href="" data-astro-cid-j7pv25f6>See more...</a> </div> </div> <div class="footer" data-astro-cid-dohjnao5> </div> </div> </div> <div class="mt-4 text-center" data-astro-cid-j7pv25f6> <button class="px-4 py-2 fs-5 " data-astro-cid-n7iexiqw> View Work </button> </div> </section> <section class="d-none" data-astro-cid-j7pv25f6> <h2 class="mb-4" data-astro-cid-j7pv25f6>What I've been up to...</h2> <div class="hstack flex-eq flex-wrap flex-md-nowrap" data-astro-cid-j7pv25f6> <div class="vstack justify-content-center" data-astro-cid-j7pv25f6> <h4 class="text-center" data-astro-cid-j7pv25f6>Blog</h4> <ol class="list-unstyle mt-0 fs-5" data-astro-cid-j7pv25f6> <li class="mb-3" data-astro-cid-j7pv25f6> <a href="#" data-astro-cid-j7pv25f6>Qui minim labore adipisicing minim sint cillum sint consectetur
|
|
cupidatat.</a> </li> <li class="mb-3" data-astro-cid-j7pv25f6> <a href="#" data-astro-cid-j7pv25f6>Qui minim labore adipisicing minim sint cillum sint consectetur
|
|
cupidatat.</a> </li> <li class="mb-3" data-astro-cid-j7pv25f6> <a href="#" data-astro-cid-j7pv25f6>Qui minim labore adipisicing minim sint cillum sint consectetur
|
|
cupidatat.</a> </li> </ol> </div> <div data-astro-cid-j7pv25f6> <div class="text-center mb-2" data-astro-cid-j7pv25f6> <img class="" src="https://placehold.co/400x200" alt="project img" data-astro-cid-j7pv25f6> </div> <p class="text-justify" data-astro-cid-j7pv25f6>
|
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
|
|
consequatur iste molestiae blanditiis eligendi consectetur ullam.
|
|
Excepturi quasi sed est animi laudantium necessitatibus, tempore
|
|
delectus nulla aspernatur quod nesciunt fugiat.
|
|
</p> </div> </div> <div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap" data-astro-cid-j7pv25f6> <div class="vstack justify-content-center" data-astro-cid-j7pv25f6> <h4 class="text-center" data-astro-cid-j7pv25f6>Games</h4> <ol class="list-unstyle mt-0 fs-5" data-astro-cid-j7pv25f6> <li class="mb-3" data-astro-cid-j7pv25f6> <a href="#" data-astro-cid-j7pv25f6>Qui minim labore adipisicing minim sint cillum sint consectetur
|
|
cupidatat.</a> </li> <li class="mb-3" data-astro-cid-j7pv25f6> <a href="#" data-astro-cid-j7pv25f6>Qui minim labore adipisicing minim sint cillum sint consectetur
|
|
cupidatat.</a> </li> <li class="mb-3" data-astro-cid-j7pv25f6> <a href="#" data-astro-cid-j7pv25f6>Qui minim labore adipisicing minim sint cillum sint consectetur
|
|
cupidatat.</a> </li> </ol> </div> <div data-astro-cid-j7pv25f6> <div class="text-center mb-2" data-astro-cid-j7pv25f6> <img class="" src="https://placehold.co/400x200" alt="project img" data-astro-cid-j7pv25f6> </div> <p class="text-justify" data-astro-cid-j7pv25f6>
|
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
|
|
consequatur iste molestiae blanditiis eligendi consectetur ullam.
|
|
Excepturi quasi sed est animi laudantium necessitatibus, tempore
|
|
delectus nulla aspernatur quod nesciunt fugiat.
|
|
</p> </div> </div> </section> <section class="bg-image" style="--bg-image: url(https://placehold.co/600x400)" data-astro-cid-j7pv25f6> <h2 class="text-center" data-astro-cid-j7pv25f6>Who am I?</h2> <p class="w-95 w-lg-70 mx-auto text-justify" data-astro-cid-j7pv25f6>
|
|
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
|
|
labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
|
|
Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
|
|
Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
|
|
Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
|
|
occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
|
|
officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
|
|
Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
|
|
excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco
|
|
ut ea consectetur et est culpa et culpa duis.
|
|
</p> <div class="text-center fs-4 mb-0" data-astro-cid-j7pv25f6> <a href="" data-astro-cid-j7pv25f6> <button data-astro-cid-n7iexiqw> View full curriculum </button> </a> </div> </section> <section data-astro-cid-j7pv25f6> <h2 data-astro-cid-j7pv25f6>Contact</h2> <div class="grid grid-cols-1 grid-lg-cols-2" data-astro-cid-j7pv25f6> <div data-astro-cid-j7pv25f6> <div class="text-center" data-astro-cid-j7pv25f6> <img class="respect-width border-radius" src="https://placehold.co/500x300" alt="project img" data-astro-cid-j7pv25f6> </div> <p class="text-justify" data-astro-cid-j7pv25f6>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
|
|
reprehenderit, porro dolorem cumque suscipit accusantium officiis eius
|
|
exercitationem harum itaque perferendis praesentium asperiores vitae
|
|
pariatur ad culpa mollitia necessitatibus hic!
|
|
</p> </div> <div class="vstack justify-content-center" data-astro-cid-j7pv25f6> <ul class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around anim-idle-hover-group anim-group-lg-none" data-astro-cid-j7pv25f6> <li class="mb-3" data-astro-cid-j7pv25f6> <a href="#" class="hstack flex-column flex-lg-row gap-2" data-astro-cid-j7pv25f6> <img src="https://placehold.co/60" alt="" data-astro-cid-j7pv25f6> <span data-astro-cid-j7pv25f6>Github</span> </a> </li><li class="mb-3" data-astro-cid-j7pv25f6> <a href="#" class="hstack flex-column flex-lg-row gap-2" data-astro-cid-j7pv25f6> <img src="https://placehold.co/60" alt="" data-astro-cid-j7pv25f6> <span data-astro-cid-j7pv25f6>Linkedin</span> </a> </li><li class="mb-3" data-astro-cid-j7pv25f6> <a href="#" class="hstack flex-column flex-lg-row gap-2" data-astro-cid-j7pv25f6> <img src="https://placehold.co/60" alt="" data-astro-cid-j7pv25f6> <span data-astro-cid-j7pv25f6>Email</span> </a> </li> </ul> </div> </div> </section> </main> <script>
|
|
document.addEventListener('astro:before-preparation', (ev) => {
|
|
const originalLoader = ev.loader;
|
|
ev.loader = async function () {
|
|
const spinner = document.querySelector('#layout-loading-spinner');
|
|
|
|
// Only show the animation if page load is > than timeout seconds
|
|
const timeoutId = setTimeout(
|
|
() => spinner.classList.remove('d-none'),
|
|
200,
|
|
);
|
|
|
|
await originalLoader();
|
|
|
|
// cancel timeout if is not run yet
|
|
clearTimeout(timeoutId);
|
|
// spinner.classList.add('d-none');
|
|
};
|
|
});
|
|
</script> </body> </html> |