96 lines
No EOL
22 KiB
HTML
96 lines
No EOL
22 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"><link rel="alternate" hreflang="en" href="http://localhost:4321/"><link rel="alternate" hreflang="es" href="http://localhost:4321/es"><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"><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}.img-header[data-astro-cid-dohjnao5] img{width:100%;height:100%;object-fit:cover}.title[data-astro-cid-dohjnao5]>:last-child{margin-bottom:var(--prj-spacing-2)}
|
|
</style>
|
|
<link rel="stylesheet" href="/_astro/blog.DSMuO8mg.css" />
|
|
<style>button[data-astro-cid-n7iexiqw],.btn[data-astro-cid-n7iexiqw]{display:inline-block;text-decoration:none;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:1px solid 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,.btn[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%}#hero[data-astro-cid-j7pv25f6]{min-height:50vh}a[data-astro-cid-j7pv25f6].clean{color:var(--prj-text);&:hover{text-decoration:none}}
|
|
</style><script type="module" src="/_astro/hoisted.yTqMwub7.js"></script>
|
|
<script type="module" src="/_astro/page.mPDbXx0N.js"></script><style>[data-astro-transition-scope="astro-ekcrbxgw-1"] { view-transition-name: astro-ekcrbxgw-1; }@layer astro { ::view-transition-old(astro-ekcrbxgw-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-ekcrbxgw-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-ekcrbxgw-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-ekcrbxgw-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-ekcrbxgw-1"],
|
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-ekcrbxgw-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-ekcrbxgw-1"],
|
|
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-ekcrbxgw-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-ekcrbxgw-1"],
|
|
[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-ekcrbxgw-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-ekcrbxgw-1"],
|
|
[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-ekcrbxgw-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-ekcrbxgw-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="/projects" data-astro-cid-5blmo7yk> Projects </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> <li class="nav-item" data-astro-cid-5blmo7yk> <select onchange="location = this.value;" class="selector" data-astro-cid-65uu2w6m> <option value="/" selected="true"> English </option><option value="/es"> Español </option> </select> </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="/projects" data-astro-cid-5blmo7yk> Projects </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="vstack gap-0 align-items-center" data-astro-cid-j7pv25f6> <img src="/_astro/portrait.6DalF5ri_130laR.webp" id="portrait" alt="portrait of Alexander Navarro" loading="eager" data-astro-cid-j7pv25f6 width="200" height="200" decoding="async"> <div data-astro-cid-j7pv25f6> <h1 class="my-0 text-center" data-astro-cid-j7pv25f6>Alexander Navarro</h1> <p data-astro-cid-j7pv25f6> I'm a software developer from Chile.
|
|
I like to code stuff for the web, for the terminal or whatever seems fun!
|
|
I enjoy problem solving and creating solutions, then watch my creations come to life and do things for me! </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 data-astro-cid-j7pv25f6> <div class="card vstack anim-hover-zoom h-100" data-astro-cid-dohjnao5> <div class="img-header" data-astro-cid-dohjnao5> </div> <div class="title" data-astro-cid-dohjnao5> </div> <div class="content flex-grow" data-astro-cid-dohjnao5> <a class="clean" href="/projects/piloto-go" data-astro-cid-j7pv25f6> <img src="/_astro/piloto1.cajC8hmR_uYhYf.webp" alt="project img" class="border-radius respect-width" data-astro-cid-j7pv25f6 width="2560" height="1703" loading="lazy" decoding="async"> <h3 class="fs-4 text-center my-1" data-astro-cid-j7pv25f6>Piloto Go</h3> <p class="text-justify" data-astro-cid-j7pv25f6>Para el área de innovación de Almagro desarrollamos un producto mínimo viable que permite digitalizar las solicitudes de los nuevos productos que se utilizan en la construcción de edificios. Además permite armar digitalmente las matrices para los distintos segmentos de las propiedades.</p> </a> </div> <div class="footer" data-astro-cid-dohjnao5> <div class="text-end" data-astro-cid-j7pv25f6> <a href="/projects/piloto-go" data-astro-cid-j7pv25f6>See more...</a> </div> </div> </div> </div><div data-astro-cid-j7pv25f6> <div class="card vstack anim-hover-zoom h-100" data-astro-cid-dohjnao5> <div class="img-header" data-astro-cid-dohjnao5> </div> <div class="title" data-astro-cid-dohjnao5> </div> <div class="content flex-grow" data-astro-cid-dohjnao5> <a class="clean" href="/projects/destino-temuco" data-astro-cid-j7pv25f6> <img src="/_astro/temuco1.z0S_fEtd_Z16PU93.webp" alt="project img" class="border-radius respect-width" data-astro-cid-j7pv25f6 width="2560" height="1689" loading="lazy" decoding="async"> <h3 class="fs-4 text-center my-1" data-astro-cid-j7pv25f6>Destino Temuco</h3> <p class="text-justify" data-astro-cid-j7pv25f6>La dirección de Turismo, Patrimonio y Cultura del Municipio de Temuco, solicito una web autoadministrable, el cual pueda servir a todo turista y publico en general como una guia informativa sobre los servicios turísticos que ofrecen en Temuco. La web permite a quien la visita, saber sobre los tours, atractivos turísticos, eventos, galería de artes, biblioteca y servicios turísticos, así como las opciones para poder llegar a Temuco. También cuenta con blog de noticias y una revista digital sobre Temuco.</p> </a> </div> <div class="footer" data-astro-cid-dohjnao5> <div class="text-end" data-astro-cid-j7pv25f6> <a href="/projects/destino-temuco" data-astro-cid-j7pv25f6>See more...</a> </div> </div> </div> </div><div data-astro-cid-j7pv25f6> <div class="card vstack anim-hover-zoom h-100" data-astro-cid-dohjnao5> <div class="img-header" data-astro-cid-dohjnao5> </div> <div class="title" data-astro-cid-dohjnao5> </div> <div class="content flex-grow" data-astro-cid-dohjnao5> <a class="clean" href="/projects/sercotec" data-astro-cid-j7pv25f6> <img src="/_astro/sercotec1.x8msu34V_ZsWVa7.webp" alt="project img" class="border-radius respect-width" data-astro-cid-j7pv25f6 width="2560" height="1689" loading="lazy" decoding="async"> <h3 class="fs-4 text-center my-1" data-astro-cid-j7pv25f6>Barrios Comerciales - Sercotec</h3> <p class="text-justify" data-astro-cid-j7pv25f6>Desarrollo de sitio web para SERCOTEC donde buscan visibilizar los barrios comerciales dentro de Chile. Para esto cada uno de los barrios ya mapeados por SERCOTEC se pueden cargar con la descripción, imágenes, videos, programas y un mapa de como llegar al barrio. También es posible ingresar nuevos barrios comerciales que no estén inscritos en el sitio.</p> </a> </div> <div class="footer" data-astro-cid-dohjnao5> <div class="text-end" data-astro-cid-j7pv25f6> <a href="/projects/sercotec" data-astro-cid-j7pv25f6>See more...</a> </div> </div> </div> </div> </div> <div class="mt-4 text-center" data-astro-cid-j7pv25f6> <a href="/projects" class="clean btn px-4 py-2 fs-5" data-astro-cid-n7iexiqw>View Work</a> </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> |