diff --git a/.gitignore b/.gitignore
index 1e831e7..6dcb118 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,8 @@
 /node_modules
 
 /dist
+/.parcel-cache
+/.vscode
 
 # misc
 .parcel-cache/**
diff --git a/docs/index.5ffe6a0c.js b/docs/index.5ffe6a0c.js
new file mode 100644
index 0000000..212fb4e
--- /dev/null
+++ b/docs/index.5ffe6a0c.js
@@ -0,0 +1,4 @@
+var e;(e=function(){var e=this;this.defaults={wrapperId:"butter",wrapperDamper:.07,cancelOnTouch:!1},this.validateOptions=function(t){for(var i in t)e.defaults.hasOwnProperty(i)&&Object.defineProperty(e.defaults,i,{value:Object.getOwnPropertyDescriptor(t,i).value})},this.wrapperDamper,this.wrapperId,this.cancelOnTouch,this.wrapper,this.wrapperOffset=0,this.animateId,this.resizing=!1,this.active=!1,this.wrapperHeight,this.bodyHeight}).prototype={init:function(e){e&&this.validateOptions(e),this.active=!0,this.resizing=!1,this.wrapperDamper=this.defaults.wrapperDamper,this.wrapperId=this.defaults.wrapperId,this.cancelOnTouch=this.defaults.cancelOnTouch,this.wrapper=document.getElementById(this.wrapperId),this.wrapper.style.position="fixed",this.wrapper.style.width="100%",this.wrapperHeight=this.wrapper.clientHeight,document.body.style.height=this.wrapperHeight+"px",window.addEventListener("resize",this.resize.bind(this)),this.cancelOnTouch&&window.addEventListener("touchstart",this.cancel.bind(this)),this.wrapperOffset=0,this.animateId=window.requestAnimationFrame(this.animate.bind(this));// window.addEventListener('load', this.resize.bind(this));
+},wrapperUpdate:function(){var e=void 0!=document.scrollingElement?document.scrollingElement.scrollTop:document.documentElement.scrollTop||0;this.wrapperOffset+=(e-this.wrapperOffset)*this.wrapperDamper,this.wrapper.style.transform="translate3d(0,"+-this.wrapperOffset.toFixed(2)+"px, 0)"},checkResize:function(){this.wrapperHeight!=this.wrapper.clientHeight&&this.resize()},resize:function(){var e=this;e.resizing||(e.resizing=!0,window.cancelAnimationFrame(e.animateId),window.setTimeout(function(){e.wrapperHeight=e.wrapper.clientHeight,parseInt(document.body.style.height)!=parseInt(e.wrapperHeight)&&(document.body.style.height=e.wrapperHeight+"px"),e.animateId=window.requestAnimationFrame(e.animate.bind(e)),e.resizing=!1},150))},animate:function(){this.checkResize(),this.wrapperUpdate(),this.animateId=window.requestAnimationFrame(this.animate.bind(this))},cancel:function(){this.active&&(window.cancelAnimationFrame(this.animateId),window.removeEventListener("resize",this.resize),window.removeEventListener("touchstart",this.cancel),this.wrapper.removeAttribute("style"),document.body.removeAttribute("style"),this.active=!1,this.wrapper="",this.wrapperOffset=0,this.resizing=!0,this.animateId="")}},this.butter=new e;//# sourceMappingURL=index.5ffe6a0c.js.map
+
+//# sourceMappingURL=index.5ffe6a0c.js.map
diff --git a/docs/index.5ffe6a0c.js.map b/docs/index.5ffe6a0c.js.map
new file mode 100644
index 0000000..259c3bd
--- /dev/null
+++ b/docs/index.5ffe6a0c.js.map
@@ -0,0 +1 @@
+{"mappings":"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","sources":["<anon>","src/public/scripts/butter.js"],"sourcesContent":["// butter.js\n(function(root) {\n    var Butter = function() {\n        var self = this;\n        this.defaults = {\n            wrapperId: \"butter\",\n            wrapperDamper: 0.07,\n            cancelOnTouch: false\n        };\n        this.validateOptions = function(ops) {\n            for(var prop in ops)if (self.defaults.hasOwnProperty(prop)) Object.defineProperty(self.defaults, prop, {\n                value: Object.getOwnPropertyDescriptor(ops, prop).value\n            });\n        };\n        this.wrapperDamper;\n        this.wrapperId;\n        this.cancelOnTouch;\n        this.wrapper;\n        this.wrapperOffset = 0;\n        this.animateId;\n        this.resizing = false;\n        this.active = false;\n        this.wrapperHeight;\n        this.bodyHeight;\n    };\n    Butter.prototype = {\n        init: function(options) {\n            if (options) this.validateOptions(options);\n            this.active = true;\n            this.resizing = false;\n            this.wrapperDamper = this.defaults.wrapperDamper;\n            this.wrapperId = this.defaults.wrapperId;\n            this.cancelOnTouch = this.defaults.cancelOnTouch;\n            this.wrapper = document.getElementById(this.wrapperId);\n            this.wrapper.style.position = \"fixed\";\n            this.wrapper.style.width = \"100%\";\n            this.wrapperHeight = this.wrapper.clientHeight;\n            document.body.style.height = this.wrapperHeight + \"px\";\n            window.addEventListener(\"resize\", this.resize.bind(this));\n            if (this.cancelOnTouch) window.addEventListener(\"touchstart\", this.cancel.bind(this));\n            this.wrapperOffset = 0.0;\n            this.animateId = window.requestAnimationFrame(this.animate.bind(this));\n        // window.addEventListener('load', this.resize.bind(this));\n        },\n        wrapperUpdate: function() {\n            var scrollY = document.scrollingElement != undefined ? document.scrollingElement.scrollTop : document.documentElement.scrollTop || 0.0;\n            this.wrapperOffset += (scrollY - this.wrapperOffset) * this.wrapperDamper;\n            this.wrapper.style.transform = \"translate3d(0,\" + -this.wrapperOffset.toFixed(2) + \"px, 0)\";\n        },\n        checkResize: function() {\n            if (this.wrapperHeight != this.wrapper.clientHeight) this.resize();\n        },\n        resize: function() {\n            var self = this;\n            if (!self.resizing) {\n                self.resizing = true;\n                window.cancelAnimationFrame(self.animateId);\n                window.setTimeout(function() {\n                    self.wrapperHeight = self.wrapper.clientHeight;\n                    if (parseInt(document.body.style.height) != parseInt(self.wrapperHeight)) document.body.style.height = self.wrapperHeight + \"px\";\n                    self.animateId = window.requestAnimationFrame(self.animate.bind(self));\n                    self.resizing = false;\n                }, 150);\n            }\n        },\n        animate: function() {\n            this.checkResize();\n            this.wrapperUpdate();\n            this.animateId = window.requestAnimationFrame(this.animate.bind(this));\n        },\n        cancel: function() {\n            if (this.active) {\n                window.cancelAnimationFrame(this.animateId);\n                window.removeEventListener(\"resize\", this.resize);\n                window.removeEventListener(\"touchstart\", this.cancel);\n                this.wrapper.removeAttribute(\"style\");\n                document.body.removeAttribute(\"style\");\n                this.active = false;\n                this.wrapper = \"\";\n                this.wrapperOffset = 0;\n                this.resizing = true;\n                this.animateId = \"\";\n            }\n        }\n    };\n    root.butter = new Butter();\n})(this);\n\n//# sourceMappingURL=index.5ffe6a0c.js.map\n","// butter.js\r\n\r\n(function(root){\r\n    var Butter = function() {\r\n\r\n        var self = this;\r\n\r\n        this.defaults = {\r\n            wrapperId: 'butter',\r\n            wrapperDamper: 0.07,\r\n            cancelOnTouch: false\r\n        }\r\n        \r\n        this.validateOptions = function(ops) {\r\n            for (var prop in ops) {\r\n                if (self.defaults.hasOwnProperty(prop)) {\r\n                    Object.defineProperty(self.defaults, prop, {value: Object.getOwnPropertyDescriptor(ops, prop).value})\r\n                }\r\n            }\r\n        }\r\n\r\n        this.wrapperDamper;\r\n        this.wrapperId;\r\n        this.cancelOnTouch;\r\n        this.wrapper;\r\n        this.wrapperOffset = 0;\r\n        this.animateId;\r\n        this.resizing = false;\r\n        this.active = false;\r\n        this.wrapperHeight;\r\n        this.bodyHeight;\r\n    };\r\n\r\n    Butter.prototype = {\r\n\r\n        init: function(options) {\r\n            if (options) {\r\n                this.validateOptions(options);\r\n            }\r\n\r\n            this.active = true;\r\n            this.resizing = false;\r\n            this.wrapperDamper = this.defaults.wrapperDamper;\r\n            this.wrapperId = this.defaults.wrapperId;\r\n            this.cancelOnTouch = this.defaults.cancelOnTouch;\r\n\r\n            this.wrapper = document.getElementById(this.wrapperId);\r\n            this.wrapper.style.position = 'fixed';\r\n            this.wrapper.style.width = '100%';\r\n\r\n            this.wrapperHeight = this.wrapper.clientHeight;\r\n            document.body.style.height = this.wrapperHeight + 'px';\r\n\r\n            window.addEventListener('resize', this.resize.bind(this));\r\n            if (this.cancelOnTouch) {\r\n                window.addEventListener('touchstart', this.cancel.bind(this));\r\n            }\r\n            this.wrapperOffset = 0.0;\r\n            this.animateId = window.requestAnimationFrame(this.animate.bind(this));\r\n\r\n            // window.addEventListener('load', this.resize.bind(this));\r\n        },\r\n\r\n        wrapperUpdate: function() {\r\n            var scrollY = (document.scrollingElement != undefined) ? document.scrollingElement.scrollTop : (document.documentElement.scrollTop || 0.0);\r\n            this.wrapperOffset += (scrollY - this.wrapperOffset) * this.wrapperDamper;\r\n            this.wrapper.style.transform = 'translate3d(0,' + (-this.wrapperOffset.toFixed(2)) + 'px, 0)';\r\n        },\r\n\r\n        checkResize: function() {\r\n            if (this.wrapperHeight != this.wrapper.clientHeight) {\r\n                this.resize();\r\n            }\r\n        },\r\n\r\n        resize: function() {\r\n            var self = this;\r\n            if (!self.resizing) {\r\n                self.resizing = true;\r\n                window.cancelAnimationFrame(self.animateId);\r\n                window.setTimeout(function() {\r\n                    self.wrapperHeight = self.wrapper.clientHeight;\r\n                    if (parseInt(document.body.style.height) != parseInt(self.wrapperHeight)) {\r\n                        document.body.style.height = self.wrapperHeight + 'px';\r\n                    }\r\n                    self.animateId = window.requestAnimationFrame(self.animate.bind(self));\r\n                    self.resizing = false;\r\n                }, 150)\r\n            }\r\n        },\r\n\r\n        animate: function() {\r\n            this.checkResize();\r\n            this.wrapperUpdate();\r\n            this.animateId = window.requestAnimationFrame(this.animate.bind(this));\r\n        },\r\n\r\n        cancel: function() {\r\n            if (this.active) {\r\n                window.cancelAnimationFrame(this.animateId);\r\n\r\n                window.removeEventListener('resize', this.resize);\r\n                window.removeEventListener('touchstart', this.cancel);\r\n                this.wrapper.removeAttribute('style');\r\n                document.body.removeAttribute('style');\r\n\r\n                this.active = false;\r\n                this.wrapper = \"\";\r\n                this.wrapperOffset = 0;\r\n                this.resizing = true;\r\n                this.animateId = \"\";\r\n            }\r\n        },\r\n    };\r\n\r\n    root.butter = new Butter();\r\n\r\n})(this);"],"names":["Butter","self","defaults","wrapperId","wrapperDamper","cancelOnTouch","validateOptions","ops","prop","hasOwnProperty","Object","defineProperty","value","getOwnPropertyDescriptor","wrapper","wrapperOffset","animateId","resizing","active","wrapperHeight","bodyHeight","prototype","init","options","document","getElementById","style","position","width","clientHeight","body","height","window","addEventListener","resize","bind","cancel","requestAnimationFrame","animate","wrapperUpdate","scrollY","undefined","scrollingElement","scrollTop","documentElement","transform","toFixed","checkResize","cancelAnimationFrame","setTimeout","parseInt","removeEventListener","removeAttribute","root","butter"],"version":3,"file":"index.5ffe6a0c.js.map"}
\ No newline at end of file
diff --git a/docs/index.7f1cf59b.js b/docs/index.7f1cf59b.js
new file mode 100644
index 0000000..d9c72ff
--- /dev/null
+++ b/docs/index.7f1cf59b.js
@@ -0,0 +1,4 @@
+function t(){gsap.timeline().fromTo(".transition-this",{opacity:0},{duration:1,opacity:1,stagger:.2,delay:.1})}function a(){gsap.timeline().fromTo(".slide-in",{opacity:0,transform:"translateX(-25px)"},{duration:1,transform:"translateX(0)",opacity:1,stagger:.2},"+=2")}function e(){gsap.timeline().from(".fade-in",{duration:1,opacity:0})}function n(){var t=gsap.timeline();let a=new SplitType(".the-sweetest-name-ever",{types:"words, chars"}),e=a.chars;t.fromTo(e,{transform:"translateY(50px)",opacity:0},{transform:"translateY(0)",opacity:1,duration:3,ease:"power4.inOut",stagger:.05,delay:1})}function o(){gsap.timeline().fromTo(".slide-top",{opacity:0,transform:"translateY(30px)"},{duration:2,opacity:1,transform:"translateY(0)",stagger:.2,delay:1})}// Set initial opacity to 0 in your CSS or HTML
+n(),$(function(){barba.init({sync:!0,transitions:[{async leave(t){var a,e;let n=this.async();(a=gsap.timeline()).to(".loading-screen",{duration:1.2,width:"100%",left:"0%",ease:"Expo.easeInOut"}),a.to(".loading-screen",{duration:1,width:"100%",left:"100%",ease:"Expo.easeInOut",delay:.2}),a.set(".loading-screen",{left:"-100%"}),await (e=e=1e3,new Promise(t=>{setTimeout(()=>{t()},e)})),n()},async enter(i){e(),t(),n(),a(),o()},async once(i){e(),t(),n(),a(),o()},async beforeLeave(t){gsap.timeline().to(".fade-out",{duration:1,opacity:0})}}]}),barba.hooks.enter(()=>{window.scrollTo(0,0)}),barba.hooks.after(()=>{butter.init({cancelOnTouch:!0})})});//# sourceMappingURL=index.7f1cf59b.js.map
+
+//# sourceMappingURL=index.7f1cf59b.js.map
diff --git a/docs/index.7f1cf59b.js.map b/docs/index.7f1cf59b.js.map
new file mode 100644
index 0000000..80e9f94
--- /dev/null
+++ b/docs/index.7f1cf59b.js.map
@@ -0,0 +1 @@
+{"mappings":"AC8BA,SAAS,IAEP,AADS,KAAK,QAAd,GACG,MAAA,CACD,mBACA,CACE,QAAS,CACX,EACA,CACE,SAAU,EACV,QAAS,EACT,QAAS,GACT,MAAO,EACT,EAEJ,CAEA,SAAS,IAEP,AADS,KAAK,QAAd,GACG,MAAA,CACD,YACA,CACE,QAAS,EACT,UAAW,mBACb,EACA,CACE,SAAU,EACV,UAAW,gBACX,QAAS,EACT,QAAS,EACX,EACA,MAEJ,CAEA,SAAS,IAEP,AADS,KAAK,QAAd,GACG,IAAA,CAAK,WAAY,CAAE,SAAU,EAAG,QAAS,CAAE,EAChD,CAOA,SAAS,IACP,IAAI,EAAK,KAAK,QAAd,GAEA,IAAM,EAAY,IAAI,UAAU,0BAA2B,CACzD,MAAO,cACT,GAEM,EAAQ,EAAU,KAAxB,CAEA,EAAG,MAAA,CACD,EACA,CACE,UAAW,mBACX,QAAS,CACX,EACA,CACE,UAAW,gBACX,QAAS,EACT,SAAU,EACV,KAAM,eACN,QAAS,IACT,MAAO,CACT,EAEJ,CAMA,SAAS,IAEP,AADS,KAAK,QAAd,GACG,MAAA,CACD,aACA,CACE,QAAS,EACT,UAAW,kBACb,EACA,CACE,SAAU,EACV,QAAS,EACT,UAAW,gBACX,QAAS,GACT,MAAO,CACT,EAEJ,CApBA,+CAA+C;AAC/C,IAqBA,EAAE,WACA,MAAM,IAAA,CAAK,CACT,KAAM,CAAA,EAEN,YAAa,CACX,CACE,MAAM,MAAM,CAAI,MAtHlB,EAVS,EAiIL,IAAM,EAAO,IAAI,CAAC,KAAlB,GArHR,CAFI,EAAK,KAAK,QAAd,IAEG,EAAA,CAAG,kBAAmB,CACvB,SAAU,IACV,MAAO,OACP,KAAM,KACN,KAAM,gBACR,GAEA,EAAG,EAAA,CAAG,kBAAmB,CACvB,SAAU,EACV,MAAO,OACP,KAAM,OACN,KAAM,iBACN,MAAO,EACT,GAEA,EAAG,GAAA,CAAI,kBAAmB,CAAE,KAAM,OAAQ,GAyGlC,OAnIR,EADa,EAoIO,IAlIb,IAAI,QAAQ,AAAC,IAClB,WAAW,KACT,GACF,EAAG,EACL,IA+HQ,GACF,EAEA,MAAM,MAAM,CAAI,EACd,IACA,IACA,IACA,IACA,GACF,EAEA,MAAM,KAAK,CAAI,EACb,IACA,IACA,IACA,IACA,GACF,EAEA,MAAM,YAAY,CAAI,EAjF5B,AADS,KAAK,QAAd,GACG,EAAA,CAAG,YAAa,CAAE,SAAU,EAAG,QAAS,CAAE,EAmFvC,CACF,EACD,AACH,GAEA,MAAM,KAAA,CAAM,KAAA,CAAM,KAChB,OAAO,QAAA,CAAS,EAAG,EACrB,GAEA,MAAM,KAAA,CAAM,KAAA,CAAM,KAChB,OAAO,IAAA,CAAK,CAAE,cAAe,CAAA,CAAK,EACpC,EACF,E,4D","sources":["<anon>","src/public/scripts/transitions.js"],"sourcesContent":["function delay(n) {\n    n = n || 2000;\n    return new Promise((done)=>{\n        setTimeout(()=>{\n            done();\n        }, n);\n    });\n}\nfunction pageTransition() {\n    var tl = gsap.timeline();\n    tl.to(\".loading-screen\", {\n        duration: 1.2,\n        width: \"100%\",\n        left: \"0%\",\n        ease: \"Expo.easeInOut\"\n    });\n    tl.to(\".loading-screen\", {\n        duration: 1,\n        width: \"100%\",\n        left: \"100%\",\n        ease: \"Expo.easeInOut\",\n        delay: 0.2\n    });\n    tl.set(\".loading-screen\", {\n        left: \"-100%\"\n    });\n}\nfunction contentAnimation() {\n    var tl = gsap.timeline();\n    tl.fromTo(\".transition-this\", {\n        opacity: 0\n    }, {\n        duration: 1,\n        opacity: 1,\n        stagger: 0.2,\n        delay: 0.1\n    });\n}\nfunction slideIn() {\n    var tl = gsap.timeline();\n    tl.fromTo(\".slide-in\", {\n        opacity: 0,\n        transform: \"translateX(-25px)\"\n    }, {\n        duration: 1,\n        transform: \"translateX(0)\",\n        opacity: 1,\n        stagger: 0.2\n    }, \"+=2\");\n}\nfunction fadeIn() {\n    var tl = gsap.timeline();\n    tl.from(\".fade-in\", {\n        duration: 1,\n        opacity: 0\n    });\n}\nfunction fadeOut() {\n    var tl = gsap.timeline();\n    tl.to(\".fade-out\", {\n        duration: 1,\n        opacity: 0\n    });\n}\nfunction herName() {\n    var tl = gsap.timeline();\n    const typeSplit = new SplitType(\".the-sweetest-name-ever\", {\n        types: \"words, chars\"\n    });\n    const chars = typeSplit.chars;\n    tl.fromTo(chars, {\n        transform: \"translateY(50px)\",\n        opacity: 0\n    }, {\n        transform: \"translateY(0)\",\n        opacity: 1,\n        duration: 3,\n        ease: \"power4.inOut\",\n        stagger: 0.05,\n        delay: 1\n    });\n}\n// Set initial opacity to 0 in your CSS or HTML\nherName(); // Add this line to run the animation immediately\nfunction slideTop() {\n    var tl = gsap.timeline();\n    tl.fromTo(\".slide-top\", {\n        opacity: 0,\n        transform: \"translateY(30px)\"\n    }, {\n        duration: 2,\n        opacity: 1,\n        transform: \"translateY(0)\",\n        stagger: .2,\n        delay: 1\n    });\n}\n$(function() {\n    barba.init({\n        sync: true,\n        transitions: [\n            {\n                async leave (data) {\n                    const done = this.async();\n                    pageTransition();\n                    await delay(1000);\n                    done();\n                },\n                async enter (data) {\n                    fadeIn();\n                    contentAnimation();\n                    herName();\n                    slideIn();\n                    slideTop();\n                },\n                async once (data) {\n                    fadeIn();\n                    contentAnimation();\n                    herName();\n                    slideIn();\n                    slideTop();\n                },\n                async beforeLeave (data) {\n                    fadeOut();\n                }\n            }\n        ]\n    });\n    barba.hooks.enter(()=>{\n        window.scrollTo(0, 0);\n    });\n    barba.hooks.after(()=>{\n        butter.init({\n            cancelOnTouch: true\n        });\n    });\n});\n\n//# sourceMappingURL=index.7f1cf59b.js.map\n","function delay(n) {\r\n  n = n || 2000;\r\n  return new Promise((done) => {\r\n    setTimeout(() => {\r\n      done();\r\n    }, n);\r\n  });\r\n}\r\n\r\nfunction pageTransition() {\r\n  var tl = gsap.timeline();\r\n\r\n  tl.to(\".loading-screen\", {\r\n    duration: 1.2,\r\n    width: \"100%\",\r\n    left: \"0%\",\r\n    ease: \"Expo.easeInOut\",\r\n  });\r\n\r\n  tl.to(\".loading-screen\", {\r\n    duration: 1,\r\n    width: \"100%\",\r\n    left: \"100%\",\r\n    ease: \"Expo.easeInOut\",\r\n    delay: 0.2,\r\n  });\r\n\r\n  tl.set(\".loading-screen\", { left: \"-100%\" });\r\n}\r\n\r\nfunction contentAnimation() {\r\n  var tl = gsap.timeline();\r\n  tl.fromTo(\r\n    \".transition-this\",\r\n    {\r\n      opacity: 0,\r\n    },\r\n    {\r\n      duration: 1,\r\n      opacity: 1,\r\n      stagger: 0.2,\r\n      delay: 0.1,\r\n    }\r\n  );\r\n}\r\n\r\nfunction slideIn() {\r\n  var tl = gsap.timeline();\r\n  tl.fromTo(\r\n    \".slide-in\",\r\n    {\r\n      opacity: 0,\r\n      transform: \"translateX(-25px)\",\r\n    },\r\n    {\r\n      duration: 1,\r\n      transform: \"translateX(0)\",\r\n      opacity: 1,\r\n      stagger: 0.2\r\n    },\r\n    \"+=2\"\r\n  );\r\n}\r\n\r\nfunction fadeIn() {\r\n  var tl = gsap.timeline();\r\n  tl.from(\".fade-in\", { duration: 1, opacity: 0 });\r\n}\r\n\r\nfunction fadeOut() {\r\n  var tl = gsap.timeline();\r\n  tl.to(\".fade-out\", { duration: 1, opacity: 0 });\r\n}\r\n\r\nfunction herName() {\r\n  var tl = gsap.timeline();\r\n\r\n  const typeSplit = new SplitType(\".the-sweetest-name-ever\", {\r\n    types: \"words, chars\",\r\n  });\r\n\r\n  const chars = typeSplit.chars;\r\n\r\n  tl.fromTo(\r\n    chars,\r\n    {\r\n      transform: \"translateY(50px)\",\r\n      opacity: 0,\r\n    },\r\n    {\r\n      transform: \"translateY(0)\",\r\n      opacity: 1,\r\n      duration: 3,\r\n      ease: \"power4.inOut\",\r\n      stagger: 0.05,\r\n      delay: 1,\r\n    }\r\n  );\r\n}\r\n\r\n// Set initial opacity to 0 in your CSS or HTML\r\nherName(); // Add this line to run the animation immediately\r\n\r\n\r\nfunction slideTop() {\r\n  var tl = gsap.timeline();\r\n  tl.fromTo(\r\n    \".slide-top\",\r\n    {\r\n      opacity: 0,\r\n      transform: \"translateY(30px)\",\r\n    },\r\n    {\r\n      duration: 2,\r\n      opacity: 1,\r\n      transform: \"translateY(0)\",\r\n      stagger: .2,\r\n      delay: 1\r\n    }\r\n  );\r\n}\r\n\r\n$(function () {\r\n  barba.init({\r\n    sync: true,\r\n\r\n    transitions: [\r\n      {\r\n        async leave(data) {\r\n          const done = this.async();\r\n\r\n          pageTransition();\r\n          await delay(1000);\r\n          done();\r\n        },\r\n\r\n        async enter(data) {\r\n          fadeIn();\r\n          contentAnimation();\r\n          herName();\r\n          slideIn();\r\n          slideTop();\r\n        },\r\n\r\n        async once(data) {\r\n          fadeIn();\r\n          contentAnimation();\r\n          herName();\r\n          slideIn();\r\n          slideTop();\r\n        },\r\n\r\n        async beforeLeave(data) {\r\n          fadeOut();\r\n        }\r\n      },\r\n    ],\r\n  });\r\n\r\n  barba.hooks.enter(() => {\r\n    window.scrollTo(0, 0);\r\n  });\r\n\r\n  barba.hooks.after(() => {\r\n    butter.init({ cancelOnTouch: true });\r\n  });\r\n});\r\n"],"names":["contentAnimation","tl","gsap","timeline","fromTo","opacity","duration","stagger","delay","slideIn","transform","fadeIn","from","herName","typeSplit","SplitType","types","chars","ease","slideTop","$","barba","init","sync","transitions","leave","data","n","done","async","to","width","left","set","Promise","setTimeout","enter","once","beforeLeave","hooks","window","scrollTo","after","butter","cancelOnTouch"],"version":3,"file":"index.7f1cf59b.js.map"}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index aecadcd..0df9cf2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Sithruby Manoranjan</title><link rel="stylesheet" href="https://samadhi1311.github.io/overnight/index.54c8b5ef.css"><link rel="stylesheet" href="https://samadhi1311.github.io/overnight/index.a46dcafd.css"><link rel="stylesheet" href="https://samadhi1311.github.io/overnight/index.1cfaeb07.css"><link rel="stylesheet" href="https://samadhi1311.github.io/overnight/index.069639a3.css"><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script src="https://unpkg.com/@barba/core"></script><script src="https://unpkg.com/split-type"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script></head><body data-barba="wrapper"> <div class="load-container"> <div class="loading-screen"></div> </div> <div class="bg-container"> <div class="bg-image fade-in"></div> </div> <main data-barba="container" data-barba-namespace="home" class="fade-out main-container transition-this" id="butter"> <header class="navigation slide-in"> <nav> <ul class="navigation-links-container"> <li><a href="https://samadhi1311.github.io/overnight/art.html" class="nav-link slide-in">ruby crafts</a></li> <li><a href="https://samadhi1311.github.io/overnight/about.html" class="nav-link slide-in">about</a></li> <li><a href="https://samadhi1311.github.io/overnight/hire.html" class="nav-link slide-in">hire</a></li> </ul> </nav> </header> <section class="hero-section"> <div class="its-always-you"> <div> <h1 class="text-white the-sweetest-name-ever">Sithruby Manoranjan</h1> </div> <div> <h2 class="she-actually-does slide-in">i make otherworldly art and craft.</h2> </div> </div> </section> </main> <script src="https://samadhi1311.github.io/overnight/index.118dc484.js"></script> <script src="https://samadhi1311.github.io/overnight/index.d96a3cd2.js"></script> </body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Sithruby Manoranjan</title><link rel="stylesheet" href="https://sithruby.github.io/overnight/index.54c8b5ef.css"><link rel="stylesheet" href="https://sithruby.github.io/overnight/index.a46dcafd.css"><link rel="stylesheet" href="https://sithruby.github.io/overnight/index.1cfaeb07.css"><link rel="stylesheet" href="https://sithruby.github.io/overnight/index.069639a3.css"><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script src="https://unpkg.com/@barba/core"></script><script src="https://unpkg.com/split-type"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script></head><body data-barba="wrapper"> <div class="load-container"> <div class="loading-screen"></div> </div> <div class="bg-container"> <div class="bg-image fade-in"></div> </div> <main data-barba="container" data-barba-namespace="home" class="fade-out main-container transition-this" id="butter"> <header class="navigation slide-in"> <nav> <ul class="navigation-links-container"> <li><a href="https://sithruby.github.io/overnight/art.html" class="nav-link slide-in">ruby crafts</a></li> <li><a href="https://sithruby.github.io/overnight/about.html" class="nav-link slide-in">about</a></li> <li><a href="https://sithruby.github.io/overnight/hire.html" class="nav-link slide-in">hire</a></li> </ul> </nav> </header> <section class="hero-section"> <div class="its-always-you"> <div> <h1 class="text-white the-sweetest-name-ever">Sithruby Manoranjan</h1> </div> <div> <h2 class="she-actually-does slide-in">i make otherworldly art and craft.</h2> </div> </div> </section> </main> <script src="https://sithruby.github.io/overnight/index.7f1cf59b.js"></script> <script src="https://sithruby.github.io/overnight/index.5ffe6a0c.js"></script> </body></html>
\ No newline at end of file