personal-page/portafolio/observacion-de-clases/index.html
woodpecker-bot 1edce53855 Updates
2024-03-13 18:28:51 +00:00

60 lines
No EOL
12 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>Plataforma de Observación de clases</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.lkg78wm-.css" />
<style>._thumbnailList_m5eqb_1{display:grid;overflow-x:scroll;gap:var(--prj-spacing-3);padding-bottom:var(--prj-spacing-2);grid-auto-columns:25%;grid-auto-flow:column}._thumbnailItem_m5eqb_12{width:100%}._thumbnailItem_m5eqb_12:hover{cursor:pointer}._carousel_cyvxn_1{height:100%;max-width:90%;margin:auto;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}._container_cyvxn_12{height:100%;overflow:hidden}._content_cyvxn_17{height:100%;display:flex;flex-wrap:nowrap;transition:transform .6s ease}._item_cyvxn_24{height:100%;width:100%;flex:0 0 100%}._itemContent_cyvxn_30{height:100%;display:flex;justify-content:center;align-items:center}._btnPrev_cyvxn_37,._btnNext_cyvxn_38{top:50%;z-index:10}._btnPrev_cyvxn_37{left:0}._btnNext_cyvxn_38{right:0}
</style><script type="module" src="/_astro/hoisted.sNtgTfR1.js"></script><style>[data-astro-transition-scope="astro-4vhbyfto-1"] { view-transition-name: astro-4vhbyfto-1; }@layer astro { ::view-transition-old(astro-4vhbyfto-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-4vhbyfto-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-4vhbyfto-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-4vhbyfto-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-4vhbyfto-1"],
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-4vhbyfto-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-4vhbyfto-1"],
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-4vhbyfto-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-4vhbyfto-1"],
[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-4vhbyfto-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-4vhbyfto-1"],
[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-4vhbyfto-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> <header data-astro-cid-sckkx6r4> <nav class="navbar navbar-expand-lg bg-body-tertiary" 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> </header> <main data-astro-cid-sckkx6r4 data-astro-transition-scope="astro-4vhbyfto-1"> <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> <h1>Plataforma de Observación de clases</h1> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var b=Object.defineProperty;var f=(c,o,i)=>o in c?b(c,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):c[o]=i;var l=(c,o,i)=>(f(c,typeof o!="symbol"?o+"":o,i),i);var p;{let c={0:t=>m(t),1:t=>i(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(i(t)),5:t=>new Set(i(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},o=t=>{let[e,r]=t;return e in c?c[e](r):void 0},i=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([e,r])=>[e,o(r)]));customElements.get("astro-island")||customElements.define("astro-island",(p=class extends HTMLElement{constructor(){super(...arguments);l(this,"Component");l(this,"hydrator");l(this,"hydrate",async()=>{var d;if(!this.hydrator||!this.isConnected)return;let e=(d=this.parentElement)==null?void 0:d.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let r=this.querySelectorAll("astro-slot"),a={},h=this.querySelectorAll("template[data-astro-template]");for(let n of h){let s=n.closest(this.tagName);s!=null&&s.isSameNode(this)&&(a[n.getAttribute("data-astro-template")||"default"]=n.innerHTML,n.remove())}for(let n of r){let s=n.closest(this.tagName);s!=null&&s.isSameNode(this)&&(a[n.getAttribute("name")||"default"]=n.innerHTML)}let u;try{u=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(n){let s=this.getAttribute("component-url")||"<unknown>",y=this.getAttribute("component-export");throw y&&(s+=` (export ${y})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),n),n}await this.hydrator(this)(this.Component,u,a,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});l(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),r.disconnect(),this.childrenConnectedCallback()},r=new MutationObserver(()=>{var a;((a=this.lastChild)==null?void 0:a.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});r.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}start(){let e=JSON.parse(this.getAttribute("opts")),r=this.getAttribute("client");if(Astro[r]===void 0){window.addEventListener(`astro:${r}`,()=>this.start(),{once:!0});return}Astro[r](async()=>{let a=this.getAttribute("renderer-url"),[h,{default:u}]=await Promise.all([import(this.getAttribute("component-url")),a?import(a):()=>()=>{}]),d=this.getAttribute("component-export")||"default";if(!d.includes("."))this.Component=h[d];else{this.Component=h;for(let n of d.split("."))this.Component=this.Component[n]}return this.hydrator=u,this.hydrate},e,this)}attributeChangedCallback(){this.hydrate()}},l(p,"observedAttributes",["props"]),p))}})();</script><astro-island uid="2gyrcb" prefix="r0" component-url="/_astro/Gallery.MytEOxK3.js" component-export="default" renderer-url="/_astro/client.olTvLX7Y.js" props="{&quot;items&quot;:[1,[[0,{&quot;type&quot;:[0,&quot;image&quot;],&quot;url&quot;:[0,&quot;/images/portafolio/observacion_clases/1696878771763.jpg&quot;],&quot;alt&quot;:[0,&quot;this an image&quot;]}],[0,{&quot;type&quot;:[0,&quot;image&quot;],&quot;url&quot;:[0,&quot;/images/portafolio/observacion_clases/1696878771763.jpg&quot;],&quot;alt&quot;:[0,&quot;this an image&quot;]}]]]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;Gallery&quot;,&quot;value&quot;:true}" await-children=""><div style="height:500px"><div class="_carousel_cyvxn_1"><button class="_btnPrev_cyvxn_37">Prev</button><div class="_container_cyvxn_12"><div class="_content_cyvxn_17"><div class="_item_cyvxn_24"><div class="_itemContent_cyvxn_30"><img class="respect-height" src="/images/portafolio/observacion_clases/1696878771763.jpg" alt="this an image"/></div></div><div class="_item_cyvxn_24"><div class="_itemContent_cyvxn_30"><img class="respect-height" src="/images/portafolio/observacion_clases/1696878771763.jpg" alt="this an image"/></div></div></div></div><button class="_btnNext_cyvxn_38">Next</button></div></div><!--astro:end--></astro-island> <ul class="mb-3"></ul> <p>This is a web application to manage the stock of product in a construction
company and their usage across projects. It also allows to create budgets with
the interaction of different actors.</p> </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>