diff --git a/dist/bundle.js b/dist/bundle.js
index 8300560..dac394d 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -1 +1 @@
-customElements.define("about-me-item",class extends HTMLDivElement{constructor(){super()}connectedCallback(){this.className="w-full sm:w-1/2 lg:w-1/3";let e=document.createElement("div");e.className="flex max-w-64 w-full mx-auto items-center";let t=document.createElement("img");t.className="w-8 h-8 mr-8 fill-zinc-600",t.src=this.getAttribute("icon-src"),e.appendChild(t);let n=document.createElement("div"),i=document.createElement("div");i.className="font-Roboto text-2xl font-bold text-zinc-600 w-fit text-left",i.innerHTML=this.getAttribute("label"),n.appendChild(i);let r=document.createElement("div");r.className="font-Roboto text-lg font-normal text-zinc-600 w-fit text-left",r.innerHTML=this.getAttribute("value"),n.appendChild(r),e.appendChild(n),this.appendChild(e)}},{extends:"div"}),(()=>{"use strict";function e(e){return"number"==typeof e}function t(e){return"string"==typeof e}function n(e){return"boolean"==typeof e}function i(e){return"[object Object]"===Object.prototype.toString.call(e)}function r(e){return Math.abs(e)}function o(e){return Math.sign(e)}function s(e,t){return r(e-t)}function c(e){return f(e).map(Number)}function a(e){return e[u(e)]}function u(e){return Math.max(0,e.length-1)}function l(e,t){return t===u(e)}function d(e,t=0){return Array.from(Array(e),((e,n)=>t+n))}function f(e){return Object.keys(e)}function p(e,t){return[e,t].reduce(((e,t)=>(f(t).forEach((n=>{const r=e[n],o=t[n],s=i(r)&&i(o);e[n]=s?p(r,o):o})),e)),{})}function m(e,t){return void 0!==t.MouseEvent&&e instanceof t.MouseEvent}function g(){let e=[];const t={add:function(n,i,r,o={passive:!0}){let s;if("addEventListener"in n)n.addEventListener(i,r,o),s=()=>n.removeEventListener(i,r,o);else{const e=n;e.addListener(r),s=()=>e.removeListener(r)}return e.push(s),t},clear:function(){e=e.filter((e=>e()))}};return t}function h(e=0,t=0){const n=r(e-t);function i(t){return t<e}function o(e){return e>t}function s(e){return i(e)||o(e)}return{length:n,max:t,min:e,constrain:function(n){return s(n)?i(n)?e:t:n},reachedAny:s,reachedMax:o,reachedMin:i,removeOffset:function(e){return n?e-n*Math.ceil((e-t)/n):e}}}function y(e,t,n){const{constrain:i}=h(0,e),o=e+1;let s=c(t);function c(e){return n?r((o+e)%o):i(e)}function a(){return s}function u(){return y(e,a(),n)}const l={get:a,set:function(e){return s=c(e),l},add:function(e){return u().set(a()+e)},clone:u};return l}function b(e,t,i,c,a,u,l,d,f,p,y,b,v,x,w,S,k,E,L){const{cross:_,direction:P}=e,T=["INPUT","SELECT","TEXTAREA"],M={passive:!1},A=g(),I=g(),D=h(50,225).constrain(x.measure(20)),j={mouse:300,touch:400},C={mouse:500,touch:600},H=w?43:25;let N=!1,O=0,q=0,z=!1,F=!1,V=!1,W=!1;function R(e){const t=u.readPoint(e),n=u.readPoint(e,_),i=s(t,O),r=s(n,q);if(!F&&!W){if(!e.cancelable)return B(e);if(F=i>r,!F)return B(e)}const o=u.pointerMove(e);i>S&&(V=!0),p.useFriction(.3).useDuration(1),d.start(),a.add(P(o)),e.preventDefault()}function B(e){const t=y.byDistance(0,!1).index!==b.get(),n=u.pointerUp(e)*(w?C:j)[W?"mouse":"touch"],i=function(e,t){const n=b.add(-1*o(e)),i=y.byDistance(e,!w).distance;return w||r(e)<D?i:k&&t?.5*i:y.byIndex(n.get(),0).distance}(P(n),t),c=function(e,t){if(0===e||0===t)return 0;if(r(e)<=r(t))return 0;const n=s(r(e),r(t));return r(n/e)}(n,i),a=H-10*c,l=E+c/50;F=!1,z=!1,I.clear(),p.useDuration(a).useFriction(l),f.distance(i,!w),W=!1,v.emit("pointerUp")}function U(e){V&&(e.stopPropagation(),e.preventDefault(),V=!1)}return{init:function(e){if(!L)return;function r(r){(n(L)||L(e,r))&&function(e){const n=m(e,c);W=n,V=w&&n&&!e.buttons&&N,N=s(a.get(),l.get())>=2,n&&0!==e.button||function(e){const t=e.nodeName||"";return T.includes(t)}(e.target)||(z=!0,u.pointerDown(e),p.useFriction(0).useDuration(0),a.set(l),function(){const e=W?i:t;I.add(e,"touchmove",R,M).add(e,"touchend",B).add(e,"mousemove",R,M).add(e,"mouseup",B)}(),O=u.readPoint(e),q=u.readPoint(e,_),v.emit("pointerDown"))}(r)}const o=t;A.add(o,"dragstart",(e=>e.preventDefault()),M).add(o,"touchmove",(()=>{}),M).add(o,"touchend",(()=>{})).add(o,"touchstart",r).add(o,"mousedown",r).add(o,"touchcancel",B).add(o,"contextmenu",B).add(o,"click",U,!0)},pointerDown:function(){return z},destroy:function(){A.clear(),I.clear()}}}function v(e,t){let n,i;function o(e){return e.timeStamp}function s(n,i){const r="client"+("x"===(i||e.scroll)?"X":"Y");return(m(n,t)?n:n.touches[0])[r]}return{pointerDown:function(e){return n=e,i=e,s(e)},pointerMove:function(e){const t=s(e)-s(i),r=o(e)-o(n)>170;return i=e,r&&(n=e),t},pointerUp:function(e){if(!n||!i)return 0;const t=s(i)-s(n),c=o(e)-o(n),a=o(e)-o(i)>170,u=t/c;return c&&!a&&r(u)>.1?u:0},readPoint:s}}function x(e,t,i,o,s,c,a){let u,l,d=[],f=!1;function p(e){return s.measureSize(a.measure(e))}return{init:function(s){c&&(l=p(e),d=o.map(p),u=new ResizeObserver((a=>{f||(n(c)||c(s,a))&&function(n){for(const c of n){const n=c.target===e,a=o.indexOf(c.target),u=n?l:d[a];if(r(p(n?e:o[a])-u)>=.5){i.requestAnimationFrame((()=>{s.reInit(),t.emit("resize")}));break}}}(a)})),[e].concat(o).forEach((e=>u.observe(e))))},destroy:function(){u&&u.disconnect(),f=!0}}}function w(e,t,n,i,o){const s=o.measure(10),c=o.measure(50),a=h(.1,.99);let u=!1;return{constrain:function(o){if(u||!e.reachedAny(n.get())||!e.reachedAny(t.get()))return;const l=e.reachedMin(t.get())?"min":"max",d=r(e[l]-t.get()),f=n.get()-t.get(),p=a.constrain(d/c);n.subtract(f*p),!o&&r(f)<s&&(n.set(e.constrain(n.get())),i.useDuration(25).useBaseFriction())},toggleActive:function(e){u=!e}}}function S(e,t,n,i){const r=t.min+.1,o=t.max+.1,{reachedMin:s,reachedMax:c}=h(r,o);return{loop:function(t){if(!function(e){return 1===e?c(n.get()):-1===e&&s(n.get())}(t))return;const r=e*(-1*t);i.forEach((e=>e.add(r)))}}}function k(t){let n=t;function i(t){return e(t)?t:t.get()}return{get:function(){return n},set:function(e){n=i(e)},add:function(e){n+=i(e)},subtract:function(e){n-=i(e)}}}function E(e,t){const n="x"===e.scroll?function(e){return`translate3d(${e}px,0px,0px)`}:function(e){return`translate3d(0px,${e}px,0px)`},i=t.style;let r=!1;return{clear:function(){r||(i.transform="",t.getAttribute("style")||t.removeAttribute("style"))},to:function(t){r||(i.transform=n(e.direction(t)))},toggleActive:function(e){r=!e}}}function L(e,t,n,i,r,o,s,a,u){const l=c(r),d=c(r).reverse(),f=function(){const e=s[0];return g(m(d,e),n,!1)}().concat(function(){const e=t-s[0]-1;return g(m(l,e),-n,!0)}());function p(e,t){return e.reduce(((e,t)=>e-r[t]),t)}function m(e,t){return e.reduce(((e,n)=>p(e,t)>0?e.concat([n]):e),[])}function g(r,s,c){const l=function(e){return o.map(((n,r)=>({start:n-i[r]+.5+e,end:n+t-.5+e})))}(s);return r.map((t=>{const i=c?0:-n,r=c?n:0,o=c?"end":"start",s=l[t][o];return{index:t,loopPoint:s,slideLocation:k(-1),translate:E(e,u[t]),target:()=>a.get()>s?i:r}}))}return{canLoop:function(){return f.every((({index:e})=>p(l.filter((t=>t!==e)),t)<=.1))},clear:function(){f.forEach((e=>e.translate.clear()))},loop:function(){f.forEach((e=>{const{target:t,translate:n,slideLocation:i}=e,r=t();r!==i.get()&&(n.to(r),i.set(r))}))},loopPoints:f}}function _(e,t,i){let r,o=!1;return{init:function(s){i&&(r=new MutationObserver((e=>{o||(n(i)||i(s,e))&&function(e){for(const n of e)if("childList"===n.type){s.reInit(),t.emit("slidesChanged");break}}(e)})),r.observe(e,{childList:!0}))},destroy:function(){r&&r.disconnect(),o=!0}}}function P(n,i,p,m,P,T,M){const{align:A,axis:I,direction:D,startIndex:j,loop:C,duration:H,dragFree:N,dragThreshold:O,inViewThreshold:q,slidesToScroll:z,skipSnaps:F,containScroll:V,watchResize:W,watchSlides:R,watchDrag:B}=T,U={measure:function(e){const{offsetTop:t,offsetLeft:n,offsetWidth:i,offsetHeight:r}=e;return{top:t,right:n+i,bottom:t+r,left:n,width:i,height:r}}},G=U.measure(i),J=p.map(U.measure),K=function(e,t){const n="rtl"===t,i="y"===e,r=!i&&n?-1:1;return{scroll:i?"y":"x",cross:i?"x":"y",startEdge:i?"top":n?"right":"left",endEdge:i?"bottom":n?"left":"right",measureSize:function(e){const{height:t,width:n}=e;return i?t:n},direction:function(e){return e*r}}}(I,D),$=K.measureSize(G),Q=function(e){return{measure:function(t){return e*(t/100)}}}($),X=function(e,n){const i={start:function(){return 0},center:function(e){return r(e)/2},end:r};function r(e){return n-e}return{measure:function(r,o){return t(e)?i[e](r):e(n,r,o)}}}(A,$),Y=!C&&!!V,Z=C||!!V,{slideSizes:ee,slideSizesWithGaps:te,startGap:ne,endGap:ie}=function(e,t,n,i,o,s){const{measureSize:c,startEdge:u,endEdge:d}=e,f=n[0]&&o,p=function(){if(!f)return 0;const e=n[0];return r(t[u]-e[u])}(),m=function(){if(!f)return 0;const e=s.getComputedStyle(a(i));return parseFloat(e.getPropertyValue(`margin-${d}`))}(),g=n.map(c),h=n.map(((e,t,n)=>{const i=!t,r=l(n,t);return i?g[t]+p:r?g[t]+m:n[t+1][u]-e[u]})).map(r);return{slideSizes:g,slideSizesWithGaps:h,startGap:p,endGap:m}}(K,G,J,p,Z,P),re=function(t,n,i,o,s,l,d,f,p){const{startEdge:m,endEdge:g,direction:h}=t,y=e(i);return{groupSlides:function(e){return y?function(e,t){return c(e).filter((e=>e%t==0)).map((n=>e.slice(n,n+t)))}(e,i):function(e){return e.length?c(e).reduce(((t,i,c)=>{const y=a(t)||0,b=0===y,v=i===u(e),x=s[m]-l[y][m],w=s[m]-l[i][g],S=!o&&b?h(d):0,k=r(w-(!o&&v?h(f):0)-(x+S));return c&&k>n+p&&t.push(i),v&&t.push(e.length),t}),[]).map(((t,n,i)=>{const r=Math.max(i[n-1]||0);return e.slice(r,t)})):[]}(e)}}}(K,$,z,C,G,J,ne,ie,2),{snaps:oe,snapsAligned:se}=function(e,t,n,i,o){const{startEdge:s,endEdge:c}=e,{groupSlides:u}=o,l=u(i).map((e=>a(e)[c]-e[0][s])).map(r).map(t.measure),d=i.map((e=>n[s]-e[s])).map((e=>-r(e))),f=u(d).map((e=>e[0])).map(((e,t)=>e+l[t]));return{snaps:d,snapsAligned:f}}(K,X,G,J,re),ce=-a(oe)+a(te),{snapsContained:ae,scrollContainLimit:ue}=function(e,t,n,i,r){const o=h(-t+e,0),c=n.map(((e,t)=>{const{min:i,max:r}=o,s=o.constrain(e),c=!t,a=l(n,t);return c?r:a||d(i,s)?i:d(r,s)?r:s})).map((e=>parseFloat(e.toFixed(3)))),u=function(){const e=c[0],t=a(c);return h(c.lastIndexOf(e),c.indexOf(t)+1)}();function d(e,t){return s(e,t)<1}return{snapsContained:function(){if(t<=e+2)return[o.max];if("keepSnaps"===i)return c;const{min:n,max:r}=u;return c.slice(n,r)}(),scrollContainLimit:u}}($,ce,se,V),le=Y?ae:se,{limit:de}=function(e,t,n){const i=t[0];return{limit:h(n?i-e:a(t),i)}}(ce,le,C),fe=y(u(le),j,C),pe=fe.clone(),me=c(p),ge=function(e,t,n,i){const o=g(),s=1e3/60;let c=null,a=0,u=0;function l(e){if(!u)return;c||(c=e);const o=e-c;for(c=e,a+=o;a>=s;)n(),a-=s;const d=r(a/s);i(d),u&&t.requestAnimationFrame(l)}function d(){t.cancelAnimationFrame(u),c=null,a=0,u=0}return{init:function(){o.add(e,"visibilitychange",(()=>{e.hidden&&(c=null,a=0)}))},destroy:function(){d(),o.clear()},start:function(){u||(u=t.requestAnimationFrame(l))},stop:d,update:n,render:i}}(m,P,(()=>(({dragHandler:e,scrollBody:t,scrollBounds:n,options:{loop:i}})=>{i||n.constrain(e.pointerDown()),t.seek()})(Te)),(e=>(({scrollBody:e,translate:t,location:n,offsetLocation:i,scrollLooper:r,slideLooper:o,dragHandler:s,animation:c,eventHandler:a,options:{loop:u}},l)=>{const d=e.velocity(),f=e.settled();f&&!s.pointerDown()&&(c.stop(),a.emit("settle")),f||a.emit("scroll"),i.set(n.get()-d+d*l),u&&(r.loop(e.direction()),o.loop()),t.to(i.get())})(Te,e))),he=le[fe.get()],ye=k(he),be=k(he),ve=k(he),xe=function(e,t,n,i,s){let c=0,a=0,u=i,l=.68,d=e.get(),f=0;function p(e){return u=e,g}function m(e){return l=e,g}const g={direction:function(){return a},duration:function(){return u},velocity:function(){return c},seek:function(){const t=n.get()-e.get();let i=0;return u?(c+=t/u,c*=l,d+=c,e.add(c),i=d-f):(c=0,e.set(n),i=t),a=o(i),f=d,g},settled:function(){return r(n.get()-t.get())<.001},useBaseFriction:function(){return m(.68)},useBaseDuration:function(){return p(i)},useFriction:m,useDuration:p};return g}(ye,be,ve,H),we=function(e,t,n,i,s){const{reachedAny:c,removeOffset:u,constrain:l}=i;function d(e){return e.concat().sort(((e,t)=>r(e)-r(t)))[0]}function f(t,i){const r=[t,t+n,t-n];if(!e)return r[0];if(!i)return d(r);const s=r.filter((e=>o(e)===i));return s.length?d(s):a(r)-n}return{byDistance:function(n,i){const o=s.get()+n,{index:a,distance:d}=function(n){const i=e?u(n):l(n),o=t.map(((e,t)=>({diff:f(e-i,0),index:t}))).sort(((e,t)=>r(e.diff)-r(t.diff))),{index:s}=o[0];return{index:s,distance:i}}(o),p=!e&&c(o);return!i||p?{index:a,distance:n}:{index:a,distance:n+f(t[a]-d,0)}},byIndex:function(e,n){return{index:e,distance:f(t[e]-s.get(),n)}},shortcut:f}}(C,le,ce,de,ve),Se=function(e,t,n,i,r,o,s){function c(r){const c=r.distance,a=r.index!==t.get();o.add(c),c&&(i.duration()?e.start():(e.update(),e.render(1),e.update())),a&&(n.set(t.get()),t.set(r.index),s.emit("select"))}return{distance:function(e,t){c(r.byDistance(e,t))},index:function(e,n){const i=t.clone().set(e);c(r.byIndex(i.get(),n))}}}(ge,fe,pe,xe,we,ve,M),ke=function(e){const{max:t,length:n}=e;return{get:function(e){return n?(e-t)/-n:0}}}(de),Ee=g(),Le=function(e,t,n,i){const r={};let o,s=null,c=null,a=!1;return{init:function(){o=new IntersectionObserver((e=>{a||(e.forEach((e=>{const n=t.indexOf(e.target);r[n]=e})),s=null,c=null,n.emit("slidesInView"))}),{root:e.parentElement,threshold:i}),t.forEach((e=>o.observe(e)))},destroy:function(){o&&o.disconnect(),a=!0},get:function(e=!0){if(e&&s)return s;if(!e&&c)return c;const t=function(e){return f(r).reduce(((t,n)=>{const i=parseInt(n),{isIntersecting:o}=r[i];return(e&&o||!e&&!o)&&t.push(i),t}),[])}(e);return e&&(s=t),e||(c=t),t}}}(i,p,M,q),{slideRegistry:_e}=function(e,t,n,i,r,o){const{groupSlides:s}=r,{min:c,max:f}=i;return{slideRegistry:function(){const i=s(o),r=!e||"keepSnaps"===t;return 1===n.length?[o]:r?i:i.slice(c,f).map(((e,t,n)=>{const i=!t,r=l(n,t);return i?d(a(n[0])+1):r?d(u(o)-a(n)[0]+1,a(n)[0]):e}))}()}}(Y,V,le,ue,re,me),Pe=function(t,n,i,r,o,s){let c=0;function a(e){"Tab"===e.code&&(c=(new Date).getTime())}function u(a){s.add(a,"focus",(()=>{if((new Date).getTime()-c>10)return;t.scrollLeft=0;const s=n.indexOf(a),u=i.findIndex((e=>e.includes(s)));e(u)&&(o.useDuration(0),r.index(u,0))}),{passive:!0,capture:!0})}return{init:function(){s.add(document,"keydown",a,!1),n.forEach(u)}}}(n,p,_e,Se,xe,Ee),Te={ownerDocument:m,ownerWindow:P,eventHandler:M,containerRect:G,slideRects:J,animation:ge,axis:K,dragHandler:b(K,n,m,P,ve,v(K,P),ye,ge,Se,xe,we,fe,M,Q,N,O,F,.68,B),eventStore:Ee,percentOfView:Q,index:fe,indexPrevious:pe,limit:de,location:ye,offsetLocation:be,options:T,resizeHandler:x(i,M,P,p,K,W,U),scrollBody:xe,scrollBounds:w(de,be,ve,xe,Q),scrollLooper:S(ce,de,be,[ye,be,ve]),scrollProgress:ke,scrollSnapList:le.map(ke.get),scrollSnaps:le,scrollTarget:we,scrollTo:Se,slideLooper:L(K,$,ce,ee,te,oe,le,be,p),slideFocus:Pe,slidesHandler:_(i,M,R),slidesInView:Le,slideIndexes:me,slideRegistry:_e,slidesToScroll:re,target:ve,translate:E(K,i)};return Te}const T={align:"center",axis:"x",container:null,slides:null,containScroll:"trimSnaps",direction:"ltr",slidesToScroll:1,inViewThreshold:0,breakpoints:{},dragFree:!1,dragThreshold:10,loop:!1,skipSnaps:!1,duration:25,startIndex:0,active:!0,watchDrag:!0,watchResize:!0,watchSlides:!0};function M(e){function t(e,t){return p(e,t||{})}return{mergeOptions:t,optionsAtMedia:function(n){const i=n.breakpoints||{},r=f(i).filter((t=>e.matchMedia(t).matches)).map((e=>i[e])).reduce(((e,n)=>t(e,n)),{});return t(n,r)},optionsMediaQueries:function(t){return t.map((e=>f(e.breakpoints||{}))).reduce(((e,t)=>e.concat(t)),[]).map(e.matchMedia)}}}function A(e,n,i){const r=e.ownerDocument,o=r.defaultView,s=M(o),c=function(e){let t=[];return{init:function(n,i){return t=i.filter((({options:t})=>!1!==e.optionsAtMedia(t).active)),t.forEach((t=>t.init(n,e))),i.reduce(((e,t)=>Object.assign(e,{[t.name]:t})),{})},destroy:function(){t=t.filter((e=>e.destroy()))}}}(s),a=g(),u=function(){const e={};let t;function n(t){return e[t]||[]}const i={init:function(e){t=e},emit:function(e){return n(e).forEach((n=>n(t,e))),i},off:function(t,r){return e[t]=n(t).filter((e=>e!==r)),i},on:function(t,r){return e[t]=n(t).concat([r]),i}};return i}(),{mergeOptions:l,optionsAtMedia:d,optionsMediaQueries:f}=s,{on:p,off:m,emit:h}=u,y=D;let b,v,x,w,S=!1,k=l(T,A.globalOptions),E=l(k),L=[];function _(t){const n=P(e,x,w,r,o,t,u);return t.loop&&!n.slideLooper.canLoop()?_(Object.assign({},t,{loop:!1})):n}function I(n,i){S||(k=l(k,n),E=d(k),L=i||L,function(){const{container:n,slides:i}=E,r=t(n)?e.querySelector(n):n;x=r||e.children[0];const o=t(i)?x.querySelectorAll(i):i;w=[].slice.call(o||x.children)}(),b=_(E),f([k,...L.map((({options:e})=>e))]).forEach((e=>a.add(e,"change",D))),E.active&&(b.translate.to(b.location.get()),b.animation.init(),b.slidesInView.init(),b.slideFocus.init(),b.eventHandler.init(N),b.resizeHandler.init(N),b.slidesHandler.init(N),b.options.loop&&b.slideLooper.loop(),x.offsetParent&&w.length&&b.dragHandler.init(N),v=c.init(N,L)))}function D(e,t){const n=H();j(),I(l({startIndex:n},e),t),u.emit("reInit")}function j(){b.dragHandler.destroy(),b.eventStore.clear(),b.translate.clear(),b.slideLooper.clear(),b.resizeHandler.destroy(),b.slidesHandler.destroy(),b.slidesInView.destroy(),b.animation.destroy(),c.destroy(),a.clear()}function C(e,t,n){E.active&&!S&&(b.scrollBody.useBaseFriction().useDuration(!0===t?0:E.duration),b.scrollTo.index(e,n||0))}function H(){return b.index.get()}const N={canScrollNext:function(){return b.index.add(1).get()!==H()},canScrollPrev:function(){return b.index.add(-1).get()!==H()},containerNode:function(){return x},internalEngine:function(){return b},destroy:function(){S||(S=!0,a.clear(),j(),u.emit("destroy"))},off:m,on:p,emit:h,plugins:function(){return v},previousScrollSnap:function(){return b.indexPrevious.get()},reInit:y,rootNode:function(){return e},scrollNext:function(e){C(b.index.add(1).get(),e,-1)},scrollPrev:function(e){C(b.index.add(-1).get(),e,1)},scrollProgress:function(){return b.scrollProgress.get(b.location.get())},scrollSnapList:function(){return b.scrollSnapList},scrollTo:C,selectedScrollSnap:H,slideNodes:function(){return w},slidesInView:function(){return b.slidesInView.get()},slidesNotInView:function(){return b.slidesInView.get(!1)}};return I(n,i),setTimeout((()=>u.emit("init")),0),N}A.globalOptions=void 0;class I{root;initPromise;constructor(e){this.initPromise=this.init(e)}async init(e){const t=await(await fetch("./src/components/"+e)).text(),n=document.createElement("div");n.innerHTML=t,this.root=n.querySelector("div")}}class D extends I{constructor(e){super("project-card.html"),this.initPromise.then((()=>{this.root.querySelector(".project-card__title").innerHTML=e.title,this.root.querySelector(".project-card__subtitle").innerHTML=e.subtitle;const t=this.root.querySelector(".project-card__carousel-slides-container");e.slides.map((e=>{const n=document.createElement(e.tag);switch(n.className="flex grow-0 shrink-0 basis-full min-w-0 object-scale-down",e.tag){case"img":n.src=e.src;break;case"video":{n.autoplay=!0,n.loop=!0,n.muted=!0;const t=document.createElement("source");t.src=e.src,t.type="video/"+e.src.split(".").at(-1),n.appendChild(t);break}}t.appendChild(n)})),this.root.querySelector(".project-card__main-desc").innerHTML=e.paragraphs.map((e=>"<p>"+e+"</p>")).join("<br>"),this.root.querySelector(".project-card__details__github-link").href=e.githubLink;const n=this.root.querySelector(".project-card__details__skills-container");e.skills.map((e=>{const t=document.createElement("div");t.className="border h-fit py-1 px-3 border-neutral-400 rounded-3xl";const i=document.createElement("span");i.className="max-w-full",i.innerHTML=e,t.appendChild(i),n.appendChild(t)}));const i=this.root.querySelector(".project-card__carousel-root");setTimeout((()=>{const e=A(i,{loop:!1,duration:25});this.root.querySelector(".project-card__carousel-prev-btn").addEventListener("click",(()=>{e.scrollPrev()})),this.root.querySelector(".project-card__carousel-next-btn").addEventListener("click",(()=>{e.scrollNext()})),e.on("select",this.setCarouselPageNum),e.on("select",this.setVideoPlayState),this.setCarouselPageNum(e)}),10);const r=new ResizeObserver((()=>{const e=this.root.querySelector(".project-card__details-container"),t=e.computedStyleMap().get("column-gap").value,n=this.root.querySelector(".project-card__details__skills-label").offsetWidth,i=e.offsetWidth-n-t,r=this.root.querySelector(".project-card__details__skills-container");Array.from(r.children).map((e=>{const t=e.firstElementChild;t.style.textWrap="nowrap";const n=e.computedStyleMap();e.offsetWidth<=i?e.style.removeProperty("width"):(t.style.removeProperty("text-wrap"),e.style.width=t.offsetWidth+n.get("padding-left").value+n.get("padding-right").value+2*n.get("border-left-width").value+"px")}))}).bind(this));r.observe(i)}))}setCarouselPageNum(e){e.rootNode().querySelector(".project-card__carousel-page-display").innerText=e.selectedScrollSnap()+1+"/"+e.slideNodes().length}setVideoPlayState(e){const t=e.selectedScrollSnap();e.slideNodes().map(((e,n,i)=>{e instanceof HTMLVideoElement&&(t===n?e.play():e.pause())}))}}const j=document.getElementById("project-card-container");[{title:"Portfolio Website",subtitle:"Apr 2022 - Work in Progress (Solo Project)",slides:[{tag:"img",src:"./images/person-fill.svg"},{tag:"img",src:"./images/person-fill.svg"},{tag:"img",src:"./images/person-fill.svg"}],paragraphs:["<b>Portfolio website</b> (which you are currently looking at) for presenting my software development projects and works.","<span class='text-pink-500'>Responsive Web Design</span> is applied throughout the whole website via <span class='text-pink-500'>Tailwind CSS</span>, making the website respond to different screen sizes to change its layout accordingly. Furthermore, this was the first time I have utilised a module bundler like <span class='text-pink-500'>Webpack</span>, and it was quite interesting how it analyses module dependencies in different JavaScript files and bundles them into a single JavaScript file."],githubLink:"https://github.com/kaismic/My-Portfolio/",skills:["HTML","CSS","JavaScript","TypeScript","Tailwind CSS","WebPack","npm"]},{title:"Custom Layout Keyboard for Android",subtitle:"Apr 2022 - Dec 2023 (Solo Project)",slides:[{tag:"video",src:"./images/custom-layout-keyboard/screen_record_0.mp4"},{tag:"img",src:"./images/custom-layout-keyboard/screenshot_0.png"},{tag:"img",src:"./images/custom-layout-keyboard/screenshot_1.png"},{tag:"img",src:"./images/custom-layout-keyboard/screenshot_2.png"}],paragraphs:["<b>An Android application which allows customising keyboard layouts</b> developed using <span class='text-pink-500'>Kotlin</span> and <span class='text-pink-500'>Android Studio</span>. This application was developed because I could not find a decent keyboard application which also supports keyboard layout customisation.","One of the valuable experiences that I have gained while working on this project was the experience of using features of <span class='text-pink-500'>Object Oriented Programming</span>. As an example, during development, I realised that I was writing overlapping codes repeatedly, and this was when the concept of <span class='text-pink-500'>inheritance</span> came to my mind. Using inheritance effectively reduced the amount of code I had to write and improved reusability of the code. Furthermore, I have also gained hands-on experience on Kotlin and android application lifecycle while working on this project."],githubLink:"https://github.com/kaismic/My-Portfolio/",skills:["Kotlin","Android","Android Studio"]},{title:"Hitomi Scroll Viewer",subtitle:"Jul 2022 - Mar 2024 (Solo Project)",slides:[{tag:"img",src:"./images/hitomi-scroll-viewer/preview_0.png"},{tag:"img",src:"./images/hitomi-scroll-viewer/preview_1.png"},{tag:"img",src:"./images/hitomi-scroll-viewer/preview_2.png"},{tag:"img",src:"./images/hitomi-scroll-viewer/preview_3.png"}],paragraphs:["<b>A Windows application manga viewer with additional features such as auto scrolling, searching by tags and downloading.</b> This application was developed because the original website lacked functionalities that I needed and it was inconvenient to use the already existing features in the website. Developed using <span class='text-pink-500'>C#</span>, <span class='text-pink-500'>.NET</span> and <span class='text-pink-500'>WinUI 3</span> Platform","mention utilising mutex, multi threading i guess?, modularising components, etc."],githubLink:"https://github.com/kaismic/Hitomi-Scroll-Viewer",skills:["C#",".NET","WinUI 3","Windows"]}].map((e=>{const t=new D(e);t.initPromise.then((()=>{j.appendChild(t.root)}))}))})();
\ No newline at end of file
+customElements.define("about-me-item",class extends HTMLDivElement{constructor(){super()}connectedCallback(){this.className="w-full sm:w-1/2 lg:w-1/3";let e=document.createElement("div");e.className="flex max-w-64 w-full mx-auto items-center";let t=document.createElement("img");t.className="w-8 h-8 mr-8 fill-zinc-600",t.src=this.getAttribute("icon-src"),e.appendChild(t);let n=document.createElement("div"),i=document.createElement("div");i.className="font-Roboto text-2xl font-bold text-zinc-600 w-fit text-left",i.innerHTML=this.getAttribute("label"),n.appendChild(i);let o=document.createElement("div");o.className="font-Roboto text-lg font-normal text-zinc-600 w-fit text-left",o.innerHTML=this.getAttribute("value"),n.appendChild(o),e.appendChild(n),this.appendChild(e)}},{extends:"div"}),(()=>{"use strict";function e(e){return"number"==typeof e}function t(e){return"string"==typeof e}function n(e){return"boolean"==typeof e}function i(e){return"[object Object]"===Object.prototype.toString.call(e)}function o(e){return Math.abs(e)}function r(e){return Math.sign(e)}function s(e,t){return o(e-t)}function c(e){return p(e).map(Number)}function a(e){return e[u(e)]}function u(e){return Math.max(0,e.length-1)}function l(e,t){return t===u(e)}function d(e,t=0){return Array.from(Array(e),((e,n)=>t+n))}function p(e){return Object.keys(e)}function f(e,t){return[e,t].reduce(((e,t)=>(p(t).forEach((n=>{const o=e[n],r=t[n],s=i(o)&&i(r);e[n]=s?f(o,r):r})),e)),{})}function m(e,t){return void 0!==t.MouseEvent&&e instanceof t.MouseEvent}function g(){let e=[];const t={add:function(n,i,o,r={passive:!0}){let s;if("addEventListener"in n)n.addEventListener(i,o,r),s=()=>n.removeEventListener(i,o,r);else{const e=n;e.addListener(o),s=()=>e.removeListener(o)}return e.push(s),t},clear:function(){e=e.filter((e=>e()))}};return t}function h(e=0,t=0){const n=o(e-t);function i(t){return t<e}function r(e){return e>t}function s(e){return i(e)||r(e)}return{length:n,max:t,min:e,constrain:function(n){return s(n)?i(n)?e:t:n},reachedAny:s,reachedMax:r,reachedMin:i,removeOffset:function(e){return n?e-n*Math.ceil((e-t)/n):e}}}function b(e,t,n){const{constrain:i}=h(0,e),r=e+1;let s=c(t);function c(e){return n?o((r+e)%r):i(e)}function a(){return s}function u(){return b(e,a(),n)}const l={get:a,set:function(e){return s=c(e),l},add:function(e){return u().set(a()+e)},clone:u};return l}function y(e,t,i,c,a,u,l,d,p,f,b,y,v,w,x,S,k,_,E){const{cross:P,direction:L}=e,T=["INPUT","SELECT","TEXTAREA"],A={passive:!1},I=g(),M=g(),j=h(50,225).constrain(w.measure(20)),C={mouse:300,touch:400},D={mouse:500,touch:600},H=x?43:25;let N=!1,O=0,q=0,F=!1,z=!1,V=!1,W=!1;function R(e){const t=u.readPoint(e),n=u.readPoint(e,P),i=s(t,O),o=s(n,q);if(!z&&!W){if(!e.cancelable)return B(e);if(z=i>o,!z)return B(e)}const r=u.pointerMove(e);i>S&&(V=!0),f.useFriction(.3).useDuration(1),d.start(),a.add(L(r)),e.preventDefault()}function B(e){const t=b.byDistance(0,!1).index!==y.get(),n=u.pointerUp(e)*(x?D:C)[W?"mouse":"touch"],i=function(e,t){const n=y.add(-1*r(e)),i=b.byDistance(e,!x).distance;return x||o(e)<j?i:k&&t?.5*i:b.byIndex(n.get(),0).distance}(L(n),t),c=function(e,t){if(0===e||0===t)return 0;if(o(e)<=o(t))return 0;const n=s(o(e),o(t));return o(n/e)}(n,i),a=H-10*c,l=_+c/50;z=!1,F=!1,M.clear(),f.useDuration(a).useFriction(l),p.distance(i,!x),W=!1,v.emit("pointerUp")}function G(e){V&&(e.stopPropagation(),e.preventDefault(),V=!1)}return{init:function(e){if(!E)return;function o(o){(n(E)||E(e,o))&&function(e){const n=m(e,c);W=n,V=x&&n&&!e.buttons&&N,N=s(a.get(),l.get())>=2,n&&0!==e.button||function(e){const t=e.nodeName||"";return T.includes(t)}(e.target)||(F=!0,u.pointerDown(e),f.useFriction(0).useDuration(0),a.set(l),function(){const e=W?i:t;M.add(e,"touchmove",R,A).add(e,"touchend",B).add(e,"mousemove",R,A).add(e,"mouseup",B)}(),O=u.readPoint(e),q=u.readPoint(e,P),v.emit("pointerDown"))}(o)}const r=t;I.add(r,"dragstart",(e=>e.preventDefault()),A).add(r,"touchmove",(()=>{}),A).add(r,"touchend",(()=>{})).add(r,"touchstart",o).add(r,"mousedown",o).add(r,"touchcancel",B).add(r,"contextmenu",B).add(r,"click",G,!0)},pointerDown:function(){return F},destroy:function(){I.clear(),M.clear()}}}function v(e,t){let n,i;function r(e){return e.timeStamp}function s(n,i){const o="client"+("x"===(i||e.scroll)?"X":"Y");return(m(n,t)?n:n.touches[0])[o]}return{pointerDown:function(e){return n=e,i=e,s(e)},pointerMove:function(e){const t=s(e)-s(i),o=r(e)-r(n)>170;return i=e,o&&(n=e),t},pointerUp:function(e){if(!n||!i)return 0;const t=s(i)-s(n),c=r(e)-r(n),a=r(e)-r(i)>170,u=t/c;return c&&!a&&o(u)>.1?u:0},readPoint:s}}function w(e,t,i,r,s,c,a){let u,l,d=[],p=!1;function f(e){return s.measureSize(a.measure(e))}return{init:function(s){c&&(l=f(e),d=r.map(f),u=new ResizeObserver((a=>{p||(n(c)||c(s,a))&&function(n){for(const c of n){const n=c.target===e,a=r.indexOf(c.target),u=n?l:d[a];if(o(f(n?e:r[a])-u)>=.5){i.requestAnimationFrame((()=>{s.reInit(),t.emit("resize")}));break}}}(a)})),[e].concat(r).forEach((e=>u.observe(e))))},destroy:function(){u&&u.disconnect(),p=!0}}}function x(e,t,n,i,r){const s=r.measure(10),c=r.measure(50),a=h(.1,.99);let u=!1;return{constrain:function(r){if(u||!e.reachedAny(n.get())||!e.reachedAny(t.get()))return;const l=e.reachedMin(t.get())?"min":"max",d=o(e[l]-t.get()),p=n.get()-t.get(),f=a.constrain(d/c);n.subtract(p*f),!r&&o(p)<s&&(n.set(e.constrain(n.get())),i.useDuration(25).useBaseFriction())},toggleActive:function(e){u=!e}}}function S(e,t,n,i){const o=t.min+.1,r=t.max+.1,{reachedMin:s,reachedMax:c}=h(o,r);return{loop:function(t){if(!function(e){return 1===e?c(n.get()):-1===e&&s(n.get())}(t))return;const o=e*(-1*t);i.forEach((e=>e.add(o)))}}}function k(t){let n=t;function i(t){return e(t)?t:t.get()}return{get:function(){return n},set:function(e){n=i(e)},add:function(e){n+=i(e)},subtract:function(e){n-=i(e)}}}function _(e,t){const n="x"===e.scroll?function(e){return`translate3d(${e}px,0px,0px)`}:function(e){return`translate3d(0px,${e}px,0px)`},i=t.style;let o=!1;return{clear:function(){o||(i.transform="",t.getAttribute("style")||t.removeAttribute("style"))},to:function(t){o||(i.transform=n(e.direction(t)))},toggleActive:function(e){o=!e}}}function E(e,t,n,i,o,r,s,a,u){const l=c(o),d=c(o).reverse(),p=function(){const e=s[0];return g(m(d,e),n,!1)}().concat(function(){const e=t-s[0]-1;return g(m(l,e),-n,!0)}());function f(e,t){return e.reduce(((e,t)=>e-o[t]),t)}function m(e,t){return e.reduce(((e,n)=>f(e,t)>0?e.concat([n]):e),[])}function g(o,s,c){const l=function(e){return r.map(((n,o)=>({start:n-i[o]+.5+e,end:n+t-.5+e})))}(s);return o.map((t=>{const i=c?0:-n,o=c?n:0,r=c?"end":"start",s=l[t][r];return{index:t,loopPoint:s,slideLocation:k(-1),translate:_(e,u[t]),target:()=>a.get()>s?i:o}}))}return{canLoop:function(){return p.every((({index:e})=>f(l.filter((t=>t!==e)),t)<=.1))},clear:function(){p.forEach((e=>e.translate.clear()))},loop:function(){p.forEach((e=>{const{target:t,translate:n,slideLocation:i}=e,o=t();o!==i.get()&&(n.to(o),i.set(o))}))},loopPoints:p}}function P(e,t,i){let o,r=!1;return{init:function(s){i&&(o=new MutationObserver((e=>{r||(n(i)||i(s,e))&&function(e){for(const n of e)if("childList"===n.type){s.reInit(),t.emit("slidesChanged");break}}(e)})),o.observe(e,{childList:!0}))},destroy:function(){o&&o.disconnect(),r=!0}}}function L(n,i,f,m,L,T,A){const{align:I,axis:M,direction:j,startIndex:C,loop:D,duration:H,dragFree:N,dragThreshold:O,inViewThreshold:q,slidesToScroll:F,skipSnaps:z,containScroll:V,watchResize:W,watchSlides:R,watchDrag:B}=T,G={measure:function(e){const{offsetTop:t,offsetLeft:n,offsetWidth:i,offsetHeight:o}=e;return{top:t,right:n+i,bottom:t+o,left:n,width:i,height:o}}},U=G.measure(i),K=f.map(G.measure),J=function(e,t){const n="rtl"===t,i="y"===e,o=!i&&n?-1:1;return{scroll:i?"y":"x",cross:i?"x":"y",startEdge:i?"top":n?"right":"left",endEdge:i?"bottom":n?"left":"right",measureSize:function(e){const{height:t,width:n}=e;return i?t:n},direction:function(e){return e*o}}}(M,j),$=J.measureSize(U),Q=function(e){return{measure:function(t){return e*(t/100)}}}($),X=function(e,n){const i={start:function(){return 0},center:function(e){return o(e)/2},end:o};function o(e){return n-e}return{measure:function(o,r){return t(e)?i[e](o):e(n,o,r)}}}(I,$),Y=!D&&!!V,Z=D||!!V,{slideSizes:ee,slideSizesWithGaps:te,startGap:ne,endGap:ie}=function(e,t,n,i,r,s){const{measureSize:c,startEdge:u,endEdge:d}=e,p=n[0]&&r,f=function(){if(!p)return 0;const e=n[0];return o(t[u]-e[u])}(),m=function(){if(!p)return 0;const e=s.getComputedStyle(a(i));return parseFloat(e.getPropertyValue(`margin-${d}`))}(),g=n.map(c),h=n.map(((e,t,n)=>{const i=!t,o=l(n,t);return i?g[t]+f:o?g[t]+m:n[t+1][u]-e[u]})).map(o);return{slideSizes:g,slideSizesWithGaps:h,startGap:f,endGap:m}}(J,U,K,f,Z,L),oe=function(t,n,i,r,s,l,d,p,f){const{startEdge:m,endEdge:g,direction:h}=t,b=e(i);return{groupSlides:function(e){return b?function(e,t){return c(e).filter((e=>e%t==0)).map((n=>e.slice(n,n+t)))}(e,i):function(e){return e.length?c(e).reduce(((t,i,c)=>{const b=a(t)||0,y=0===b,v=i===u(e),w=s[m]-l[b][m],x=s[m]-l[i][g],S=!r&&y?h(d):0,k=o(x-(!r&&v?h(p):0)-(w+S));return c&&k>n+f&&t.push(i),v&&t.push(e.length),t}),[]).map(((t,n,i)=>{const o=Math.max(i[n-1]||0);return e.slice(o,t)})):[]}(e)}}}(J,$,F,D,U,K,ne,ie,2),{snaps:re,snapsAligned:se}=function(e,t,n,i,r){const{startEdge:s,endEdge:c}=e,{groupSlides:u}=r,l=u(i).map((e=>a(e)[c]-e[0][s])).map(o).map(t.measure),d=i.map((e=>n[s]-e[s])).map((e=>-o(e))),p=u(d).map((e=>e[0])).map(((e,t)=>e+l[t]));return{snaps:d,snapsAligned:p}}(J,X,U,K,oe),ce=-a(re)+a(te),{snapsContained:ae,scrollContainLimit:ue}=function(e,t,n,i,o){const r=h(-t+e,0),c=n.map(((e,t)=>{const{min:i,max:o}=r,s=r.constrain(e),c=!t,a=l(n,t);return c?o:a||d(i,s)?i:d(o,s)?o:s})).map((e=>parseFloat(e.toFixed(3)))),u=function(){const e=c[0],t=a(c);return h(c.lastIndexOf(e),c.indexOf(t)+1)}();function d(e,t){return s(e,t)<1}return{snapsContained:function(){if(t<=e+2)return[r.max];if("keepSnaps"===i)return c;const{min:n,max:o}=u;return c.slice(n,o)}(),scrollContainLimit:u}}($,ce,se,V),le=Y?ae:se,{limit:de}=function(e,t,n){const i=t[0];return{limit:h(n?i-e:a(t),i)}}(ce,le,D),pe=b(u(le),C,D),fe=pe.clone(),me=c(f),ge=function(e,t,n,i){const r=g(),s=1e3/60;let c=null,a=0,u=0;function l(e){if(!u)return;c||(c=e);const r=e-c;for(c=e,a+=r;a>=s;)n(),a-=s;const d=o(a/s);i(d),u&&t.requestAnimationFrame(l)}function d(){t.cancelAnimationFrame(u),c=null,a=0,u=0}return{init:function(){r.add(e,"visibilitychange",(()=>{e.hidden&&(c=null,a=0)}))},destroy:function(){d(),r.clear()},start:function(){u||(u=t.requestAnimationFrame(l))},stop:d,update:n,render:i}}(m,L,(()=>(({dragHandler:e,scrollBody:t,scrollBounds:n,options:{loop:i}})=>{i||n.constrain(e.pointerDown()),t.seek()})(Te)),(e=>(({scrollBody:e,translate:t,location:n,offsetLocation:i,scrollLooper:o,slideLooper:r,dragHandler:s,animation:c,eventHandler:a,options:{loop:u}},l)=>{const d=e.velocity(),p=e.settled();p&&!s.pointerDown()&&(c.stop(),a.emit("settle")),p||a.emit("scroll"),i.set(n.get()-d+d*l),u&&(o.loop(e.direction()),r.loop()),t.to(i.get())})(Te,e))),he=le[pe.get()],be=k(he),ye=k(he),ve=k(he),we=function(e,t,n,i,s){let c=0,a=0,u=i,l=.68,d=e.get(),p=0;function f(e){return u=e,g}function m(e){return l=e,g}const g={direction:function(){return a},duration:function(){return u},velocity:function(){return c},seek:function(){const t=n.get()-e.get();let i=0;return u?(c+=t/u,c*=l,d+=c,e.add(c),i=d-p):(c=0,e.set(n),i=t),a=r(i),p=d,g},settled:function(){return o(n.get()-t.get())<.001},useBaseFriction:function(){return m(.68)},useBaseDuration:function(){return f(i)},useFriction:m,useDuration:f};return g}(be,ye,ve,H),xe=function(e,t,n,i,s){const{reachedAny:c,removeOffset:u,constrain:l}=i;function d(e){return e.concat().sort(((e,t)=>o(e)-o(t)))[0]}function p(t,i){const o=[t,t+n,t-n];if(!e)return o[0];if(!i)return d(o);const s=o.filter((e=>r(e)===i));return s.length?d(s):a(o)-n}return{byDistance:function(n,i){const r=s.get()+n,{index:a,distance:d}=function(n){const i=e?u(n):l(n),r=t.map(((e,t)=>({diff:p(e-i,0),index:t}))).sort(((e,t)=>o(e.diff)-o(t.diff))),{index:s}=r[0];return{index:s,distance:i}}(r),f=!e&&c(r);return!i||f?{index:a,distance:n}:{index:a,distance:n+p(t[a]-d,0)}},byIndex:function(e,n){return{index:e,distance:p(t[e]-s.get(),n)}},shortcut:p}}(D,le,ce,de,ve),Se=function(e,t,n,i,o,r,s){function c(o){const c=o.distance,a=o.index!==t.get();r.add(c),c&&(i.duration()?e.start():(e.update(),e.render(1),e.update())),a&&(n.set(t.get()),t.set(o.index),s.emit("select"))}return{distance:function(e,t){c(o.byDistance(e,t))},index:function(e,n){const i=t.clone().set(e);c(o.byIndex(i.get(),n))}}}(ge,pe,fe,we,xe,ve,A),ke=function(e){const{max:t,length:n}=e;return{get:function(e){return n?(e-t)/-n:0}}}(de),_e=g(),Ee=function(e,t,n,i){const o={};let r,s=null,c=null,a=!1;return{init:function(){r=new IntersectionObserver((e=>{a||(e.forEach((e=>{const n=t.indexOf(e.target);o[n]=e})),s=null,c=null,n.emit("slidesInView"))}),{root:e.parentElement,threshold:i}),t.forEach((e=>r.observe(e)))},destroy:function(){r&&r.disconnect(),a=!0},get:function(e=!0){if(e&&s)return s;if(!e&&c)return c;const t=function(e){return p(o).reduce(((t,n)=>{const i=parseInt(n),{isIntersecting:r}=o[i];return(e&&r||!e&&!r)&&t.push(i),t}),[])}(e);return e&&(s=t),e||(c=t),t}}}(i,f,A,q),{slideRegistry:Pe}=function(e,t,n,i,o,r){const{groupSlides:s}=o,{min:c,max:p}=i;return{slideRegistry:function(){const i=s(r),o=!e||"keepSnaps"===t;return 1===n.length?[r]:o?i:i.slice(c,p).map(((e,t,n)=>{const i=!t,o=l(n,t);return i?d(a(n[0])+1):o?d(u(r)-a(n)[0]+1,a(n)[0]):e}))}()}}(Y,V,le,ue,oe,me),Le=function(t,n,i,o,r,s){let c=0;function a(e){"Tab"===e.code&&(c=(new Date).getTime())}function u(a){s.add(a,"focus",(()=>{if((new Date).getTime()-c>10)return;t.scrollLeft=0;const s=n.indexOf(a),u=i.findIndex((e=>e.includes(s)));e(u)&&(r.useDuration(0),o.index(u,0))}),{passive:!0,capture:!0})}return{init:function(){s.add(document,"keydown",a,!1),n.forEach(u)}}}(n,f,Pe,Se,we,_e),Te={ownerDocument:m,ownerWindow:L,eventHandler:A,containerRect:U,slideRects:K,animation:ge,axis:J,dragHandler:y(J,n,m,L,ve,v(J,L),be,ge,Se,we,xe,pe,A,Q,N,O,z,.68,B),eventStore:_e,percentOfView:Q,index:pe,indexPrevious:fe,limit:de,location:be,offsetLocation:ye,options:T,resizeHandler:w(i,A,L,f,J,W,G),scrollBody:we,scrollBounds:x(de,ye,ve,we,Q),scrollLooper:S(ce,de,ye,[be,ye,ve]),scrollProgress:ke,scrollSnapList:le.map(ke.get),scrollSnaps:le,scrollTarget:xe,scrollTo:Se,slideLooper:E(J,$,ce,ee,te,re,le,ye,f),slideFocus:Le,slidesHandler:P(i,A,R),slidesInView:Ee,slideIndexes:me,slideRegistry:Pe,slidesToScroll:oe,target:ve,translate:_(J,i)};return Te}const T={align:"center",axis:"x",container:null,slides:null,containScroll:"trimSnaps",direction:"ltr",slidesToScroll:1,inViewThreshold:0,breakpoints:{},dragFree:!1,dragThreshold:10,loop:!1,skipSnaps:!1,duration:25,startIndex:0,active:!0,watchDrag:!0,watchResize:!0,watchSlides:!0};function A(e){function t(e,t){return f(e,t||{})}return{mergeOptions:t,optionsAtMedia:function(n){const i=n.breakpoints||{},o=p(i).filter((t=>e.matchMedia(t).matches)).map((e=>i[e])).reduce(((e,n)=>t(e,n)),{});return t(n,o)},optionsMediaQueries:function(t){return t.map((e=>p(e.breakpoints||{}))).reduce(((e,t)=>e.concat(t)),[]).map(e.matchMedia)}}}function I(e,n,i){const o=e.ownerDocument,r=o.defaultView,s=A(r),c=function(e){let t=[];return{init:function(n,i){return t=i.filter((({options:t})=>!1!==e.optionsAtMedia(t).active)),t.forEach((t=>t.init(n,e))),i.reduce(((e,t)=>Object.assign(e,{[t.name]:t})),{})},destroy:function(){t=t.filter((e=>e.destroy()))}}}(s),a=g(),u=function(){const e={};let t;function n(t){return e[t]||[]}const i={init:function(e){t=e},emit:function(e){return n(e).forEach((n=>n(t,e))),i},off:function(t,o){return e[t]=n(t).filter((e=>e!==o)),i},on:function(t,o){return e[t]=n(t).concat([o]),i}};return i}(),{mergeOptions:l,optionsAtMedia:d,optionsMediaQueries:p}=s,{on:f,off:m,emit:h}=u,b=j;let y,v,w,x,S=!1,k=l(T,I.globalOptions),_=l(k),E=[];function P(t){const n=L(e,w,x,o,r,t,u);return t.loop&&!n.slideLooper.canLoop()?P(Object.assign({},t,{loop:!1})):n}function M(n,i){S||(k=l(k,n),_=d(k),E=i||E,function(){const{container:n,slides:i}=_,o=t(n)?e.querySelector(n):n;w=o||e.children[0];const r=t(i)?w.querySelectorAll(i):i;x=[].slice.call(r||w.children)}(),y=P(_),p([k,...E.map((({options:e})=>e))]).forEach((e=>a.add(e,"change",j))),_.active&&(y.translate.to(y.location.get()),y.animation.init(),y.slidesInView.init(),y.slideFocus.init(),y.eventHandler.init(N),y.resizeHandler.init(N),y.slidesHandler.init(N),y.options.loop&&y.slideLooper.loop(),w.offsetParent&&x.length&&y.dragHandler.init(N),v=c.init(N,E)))}function j(e,t){const n=H();C(),M(l({startIndex:n},e),t),u.emit("reInit")}function C(){y.dragHandler.destroy(),y.eventStore.clear(),y.translate.clear(),y.slideLooper.clear(),y.resizeHandler.destroy(),y.slidesHandler.destroy(),y.slidesInView.destroy(),y.animation.destroy(),c.destroy(),a.clear()}function D(e,t,n){_.active&&!S&&(y.scrollBody.useBaseFriction().useDuration(!0===t?0:_.duration),y.scrollTo.index(e,n||0))}function H(){return y.index.get()}const N={canScrollNext:function(){return y.index.add(1).get()!==H()},canScrollPrev:function(){return y.index.add(-1).get()!==H()},containerNode:function(){return w},internalEngine:function(){return y},destroy:function(){S||(S=!0,a.clear(),C(),u.emit("destroy"))},off:m,on:f,emit:h,plugins:function(){return v},previousScrollSnap:function(){return y.indexPrevious.get()},reInit:b,rootNode:function(){return e},scrollNext:function(e){D(y.index.add(1).get(),e,-1)},scrollPrev:function(e){D(y.index.add(-1).get(),e,1)},scrollProgress:function(){return y.scrollProgress.get(y.location.get())},scrollSnapList:function(){return y.scrollSnapList},scrollTo:D,selectedScrollSnap:H,slideNodes:function(){return x},slidesInView:function(){return y.slidesInView.get()},slidesNotInView:function(){return y.slidesInView.get(!1)}};return M(n,i),setTimeout((()=>u.emit("init")),0),N}I.globalOptions=void 0;class M{root;initPromise;constructor(e){this.initPromise=this.init(e)}async init(e){const t=await(await fetch("./src/components/"+e)).text(),n=document.createElement("div");n.innerHTML=t,this.root=n.querySelector("div")}}class j extends M{constructor(e){super("project-card.html"),this.initPromise.then((()=>{this.root.querySelector(".project-card__title").innerHTML=e.title,this.root.querySelector(".project-card__subtitle").innerHTML=e.subtitle;const t=this.root.querySelector(".project-card__carousel-slides-container");e.slides.map((e=>{const n=document.createElement(e.tag);switch(n.className="flex grow-0 shrink-0 basis-full min-w-0 object-scale-down",e.tag){case"img":n.src=e.src;break;case"video":{n.autoplay=!0,n.loop=!0,n.muted=!0;const t=document.createElement("source");t.src=e.src,t.type="video/"+e.src.split(".").at(-1),n.appendChild(t);break}}t.appendChild(n)})),this.root.querySelector(".project-card__main-desc").innerHTML=e.paragraphs.map((e=>"<p>"+e+"</p>")).join("<br>"),this.root.querySelector(".project-card__details__github-link").href=e.githubLink;const n=this.root.querySelector(".project-card__details__skills-container");e.skills.map((e=>{const t=document.createElement("div");t.className="border h-fit py-1 px-3 border-neutral-400 rounded-3xl";const i=document.createElement("span");i.className="max-w-full",i.innerHTML=e,t.appendChild(i),n.appendChild(t)}));const i=this.root.querySelector(".project-card__carousel-root");setTimeout((()=>{const e=I(i,{loop:!1,duration:25});this.root.querySelector(".project-card__carousel-prev-btn").addEventListener("click",(()=>{e.scrollPrev()})),this.root.querySelector(".project-card__carousel-next-btn").addEventListener("click",(()=>{e.scrollNext()})),e.on("select",this.setCarouselPageNum),e.on("select",this.setVideoPlayState),this.setCarouselPageNum(e)}),10);const o=new ResizeObserver((()=>{const e=this.root.querySelector(".project-card__details-container"),t=e.computedStyleMap().get("column-gap").value,n=this.root.querySelector(".project-card__details__skills-label").offsetWidth,i=e.offsetWidth-n-t,o=this.root.querySelector(".project-card__details__skills-container");Array.from(o.children).map((e=>{const t=e.firstElementChild;t.style.textWrap="nowrap";const n=e.computedStyleMap();e.offsetWidth<=i?e.style.removeProperty("width"):(t.style.removeProperty("text-wrap"),e.style.width=t.offsetWidth+n.get("padding-left").value+n.get("padding-right").value+2*n.get("border-left-width").value+"px")}))}).bind(this));o.observe(i)}))}setCarouselPageNum(e){e.rootNode().querySelector(".project-card__carousel-page-display").innerText=e.selectedScrollSnap()+1+"/"+e.slideNodes().length}setVideoPlayState(e){const t=e.selectedScrollSnap();e.slideNodes().map(((e,n,i)=>{e instanceof HTMLVideoElement&&(t===n?e.play():e.pause())}))}}const C=document.getElementById("experience-container");[{title:"The Carbon-Conscious Traveller - Internship",subtitle:"Dec 2023 - Jan 2024",slides:[{tag:"img",src:"./images/the-carbon-conscious-traveller/Screenshot_1.png"},{tag:"img",src:"./images/the-carbon-conscious-traveller/Screenshot_2.png"},{tag:"img",src:"./images/the-carbon-conscious-traveller/Screenshot_3.png"},{tag:"img",src:"./images/the-carbon-conscious-traveller/Screenshot_4.png"},{tag:"img",src:"./images/the-carbon-conscious-traveller/Screenshot_5.png"},{tag:"img",src:"./images/the-carbon-conscious-traveller/Screenshot_6.png"},{tag:"img",src:"./images/the-carbon-conscious-traveller/Screenshot_7.png"},{tag:"img",src:"./images/the-carbon-conscious-traveller/Screenshot_8.png"}],paragraphs:["<b>Summer Internship Project offered by Macquarie University.</b> This project involved developing an <b>Android application that calculates and displays carbon emissions with different transport modes.</b> It was developed using <span class='text-pink-500'>Kotlin</span> and <span class='text-pink-500'>Android Studio</span>, utilising various APIs provided by <span class='text-pink-500'>Google Maps Platform</span>.","My responsibilities in this project were: presenting progress in the weekly meeting, background research for other similar projects/apps and developing, testing and streamlining the app.","mention learning about Fragments and Kotlin coroutine and using them, how the app could be improved by migrating to JetPack and using Navigation Component, limits of the app, etc..."],githubLink:"https://github.com/kaismic/The-Carbon-Conscious-Traveller/",skills:["Kotlin","Android","Android Studio","Google Maps API"]}].map((e=>{const t=new j(e);t.initPromise.then((()=>{C.appendChild(t.root)}))}));const D=document.getElementById("projects-container");[{title:"Portfolio Website",subtitle:"Apr 2024 - Work in Progress (Solo Project)",slides:[{tag:"img",src:"./images/my-portfolio/Screenshot_1.jpeg"},{tag:"img",src:"./images/my-portfolio/Screenshot_2.jpeg"},{tag:"img",src:"./images/my-portfolio/Screenshot_3.jpeg"}],paragraphs:["<b>Portfolio website</b> (which you are currently looking at) for presenting my software development projects and works.","<span class='text-pink-500'>Responsive Web Design</span> is applied throughout the whole website via <span class='text-pink-500'>Tailwind CSS</span>, making the website respond to different screen sizes to change its layout accordingly. Furthermore, this was the first time I have utilised a module bundler like <span class='text-pink-500'>Webpack</span>, and it was quite interesting how it analyses module dependencies in different JavaScript files and bundles them into a single JavaScript file."],githubLink:"https://github.com/kaismic/My-Portfolio/",skills:["HTML","CSS","JavaScript","TypeScript","Tailwind CSS","WebPack","npm"]},{title:"Hitomi Scroll Viewer",subtitle:"Jul 2022 - Mar 2024 (Solo Project)",slides:[{tag:"img",src:"./images/hitomi-scroll-viewer/preview_0.png"},{tag:"img",src:"./images/hitomi-scroll-viewer/preview_1.png"},{tag:"img",src:"./images/hitomi-scroll-viewer/preview_2.png"},{tag:"img",src:"./images/hitomi-scroll-viewer/preview_3.png"}],paragraphs:["<b>A Windows application manga viewer with additional features such as auto scrolling, searching by tags and downloading.</b> This application was developed because the original website lacked functionalities that I needed and it was inconvenient to use the already existing features in the website. Developed using <span class='text-pink-500'>C#</span>, <span class='text-pink-500'>.NET</span> and <span class='text-pink-500'>WinUI 3</span> Platform","mention utilising mutex, multi threading i guess?, modularising components, etc."],githubLink:"https://github.com/kaismic/Hitomi-Scroll-Viewer",skills:["C#",".NET","WinUI 3","Windows"]},{title:"Custom Layout Keyboard for Android",subtitle:"Apr 2022 - Dec 2023 (Solo Project)",slides:[{tag:"video",src:"./images/custom-layout-keyboard/screen_record_0.mp4"},{tag:"img",src:"./images/custom-layout-keyboard/screenshot_0.png"},{tag:"img",src:"./images/custom-layout-keyboard/screenshot_1.png"},{tag:"img",src:"./images/custom-layout-keyboard/screenshot_2.png"}],paragraphs:["<b>An Android application which allows customising keyboard layouts</b> developed using <span class='text-pink-500'>Kotlin</span> and <span class='text-pink-500'>Android Studio</span>. This application was developed because I could not find a decent keyboard application which also supports keyboard layout customisation.","One of the valuable experiences that I have gained while working on this project was the experience of using features of <span class='text-pink-500'>Object Oriented Programming</span>. As an example, during development, I realised that I was writing overlapping codes repeatedly, and this was when the concept of <span class='text-pink-500'>inheritance</span> came to my mind. Using inheritance effectively reduced the amount of code I had to write and improved reusability of the code. Furthermore, I have also gained hands-on experience on Kotlin and android application lifecycle while working on this project."],githubLink:"https://github.com/kaismic/My-Portfolio/",skills:["Kotlin","Android","Android Studio"]}].map((e=>{const t=new j(e);t.initPromise.then((()=>{D.appendChild(t.root)}))}))})();
\ No newline at end of file
diff --git a/dist/output.css b/dist/output.css
index 18f07a0..2257a26 100644
--- a/dist/output.css
+++ b/dist/output.css
@@ -610,6 +610,11 @@ video {
   margin-right: auto;
 }
 
+.my-4{
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .my-8{
   margin-top: 2rem;
   margin-bottom: 2rem;
@@ -787,11 +792,6 @@ video {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
-.border-gray-500{
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
-}
-
 .border-neutral-300{
   --tw-border-opacity: 1;
   border-color: rgb(212 212 212 / var(--tw-border-opacity));
@@ -817,11 +817,6 @@ video {
   background-color: rgb(190 242 100 / var(--tw-bg-opacity));
 }
 
-.bg-neutral-800{
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
-}
-
 .bg-orange-500{
   --tw-bg-opacity: 1;
   background-color: rgb(249 115 22 / var(--tw-bg-opacity));
@@ -923,6 +918,11 @@ video {
   line-height: 2rem;
 }
 
+.text-3xl{
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-4xl{
   font-size: 2.25rem;
   line-height: 2.5rem;