add work
This commit is contained in:
saiminh
parent
19ff3bbc1d
commit
c559947292
14 changed files with 113 additions and 96 deletions
|
|
@ -30,7 +30,7 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
border-top: 1px solid var(--color-text);
|
||||
// border-top: 1px solid var(--color-text);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
68
src/lib/components/Loader.svelte
Normal file
68
src/lib/components/Loader.svelte
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<div class="loader">
|
||||
<div class="lds-circle"><div></div></div>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.loader {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
animation: fade-in .5s cubic-bezier(0.165, 0.84, 0.44, 1) .3s forwards;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px var(--spacing-outer);
|
||||
z-index: 1000;
|
||||
background-color: var(--color-bg);
|
||||
|
||||
& p {
|
||||
font-size: .75em;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.lds-circle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transform: translateZ(1px);
|
||||
}
|
||||
.lds-circle > div {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text);
|
||||
animation: lds-circle 6s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
||||
}
|
||||
@keyframes lds-circle {
|
||||
0%, 100% {
|
||||
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
|
||||
}
|
||||
0% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotateY(1800deg);
|
||||
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(3600deg);
|
||||
}
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -79,7 +79,6 @@
|
|||
}
|
||||
.close {
|
||||
top: 0.033em;
|
||||
color: #FFF;
|
||||
}
|
||||
#menustate, #nav, .close {
|
||||
/* Hide the checkbox, menu and close button by default */
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@ onMount(()=>{
|
|||
antialias: true,
|
||||
autoDensity: true,
|
||||
resolution: 2,
|
||||
backgroundAlpha: 0,
|
||||
backgroundAlpha: 1,
|
||||
backgroundColor: 0x223ad4,
|
||||
view: canvas,
|
||||
});
|
||||
|
||||
|
|
@ -112,7 +113,6 @@ onMount(()=>{
|
|||
imgsToCanvas.forEach((element) => {
|
||||
imgElems.push(element);
|
||||
let canvasImg = createCanvasImg(element as HTMLImageElement, app.stage);
|
||||
// canvasImg.tint = 0xff9494;
|
||||
canvasImgs.push(canvasImg);
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,10 @@
|
|||
--spacing-nav: 5vw;
|
||||
// --color-bg: #FFF;
|
||||
// --color-text: #000;
|
||||
--color-bg: #00117f;
|
||||
--color-text: #FF9494;
|
||||
// --color-bg: #00117f;
|
||||
--color-bg: #223ad4;
|
||||
// --color-text: #FF9494;
|
||||
--color-text: #FFF;
|
||||
--aspect-ratio-heroes: 1.5;
|
||||
--font-size-p: clamp(20px, 1.6vw, 1.6vw);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang='ts'>
|
||||
import '$lib/styles/global.scss';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
import Loader from '$lib/components/Loader.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { navigating } from '$app/stores';
|
||||
export let data;
|
||||
|
|
@ -13,24 +14,8 @@
|
|||
class="content"
|
||||
>
|
||||
{#if $navigating}
|
||||
<div class="loader">Loading {JSON.stringify($navigating.to?.route.id)}</div>
|
||||
<Loader />
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
{/key}
|
||||
|
||||
<style lang="scss">
|
||||
.loader {
|
||||
position: fixed;
|
||||
top: calc(50% - 0.5em);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1em;
|
||||
background: var(--color-bg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
{/key}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang='ts'>
|
||||
import HomeCanvas from '$lib/components/HomeCanvas.svelte';
|
||||
import Loader from '$lib/components/Loader.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { gsap } from 'gsap';
|
||||
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
|
||||
|
|
@ -60,10 +61,7 @@
|
|||
|
||||
</script>
|
||||
{#if !mounted}
|
||||
<div class="loader">
|
||||
<div class="lds-circle"><div></div></div>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
<Loader />
|
||||
{/if}
|
||||
<article class="scroller">
|
||||
<section class="splash">
|
||||
|
|
@ -71,16 +69,7 @@
|
|||
</section>
|
||||
<section class="intro">
|
||||
<h2>As a Creative Web Developer ...</h2>
|
||||
<div class="cols-2">
|
||||
<div>
|
||||
<p>I specialise in delivering beautifully crafted bespoke websites.</p>
|
||||
<!-- <p>Averse to blindly following the latest tech trends, I put the experience of both my client and the product's audience first.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>I consult on the best suited technology and approach for every project and execute it.</p>
|
||||
<p>Whether it is pure HTML/CSS/Javascript, a 'monolithic' CMS like WordPress, a modern framework like React/Svelte, or a combination.</p> -->
|
||||
</div>
|
||||
</div>
|
||||
<p>I specialise in delivering beautifully crafted bespoke websites.</p>
|
||||
<div class="cta">
|
||||
<a href="/work" class="button">Learn More</a>
|
||||
<a href="/work" class="button button--primary">Hire Simon</a>
|
||||
|
|
@ -88,14 +77,7 @@
|
|||
</section>
|
||||
<section class="more">
|
||||
<h2>As a UX & Graphic Designer...</h2>
|
||||
<div class="cols-2">
|
||||
<!-- <div>
|
||||
<p>I worked for a wide range of clients, including Booking.com and Adidas, but also with startups and independent brands.</p>
|
||||
</div> -->
|
||||
<div>
|
||||
<p>I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.</p>
|
||||
<div class="cta">
|
||||
<a href="/work" class="button">Learn More</a>
|
||||
<a href="/work" class="button button--primary">Hire Simon</a>
|
||||
|
|
@ -110,45 +92,6 @@
|
|||
</article>
|
||||
<HomeCanvas textsToCanvas={canvasElems}/>
|
||||
<style lang="scss">
|
||||
.loader {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
|
||||
& p {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
.lds-circle {
|
||||
display: inline-block;
|
||||
transform: translateZ(1px);
|
||||
}
|
||||
.lds-circle > div {
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text);
|
||||
animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
||||
}
|
||||
@keyframes lds-circle {
|
||||
0%, 100% {
|
||||
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
|
||||
}
|
||||
0% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotateY(1800deg);
|
||||
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(3600deg);
|
||||
}
|
||||
}
|
||||
.scroller {
|
||||
font-size: clamp(32px, 4.5vw, 4.5vw);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<h1 class="headline"><span>Casestudies</span></h1>
|
||||
<h1 class="headline"><span>Happy Clients</span></h1>
|
||||
<div class="works">
|
||||
|
||||
{#each data.posts as work, i}
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
|
||||
gsap.to('.work', {
|
||||
xPercent: -100,
|
||||
duration: .66,
|
||||
ease: "cubic.out",
|
||||
duration: .4,
|
||||
ease: "expo.out",
|
||||
delay: .2
|
||||
})
|
||||
|
||||
|
|
@ -64,7 +64,9 @@
|
|||
duration: .6,
|
||||
ease: "cubic.inOut",
|
||||
onStart: () => {
|
||||
document.querySelector('.coverclone')?.remove();
|
||||
setTimeout(() => {
|
||||
document.querySelector('.coverclone')?.remove();
|
||||
}, 100);
|
||||
},
|
||||
onComplete: () => {
|
||||
gsap.to('.heromask', {
|
||||
|
|
|
|||
8
src/routes/work/md/peak.md
Normal file
8
src/routes/work/md/peak.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: peak.capital
|
||||
header_bg_image: peak_hero_ewp1wb
|
||||
order: 12
|
||||
description: Peak Capital description
|
||||
svg: '<svg class="peak-logo-svg" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 102 102"><style>.peak-logo-svg-circle{fill: currentColor}.peak-logo-svg-letters{fill:var(--color-bg)}</style><circle class="peak-logo-svg-circle" cx="50" cy="50" r="50"></circle><polygon class="peak-logo-svg-letters" points="70.45 39.19 70.45 61.48 75.19 61.48 75.19 53.82 78.47 50.48 84.61 61.48 90.66 61.48 82.14 46.79 89.65 39.19 83.69 39.19 75.19 47.68 75.19 39.19 70.45 39.19"></polygon><polygon class="peak-logo-svg-letters" points="43.83 43.41 43.83 39.22 28.98 39.22 28.98 61.48 43.83 61.48 43.83 57.29 33.71 57.29 33.71 52.23 43.2 52.23 43.2 48.03 33.71 48.03 33.71 43.41 43.83 43.41"></polygon><path class="peak-logo-svg-letters" d="M45.77,61.48h5.12L51.48,60a3,3,0,0,1,.16-.36,6,6,0,0,1,11-.21,2.92,2.92,0,0,1,.14.31l.7,1.78h5.15l-8.9-22.26h-5Zm13.95-9.63a10.56,10.56,0,0,0-2.53-.31,9.85,9.85,0,0,0-2.55.33l2.56-6.52Z"></path><path class="peak-logo-svg-letters" d="M9.34,39.22V61.48h4.73V53.57h3.4c5.56,0,9-2.71,9-7.18s-3.46-7.17-9-7.17Zm12.29,7.17c0,1.91-1.48,3-4.16,3h-3.4v-6h3.4C20.15,43.41,21.63,44.49,21.63,46.39Z"></path></svg>'
|
||||
---
|
||||
Peak is an early-stage investment fund backed by entrepreneurs in Europe.
|
||||
9
src/routes/work/md/uncommon.md
Normal file
9
src/routes/work/md/uncommon.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Uncommonbio.co
|
||||
header_bg_image: uncommon_hero_jf1in9
|
||||
order: 12
|
||||
description: Peak Capital description
|
||||
svg: '<svg id="uncommonLogo" x="0" y="0" viewBox="0 0 932 110.7" style="enable-background:new 0 0 932 110.7; fill: currentColor;"><path id="n7" class="uncommonLogo-letter" d="M828.9 3.5h30.5v9.6C865.6 4.9 878.2 0 889.3 0c10.2 0 21.6 3.1 28.1 9.1 8.4 7.5 14.7 19.9 14.7 32v66.4h-30.3V48.8c0-5-1.8-12.9-4.6-15.7-2.7-2.8-6.7-6.8-16.2-6.8s-14.8 4.9-17.5 8.9c-2.3 3.3-4.1 7.4-4.1 13.6v58.8h-30.5V3.5z"></path><path id="o6" class="uncommonLogo-letter" d="M801.2 17.2c-10.8-10.7-24.1-16-39.6-16s-28.7 5.3-39.5 16C711.4 27.7 706 40.6 706 56c0 15.3 5.4 28.3 16.1 39 10.7 10.5 23.9 15.8 39.5 15.8s28.8-5.3 39.6-16C812 84.3 817.5 71.3 817.5 56c0-15.4-5.4-28.3-16.3-38.8zm-21.7 57.1c-4.9 5-10.8 7.5-17.9 7.5s-13-2.5-17.7-7.5c-4.9-5-7.3-11.1-7.3-18.4 0-7.2 2.4-13.4 7.1-18.4 4.9-5 10.8-7.5 17.9-7.5s13 2.5 17.9 7.5c4.9 5 7.3 11.1 7.3 18.4 0 7.3-2.5 13.4-7.3 18.4z"></path><path id="mm5" class="uncommonLogo-letter" d="M446.9 3.5h30.5v9.6C483.6 4.9 496.2 0 507.3 0c10.2 0 21.6 3.1 28.1 9.1 3.3 2.9 6.3 6.7 8.7 10.8 3.7-4.2 6.3-6.8 6.3-6.8C557.1 6.2 569.1 0 580.2 0c10.2 0 21.6 3.1 28.1 9.1 3.3 3 6.3 6.7 8.7 10.9 3.7-4.2 6.4-6.9 6.4-6.9C630.1 6.2 642.1 0 653.2 0c10.2 0 21.6 3.1 28.1 9.1 8.4 7.5 14.7 19.9 14.7 32v66.4h-30.3V48.7c0-5-1.8-12.9-4.6-15.7-2.7-2.8-6.7-6.8-16.2-6.8s-14.8 4.9-17.5 8.9c-2.3 3.3-4.1 7.4-4.1 13.6v58.8h-30.7V48.7c0-5-1.8-12.9-4.6-15.7-2.7-2.8-6.7-6.8-16.2-6.8s-14.8 4.9-17.5 8.9c-2.3 3.3-4.1 7.4-4.1 13.6v58.8h-30.6V48.7c0-5-1.8-12.9-4.6-15.7-2.7-2.8-6.7-6.8-16.2-6.8s-14.8 4.9-17.5 8.9c-2.3 3.3-4.1 7.4-4.1 13.6v58.8h-30.5V3.5z"></path><path id="o4" class="uncommonLogo-letter" d="M420 17.2c-10.8-10.7-24.1-16-39.6-16s-28.7 5.3-39.5 16c-10.7 10.5-16.1 23.5-16.1 38.8 0 15.3 5.4 28.3 16.1 39 10.7 10.5 23.9 15.8 39.5 15.8s28.8-5.3 39.6-16c10.8-10.5 16.3-23.5 16.3-38.8 0-15.4-5.4-28.3-16.3-38.8zm-21.7 57.1c-4.9 5-10.8 7.5-17.9 7.5s-13-2.5-17.7-7.5c-4.9-5-7.3-11.1-7.3-18.4 0-7.2 2.4-13.4 7.1-18.4 4.9-5 10.8-7.5 17.9-7.5s13 2.5 17.9 7.5c4.9 5 7.3 11.1 7.3 18.4 0 7.3-2.4 13.4-7.3 18.4z"></path><path id="c3" class="uncommonLogo-letter" d="M247.1 16.8c10.4-10.4 23.4-15.6 39.1-15.6 13.6 0 25.5 4.5 35.6 13.4l-11.3 26.5c-6.8-7.3-14.6-11-23.2-11-7.2 0-13.2 2.5-18.1 7.5-4.9 4.9-7.3 11.2-7.3 18.9 0 7.6 2.4 13.7 7.1 18.4 4.9 4.7 10.8 7 17.9 7 8.9 0 16.7-3.7 23.6-11l11.3 26.5c-10.1 8.9-22 13.4-35.6 13.4-15.7 0-28.8-5.2-39.3-15.6-10.4-10.4-15.5-23.5-15.5-39.1s5.2-28.9 15.7-39.3z"></path><path id="n2" class="uncommonLogo-letter" d="M117.8 3.5h30.5v9.6C154.5 4.9 167.1 0 178.2 0c10.2 0 21.6 3.1 28.1 9.1 8.4 7.5 14.7 19.9 14.7 32v66.4h-30.3V48.7c0-5-1.8-12.9-4.6-15.7-2.7-2.8-6.7-6.8-16.2-6.8s-14.8 4.9-17.5 8.9c-2.3 3.3-4.1 7.4-4.1 13.6v58.8h-30.5V3.5z"></path><path id="u1" class="uncommonLogo-letter" d="M103.1 107.2H72.6v-9.6c-6.2 8.2-18.8 13.1-29.9 13.1-10.2 0-21.6-3.1-28.1-9.1C6.3 94.1 0 81.7 0 69.6V3.2h30.3V62c0 5 1.8 12.9 4.6 15.7 2.7 2.8 6.7 6.8 16.2 6.8s14.8-4.9 17.5-8.9c2.3-3.3 4.1-7.4 4.1-13.6V3.2h30.5v104z"></path></svg>'
|
||||
---
|
||||
Uncommon's mission is to sell rashers and rashers of cultivated pork at price parity.
|
||||
For happy pigs and piggy banks.
|
||||
|
|
@ -5,13 +5,14 @@ h1 {
|
|||
letter-spacing: -0.04em;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
top: calc(50svh - 16vw);
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
font-size: 7vw;
|
||||
top: calc(50svh - 3.5vw);
|
||||
}
|
||||
|
||||
& span {
|
||||
|
|
@ -44,7 +45,7 @@ h2 {
|
|||
}
|
||||
}
|
||||
.works {
|
||||
padding: 15vw 0.5em 0.5em 0.5em;
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -19,19 +19,19 @@ export function initWorkPage( h1: HTMLElement, canvasImgElems: Array<HTMLElement
|
|||
h1.style.overflow = 'hidden';
|
||||
h1.style.whiteSpace = 'nowrap';
|
||||
const spans = Array.from(h1.querySelectorAll('span'));
|
||||
spans.forEach((span) => {
|
||||
gsap.set(span, { opacity: 0, y: window.innerHeight })
|
||||
gsap.to(span, { opacity: 1, y: 0, duration: 1, ease: 'power3.out' })
|
||||
spans.forEach((span, index) => {
|
||||
gsap.set(span, { opacity: 1, y: -window.innerHeight/1.5 })
|
||||
gsap.to(span, { opacity: 1, y: 0, duration: 1, ease: 'power3.out', delay: index * 0.025 })
|
||||
gsap.to(span, { xPercent: -100, duration: 4, ease: 'none', repeat: -1 })
|
||||
});
|
||||
|
||||
gsap.set(canvasImgElems, {
|
||||
opacity: 0, yPercent: 100
|
||||
opacity: 0, yPercent: 50
|
||||
})
|
||||
|
||||
gsap.to(canvasImgElems, {
|
||||
duration: 1,
|
||||
opacity: 1,
|
||||
opacity: .8,
|
||||
yPercent: 0,
|
||||
stagger: 0.05,
|
||||
ease: 'elastic.out(0.75, 0.5)',
|
||||
|
|
|
|||
BIN
static/work/peak/peak_hero.png
Normal file
BIN
static/work/peak/peak_hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Loading…
Add table
Reference in a new issue