[READ-ONLY] Mirror of https://github.com/flo-bit/flo-bit.github.io. my personal website, w/ astro, svelte, tailwind, typescript, threlte flo-bit.dev/
portfolio portfolio-website svelte sveltekit tailwind threejs threlte typescript
0

Configure Feed

Select the types of activity you want to include in your feed.

some optimizations

Florian (Jan 7, 2024, 12:36 AM +0100) 627a1a05 e10f5192

+9 -5
+3 -1
src/app.html
··· 8 8 9 9 <meta name="viewport" content="width=device-width" /> 10 10 %sveltekit.head% 11 - <script src="https://unpkg.com/most-visible@2.0.0/dist/most-visible.min.js"></script> 11 + <script> 12 + var mostVisible=function(){"use strict";function t(e,n){"string"==typeof e&&(e=document.querySelectorAll(e));const r={...t.defaults,...n};return Array.from(e).reduce(((t,e)=>{let[n,o]=t;const u=function(t,e,n){const r=document.documentElement.clientHeight,o=t.getBoundingClientRect(),u=o.top-e,i=o.bottom-e,c=o.bottom-o.top,f=u>=0&&u<r,s=i>0&&i<r,l=(()=>{if(f)return s?c:r-o.top;if(s)return i;if(c>r&&u<0){const t=Math.abs(u);if(t<c)return c-t}return 0})();return n?l/c*100:l}(e,r.offset,r.percentage);return u>n?[u,e]:[n,o]}),[0,null])[1]}return t.defaults={percentage:!1,offset:0},window&&window.jQuery&&function(t,e){t.fn.mostVisible=function(t){return this.filter(e(this.get(),t))}}(window.jQuery,t),t}(); 13 + </script> 12 14 13 15 <title>flo-bit portfolio</title> 14 16 </head>
+2 -1
src/lib/components/About.svelte
··· 14 14 <div class="max-w-xs px-2.5 lg:max-w-none"> 15 15 <img 16 16 src={imageMe} 17 - alt="" 17 + alt="this is me" 18 + loading="lazy" 18 19 sizes="(min-width: 1024px) 32rem, 20rem" 19 20 class="aspect-square rotate-3 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800" 20 21 />
+1 -1
src/lib/components/Photos.svelte
··· 12 12 index % rotations.length 13 13 ]}" 14 14 > 15 - <img src={image.src} alt={image.alt} class="absolute inset-0 h-full w-full object-cover" /> 15 + <img src={image.src} alt={image.alt} class="absolute inset-0 h-full w-full object-cover" loading="lazy"/> 16 16 {#if image.href} 17 17 <a href={image.href}> 18 18 <div class="sr-only">{image.alt}</div>
+3 -2
src/lib/components/Role.svelte
··· 21 21 class="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0" 22 22 > 23 23 {#if typeof role.logo === 'string'} 24 - <img src={role.logo} alt="" class="h-7 w-7 object-contain" /> 24 + <img src={role.logo} alt="{role.company} logo" class="h-7 w-7 object-contain" loading="lazy"/> 25 25 {:else} 26 26 <img 27 27 src={role.logo.src} 28 - alt="" 28 + alt="{role.company} logo" 29 + loading="lazy" 29 30 class="h-7 w-7 object-contain {role.logo.rounded ? 'rounded-full' : ''}" 30 31 /> 31 32 {/if}