From 92e0298a227a1155d0c82690ff5afbb7bf3d96fc Mon Sep 17 00:00:00 2001 From: vickkie Date: Wed, 27 Mar 2024 15:59:16 +0300 Subject: [PATCH] wtf --- .gitignore | 1 + public/backup.html | 17 +++++++++++ public/bundle.js | 2 ++ public/bundle.js.LICENSE.txt | 3 ++ public/css/portfolio-hero.css | 1 + public/index.html | 11 +++++++ public/js/distort/index.js | 1 + public/js/distort/menuItem.js | 1 + public/js/index.js | 1 + public/js/main.js | 1 + public/js/preloader/galleryController.js | 1 + public/js/preloader/galleryItem.js | 1 + public/js/preloader/index.js | 1 + public/js/preloader/utils.js | 1 + public/js/works/index.js | 1 + public/js/works/item.js | 1 + public/js/works/utils.js | 1 + public/manifest.json | 38 ++++++++++++++++++++++++ public/offline-uzitrake.js | 1 + public/offline.html | 1 + public/works/works.html | 1 + 21 files changed, 87 insertions(+) create mode 100644 .gitignore create mode 100644 public/backup.html create mode 100644 public/bundle.js create mode 100644 public/bundle.js.LICENSE.txt create mode 100644 public/css/portfolio-hero.css create mode 100644 public/index.html create mode 100644 public/js/distort/index.js create mode 100644 public/js/distort/menuItem.js create mode 100644 public/js/index.js create mode 100644 public/js/main.js create mode 100644 public/js/preloader/galleryController.js create mode 100644 public/js/preloader/galleryItem.js create mode 100644 public/js/preloader/index.js create mode 100644 public/js/preloader/utils.js create mode 100644 public/js/works/index.js create mode 100644 public/js/works/item.js create mode 100644 public/js/works/utils.js create mode 100644 public/manifest.json create mode 100644 public/offline-uzitrake.js create mode 100644 public/offline.html create mode 100644 public/works/works.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..3c3629e6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/public/backup.html b/public/backup.html new file mode 100644 index 00000000..b760eb08 --- /dev/null +++ b/public/backup.html @@ -0,0 +1,17 @@ + UZITRAKE✦PORTFOLIO

Uzitrake

UZITRAKE
CONTACT
Creative FREELANCER DEVELOPER UX/UI DESIGNER
developer
specializing in web design for brands worldwide Web design innovation driven by strategy and precision
Designer
Location
GMT+3(, KE)
Status
AVAILABLE FOR WORK

WORKING WORLDWIDE
Socials
INSTAGRAM
DRIBBLE
uzitrake
 (design) FORLIO
2024
Hey there! I'm Uzi Trake.
A Digital Designer
Based in Kenya(KE)
Current works : TRAKEXCEL STUDIO
Available for freelance
Full stack developer
MY WORK AREAS
FRONTEND DEVELOPMENT UX/UI design Branding WEB REBRANDING Backend WEB MAINTAINANCE Mobile apps IT consultancy
4+ YEARS X-PERIENCE
10+ PROFFESIONAL PROJECTS
3 DESIGN AWARDS
😎 Cool
2020

Selected
work

2024

Hypercritical

✺Branding April — 2023 CLIENT :  Hypercritical studio
Discover work

Trakexcel

✺Web design March — 2023 For Trakexcel Agency
Discover work

DNAnexus

✺Brand design December — 2022 CLIENT : experimental
Discover work

Quantum

✺Web Design January — 2023 For Lorenzo Augusto
Discover work

Hypercritical

CASE 01-04

TASK - Sometimes five Imprimaturs are seen together dialogue-wise in the piazza of one title-page, complimenting and ducking each to other with their shaven reverences, whether the author

FIELD - DEVELOPMENT ,RE-BRANDING

ROLE - Art designer,Director

RECOGNISION - These are the pretty responsories, these are the dear antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made

Problem

Butterfly Network, a pioneer in advanced handheld ultrasound solutions, sought to elevate its enterprise UI/UX for hospitals and large medical systems. Recognizing the need for a design partner versed in healthcare technology and human-centered design, they turned to us. As our collaboration progressed, our involvement expanded to include enhancing their point-of-care ultrasound experience.


This project entailed developing a robust design system and refining digital touchpoints, ensuring a seamless user experience across their app ecosystem with a design partner capable of adapting to their continuously evolving requirements.

Solution

Throughout our partnership, we engaged in several major projects. We began by optimizing and streamlining workflows and enterprise UI/UX across their platform and addressed critical enterprise-wide design considerations. Next, we tackled mobile, ideating on completely new app directions and reimagining user interactions that could leverage their existing AI capabilities. Focusing on onboarding, we helped rethink these flows and provided a library of custom illustrations that effectively narrated our approach. Finally, we were entrusted with unifying and developing a comprehensive design system that drove speed and consistency across the design, product and engineering teams.

Some image

Trakexcel

CASE 02-04

TASK - Sometimes five Imprimaturs are seen together dialogue-wise in the piazza of one title-page, complimenting and ducking each to other with their shaven reverences, whether the author

FIELD - UX/UI DESIGN ,RE-BRANDING

ROLE - Art designer,Director

RECOGNISION - These are the pretty responsories, these are the dear antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made

Problem

Butterfly Network, a pioneer in advanced handheld ultrasound solutions, sought to elevate its enterprise UI/UX for hospitals and large medical systems. Recognizing the need for a design partner versed in healthcare technology and human-centered design, they turned to us. As our collaboration progressed, our involvement expanded to include enhancing their point-of-care ultrasound experience.


This project entailed developing a robust design system and refining digital touchpoints, ensuring a seamless user experience across their app ecosystem with a design partner capable of adapting to their continuously evolving requirements.

Solution

Throughout our partnership, we engaged in several major projects. We began by optimizing and streamlining workflows and enterprise UI/UX across their platform and addressed critical enterprise-wide design considerations. Next, we tackled mobile, ideating on completely new app directions and reimagining user interactions that could leverage their existing AI capabilities. Focusing on onboarding, we helped rethink these flows and provided a library of custom illustrations that effectively narrated our approach. Finally, we were entrusted with unifying and developing a comprehensive design system that drove speed and consistency across the design, product and engineering teams.

Some image

Temperance

CASE 03-04

TASK - Sometimes five Imprimaturs are seen together dialogue-wise in the piazza of one title-page, complimenting and ducking each to other with their shaven reverences, whether the author

FIELD - UX/UI DESIGN ,RE-BRANDING

ROLE - Art designer,Director

RECOGNISION - These are the pretty responsories, these are the dear antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made

Problem

Butterfly Network, a pioneer in advanced handheld ultrasound solutions, sought to elevate its enterprise UI/UX for hospitals and large medical systems. Recognizing the need for a design partner versed in healthcare technology and human-centered design, they turned to us. As our collaboration progressed, our involvement expanded to include enhancing their point-of-care ultrasound experience.


This project entailed developing a robust design system and refining digital touchpoints, ensuring a seamless user experience across their app ecosystem with a design partner capable of adapting to their continuously evolving requirements.

Solution

Throughout our partnership, we engaged in several major projects. We began by optimizing and streamlining workflows and enterprise UI/UX across their platform and addressed critical enterprise-wide design considerations. Next, we tackled mobile, ideating on completely new app directions and reimagining user interactions that could leverage their existing AI capabilities. Focusing on onboarding, we helped rethink these flows and provided a library of custom illustrations that effectively narrated our approach. Finally, we were entrusted with unifying and developing a comprehensive design system that drove speed and consistency across the design, product and engineering teams.

Some image

Quantum

CASE 04-04

TASK - Sometimes five Imprimaturs are seen together dialogue-wise in the piazza of one title-page, complimenting and ducking each to other with their shaven reverences, whether the author

FIELD - UX/UI DESIGN ,RE-BRANDING

ROLE - Art designer,Director

RECOGNISION - These are the pretty responsories, these are the dear antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made

Problem

Butterfly Network, a pioneer in advanced handheld ultrasound solutions, sought to elevate its enterprise UI/UX for hospitals and large medical systems. Recognizing the need for a design partner versed in healthcare technology and human-centered design, they turned to us. As our collaboration progressed, our involvement expanded to include enhancing their point-of-care ultrasound experience.


This project entailed developing a robust design system and refining digital touchpoints, ensuring a seamless user experience across their app ecosystem with a design partner capable of adapting to their continuously evolving requirements.

Solution

Throughout our partnership, we engaged in several major projects. We began by optimizing and streamlining workflows and enterprise UI/UX across their platform and addressed critical enterprise-wide design considerations. Next, we tackled mobile, ideating on completely new app directions and reimagining user interactions that could leverage their existing AI capabilities. Focusing on onboarding, we helped rethink these flows and provided a library of custom illustrations that effectively narrated our approach. Finally, we were entrusted with unifying and developing a comprehensive design system that drove speed and consistency across the design, product and engineering teams.

Some image
👀
REACH OUT.
Got Idea on mind ?
uzitrake
copyright© uzitrake
All rights reserved @2024
Available for freelance
\ No newline at end of file diff --git a/public/bundle.js b/public/bundle.js new file mode 100644 index 00000000..ab49f8cc --- /dev/null +++ b/public/bundle.js @@ -0,0 +1,2 @@ +/*! For license information please see bundle.js.LICENSE.txt */ +(()=>{document.addEventListener("DOMContentLoaded",(function(){setTimeout((()=>{let e=document.querySelector(".time");function t(){var t=new Date;e.innerHTML=t.toTimeString().substr(0,5)}t(),setInterval((()=>{t()}),1e3);let o=document.querySelector(".button-menu"),r=document.querySelector(".button-close"),n=document.querySelectorAll(".menu-will-open"),i=document.querySelector(".mf-cursor");function a(){if(innerWidth>767){const e=new Lenis({duration:3,easing:e=>Math.min(1,1.001-Math.pow(2,-10*e)),direction:"vertical",gestureDirection:"vertical",smooth:!0,smoothTouch:!1,touchMultiplier:2,infinite:!1,autoResize:!0});requestAnimationFrame((function t(o){e.raf(o),requestAnimationFrame(t)}))}}if(n.forEach((e=>{o.addEventListener("click",(()=>{setTimeout((()=>{e.classList.add("menu-is-open"),i&&(i.style.display="none")}),1e3)})),r.addEventListener("click",(()=>{setTimeout((()=>{e.classList.remove("menu-is-open"),i&&(i.style.display="block")}),1e3)}))})),a(),window.addEventListener("resize",a),gsap.registerPlugin(ScrollTrigger),innerWidth>767){document.querySelectorAll("[line-triggerX]").forEach((function(e){const t=e.getAttribute("line-triggerX"),o=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out"}});return t.fromTo(e,{scaleX:1,opacity:1,transformOrigin:"center center"},{scaleX:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:o,onEnter:()=>o.play()})})),document.querySelectorAll("[line-triggerY]").forEach((function(e){const t=e.getAttribute("line-triggerY"),o=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out",delay:1.2}});return t.fromTo(e,{scaleY:1,opacity:1,transformOrigin:"bottom"},{scaleY:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:o,toggleActions:"play none none none"})}))}if(innerWidth>767){function l(){gsap.registerPlugin(ScrollTrigger),gsap.timeline({scrollTrigger:{trigger:".empty",start:"top bottom",end:"bottom 60%",scrub:!0}}).to(".empty",{y:"-40vh",ease:"expo.out"})}l(),window.addEventListener("resize",l)}const c=[...document.querySelectorAll("[data-splitting][data-effect28]")];if(c){gsap.registerPlugin(ScrollTrigger),gsap.registerPlugin(SplitText);new SplitText("[data-splitting][data-effect28]",{type:"words,lines,chars",wordsClass:"content__title word",charsClass:"char",linesClass:"lines"});c.forEach((e=>{const t=[...e.querySelectorAll(".word")];for(const e of t){const t=e.querySelectorAll(".char"),o=t.length;gsap.fromTo(t,{"will-change":"transform, filter",transformOrigin:"50% 100%",scale:e=>{const t=e{const t=e{const t=e{d.forEach((function(e,t){e.getAttribute("data-image"),gsap.timeline().addLabel("rotate,+=0").to(e,{transform:"rotate3d(0, 1, 0, 180deg)",perspective:"1000px",duration:1.2,ease:"power2.in",id:t+1},"rotate").add((()=>{e.classList.add(`menu-image${t}`)}))}))}));let g=document.querySelector(".knob"),m=document.querySelector(".dark-toggle"),p=document.querySelector("body"),f=document.querySelector(".mf-cursor"),y=!1;if(m.addEventListener("click",(()=>{y=!y,gsap.timeline().to(g,{x:()=>y?18:0,duration:.4,ease:"expo.in"}),document.querySelectorAll(".portfolio-map a").forEach((e=>{gsap.set(e,{color:y?"#fff":"#000"})})),p.classList.toggle("dark-mode"),f.classList.add("-exclusion")})),innerWidth>767){new MouseFollower}if(document.querySelector(".mf-cursor")){function h(){innerWidth<768&&(document.querySelector(".mf-cursor").style.display="none")}h()}window.addEventListener("resize",h);document.querySelectorAll(".magnetic").forEach((e=>{e.addEventListener("mouseenter",(()=>{console.log("magnettt")})),new Magnetic(e,{y:.4,x:.4,s:.2,rs:.7})})),$("[data-magnetic]").each((function(){new Magnetic(this)})),gsap.registerPlugin(ScrollToPlugin);let w=document.querySelector(".tocontact"),S=document.querySelector(".toworks"),T=document.querySelector(".tohero"),q=document.querySelector(".toabout");w.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:".free-time",ease:"expo.out"})})),S.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".works",offsetY:50},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),T.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".content-hero"},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),q.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".intro-port",offsetY:10},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})}));let M=document.querySelectorAll(".portfolio-map a"),b=document.querySelector("body"),E=getComputedStyle(b).backgroundColor,v=getComputedStyle(b).color,L=gsap.timeline({paused:!0,scrollTrigger:{trigger:".free-time",start:"top center",markers:!1,onEnter:()=>{L.play()},onLeaveBack:()=>{L.reverse()}}});gsap.to(window,{scrollTrigger:{trigger:"body",start:"top top",onEnter:()=>{L.reverse()}}}),M.forEach((e=>{L.fromTo(e,{color:v},{color:E,duration:.4,ease:"power1.out"})}))}),0)}));const e=["Hello","Hola","Bonjour","Salut","Chao"];let t=0;setInterval((function(){const o=document.getElementById("changehello");t=(t+1)%e.length,o.innerHTML=e[t]}),1e4);const o=()=>{if(innerWidth>767){gsap.registerPlugin(ScrollTrigger);[...document.querySelectorAll("[data-splitting][data-effect19]")].forEach((e=>{const t=e.querySelectorAll(".char");t.forEach((e=>gsap.set(e.parentNode,{perspective:1e3}))),gsap.fromTo(t,{"will-change":"opacity, transform",transformOrigin:"50% 0%",opacity:0,rotationX:-90,z:-200},{ease:"power1",opacity:1,stagger:.05,rotationX:0,z:0,scrollTrigger:{trigger:e,start:"center bottom",end:"bottom top+=40%",scrub:!0}})}))}};let r;if(o(),window.addEventListener("resize",(()=>{clearTimeout(r),r=setTimeout((()=>{var e;o(),innerWidth>767&&document.hasFocus()&&(navigator.clipboard.writeText(e),document.querySelectorAll(".copy").forEach((e=>{e.innerHTML="Copied",setTimeout((()=>{e.innerHTML="Copy!"}),4e3)})))}),250)})),innerWidth>767){gsap.timeline({scrollTrigger:{trigger:".wiggle",start:"top 90%",end:"top 30%",scrub:1}}).fromTo("#logo-36",{scale:.3,y:"-200px",rotate:0},{scale:1,y:0,rotate:360})}let n=[...document.querySelectorAll(".rotate-i .char")];const i=gsap.timeline({repeat:-1,duration:2,delay:3,yoyo:!0});i.to(n[6],{rotation:360}),i.to(n[11],{rotation:360});document.querySelector(".email-box")})(); \ No newline at end of file diff --git a/public/bundle.js.LICENSE.txt b/public/bundle.js.LICENSE.txt new file mode 100644 index 00000000..ddfa0034 --- /dev/null +++ b/public/bundle.js.LICENSE.txt @@ -0,0 +1,3 @@ +/*!********************!*\ + !*** ./js/main.js ***! + \********************/ diff --git a/public/css/portfolio-hero.css b/public/css/portfolio-hero.css new file mode 100644 index 00000000..8ef0d2a2 --- /dev/null +++ b/public/css/portfolio-hero.css @@ -0,0 +1 @@ +*,:after,:before{box-sizing:border-box}:root{font-size:15px}body,html{overflow:hidden}body{margin:0;--color-black:#000;--color-white:#fff;--color-bg:#f6efe5;--color-biege:#e3dacd;--stick-black:#000;--hero-font:8vw;--hero-sub-font:1.3rem;--size-submain:3rem;--size-2rem:2rem;--bright-thistle:#88b2c4;--thistle:#a0c0cd;--email-font:8vw;--font-1:grotesk-diamond;--font-2:LA-LUXE;--font-3:grotesk;background-color:var(--color-bg);color:var(--color-black);font-family:var(--font-1),sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:max-content;text-rendering:optimizeSpeed}.dark-mode{--color-black:#fff!important;--color-white:#000!important;--color-bg:#000!important;--color-biege:#fff!important}@font-face{font-display:swap;font-family:LA-LUXE;src:url(../fonts/Pavelt-VG24B.woff) format("woff")}@font-face{font-display:swap;font-family:AdornScript;src:url(../fonts/AdornStoryScript.woff) format("woff")}a{color:var(--color-black);text-decoration:none}a,a:hover{outline:none}a:hover{color:var(--color-link)}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:transparent}a:focus-visible{background:transparent;outline:2px solid #fff}.hover-line{display:inline-block;overflow:hidden;position:relative;white-space:nowrap}.hover-line:before{background:currentColor;content:"";height:1px;position:absolute;top:92%;transform-origin:0 50%;transition:transform .3s;width:100%}.hover-line:hover:before{transform:scaleX(0);transform-origin:100% 50%}.hidden{display:none}main{grid-template-columns:100%;grid-template-rows:100vh}.frame,main{display:grid}.frame{align-content:space-between;align-items:center;font-size:1rem;grid-area:1/1/2/2;grid-template-areas:"author dropdown dropdown ... " "linehead linehead linehead linehead" "... ... ... ..." "links links links links" "title title title title";grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto 1fr auto;height:100vh;padding:1rem 1rem .5rem;pointer-events:none;z-index:10}.frame--menu-open{color:var(--color-black)}.frame__title{font-size:inherit;font-weight:400;grid-area:title;justify-self:center;margin:.5rem 0 0}.frame__links{align-self:end;display:flex;flex-wrap:wrap;grid-area:links;justify-self:center}.frame__links a{margin:0 .5rem}.frame__author{font-family:var(--font-1);font-size:.9rem;font-weight:900;grid-area:author;margin:0}.frame__button{grid-area:dropdown;justify-self:center}.frame--menu-open .frame__author{opacity:0;pointer-events:none}.menu-is-open{height:100vh;overflow:hidden}.frame__contact{display:grid;font-family:var(--font-1);font-size:.9rem;grid-column:1/1;grid-template-columns:1fr 14px;justify-self:end;grid-column-gap:3px;align-items:center;cursor:pointer;font-weight:900;padding-bottom:4px;padding-right:10px}.scroll-now{align-items:center;display:flex;grid-column:1/1;grid-row:7/8;justify-content:center}.scroll-now svg{transform:scale(3) rotate(135deg)}.frame--menu-open .frame__heading-sub{opacity:0;pointer-events:none}.frame a,.frame button{pointer-events:auto}.button-menu{cursor:pointer;display:inline-grid;place-items:center}.button-menu svg{transition:transform .5s ease}.button-menu:focus-visible,.button-menu:hover{fill:var(--color-black)}.button-menu:hover svg{transform:scale(1.1)}.frame--menu-open .button-menu{opacity:0;pointer-events:none}.content-hero{display:grid;grid-area:1/1/2/2;grid-template-columns:1fr;grid-template-rows:40px 1fr 1fr 1fr 1fr 1fr 1fr 10px;height:100vh;position:relative;width:100vw}.portfolio-map{display:grid;height:fit-content;padding-right:30px;position:fixed;right:0;top:50px;width:max-content;z-index:4}.portfolio-map ul{color:var(--color-black);display:flex;flex-direction:column;font-family:inherit;font-size:12px;list-style:none;padding:0;text-align:right;width:fit-content}.portfolio-map a{color:var(--color-black);cursor:pointer;text-rendering:optimizeSpeed}.content__l1{cursor:default;display:grid;font-weight:600;grid-column:auto;grid-row:3/4;grid-template-columns:20vw 1fr 1fr;line-height:.75;text-align:center}.l1__left{align-items:center;display:flex;font-family:var(--font-2);font-size:var(--hero-font);grid-column:2/3;justify-content:flex-end;padding-right:30px}.l1__right{display:flex;flex-direction:column;font-size:1.5vw;grid-column:3/4;place-content:space-evenly;align-content:flex-start;flex-wrap:wrap;text-align:left}.content__l2{display:grid;font-weight:600;grid-column:auto;grid-row:4/5;grid-template-columns:1fr 2fr;will-change:opacity,transform}.l2__left{align-items:flex-end;display:flex;flex-direction:row;font-size:1rem;place-content:center;width:100}.l2__right{align-items:center;display:grid;font-family:var(--font-2);font-size:var(--hero-font);justify-content:start;text-align:left}.rotatework{align-items:center;animation:rotatearound 15s linear infinite;display:flex;justify-content:center;width:12vh}.rotatework svg{height:12vh}@keyframes rotatearound{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}.content__l3{display:grid;grid-column:auto;grid-row:5/6;grid-template-columns:2fr 3fr;will-change:opacity,transform}.l3__left{align-content:center;display:flex;flex-wrap:wrap;font-stretch:condensed;justify-content:end;padding-right:10px}.l3__right{display:flex;flex-direction:column;font-family:var(--font-1);font-size:var(--hero-sub-font);justify-content:center;text-align:left;word-break:break-word}.content__l4{display:grid;font-size:var(--hero-font);font-weight:600;grid-column:auto;grid-row:6/7;grid-template-columns:2fr 1fr}.l4__right{align-items:center;display:flex}.l4__right .div{background:url(../img/works/0763.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:100px;display:grid;height:80%;width:40%}.l4__left{align-items:center;display:flex;font-family:var(--font-2);font-size:var(--hero-font);justify-content:end;padding:0 30px;text-align:left}.button-enter{cursor:not-allowed;margin-top:4vh;transition:transform .5s ease}.button-enter:hover{transform:translateX(15px) rotate(-40deg)}.menu-wrap{background:var(--color-bg);display:grid;grid-area:1/1/2/2;grid-template-columns:100%;grid-template-rows:100vh;opacity:0;pointer-events:none;position:relative;z-index:11}.menu-wrap.menu-wrap--open{opacity:1;pointer-events:auto}.overlay{grid-area:1/1/2/2;height:100%;pointer-events:none;position:relative;width:100%;z-index:1000}.tiles{display:flex;flex-direction:column;height:150vh;justify-content:center;left:50%;opacity:.5;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) rotate(22.5deg)}.tiles__line{animation:runner 10s linear infinite;display:flex;transform:translateX(25%)}.tiles__line:nth-child(2){animation-duration:16s}.tiles__line:nth-child(3){animation-duration:22s}@keyframes runner{to{transform:translateX(-25%)}}.tiles__line-img{--tile-margin:3vw;background-position:50% 50%;background-size:cover;border-radius:50%;flex:none;height:30vh;margin:var(--tile-margin);width:30vh}.tiles__line-img--large{border-radius:20vh;width:100vh}.button-close{margin:1rem 2rem!important;position:absolute;right:calc(50vw - 60px);top:0;stroke:var(--color-black);fill:none;cursor:pointer}.button-close:focus-visible,.button-close:hover{fill:var(--color-black)}.frame__line{background-color:#374b41;display:grid;grid-area:linehead;height:2px;width:100%}@media screen and (min-width:53em){.frame{font-size:1.5rem;grid-template-areas:"author dropdown contactme" "linehead linehead linehead " "... ... ..." "title links links";grid-template-columns:390px 1fr 390px}.frame__title{align-self:end;justify-self:start;margin:0 3rem 0 0}.frame__links{display:flex;justify-self:start;padding:0}.frame__links a:not(:last-child){margin-right:.5rem}.frame__heading-main{font-size:2.15rem}.frame__heading-sub{font-size:1rem}.menu__item-tiny{font-size:2rem}}.icon--menuUzi{height:20px;width:40px}@media screen and (min-width:768px){::-webkit-scrollbar{height:100%;opacity:0;position:absolute;right:0;top:0;transform-origin:center right;transition:transform .3s,opacity .3s;width:11px}::-webkit-scrollbar-thumb{background-color:#585858;border-radius:10px;cursor:-webkit-grab;cursor:grab;margin:2px;opacity:.5;position:absolute;right:0;top:0;width:7px}::-webkit-scrollbar-track{width:10px}}.intro-port{background-color:var(--color-bg);display:grid;grid-template-columns:2fr 1fr;grid-template-rows:10vh 30vh 1fr 1fr;max-height:fit-content;min-height:100vh;padding:20vh 0 2vh;position:relative;transition:all .3s linear;width:100vw;z-index:2;grid-row-gap:20px;border-bottom:.052vw solid var(--color-black)}.designer-image{grid-area:designer-image}.designer-image svg{height:30vw}.designer-desc{grid-area:designer-desc;padding:0 40px}.proof-experience{align-items:center;display:grid;grid-area:proof-experience;grid-template-columns:repeat(3,1fr);padding:40px 0;position:relative}.years-xp{display:flex;flex-direction:column}.xp-head{font-size:13vw;text-align:center}.xp-footer{font-size:2vw;text-align:center}.more-xp,.projects-xp{display:flex;flex-direction:column}.tomato{color:#c35ec3}.hero-section{background-color:var(--color-bg);position:relative;z-index:2}.google-eyes{height:100px;position:absolute;right:0;top:10px;width:100px}.eyes-cont{align-items:center;background-color:var(--color-white);border-radius:50%;display:flex;height:100%;justify-content:center;width:100%}.slide{align-items:stretch;background-color:var(--color-black);display:flex;height:100vh;overflow:hidden;position:relative;transition-duration:.3s;z-index:5}.we-talk{display:grid;grid-template-rows:1fr 1fr;height:100%;width:100%}.talk-now{align-content:end;color:var(--color-white);display:grid;font-size:11vw;grid-row:1/2;text-align:center}.reach-out{align-items:center;display:grid;grid-row:2/3;justify-content:center}.button-r{border:none;color:var(--color-white);cursor:pointer;display:inline-block;font-family:inherit;font-size:15px;margin:0;padding:1.5rem 3rem;pointer-events:auto;position:relative;transform:scale(2.5) translateY(-20px)}@media screen and (max-width:767px){.button-r.button--fenrir{transform:scale(1.5)}.work-areas-spans span{padding:.2rem 1rem;text-transform:uppercase}body{--hero-font:8vw;--hero-sub-font:0.7rem;--size-submain:1.9rem}.l3__left svg{height:40px}.content__l3{grid-template-columns:1fr 4fr}.l4__right .div{height:73%;width:54%}.content__l1{display:grid;grid-template-columns:8vw 1fr 1fr}.l1__right{font-size:var(--hero-sub-font)}.dev-header{text-align:center}}.button--fenrir{background:none;-webkit-clip-path:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%);font-family:var(--font-1),sans-serif;font-size:.85rem;font-weight:700;height:120px;padding:0;text-transform:uppercase;width:120px}.button--fenrir span{color:var(--color-bg);font-size:6px}.progress-p{background-color:transparent;border:none;height:80px;left:calc(50% - 40px);position:absolute;top:calc(50% - 40px);transition:transform .4s cubic-bezier(.7,0,.3,1);width:80px}.button--fenrir:hover .progress-p{transform:scale3d(1.2,1.2,1)}.progress__circle,.progress__path{fill:none;stroke:#b8b6b654;stroke-width:1px}.button--fenrir:focus-visible .progress__circle{fill:rgba(252,196,63,.4)}.progress__path{stroke:var(--color-white);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s cubic-bezier(.7,0,.3,1)}.button--fenrir:hover .progress__path{stroke-dashoffset:0}.cross-svg{height:100px;top:0;width:100px}.cross-svg,.socials-loww{background-color:transparent;left:0;position:absolute}.socials-loww{border-top:1px solid var(--color-white);bottom:0;height:50px;width:100%}.hs-social-link{align-items:center;border:1px solid var(--color-bg);border-radius:50%;color:var(--color-white);display:flex;font-size:16px;height:30px;justify-content:center;margin-top:8px;text-decoration:none;transition:all .27s ease-out;width:30px}.me-1{margin-right:.25rem}.d-inline-flex{display:inline-flex}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.uzi-icons-y svg{height:14px;transform:rotateY(180deg) rotate(180deg)}.uzi-icons-y svg,.uzi-icons-y svg path{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.hs-social-link:hover{background:var(--color-white);text-decoration:none}.hs-social-link:hover .uzi-icons-y svg path,.inverse-socials .uzi-icons-y svg path{fill:var(--color-black)}.intro-port-menu{display:grid;font-size:.67rem;font-weight:700;grid-area:intro-port-menu;grid-template-columns:repeat(3,1fr) 100px;grid-template-rows:1fr;line-height:1.3;padding:0 10px;position:relative;text-transform:uppercase}.top-border{top:0;will-change:transform,opacity}.bottom-border,.top-border{background-color:var(--color-black);height:.052vw;left:0;margin:0;opacity:1;position:absolute;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0)}.bottom-border{bottom:0;will-change:transform}.dim-header{color:#5d5b5d;padding:5px 0}.frame__line__low{background-color:#374b41;display:grid;grid-column:auto;grid-row:8/9;height:.052vw;width:100%}.guide-line{background-color:var(--color-black);height:21.5vh;left:0;margin:0 auto;position:absolute;right:0;top:-21.5vh;width:.052vw;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0);will-change:transform}.-blink{animation:blink 1s steps(1) infinite backwards;transform:scale(.5)}@keyframes blink{0%{opacity:0}50%{opacity:1}to{opacity:0}}.status{display:inline-flex}.signature{display:grid;font-family:AdornScript;font-size:3rem;font-weight:600;grid-column:4/5;text-align:center;text-transform:lowercase}@media screen and (min-width:512px) and (max-width:767px){.intro-port-menu{grid-template-columns:1fr 1fr 1fr}.signature.s1{display:none}}@media screen and (max-width:511px){.intro-port-menu{grid-template-columns:1fr 1fr}.lets-connect{display:none}.cross-svg,.google-eyes{transform:scale(.6)}.signature.s1{display:none}.dev-header{font-size:1.2rem;text-align:left}.section__header{padding:0!important}.design-areas{display:flex;flex-direction:column;font-size:var(--size-submain)}}@media screen and (max-width:375px){.design-areas{flex-direction:row;padding:0 0 20px}}.footer{align-content:center;background-color:var(--bright-thistle);bottom:0;display:grid;grid-template-areas:"uzitrake uzitrake uzitrake" "uzitrake uzitrake uzitrake" "copyright year available";grid-template-columns:repeat(3,1fr);grid-template-rows:30px 1fr 30px;justify-items:center;min-height:40vh;position:fixed;transform:translateZ(0);transition:all .3s ease-in-out;width:100%;z-index:1}.copyright-footer{grid-area:copyright}.copyright-footer,.year-footer{align-items:center;color:var(--stick-black);display:grid;font-size:.7rem;justify-content:center}.year-footer{grid-area:year}.footer-author svg{color:var(--stick-black);height:13vw;width:6vw}.available-y{align-items:center;color:var(--stick-black);display:flex;font-size:.7rem;grid-area:available;justify-content:center}.footer-low-line{background:var(--color-black);grid-column:1/4;grid-row:3/4;height:.052vw;position:relative;width:100vw}.button-menu{fill:var(--color-black)}.cross-svg path{stroke:var(--color-white)}.uzi-icons-y path{stroke:var(--color-black);fill:var(--color-white)}.socials-loww .other-links{display:flex;justify-content:center}@media screen and (max-width:768px){.project{font-size:17px!important;left:31vw!important}.gallery__item{height:78px;width:60px}}.project{color:var(--color-white);font-size:30px;left:40vw;position:absolute;top:20%}.uzi-icons-y{align-items:center;display:flex;text-rendering:geometricPrecision}@media (max-width:400px){.footer{grid-template-areas:"uzitrake uzitrake " "uzitrake uzitrake " "copyright year ";grid-template-columns:repeat(2,1fr);grid-template-rows:30px 1fr 30px}.menu__item-title{font-size:9.5vw!important}}.content__text img{height:400px;object-fit:cover;object-position:center center;width:600px}.work-areas{display:grid;grid-area:work-areas;grid-template-columns:1fr;min-height:40vh;padding:20px 40px;grid-column-gap:10px;border-top:.052vw solid}.dev-header{font-family:inherit;font-size:var(--size-submain)}.dev-subheader{font-family:inherit;font-size:2rem;text-align:center}.work-areas-spans{display:flex;flex-wrap:wrap;grid-template-columns:auto;grid-column-gap:10px}.work-areas-spans span{align-items:center;border:1px solid #000;border-radius:25px;display:flex;margin:.4rem 0;max-height:44px;padding:.2rem 2rem;text-align:center;text-transform:uppercase;width:fit-content}.intro-port{grid-template-areas:"intro-port-menu intro-port-menu" "designer-desc designer-image" "designer-desc designer-image" "work-areas work-areas" "proof-experience proof-experience"}.design-areas{font-size:var(--size-submain)}.tag{align-items:center;border-radius:35px;display:flex;font-size:16px;justify-content:center;margin-left:auto;margin-right:auto;padding:.7rem 1rem .5rem;position:absolute;right:22%;transform:rotate(-5deg);width:fit-content;z-index:2}.latest-tag img{height:78px;width:auto}.size-sm{font-family:var(--font-2);font-size:1.5rem}.works-svg svg{height:3rem}.dev-forlio{display:grid;font-size:var(--size-submain);grid-template-columns:1fr 1fr 1fr;margin-bottom:15vh;position:relative}.spacing-arrow-inner{background-color:#5d5b5d;height:8px;width:80%}.spacing-arrow{align-items:center;display:flex;justify-content:center;position:relative}.italic{font-style:italic}.starsvg{left:-10px;position:absolute;top:20%}.head-desc{padding-top:30px}@media screen and (max-width:767px){.intro-port{grid-template-areas:"intro-port-menu" "designer-desc" "designer-image " "work-areas " "proof-experience ";grid-template-rows:auto}.dev-forlio,.intro-port{display:grid;grid-template-columns:1fr}.dev-forlio{font-size:var(--size-submain);grid-template-rows:1fr 1fr 1fr;margin-bottom:10vh;padding-left:28px;position:relative}.designer-desc{padding:0 20px}.designer-image{align-items:center;display:grid;grid-area:designer-image;justify-content:center}.head-desc{padding-top:30px;text-align:center}.designer-desc{grid-area:designer-desc;padding:8vh 20px}.tag{padding:.3rem .5rem}.empty{z-index:1!important}}.stick-fill:hover{background:#000;background-position:100%;color:#fff;transition:background-position .5s ease}.more-work{display:grid;grid-template-areas:"greatwork morework logowork";grid-template-columns:100px 1fr 30px;height:fit-content;max-height:50svh;max-width:100vw}.where-morework{align-items:center;display:flex;font-size:var(--size-submain);grid-area:morework;justify-content:center;position:relative}.logo-work{align-content:center;display:grid;grid-area:logowork;justify-self:end}.great-work{grid-area:greatwork}.free-time{background-color:var(--thistle);border-top-left-radius:35px;border-top-right-radius:35px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:130px 110px 10rem 1fr 1fr;height:fit-content;min-height:100svh;position:relative;width:100vw;z-index:4}.hola-wrapper{border-top-left-radius:35px;border-top-right-radius:35px;grid-column:1/4;height:max-content;overflow:visible}.hola-wrapper,.lets-you{align-items:center;background-color:var(--bright-thistle);display:flex;justify-content:center}.lets-you{border-radius:80px;transform:translateY(-50%);width:41%}.same-you{color:#000;font-size:1.1rem}.yoyo-main{display:flex;grid-column:1/4;grid-row:2/3}.yoyo{display:flex;width:100%}.yoyo,.yoyo-headline{color:var(--stick-black);font-size:var(--hero-font);justify-content:center}.yoyo-headline{align-items:center;display:inline-flex;position:relative}@media (min-width:812px){.yoyo-headline:before{height:22vw;left:calc(-2vw - 1px);width:26vw}}.yoyo-background{height:100%;left:0;position:absolute;scale:1.3;top:0;width:100%}.arrow-below{display:flex;grid-column:1/4;grid-row:3/4;justify-content:center;width:100%}.arrow-below svg{height:9rem;width:7rem}.decoration{left:10px;position:absolute;top:0;width:10.8rem}.image-collab{display:flex;grid-column:1/4;grid-row:4/5;height:140px;justify-content:center}.image-collab img{height:100%;height:140px;width:auto}.mail-wrapper{display:flex;grid-column:1/4;grid-row:5/6;height:fit-content;justify-content:center;padding:10px 0;width:100%}.mail-box{color:var(--stick-black);font-size:var(--size-2rem);overflow:hidden;width:fit-content}.email-wrapper{display:flex;grid-column:1/4;grid-row:6/7;height:fit-content;justify-content:center;padding:10px 0}.email-box{background-color:var(--color-black);border:2px solid var(--color-black);border-radius:135px;color:var(--stick-black);cursor:pointer;font-size:calc(var(--email-font) - 3vw);padding:1rem 2rem;position:relative;width:fit-content}.email-itself{color:var(--color-bg)}.this-email{height:77%;position:absolute;right:-13%;top:10%;width:auto}.this-email svg{height:100%;width:auto}.this-socials{align-items:center;display:flex;grid-column:1/4;grid-row:7/8;height:fit-content;justify-content:center;padding:10vh 0;position:relative;text-align:center}.this-socials-text{color:var(--stick-black);font-size:var(--size-2rem);text-transform:uppercase}.copy-page__toggle-button{left:-18%;position:absolute;top:6px;transform:rotate(305deg)}@media screen and (max-width:767px){.copy-page__toggle-button{display:none}}@media (max-width:1919px){.toggle-button{height:8.3rem;width:9.5rem}}.toggle-button{all:unset;cursor:pointer;display:block;height:6rem;position:relative;width:6.5rem;--toggle-transition:0.5s ease-in-out}.email-box button,.toggle-button{-webkit-tap-highlight-color:rgba(0,0,0,0)}.email-box button{margin:-.4rem;padding:.4rem}.toggle-button__label,.toggle-button__label:after{display:block;position:absolute;transition:var(--page-transition)}.toggle-button__label{border:1px solid var(--color-black);border-radius:25px;color:var(--bg-color-content);font-weight:var(--font-light);padding:3px 9px 0 11px;transform-origin:right center;width:fit-content}.email-box:hover .toggle-button__star{animation:rotatearound 2s linear}.toggle-button__label-1{bottom:0;left:0}.toggle-button__label-2{bottom:0;right:0;transform:rotate(40deg) translateX(-3.4rem)}@media (max-width:1919px){.p1,.p1-italic{font-size:1.4rem}}.p1,.p1-italic{font-family:inherit;font-size:1.2rem;font-weight:300;letter-spacing:.015em;line-height:1.7}@media (max-width:1919px){.toggle-button__label[data-v-2d76716c]:after{height:2.5rem;left:2px;top:3px;width:6.1rem}}.toggle-button__label[data-v-2d76716c]:after{border:1px solid var(--bg-color-content);border-radius:3rem;content:"";height:3rem;left:0;top:4px;width:7.7rem}.toggle-button__label[data-v-2d76716c],.toggle-button__label[data-v-2d76716c]:after{display:block;position:absolute;transition:var(--page-transition)}.toggle-button__label[data-v-2d76716c]{bottom:0;color:var(--bg-color-content);font-weight:var(--font-light);padding:3px 9px 0 11px;right:0;transform-origin:right center}@media (max-width:1919px){.toggle-button__star[data-v-2d76716c]{height:26px;width:26px}}.toggle-button__star[data-v-2d76716c]{bottom:0;position:absolute;right:0}.empty{background-color:var(--color-black);height:40vh;position:relative;z-index:4}.wiggle{background:var(--thistle);background-position:top;background-repeat:no-repeat;background-size:cover;display:grid;grid-template-areas:"... ... ..." "starsvg starsvg starsvg" "buttons buttons buttons" "letsmake letsmake letsmake" "empty empty empty";grid-template-columns:1fr 1fr 1fr;grid-template-rows:100px 156px 100px minmax(150px,300px) 100px;height:fit-content;min-height:100svh;overflow:hidden;grid-row-gap:30px}.wiggle,.wiggle-svg{position:relative;z-index:5}.wiggle-svg{grid-column:1/4;grid-row:1/6;width:100%}.wiggle-star-wrapper{align-items:center;background:transparent;color:var(--color-bg);display:flex;grid-area:starsvg;justify-content:center;z-index:6}.wiggle-star{height:auto;width:70px;fill:var(--color-bg);stroke:var(--color-bg)}.wiggle-star svg{height:auto;width:100px}.uzi-n-u{align-items:top;display:flex;grid-area:uziyou;height:max-content;justify-content:center;z-index:5}.u-n-uzi{color:var(--color-bg);font-family:inherit;font-size:var(--email-font)}@media screen and (max-width:767px){.wiggle{display:grid;grid-template-rows:70px 45px 100px 200px;min-height:100svh}#logo-36{width:40px}.great-work img{width:82px}.more-work{grid-template-areas:"greatwork morework logowork";grid-template-columns:82px 1fr 30px;margin:0 -20px}.lets-you{width:75%}.lets-make img{height:30px!important}}@media screen and (max-width:425px){.socials-spans{flex-direction:column;justify-self:center;width:fit-content}.socials-spans span{padding:11px 22px}.intro__button{height:52px!important;width:52px!important}.wiggle{display:grid;grid-template-rows:70px 45px 75px 100px;min-height:fit-content}.free-time{grid-template-rows:89px 60px 10rem 153px 1fr}.yoyo,.yoyo-headline{font-size:calc(var(--size-2rem) + 5vw)}.this-email{height:57%!important}}.wiggle-socials{display:flex}.wiggle-socials svg{align-self:center;height:30px;justify-self:center}.black-div{background-color:var(--color-black);grid-area:empty;z-index:5}.lets-make{color:var(--color-bg);font-size:var(--email-font);grid-area:letsmake;z-index:6}.intro__button,.lets-make{align-items:center;display:flex;justify-content:center;position:relative}.intro__button{background:#fff;border:1px solid #000;border-radius:50%;box-shadow:-3px -2px 0 var(--color-bg);cursor:pointer;height:77px;justify-self:center;margin-top:1rem;width:76px}.intro__button-svg{width:60%}.intro__button:hover{box-shadow:0 0 0 var(--color-bg);transform:translate3d(1px,2px,0)}.social-buttons{display:flex;gap:20px;grid-area:buttons;height:max-content;justify-content:center;padding:20px 0;z-index:6}.app-footer__marquee{backdrop-filter:blur(4px);color:var(--color-black);font-size:calc(.8925rem + 6.43571vw);font-weight:400;padding:.25em 0;white-space:nowrap;--marquee-animation-duration:40s;font-family:var(--font-2)}.u-marquee{--marquee-gap:1ch;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none}.u-marquee,.u-marquee__content{align-items:center;display:flex;gap:var(--marquee-gap)}.u-marquee__content{animation:marquee var(--marquee-animation-duration) linear infinite;flex-shrink:0;justify-content:space-around;max-width:-moz-fit-content;max-width:fit-content}.u-marquee__content>*{white-space:nowrap}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(calc(-100% - var(--marquee-gap)))}}.grid{bottom:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;justify-content:center;left:0;position:absolute;top:0;width:100%}.grid-lines{background:#000;height:100%;opacity:.25;width:1px} \ No newline at end of file diff --git a/public/index.html b/public/index.html new file mode 100644 index 00000000..f2e6224a --- /dev/null +++ b/public/index.html @@ -0,0 +1,11 @@ +UZITRAKE ✦ PORTFOLIO

Uzitrake

UZITRAKE
CREATIVE FREELANCER DEVELOPER UX/UI DESIGNER
DEVELOPER
specializing in web development for brands worldwide Web dev innovation driven by strategy and precision
DESIGNER
Location
GMT+3(, KE)
Status
AVAILABLE FOR WORK

WORKING WORLDWIDE
Socials
INSTAGRAM
DRIBBLE
uzitrake
 (design) FORLIO
2024
Hey there! I'm Uzitrake.
A Digital Designer
Based in Kenya(KE)
Current works : TRAKEXCEL STUDIO
Available for freelance
Full stack developer
MY WORK AREAS
FRONTEND DEVELOPMENT UX/UI design Branding Backend WEB MAINTAINANCE Mobile apps E-commerce web WEB REBRANDING IT consultancy
4+ YEARS X-PERIENCE
10+ PROFFESIONAL PROJECTS
3 DESIGN AWARDS
😎
2020

Selected
work

2024

Lumina

✺Branding April — 2023 CLIENT :  Lumina
Discover work

Trakexcel

✺Web design March — 2023 For Trakexcel Agency
Discover work

DNAnexus

✺Brand design December — 2022 CLIENT : experimental
Discover work

Uzitrake

✺Web Design January — 2023 Personal
Discover work
great work above
Discover more work
On socials ❈

Lumina

CASE 01-04

TASK - Our goal with the design and rebranding initiative was to establish a modern and cohesive visual identity that reflects the company's values and resonates with its target audience. We aimed to create a unique brand experience that enhances brand recognition and fosters a strong connection with customers.

FIELD - BRANDING ,DESIGN

ROLE - Art designer,Designer

RECOGNITION - The product design has received acclaim for its innovative and minimalist approach, solidifying its position as a standout solution in the industry.

Problem ➺

Lumina, a skincare product company, faced several challenges in establishing its brand identity and online presence. The company struggled with low brand recognition, difficulty in conveying the benefits of its products, and limited customer engagement on its existing website..


This project entailed developing a robust design system and refining digital touchpoints, ensuring a seamless user experience across their app ecosystem with a design partner capable of adapting to their continuously evolving requirements.

Solution ➺

Throughout our partnership, As the developer responsible for designing Lumina's product branding and website, I addressed these challenges by implementing a comprehensive solution. Through extensive market research and collaboration with Lumina's team, I developed a cohesive brand identity that resonated with the target audience and differentiated Lumina from competitors. This involved creating visually appealing packaging designs that conveyed the premium quality and efficacy of Lumina's skincare products.

project image
✻  DESIGNS  ✻  DESIGNS 
project design
project image
project image

Trakexcel

CASE 02-04

TASK- My objective was to design a website for Trakexcel agency that is exceptionally attractive and visually appealing. Every aspect of the design was crafted to captivate visitors and leave a lasting impression, ensuring that the website stands out amidst the digital landscape.

FIELD - Web Development

ROLE - Lead Programmer

RECOGNITION - Our website has garnered attention for its innovative design and user-friendly interface. It has been praised by industry experts and users alike for its intuitive navigation and engaging content, establishing it as a standout platform in our field.

Problem ➺

Trakexcel Agency, a leading provider of marketing and analytics solutions, aimed to revolutionize its online presence and brand image. Recognizing the importance of a captivating design that resonates with its target audience, they entrusted us with this mission. As our collaboration progressed, our focus extended to enhancing user engagement and streamlining the user experience.


This project involved the creation of a visually stunning design system and the refinement of digital touchpoints to ensure a seamless user journey across all platforms. We worked closely with the Trakexcel team to understand use the vision and objectives, and implemented innovative design strategies to achieve their goals effectively.

Solution ➺

Throughout our collaboration, we undertook various initiatives to enhance Trakexcel's online presence. We began by optimizing the website's interface and user experience, focusing on improving navigation and visual appeal. Subsequently, we delved into mobile design, exploring new app directions and refining user interactions to optimize engagement. Additionally, we revamped the onboarding process, redesigning flows and incorporating custom illustrations to communicate Trakexcel's brand story effectively. Our ultimate achievement was the development of a comprehensive design system that ensured consistency and efficiency across all design, product, and engineering endeavors.

project image
✻  DESIGNS  ✻  DESIGNS 
Screenshot of Trakexcel application on iPhone
trakexcel design on laptop

DNAnexus

CASE 03-04

TASK - Refining and enhancing the user interface and design of their platform, akin to the meticulous arrangement of five Imprimaturs on a title-page

FIELD - RE-BRANDING, DESIGN

ROLE - Development Collaborator

RECOGNISION - These are the pretty responsories, these are the dear antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made

Problem ➺

DNAnexus, a leading provider of cloud-based data management and analysis solutions for genomics research, faced challenges in optimizing their user interface and experience for researchers and bioinformatics professionals. As the demand for genomic data analysis grew, they recognized the importance of enhancing their platform's usability and functionality to meet the evolving needs of their users. They sought a design partner with expertise in both genomics technology and user-centered design principles to help them overcome these challenges.


This project entailed developing a robust design system and refining digital touchpoints, ensuring a seamless user experience across their app ecosystem with a design partner capable of adapting to their continuously evolving requirements.

Solution ➺

As part of our collaboration, we also focused on enhancing the mobile experience of the platform, recognizing the importance of accessibility and flexibility for users who need to access genomic data on the go. We explored innovative design concepts and interaction patterns to create a mobile interface that seamlessly complemented the desktop experience.
Furthermore, we developed a comprehensive design system that provided DNAnexus with a set of standardized components, styles, and guidelines for maintaining consistency and coherence across their entire platform. This design system not only facilitated faster iteration and development but also empowered DNAnexus's internal teams to collaborate more effectively and efficiently.

project image
✻  DESIGNS  ✻  DESIGNS 
project image

Uzitrake

CASE 04-04

TASK - Crafting a captivating portfolio as a UX/UI designer presented a unique challenge. I needed a platform that not only showcased my design prowess but also effectively communicated my artistic vision and directorial leadership.

FIELD - UX/UI DESIGN , PORTFOLIO

ROLE - Designer, Developer

RECOGNISION - Digitally Fit Awards 2023 - Kenya

Problem

As a programmer and UX/UI designer, I recognized the importance of showcasing my skills and projects effectively to potential clients and employers. However, creating a portfolio that truly reflected my expertise and creativity posed a significant challenge. I needed a platform that not only highlighted my technical abilities but also conveyed my design sensibilities and problem-solving approach in a compelling manner.


To provide further context and insight into my design process, I needed to include case studies for select projects, detailing my approach, challenges faced, and key learnings.

Solution

To address this challenge, I approached the design and development of my portfolio with a strategic mindset, focusing on three key aspects: showcasing my technical proficiency, demonstrating my design expertise, and providing insight into my problem-solving process.

First and foremost, I leveraged my programming skills to create a clean, modern, and responsive website using HTML, CSS, and JavaScript. I ensured that the site was optimized for performance and accessibility, reflecting my commitment to delivering high-quality digital experiences.

In terms of design, I employed user-centered principles to craft an intuitive and visually engaging interface. I carefully curated my portfolio projects, selecting a diverse range of work that showcased my versatility and creativity across different domains and platforms

Throughout the development process, I iterated on the design and content based on feedback from peers, mentors, and potential users, ensuring that my portfolio effectively showcased my skills and resonated with its intended audience.

project image
✻  DESIGNS  ✻  DESIGNS 
Screenshot of current application on iPhone
trakexcel designs on iphones

Lets do same for you 😊

Say ( Hello )
lets collab
bonjour
if you like social messages
Let's make ➺
Something epic
-  UZITRAKE  -  UZITRAKE 
copyright© uzitrake
All rights reserved @2024
Available for freelance
\ No newline at end of file diff --git a/public/js/distort/index.js b/public/js/distort/index.js new file mode 100644 index 00000000..e4d4abe1 --- /dev/null +++ b/public/js/distort/index.js @@ -0,0 +1 @@ +import{Cursor}from"./cursor.js";import{MenuItem}from"./menuItem.js";const splitting=Splitting(),cursor=new Cursor(document.querySelector(".cursor"));[...document.querySelectorAll(".menu > a")].forEach((e=>new MenuItem(e)));let togglePathx=document.querySelector(".dark-toggle");togglePathx.addEventListener("click",(()=>{[...document.querySelectorAll("a")].forEach((e=>{cursor.enter(),cursor.leave()}))})),[...document.querySelectorAll("a")].forEach((e=>{e.addEventListener("mouseenter",(()=>cursor.enter())),e.addEventListener("mouseleave",(()=>cursor.leave()))})); \ No newline at end of file diff --git a/public/js/distort/menuItem.js b/public/js/distort/menuItem.js new file mode 100644 index 00000000..0b27d2dd --- /dev/null +++ b/public/js/distort/menuItem.js @@ -0,0 +1 @@ +export class MenuItem{constructor(e){this.DOM={el:e},this.DOM.titleChars=this.DOM.el.querySelectorAll("span.char"),setInterval((()=>{const e=getComputedStyle(document.body);this.colors={initial:e.getPropertyValue("--color-black"),final:e.getPropertyValue("--color-link")}}),100),console.log(this.colors),this.initEvents()}initEvents(){this.onMouseEnterEv=()=>this.onMouseEnter(),this.DOM.el.addEventListener("mouseenter",this.onMouseEnterEv),this.onMouseLeaveEv=()=>this.onMouseLeave(),this.DOM.el.addEventListener("mouseleave",this.onMouseLeaveEv)}onMouseEnter(){this.leaveTimeline&&this.leaveTimeline.kill(),this.enterTimeline=gsap.timeline({defaults:{duration:.05,ease:"power3",x:()=>gsap.utils.random(-15,15),y:()=>gsap.utils.random(-20,10),rotation:()=>gsap.utils.random(-5,5),color:()=>gsap.utils.random(0,3)<.5?this.colors.final:this.colors.initial}}).to(this.DOM.titleChars,{repeat:3,repeatRefresh:!0},0).to(this.DOM.titleChars,{x:0,y:0,rotation:0,color:this.colors.final},"+=0.05")}onMouseLeave(){this.leaveTimeline=gsap.timeline().to(this.DOM.titleChars,{duration:.4,ease:"power3",color:this.colors.initial})}} \ No newline at end of file diff --git a/public/js/index.js b/public/js/index.js new file mode 100644 index 00000000..09c6d4b1 --- /dev/null +++ b/public/js/index.js @@ -0,0 +1 @@ +import{preloadImages}from"./utils.js";preloadImages(".tiles__line-img").then((()=>document.body.classList.remove("loading")));const frame=document.querySelector(".frame"),overlayPath=document.querySelector(".overlay__path"),menuWrap=document.querySelector(".menu-wrap"),menuItems=menuWrap.querySelectorAll(".menu__item"),openMenuCtrl=document.querySelector("button.button-menu"),closeMenuCtrl=menuWrap.querySelector(".button-close"),title={main:document.querySelector(".content__l1"),sub:document.querySelector(".content__l2")};let isAnimating=!1;const openMenu=()=>{isAnimating||(isAnimating=!0,gsap.timeline({onComplete:()=>isAnimating=!1}).set(overlayPath,{attr:{d:"M 0 100 V 100 Q 50 100 100 100 V 100 z"}}).to(overlayPath,{duration:.8,ease:"power4.in",attr:{d:"M 0 100 V 50 Q 50 0 100 50 V 100 z"}},0).to(overlayPath,{duration:.3,ease:"power2",attr:{d:"M 0 100 V 0 Q 50 0 100 0 V 100 z"},onComplete:()=>{frame.classList.add("frame--menu-open"),menuWrap.classList.add("menu-wrap--open")}}).to([title.main,title.sub],{duration:.8,ease:"power3.in",y:-200,stagger:.05},.2).set(menuItems,{opacity:0}).set(overlayPath,{attr:{d:"M 0 0 V 100 Q 50 100 100 100 V 0 z"}}).to(overlayPath,{duration:.3,ease:"power2.in",attr:{d:"M 0 0 V 50 Q 50 0 100 50 V 0 z"}}).to(overlayPath,{duration:.8,ease:"power4",attr:{d:"M 0 0 V 0 Q 50 0 100 0 V 0 z"}}).to(menuItems,{duration:1.1,ease:"power4",startAt:{y:150},y:0,opacity:1,stagger:.05},">-=1.1"))},closeMenu=()=>{isAnimating||(isAnimating=!0,gsap.timeline({onComplete:()=>isAnimating=!1}).set(overlayPath,{attr:{d:"M 0 0 V 0 Q 50 0 100 0 V 0 z"}}).to(overlayPath,{duration:.8,ease:"power4.in",attr:{d:"M 0 0 V 50 Q 50 100 100 50 V 0 z"}},0).to(overlayPath,{duration:.3,ease:"power2",attr:{d:"M 0 0 V 100 Q 50 100 100 100 V 0 z"},onComplete:()=>{frame.classList.remove("frame--menu-open"),menuWrap.classList.remove("menu-wrap--open")}}).set(overlayPath,{attr:{d:"M 0 100 V 0 Q 50 0 100 0 V 100 z"}}).to(overlayPath,{duration:.3,ease:"power2.in",attr:{d:"M 0 100 V 50 Q 50 100 100 50 V 100 z"}}).to(overlayPath,{duration:.8,ease:"power4",attr:{d:"M 0 100 V 100 Q 50 100 100 100 V 100 z"}}).to([title.main,title.sub],{duration:1.1,ease:"power4",y:0,stagger:-.05},">-=1.1").to(menuItems,{duration:.8,ease:"power2.in",y:100,opacity:0,stagger:-.05},0))};openMenuCtrl.addEventListener("click",openMenu),closeMenuCtrl.addEventListener("click",closeMenu); \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js new file mode 100644 index 00000000..799bb79e --- /dev/null +++ b/public/js/main.js @@ -0,0 +1 @@ +document.addEventListener("DOMContentLoaded",(function(){setTimeout((()=>{let e=document.querySelector(".time");function t(){var t=new Date;e.innerHTML=t.toTimeString().substr(0,5)}t(),setInterval((()=>{t()}),1e3);let o=document.querySelector(".button-menu"),r=document.querySelector(".button-close"),n=document.querySelectorAll(".menu-will-open"),i=document.querySelector(".mf-cursor");function a(){if(innerWidth>767){const e=new Lenis({duration:3,easing:e=>Math.min(1,1.001-Math.pow(2,-10*e)),direction:"vertical",gestureDirection:"vertical",smooth:!0,smoothTouch:!1,touchMultiplier:2,infinite:!1,autoResize:!0});requestAnimationFrame((function t(o){e.raf(o),requestAnimationFrame(t)}))}}if(n.forEach((e=>{o.addEventListener("click",(()=>{setTimeout((()=>{e.classList.add("menu-is-open"),i&&(i.style.display="none")}),1e3)})),r.addEventListener("click",(()=>{setTimeout((()=>{e.classList.remove("menu-is-open"),i&&(i.style.display="block")}),1e3)}))})),a(),window.addEventListener("resize",a),gsap.registerPlugin(ScrollTrigger),innerWidth>767){document.querySelectorAll("[line-triggerX]").forEach((function(e){const t=e.getAttribute("line-triggerX"),o=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out"}});return t.fromTo(e,{scaleX:1,opacity:1,transformOrigin:"center center"},{scaleX:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:o,onEnter:()=>o.play()})})),document.querySelectorAll("[line-triggerY]").forEach((function(e){const t=e.getAttribute("line-triggerY"),o=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out",delay:1.2}});return t.fromTo(e,{scaleY:1,opacity:1,transformOrigin:"bottom"},{scaleY:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:o,toggleActions:"play none none none"})}))}if(innerWidth>767){function l(){gsap.registerPlugin(ScrollTrigger),gsap.timeline({scrollTrigger:{trigger:".empty",start:"top bottom",end:"bottom 60%",scrub:!0}}).to(".empty",{y:"-40vh",ease:"expo.out"})}l(),window.addEventListener("resize",l)}const c=[...document.querySelectorAll("[data-splitting][data-effect28]")];if(c){gsap.registerPlugin(ScrollTrigger),gsap.registerPlugin(SplitText);new SplitText("[data-splitting][data-effect28]",{type:"words,lines,chars",wordsClass:"content__title word",charsClass:"char",linesClass:"lines"});c.forEach((e=>{const t=[...e.querySelectorAll(".word")];for(const e of t){const t=e.querySelectorAll(".char"),o=t.length;gsap.fromTo(t,{"will-change":"transform, filter",transformOrigin:"50% 100%",scale:e=>{const t=e{const t=e{const t=e{d.forEach((function(e,t){e.getAttribute("data-image"),gsap.timeline().addLabel("rotate,+=0").to(e,{transform:"rotate3d(0, 1, 0, 180deg)",perspective:"1000px",duration:1.2,ease:"power2.in",id:t+1},"rotate").add((()=>{e.classList.add(`menu-image${t}`)}))}))}));let g=document.querySelector(".knob"),m=document.querySelector(".dark-toggle"),p=document.querySelector("body"),f=document.querySelector(".mf-cursor"),y=!1;if(m.addEventListener("click",(()=>{y=!y,gsap.timeline().to(g,{x:()=>y?18:0,duration:.4,ease:"expo.in"}),document.querySelectorAll(".portfolio-map a").forEach((e=>{gsap.set(e,{color:y?"#fff":"#000"})})),p.classList.toggle("dark-mode"),f.classList.add("-exclusion")})),innerWidth>767){new MouseFollower}if(document.querySelector(".mf-cursor")){function h(){innerWidth<768&&(document.querySelector(".mf-cursor").style.display="none")}h()}window.addEventListener("resize",h);document.querySelectorAll(".magnetic").forEach((e=>{e.addEventListener("mouseenter",(()=>{console.log("magnettt")})),new Magnetic(e,{y:.4,x:.4,s:.2,rs:.7})})),$("[data-magnetic]").each((function(){new Magnetic(this)})),gsap.registerPlugin(ScrollToPlugin);let w=document.querySelector(".tocontact"),S=document.querySelector(".toworks"),T=document.querySelector(".tohero"),b=document.querySelector(".toabout");w.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:".free-time",ease:"expo.out"})})),S.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".works",offsetY:50},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),T.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".content-hero"},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),b.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".intro-port",offsetY:10},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})}));let q=document.querySelectorAll(".portfolio-map a"),M=document.querySelector("body"),E=getComputedStyle(M).backgroundColor,v=getComputedStyle(M).color,L=gsap.timeline({paused:!0,scrollTrigger:{trigger:".free-time",start:"top center",markers:!1,onEnter:()=>{L.play()},onLeaveBack:()=>{L.reverse()}}});gsap.to(window,{scrollTrigger:{trigger:"body",start:"top top",onEnter:()=>{L.reverse()}}}),q.forEach((e=>{L.fromTo(e,{color:v},{color:E,duration:.4,ease:"power1.out"})}))}),0)}));const words=["Hello","Hola","Bonjour","Salut","Chao"];let currentIndex=0;function changeWord(){const e=document.getElementById("changehello");currentIndex=(currentIndex+1)%words.length,e.innerHTML=words[currentIndex]}function copyToClipboard(e){if(innerWidth>767&&document.hasFocus()){navigator.clipboard.writeText(e),document.querySelectorAll(".copy").forEach((e=>{e.innerHTML="Copied",setTimeout((()=>{e.innerHTML="Copy!"}),4e3)}))}}setInterval(changeWord,1e4);const text3d=()=>{if(innerWidth>767){gsap.registerPlugin(ScrollTrigger);[...document.querySelectorAll("[data-splitting][data-effect19]")].forEach((e=>{const t=e.querySelectorAll(".char");t.forEach((e=>gsap.set(e.parentNode,{perspective:1e3}))),gsap.fromTo(t,{"will-change":"opacity, transform",transformOrigin:"50% 0%",opacity:0,rotationX:-90,z:-200},{ease:"power1",opacity:1,stagger:.05,rotationX:0,z:0,scrollTrigger:{trigger:e,start:"center bottom",end:"bottom top+=40%",scrub:!0}})}))}};let resizeTimer;if(text3d(),window.addEventListener("resize",(()=>{clearTimeout(resizeTimer),resizeTimer=setTimeout((()=>{text3d(),copyToClipboard()}),250)})),innerWidth>767){gsap.timeline({scrollTrigger:{trigger:".wiggle",start:"top 90%",end:"top 30%",scrub:1}}).fromTo("#logo-36",{scale:.3,y:"-200px",rotate:0},{scale:1,y:0,rotate:360})}let chars=[...document.querySelectorAll(".rotate-i .char")];const lettertl=gsap.timeline({repeat:-1,duration:2,delay:3,yoyo:!0});lettertl.to(chars[6],{rotation:360}),lettertl.to(chars[11],{rotation:360});let emailbox=document.querySelector(".email-box"); \ No newline at end of file diff --git a/public/js/preloader/galleryController.js b/public/js/preloader/galleryController.js new file mode 100644 index 00000000..bbb5075d --- /dev/null +++ b/public/js/preloader/galleryController.js @@ -0,0 +1 @@ +import{calcWinsize,getRandomInteger}from"./utils.js";import GalleryItem from"./galleryItem.js";Splitting();const lenis=new Lenis({duration:3,easing:t=>Math.min(1,1.001-Math.pow(2,-10*t)),direction:"vertical",gestureDirection:"vertical",smooth:!0,smoothTouch:!1,touchMultiplier:2,infinite:!1,autoResize:!0});function raf(t){lenis.raf(t),requestAnimationFrame(raf)}requestAnimationFrame(raf);let winsize=calcWinsize();window.addEventListener("resize",(()=>winsize=calcWinsize()));const overlayRows=[...document.querySelectorAll(".overlay__row")];export default class GalleryController{constructor(t){this.DOM={galleryEl:t,title:document.querySelector(".title-uzi")},this.DOM.titleChars=this.DOM.title.querySelectorAll(".char"),this.titleCharsTotal=this.DOM.titleChars.length,this.DOM.galleryItemElems=[...this.DOM.galleryEl.querySelectorAll(".gallery__item")],this.galleryItems=[],this.DOM.galleryItemElems.forEach((t=>this.galleryItems.push(new GalleryItem(t)))),this.itemsTotal=this.galleryItems.length,this.intro()}intro(){const t=gsap.timeline().to(this.DOM.title,{duration:1,ease:"expo",startAt:{y:"10%"},y:"0%",opacity:1},0);for(const[e,i]of this.galleryItems.entries())t.set(i.DOM.img,{x:winsize.width/2-i.imgRect.left-i.imgRect.width/2,y:winsize.height/2-i.imgRect.top-i.imgRect.height/2,scale:1.6,rotation:getRandomInteger(-10,10),opacity:1,delay:.2*e},0),0===e&&t.set(i.DOM.imgInner,{scale:1.8},0);const[e,...i]=this.galleryItems.map((t=>t.DOM.img));t.addLabel("startAnimation","+=0").add((()=>{document.body.classList.remove("noscroll")}),"startAnimation").to(this.DOM.titleChars,{duration:1,ease:"expo",x:(t,e)=>-40*(Math.floor(this.titleCharsTotal/2)-t),opacity:0,stagger:{from:"center"}},"startAnimation").to(i,{duration:1,ease:"power3",x:()=>"+="+getRandomInteger(-200,200)+"%",y:()=>"+="+getRandomInteger(-200,200)+"%",opacity:0,rotation:()=>getRandomInteger(-20,20)},"startAnimation").to(i,{duration:.5,ease:"expo",startAt:{x:0,y:0,rotation:0,scale:.8},scale:1,opacity:1}).to(e,{duration:1.2,ease:"expo",x:0,y:0,scale:1,rotation:0,opacity:1},"startAnimation+=0.2").to(this.galleryItems[0].DOM.imgInner,{duration:1.2,ease:"expo",scale:1},"startAnimation").addLabel("grid","start+=0.1").to(overlayRows,{ease:"expo3.in",duration:1,scaleX:0},"grid").to(i,{duration:.5,ease:"expo2",opacity:0},"grid+=0.51").to(e,{duration:.5,ease:"expo2",opacity:0},"grid+=0.51").to(".preloader",{opacity:0,zIndex:-1,display:"none",duration:.1,ease:"power1"})}} \ No newline at end of file diff --git a/public/js/preloader/galleryItem.js b/public/js/preloader/galleryItem.js new file mode 100644 index 00000000..987970dc --- /dev/null +++ b/public/js/preloader/galleryItem.js @@ -0,0 +1 @@ +export default class GalleryItem{constructor(e){this.DOM={el:e},this.DOM.img=this.DOM.el.querySelector(".gallery__item-img"),this.DOM.imgInner=this.DOM.img.querySelector(".gallery__item-imginner"),this.imgRect=this.DOM.img.getBoundingClientRect(),this.inStack=!0,this.initEvents()}initEvents(){this.onMouseEnterFn=()=>{if(this.inStack)return!1;gsap.timeline({defaults:{duration:1,ease:"expo"}}).to(this.DOM.img,{scale:.95}).to(this.DOM.imgInner,{scale:1.2},0)},this.onMouseLeaveFn=()=>{if(this.inStack)return!1;gsap.timeline({defaults:{duration:1,ease:"expo"}}).to([this.DOM.img,this.DOM.imgInner],{scale:1})},this.DOM.img.addEventListener("mouseenter",this.onMouseEnterFn),this.DOM.img.addEventListener("mouseleave",this.onMouseLeaveFn)}} \ No newline at end of file diff --git a/public/js/preloader/index.js b/public/js/preloader/index.js new file mode 100644 index 00000000..be695e84 --- /dev/null +++ b/public/js/preloader/index.js @@ -0,0 +1 @@ +import{preloadImages,preloadFonts}from"./utils.js";import GalleryController from"./galleryController.js";Promise.all([preloadImages(".gallery__item-imginner")]).then((()=>{document.body.classList.remove("loading"),new GalleryController(document.querySelector(".gallery")),[...document.querySelectorAll("a, .gallery__item-img")].forEach((e=>{}))})); \ No newline at end of file diff --git a/public/js/preloader/utils.js b/public/js/preloader/utils.js new file mode 100644 index 00000000..c9194a7f --- /dev/null +++ b/public/js/preloader/utils.js @@ -0,0 +1 @@ +const lerp=(e,o,t)=>(1-t)*e+t*o,getMousePos=e=>({x:e.clientX,y:e.clientY}),calcWinsize=()=>({width:window.innerWidth,height:window.innerHeight}),getRandomInteger=(e,o)=>Math.floor(Math.random()*(o-e+1)+e),preloadImages=(e="img")=>new Promise((o=>{imagesLoaded(document.querySelectorAll(e),{background:!0},o)})),preloadFonts=e=>new Promise((o=>{WebFont.load({typekit:{id:e},active:o})}));export{lerp,getMousePos,calcWinsize,getRandomInteger,preloadImages,preloadFonts}; \ No newline at end of file diff --git a/public/js/works/index.js b/public/js/works/index.js new file mode 100644 index 00000000..8d435dd7 --- /dev/null +++ b/public/js/works/index.js @@ -0,0 +1 @@ +import{preloadImages,abibae}from"./utils.js";import{Item}from"./item.js";Promise.all([preloadImages(".item__img, .content__img")]).then((()=>{document.body.classList.remove("loading"),abibae();let e=[];[...document.querySelectorAll(".items > .item")].forEach((t=>e.push(new Item(t,e)))),[...document.querySelectorAll("a, .unbutton")].forEach((e=>{}))})); \ No newline at end of file diff --git a/public/js/works/item.js b/public/js/works/item.js new file mode 100644 index 00000000..e37be0e9 --- /dev/null +++ b/public/js/works/item.js @@ -0,0 +1 @@ +import{MagneticFx}from"./magneticFx.js";import{calcWinsize,wrapElements}from"./utils.js";const splitting=Splitting();let winsize=calcWinsize();window.addEventListener("resize",(()=>winsize=calcWinsize()));const frameEl=document.querySelectorAll(".frame");let viewcaseChars=document.querySelectorAll(".viewcase .char");export class Item{constructor(t,e){this.DOM={el:t},this.itemsArr=e,this.invert=this.DOM.el.classList.contains("item--invert"),this.DOM.imgWrap=this.DOM.el.querySelector(".item__imgwrap"),this.DOM.img=this.DOM.imgWrap.querySelector(".item__img"),this.DOM.enterAction=this.DOM.el.querySelector(".item__enter"),this.DOM.enterActionSVGCircle=this.DOM.enterAction.querySelector("circle"),gsap.set(this.DOM.enterActionSVGCircle,{transformOrigin:"50% 50%"}),this.magneticFx=new MagneticFx(this.DOM.enterAction),this.editHeadingLayout(),this.DOM.excerpt=this.DOM.el.querySelector(".item__excerpt"),this.DOM.excerptLink=this.DOM.excerpt.querySelector(".item__excerpt-link"),this.contentId=this.DOM.excerptLink.href.substring(this.DOM.excerptLink.href.lastIndexOf("#")),this.DOM.metaContent=[...this.DOM.el.querySelectorAll(".item__meta > .item__meta-row")],this.editContentLayout(),this.DOM.backCtrl=document.querySelector(".content__back"),this.initEvents()}editHeadingLayout(){this.DOM.heading=this.DOM.el.querySelector(".heading--item"),this.DOM.itemHeadingChars=[...this.DOM.heading.querySelectorAll(".char")],wrapElements(this.DOM.itemHeadingChars,"span","char-wrap")}editContentLayout(){this.DOM.contentEl=document.querySelector(this.contentId),this.DOM.contentElHeading=this.DOM.contentEl.querySelector(".heading"),this.DOM.contentHeadingChars=[...this.DOM.contentElHeading.querySelectorAll(".char")],wrapElements(this.DOM.contentHeadingChars,"span","char-wrap"),this.DOM.contentElText=[...this.DOM.contentEl.querySelectorAll(".content__detail > *")],this.DOM.imageMain=this.DOM.contentEl.querySelector(".project-image"),this.DOM.marquee=this.DOM.contentEl.querySelector(".design-marquee"),this.DOM.projeimage1=this.DOM.contentEl.querySelector(".product-image1"),this.DOM.projeimage2=this.DOM.contentEl.querySelector(".product-image2"),this.DOM.projeimage3=this.DOM.contentEl.querySelector(".product-image3")}initEvents(){this.DOM.enterAction.addEventListener("mouseenter",(()=>this.onMouseEnter())),this.DOM.enterAction.addEventListener("mouseleave",(()=>this.onMouseLeave())),this.DOM.enterAction.addEventListener("click",(()=>this.open())),this.DOM.excerptLink.addEventListener("mouseenter",(()=>this.onMouseEnter())),this.DOM.excerptLink.addEventListener("mouseleave",(()=>this.onMouseLeave())),this.DOM.excerptLink.addEventListener("click",(()=>this.open())),this.DOM.backCtrl.addEventListener("click",(()=>this.close()))}onMouseEnter(){this.timelineHoverOut&&this.timelineHoverOut.kill(),this.timelineHoverIn=gsap.timeline().addLabel("start",0).to(this.DOM.enterActionSVGCircle,{duration:.8,ease:"power3",scale:1.1},"start").to(this.DOM.imgWrap,{duration:.8,ease:"power3",scale:.95},"start").to(this.DOM.img,{duration:.8,ease:"power3",scale:1.1},"start").set(viewcaseChars,{opacity:0}).to(this.DOM.itemHeadingChars,{duration:.2,ease:"quad.in",x:this.invert?"103%":"-103%"},"start").set(this.DOM.heading,{x:this.invert?"20%":"-20%"},"start+=0").to(this.DOM.itemHeadingChars,{duration:.7,ease:"expo",startAt:{x:this.invert?"-103%":"103%"},x:"0%"},"start+=0.2").to(viewcaseChars,{duration:.1,ease:"expo",opacity:1,stagger:{amount:.5,grid:"auto",from:"random"}})}onMouseLeave(){this.isContentOpen||(this.timelineHoverIn&&this.timelineHoverIn.kill(),this.timelineHoverOut=gsap.timeline().addLabel("start",0).to(this.DOM.enterAction,{duration:.8,ease:"power3",x:0,y:0},"start").to(this.DOM.enterActionSVGCircle,{duration:.8,ease:"power3",scale:1},"start").to([this.DOM.imgWrap,this.DOM.img],{duration:.8,ease:"power3",scale:1},"start").to(this.DOM.itemHeadingChars,{duration:.2,ease:"quad.in",x:this.invert?"-103%":"103%"},"start").set(this.DOM.heading,{x:"0%"},"start+=0.2").to(this.DOM.itemHeadingChars,{duration:.7,ease:"expo",startAt:{x:this.invert?"103%":"-103%"},x:"0%"},"start+=0.2").set(viewcaseChars,{opacity:1}))}open(){this.magneticFx.stopRendering(),this.timelineHoverIn&&this.timelineHoverIn.kill(),this.timelineHoverClose&&this.timelineHoverClose.kill(),this.isContentOpen=!0,document.body.classList.add("oh"),this.DOM.contentEl.classList.add("content__article--open"),this.DOM.contentEl.classList.add("lenis");const t=this.DOM.enterAction.getBoundingClientRect();this.timelineHoverOpen=gsap.timeline().addLabel("start",0).set(this.DOM.contentHeadingChars,{x:this.invert?"-103%":"103%"},"start").to(".free-time",{zIndex:2}).set(this.DOM.contentElText,{opacity:0,y:"20%"},"start").set(this.DOM.imageMain,{opacity:0,y:"20%"},"start").set(this.DOM.backCtrl,{scale:.8,opacity:0},"start").to([frameEl,this.itemsArr.filter((t=>t!=this)).map((t=>t.DOM.el))],{duration:.6,ease:"power3",opacity:0},"start").to(this.DOM.enterAction,{duration:.8,ease:"power2",x:winsize.width/2-t.left-t.width/2,y:-t.top-t.height/2},"start").to(this.DOM.enterActionSVGCircle,{duration:2,ease:"power2",scale:2.3,opacity:0,onComplete:()=>gsap.set(this.DOM.enterAction,{x:0,y:0})},"start").to([this.DOM.excerpt,this.DOM.metaContent],{duration:.5,ease:"power4.in",y:t=>t?"-100%":"-8%",opacity:0,stagger:{from:"center",amount:.06}},"start").to(this.DOM.imgWrap,{duration:.5,ease:"power3.inOut",scale:.9,opacity:0},"start").to(this.DOM.itemHeadingChars,{duration:.3,ease:"quad.in",x:this.invert?"103%":"-103%"},"start").to(this.DOM.contentHeadingChars,{duration:1.3,ease:"expo",x:"0%",stagger:this.invert?-.03:.03},"start+=0.4").to(this.DOM.contentElText,{duration:1.3,ease:"expo",y:"0%",opacity:1,stagger:.03},"start+=0.7").to(this.DOM.imageMain,{duration:1.3,ease:"expo",y:"0%",opacity:1,stagger:.03},"start+=0.7").to(this.DOM.backCtrl,{duration:1.3,ease:"expo",scale:1,opacity:1},"start+=1").to(this.DOM.marquee,{duration:.5,ease:"power4.in",opacity:1,y:"0%",x:"0"},"start+1").to(this.DOM.projeimage1,{duration:.5,ease:"power4.in",opacity:1,scaleX:"100%",scaleY:"100%"},"start").to(this.DOM.projeimage2,{duration:.5,ease:"power4.in",opacity:1,scaleX:"100%",scaleY:"100%"},"start").to(this.DOM.projeimage3,{duration:.5,ease:"power3.in",opacity:1,scaleX:"100%",scaleY:"100%"},"start").to(".portfolio-map",{scale:0,duration:.6,ease:"power3"},"start")}close(){this.timelineHoverOpen&&this.timelineHoverOpen.kill(),this.isContentOpen=!1,this.timelineHoverClose=gsap.timeline().addLabel("start",0).set(this.DOM.enterAction,{x:0,y:0},"start").to(this.DOM.backCtrl,{duration:.3,ease:"quad.in",scale:.9,opacity:0},"start").set(this.DOM.enterActionSVGCircle,{scale:.5,opacity:0},"start+=0.4").to(".free-time",{zIndex:3}).to(this.DOM.enterActionSVGCircle,{duration:.6,ease:"expo",scale:1,opacity:1,onComplete:()=>{this.DOM.contentEl.classList.remove("content__article--open"),this.DOM.contentEl.classList.remove("lenis"),document.body.classList.remove("oh"),this.DOM.contentEl.scrollTop=0}},"start+=0.4").to(this.DOM.contentHeadingChars,{duration:.3,ease:"quad.in",x:this.invert?"-103%":"103%"},"start").to(this.DOM.itemHeadingChars,{duration:1.3,ease:"expo",x:"0%",stagger:this.invert?.01:-.01},"start+=0.4").to(this.DOM.contentElText,{duration:.5,ease:"power4.in",opacity:0,y:"20%"},"start").to(this.DOM.imageMain,{duration:.5,ease:"power4.in",opacity:0,y:"20%"},"start").to(this.DOM.marquee,{duration:.7,ease:"power4.in",opacity:0,y:"20%",x:"200"},"start").to(this.DOM.projeimage1,{duration:.5,ease:"power3.in",opacity:0,scaleX:"80%",scaleY:"20%"},"start").to(this.DOM.projeimage2,{duration:.5,ease:"power3.in",opacity:0,scaleX:"80%",scaleY:"20%"},"start").to(this.DOM.projeimage3,{duration:.5,ease:"power3.in",opacity:0,scaleX:"80%",scaleY:"20%"},"start").to(this.DOM.imgWrap,{duration:.8,ease:"power3",scale:1,opacity:1},"start+=0.4").to([this.DOM.excerpt,this.DOM.metaContent],{duration:1.3,ease:"expo",y:"0%",opacity:1,stagger:{from:"center",amount:.06}},"start+=0.4").to([frameEl,this.itemsArr.filter((t=>t!=this)).map((t=>t.DOM.el))],{duration:.6,ease:"power3",opacity:1},"start+=0.4").to(".portfolio-map",{scale:1,duration:.6,ease:"power3"})}} \ No newline at end of file diff --git a/public/js/works/utils.js b/public/js/works/utils.js new file mode 100644 index 00000000..f1ffd38a --- /dev/null +++ b/public/js/works/utils.js @@ -0,0 +1 @@ +const preloadImages=(e="img")=>new Promise((t=>{imagesLoaded(document.querySelectorAll(e),{background:!0},t)})),preloadFonts=e=>new Promise((t=>{WebFont.load({typekit:{id:e},active:t})})),lerp=(e,t,a)=>(1-a)*e+a*t,calcWinsize=()=>({width:window.innerWidth,height:window.innerHeight}),getMousePos=e=>({x:e.clientX,y:e.clientY}),distance=(e,t,a,n)=>{var o=e-a,i=t-n;return Math.hypot(o,i)},getRandomFloat=(e,t)=>(Math.random()*(t-e)+e).toFixed(2),wrapElements=(e,t,a)=>{e.forEach((e=>{const n=document.createElement(t);n.classList=a,e.parentNode.appendChild(n),n.appendChild(e)}))},abibae=()=>{document.querySelectorAll(".field-year-abibae").forEach((e=>{let t=document.createElement("div"),a=document.createElement("p");a.textContent="Copyright uzitrake @2024",t.appendChild(a),e.appendChild(t)}))};export{preloadImages,preloadFonts,lerp,calcWinsize,getMousePos,distance,getRandomFloat,wrapElements,abibae}; \ No newline at end of file diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 00000000..8ce83878 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,38 @@ +{ + "name": "Uzitrake", + "short_name":"Uzitrake", + "link":"/index.html", + "start_url":"/index.html", + "theme_color":"#e2ccff", + "background_color":"#fcfcfc", + "display":"fullscreen", + "orientation":"portrait", + "shortcuts":[], + "icons": [ + + { + "src": "img/masks/maskable_icon2.png", + "sizes": "196x196", + "type": "image/png", + "purpose": "maskable any" + }, + { + "src": "img/masks/maskable_icon1.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable any" + } + ] + , + "prefer_related_applications": false, + "related_applications": [ + { + "platform": "play", + "id": "index" + } +] + + + + +} \ No newline at end of file diff --git a/public/offline-uzitrake.js b/public/offline-uzitrake.js new file mode 100644 index 00000000..39f3f60a --- /dev/null +++ b/public/offline-uzitrake.js @@ -0,0 +1 @@ +const cacheName="uzitrake-offline";var cacheVersion=2;let offlineUrl="offline.html";const cacheAssets=[offlineUrl,"fonts/DiamondGrotesk.woff"];self.addEventListener("install",(e=>{e.waitUntil(caches.open(cacheName).then((e=>{e.addAll(cacheAssets)})).then((()=>self.skipWaiting())))})),self.addEventListener("activate",(e=>{e.waitUntil(caches.keys().then((e=>Promise.all(e.map((e=>{if(e!==cacheName)return caches.delete(e)}))))))})),self.addEventListener("fetch",(e=>{e.respondWith(fetch(e.request).catch((()=>caches.match(offlineUrl))))})); \ No newline at end of file diff --git a/public/offline.html b/public/offline.html new file mode 100644 index 00000000..cac144e9 --- /dev/null +++ b/public/offline.html @@ -0,0 +1 @@ +

You're offline.
Please check your internet connection and try again.

Try Again
\ No newline at end of file diff --git a/public/works/works.html b/public/works/works.html new file mode 100644 index 00000000..95b4dcc7 --- /dev/null +++ b/public/works/works.html @@ -0,0 +1 @@ +

Hypercritical mass

By Caroline Balliste April — 2023

Sometimes five Imprimaturs are seen together dialogue-wise in the piazza of one title-page, complimenting and ducking each to other with their shaven reverences, whether the author, who stands by in perplexity at the foot of his epistle, shall to the press or to the sponge.

Read more

Proselyte times

By Andrew Lewis March — 2023

Seeing, therefore, that those books, and those in great abundance, which are likeliest to taint both life and doctrine, cannot be suppressed without the fall of learning and of all ability in disputation, and that these books of either sort are most and soonest catching to the learned.

Read more

Arcadias future

By Frank W. Marigold February — 2023

Besides another inconvenience, if learned men be the first receivers out of books and dispreaders both of vice and error, how shall the licensers themselves be confided in, unless we can confer upon them, or they assume to themselves above all others in the land, the grace of infallibility and uncorruptedness?

Read more

Epistletic crave

By Andrew Lewis January — 2023

If every action, which is good or evil in man at ripe years, were to be under pittance and prescription and compulsion, what were virtue but a name, what praise could be then due to well-doing, what gramercy to be sober, just, or continent?

Read more

Temperance prime

By Sally Mullis December — 2022

And albeit whatever thing we hear or see, sitting, walking, travelling, or conversing, may be fitly called our book, and is of the same effect that writings are, yet grant the thing to be prohibited were only books, it appears that this Order hitherto is far insufficient to the end which it intends.

Read more

Quantum leap

By Lorenzo Augusto January — 2023

And how can a man teach with authority, which is the life of teaching; how can he be a doctor in his book as he ought to be, or else had better be silent, whenas all he teaches, all he delivers, is but under the tuition, under the correction of his patriarchal licenser to blot or alter what precisely accords not with the hidebound humour which he calls his judgment?

Read more

Hypercritical mass

Sometimes five Imprimaturs are seen together dialogue-wise in the piazza of one title-page, complimenting and ducking each to other with their shaven reverences, whether the author, who stands by in perplexity at the foot of his epistle, shall to the press or to the sponge.

These are the pretty responsories, these are the dear antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made; and besotted us to the gay imitation of a lordly Imprimatur, one from Lambeth House, another from the west end of Paul's; so apishly Romanizing, that the word of command still was set down in Latin; as if the learned grammatical pen that wrote it would cast no ink without Latin; or perhaps, as they thought, because no vulgar tongue was worthy to express the pure conceit of an Imprimatur, but rather, as I hope, for that our English, the language of men ever famous and foremost in the achievements of liberty, will not easily find servile letters enow to spell such a dictatory presumption English.

Some image

And thus ye have the inventors and the original of book-licensing ripped up and drawn as lineally as any pedigree. We have it not, that can be heard of, from any ancient state, or polity or church; nor by any statute left us by our ancestors elder or later; nor from the modern custom of any reformed city or church abroad, but from the most anti-christian council and the most tyrannous inquisition that ever inquired.

Till then books were ever as freely admitted into the world as any other birth; the issue of the brain was no more stifled than the issue of the womb: no envious Juno sat cross-legged over the nativity of any man's intellectual offspring; but if it proved a monster, who denies, but that it was justly burnt, or sunk into the sea?

But that a book, in worse condition than a peccant soul, should be to stand before a jury ere it be born to the world, and undergo yet in darkness the judgment of Radamanth and his colleagues, ere it can pass the ferry backward into light, was never heard before, till that mysterious iniquity, provoked and troubled at the first entrance of Reformation, sought out new limbos and new hells wherein they might include our books also within the number of their damned. And this was the rare morsel so officiously snatched up, and so ill-favouredly imitated by our inquisiturient bishops, and the attendant minorites their chaplains. That ye like not now these most certain authors of this licensing order, and that all sinister intention was far distant from your thoughts, when ye were importuned the passing it, all men who know the integrity of your actions, and how ye honour truth, will clear ye readily.

Proselyte times

Sometimes five Imprimaturs are seen together dialogue-wise in the piazza of one title-page, complimenting and ducking each to other with their shaven reverences, whether the author, who stands by in perplexity at the foot of his epistle, shall to the press or to the sponge. These are the pretty responsories, these are the dear antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made; and besotted us to the gay imitation of a lordly Imprimatur, one from Lambeth House, another from the west end of Paul's.

So apishly Romanizing, that the word of command still was set down in Latin; as if the learned grammatical pen that wrote it would cast no ink without Latin; or perhaps, as they thought, because no vulgar tongue was worthy to express the pure conceit of an Imprimatur, but rather, as I hope, for that our English, the language of men ever famous and foremost in the achievements of liberty, will not easily find servile letters enow to spell such a dictatory presumption English.

Some image

They are not skilful considerers of human things, who imagine to remove sin by removing the matter of sin; for, besides that it is a huge heap increasing under the very act of diminishing, though some part of it may for a time be withdrawn from some persons, it cannot from all, in such a universal thing as books are; and when this is done, yet the sin remains entire. Though ye take from a covetous man all his treasure, he has yet one jewel left, ye cannot bereave him of his covetousness.

Banish all objects of lust, shut up all youth into the severest discipline that can be exercised in any hermitage, ye cannot make them chaste, that came not hither so; such great care and wisdom is required to the right managing of this point. Suppose we could expel sin by this means; look how much we thus expel of sin, so much we expel of virtue: for the matter of them both is the same; remove that, and ye remove them both alike.

Arcadias future

Sometimes five Imprimaturs are seen together dialogue-wise in the piazza of one title-page, complimenting and ducking each to other with their shaven reverences, whether the author, who stands by in perplexity at the foot of his epistle, shall to the press or to the sponge. These are the pretty responsories, these are the dear antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made.

And besotted us to the gay imitation of a lordly Imprimatur, one from Lambeth House, another from the west end of Paul's; so apishly Romanizing, that the word of command still was set down in Latin; as if the learned grammatical pen that wrote it would cast no ink without Latin; or perhaps, as they thought, because no vulgar tongue was worthy to express the pure conceit of an Imprimatur, but rather, as I hope, for that our English, the language of men ever famous and foremost in the achievements of liberty, will not easily find servile letters enow to spell such a dictatory presumption English.

Some image

Nay, which is more lamentable, if the work of any deceased author, though never so famous in his lifetime and even to this day, come to their hands for licence to be printed, or reprinted, if there be found in his book one sentence of a venturous edge, uttered in the height of zeal (and who knows whether it might not be the dictate of a divine spirit?).

Yet not suiting with every low decrepit humour of their own, though it were Knox himself, the reformer of a kingdom, that spake it, they will not pardon him their dash: the sense of that great man shall to all posterity be lost, for the fearfulness or the presumptuous rashness of a perfunctory licenser. And to what an author this violence hath been lately done, and in what book of greatest consequence to be faithfully published, I could now instance, but shall forbear till a more convenient season.

Antiphonies thought

Sometimes five Imprimaturs are seen together dialogue-wise in the piazza of one title-page, complimenting and ducking each to other with their shaven reverences, whether the author, who stands by in perplexity at the foot of his epistle, shall to the press or to the sponge. These are the pretty responsories, these are the dear antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made; and besotted us to the gay imitation of a lordly Imprimatur, one from Lambeth House, another from the west end of Paul's.

So apishly Romanizing, that the word of command still was set down in Latin; as if the learned grammatical pen that wrote it would cast no ink without Latin; or perhaps, as they thought, because no vulgar tongue was worthy to express the pure conceit of an Imprimatur, but rather, as I hope, for that our English, the language of men ever famous and foremost in the achievements of liberty, will not easily find servile letters enow to spell such a dictatory presumption English.

Some image

And it is a particular disesteem of every knowing person alive, and most injurious to the written labours and monuments of the dead, so to me it seems an undervaluing and vilifying of the whole nation. I cannot set so light by all the invention, the art, the wit, the grave and solid judgment which is in England, as that it can be comprehended in any twenty capacities how good soever, much less that it should not pass except their superintendence be over it, except it be sifted and strained with their strainers, that it should be uncurrent without their manual stamp.

Truth and understanding are not such wares as to be monopolized and traded in by tickets and statutes and standards. We must not think to make a staple commodity of all the knowledge in the land, to mark and licence it like our broadcloth and our woolpacks. What is it but a servitude like that imposed by the Philistines, not to be allowed the sharpening of our own axes and coulters, but we must repair from all quarters to twenty licensing forges?

Had anyone written and divulged erroneous things and scandalous to honest life, misusing and forfeiting the esteem had of his reason among men, if after conviction this only censure were adjudged him that he should never henceforth write but what were first examined by an appointed officer, whose hand should be annexed to pass his credit for him that now he might be safely read; it could not be apprehended less than a disgraceful punishment. Whence to include the whole nation, and those that never yet thus offended, under such a diffident and suspectful prohibition, may plainly be understood what a disparagement it is. So much the more, whenas debtors and delinquents may walk abroad without a keeper, but unoffensive books must not stir forth without a visible jailer in their title.

Temperance prime

Some image

Sometimes five Imprimaturs are seen together dialogue-wise in the piazza of one title-page, complimenting and ducking each to other with their shaven reverences, whether the author, who stands by in perplexity at the foot of his epistle, shall to the press or to the sponge. These are the pretty responsories, these are the dear antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made; and besotted us to the gay imitation of a lordly Imprimatur, one from Lambeth House, another from the west end of Paul's.

So apishly Romanizing, that the word of command still was set down in Latin; as if the learned grammatical pen that wrote it would cast no ink without Latin; or perhaps, as they thought, because no vulgar tongue was worthy to express the pure conceit of an Imprimatur, but rather, as I hope, for that our English, the language of men ever famous and foremost in the achievements of liberty, will not easily find servile letters enow to spell such a dictatory presumption English.

And in conclusion it reflects to the disrepute of our ministers also, of whose labours we should hope better, and of the proficiency which their flock reaps by them, than that after all this light of the Gospel which is, and is to be, and all this continual preaching, they should still be frequented with such an unprincipled, unedified and laic rabble, as that the whiff of every new pamphlet should stagger them out of their catechism and Christian walking.

This may have much reason to discourage the ministers when such a low conceit is had of all their exhortations, and the benefiting of their hearers, as that they are not thought fit to be turned loose to three sheets of paper without a licenser; that all the sermons, all the lectures preached, printed, vented in such numbers, and such volumes, as have now well nigh made all other books unsaleable, should not be armour enough against one single Enchiridion, without the castle of St. Angelo of an Imprimatur.

Quantum leap

Sometimes five Imprimaturs are seen together dialogue-wise in the piazza of one title-page, complimenting and ducking each to other with their shaven reverences, whether the author, who stands by in perplexity at the foot of his epistle, shall to the press or to the sponge. These are the pretty responsories, these are the dear antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made; and besotted us to the gay imitation of a lordly Imprimatur, one from Lambeth House, another from the west end of Paul's.

So apishly Romanizing, that the word of command still was set down in Latin; as if the learned grammatical pen that wrote it would cast no ink without Latin; or perhaps, as they thought, because no vulgar tongue was worthy to express the pure conceit of an Imprimatur, but rather, as I hope, for that our English, the language of men ever famous and foremost in the achievements of liberty, will not easily find servile letters enow to spell such a dictatory presumption English.

Some image

Next, what more national corruption, for which England hears ill abroad, than household gluttony: who shall be the rectors of our daily rioting? And what shall be done to inhibit the multitudes that frequent those houses where drunkenness is sold and harboured? Our garments also should be referred to the licensing of some more sober workmasters to see them cut into a less wanton garb.

Who shall regulate all the mixed conversation of our youth, male and female together, as is the fashion of this country? Who shall still appoint what shall be discoursed, what presumed, and no further? Lastly, who shall forbid and separate all idle resort, all evil company? These things will be, and must be; but how they shall be least hurtful, how least enticing, herein consists the grave and governing wisdom of a state.

\ No newline at end of file