Simon Flöter creates products that stand out.
-As a Creative Web Developer ...
-
-
-
+
+
+
+
-
-
I specialise in delivering beautifully crafted bespoke websites.
-Averse to blindly following the latest tech trends, I put the experience of both my client and the product's audience first.
+Simon Flöter creates products that stand out.
+As a Creative Web Developer ...
+
+
-
+
I specialise in delivering beautifully crafted bespoke websites.
+ +
-
- I consult on the best suited technology and approach for every project and execute it.
-Whether it is pure HTML/CSS/Javascript, a 'monolithic' CMS like WordPress, a modern framework like React/Svelte, or a combination.
+
+ Learn More
+ Hire Simon
-
- Learn More
- Hire Simon
-
- As a UX & Graphic Designer...
-
-
-
+
-
-
-
+
+
+
+
\ No newline at end of file
diff --git a/src/routes/api/image-placeholders.ts b/src/routes/api/image-placeholders.ts
new file mode 100644
index 0000000..ffbd439
--- /dev/null
+++ b/src/routes/api/image-placeholders.ts
@@ -0,0 +1,33 @@
+import { dominantColourPlaceholder, IMAGE_DIR, lowResolutionPlaceholder } from '$lib/utils/image'
+import path from 'path';
+
+const __dirname = path.resolve();
+
+export async function POST({request}: {request: Request}) {
+ try {
+ const { images } = await request.json();
+
+ const dominantColourPromises = images.map((element: string)=>{
+ const source = path.join(__dirname, IMAGE_DIR, element);
+ return dominantColourPlaceholder({ source });
+ });
+
+ const placeholderPromises = images.map((element: string) => {
+ const source = path.join(__dirname, IMAGE_DIR, element);
+ return lowResolutionPlaceholder({ source });
+ });
+
+ const dominantColours =await Promise.all(dominantColourPromises);
+ const placeholders = await Promise.all(placeholderPromises);
+ return {
+ body:JSON.stringify({ placeholders, dominantColours }),
+ };
+ } catch (err) {
+ console.log('Error: ', err);
+
+ return {
+ status: 500,
+ error: 'Error retrieving data',
+ };
+ }
+};
\ No newline at end of file
diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
new file mode 100644
index 0000000..f6ffdb5
--- /dev/null
+++ b/src/routes/test/+page.svelte
@@ -0,0 +1,15 @@
+
+ 
diff --git a/src/routes/work/+page.server.ts b/src/routes/work/+page.server.ts
index 96b92e4..66e0484 100644
--- a/src/routes/work/+page.server.ts
+++ b/src/routes/work/+page.server.ts
@@ -8,4 +8,4 @@ export async function load() {
return {
posts
}
-}
\ No newline at end of file
+}
diff --git a/src/routes/work/+page.svelte b/src/routes/work/+page.svelte
index 0c82f75..0279c88 100644
--- a/src/routes/work/+page.svelte
+++ b/src/routes/work/+page.svelte
@@ -3,6 +3,7 @@
import { onMount } from 'svelte';
import { workClickHandler, initWorkPage } from './workUtils.js';
import { workbulge } from '$lib/utils/stores.js';
+ import { fade } from 'svelte/transition';
export let data;
let canvasTextElems: Array;
@@ -23,32 +24,50 @@
import { onMount, onDestroy } from 'svelte';
import { gsap } from 'gsap';
- import { fly } from 'svelte/transition';
+ import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
export let data;
+ gsap.registerPlugin(ScrollTrigger);
+
let visible = false;
function animForDesktop() {
+ ScrollTrigger.getAll().forEach(t => t.kill());
gsap.to('.hero', { duration: .6, x: "-10%", ease: "cubic.inOut" })
+ gsap.from('.work', {
+ xPercent: 100,
+ duration: .66,
+ ease: "cubic.out",
+ })
+
+ let heroheight = document.querySelector('.heromask')?.getBoundingClientRect().height || 100;
gsap.fromTo('.heromask', {
clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
},{
clipPath: "polygon(0 0, 50% 0, 25% 100%, 0% 100%)",
duration: .6,
- ease: "cubic.inOut"
+ ease: "cubic.inOut",
+
+ onComplete: () => {
+ gsap.fromTo('.heromask', {
+ clipPath: "polygon(0 0, 50% 0, 25% 100%, 0% 100%)",
+ },{
+ clipPath: "polygon(0 0, 30% 0, 25% 100%, 0% 100%)",
+ duration: .6,
+ ease: "none",
+ scrollTrigger: {
+ trigger: '.work',
+ start: '0px 0px',
+ end: `0px -${heroheight * 0.3}px`,
+ scrub: true,
+ }
+ })
+ }
})
+
}
function animForMobile() {
+ ScrollTrigger.getAll().forEach(t => t.kill());
gsap.to('.hero', { duration: .6, x: 0, ease: "cubic.inOut" })
+ gsap.from('.work', {
+ opacity: 0,
+ y: 100,
+ duration: .66,
+ ease: "cubic.inOut",
+ })
+
gsap.to('.heromask', {
- clipPath: "polygon(0 0, 100% 0, 100% 90%, 0% 100%)",
+ clipPath: "polygon(0 0, 100% 0, 100% 75%, 0% 100%)",
duration: .6,
- ease: "cubic.inOut"
+ ease: "cubic.inOut",
+
+ onComplete: () => {
+ gsap.to('.heromask', {
+ ease: "power1.out",
+ scrollTrigger: {
+ trigger: '.work',
+ start: '0px -10px',
+ end: `0px -20px`,
+ scrub: false,
+ onEnterBack: () => {
+ gsap.to('.heromask', {
+ clipPath: "polygon(0 0, 100% 0, 100% 75%, 0% 100%)",
+ duration: .6,
+ ease: "expo.out",
+ })
+ },
+ onEnter: () => {
+ gsap.to('.heromask', {
+ clipPath: "polygon(0 0, 100% 0, 100% 0%, 0% 0%)",
+ duration: .6,
+ ease: "expo.out",
+ })
+ }
+ }
+ })
+ }
})
}
function animForSize(){
@@ -33,30 +94,40 @@
}
onMount(() => {
- let workheros = document.querySelector('.hero');
- console.log(workheros);
+
visible = true;
animForSize();
- window.addEventListener('resize', () => {
+
+ let portrait = window.matchMedia("(orientation: portrait)");
+
+ portrait.addEventListener("change", function(e) {
animForSize();
})
+ document.body.classList.add('work');
+ })
+ onDestroy(() => {
+ document.body.classList.remove('work');
})
+
{#if visible}
-
I worked for a wide range of clients, including Booking.com and Adidas, but also with startups and independent brands.
+ +As a UX & Graphic Designer...
+
+
+
-
+
I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.
+
-
- I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.
+
+ Learn More
+ Hire Simon
-
- Learn More
- Hire Simon
-
- I create products that help great companies reach their audiences. Need help?
-
- Reach out!
-
- I create products that help great companies reach their audiences. Need help?
+
+ Reach out!
+
+ hakc
+Casestudies
-
- {#each data.posts as work}
- workClickHandler(e) }>
- 
-
-
-
-
+ {work.meta.title}
- - {/each} - {#each data.posts as work} - workClickHandler(e) }> -{work.meta.title}
- - {/each} - {#each data.posts as work} - workClickHandler(e) }> -{work.meta.title}
- - {/each} - {#each data.posts as work} - workClickHandler(e) }> -{work.meta.title}
- - {/each} -
+ {#each data.posts as work}
+ workClickHandler(e) }>
+ 
+
+
+
{work.meta.title}
+ + {/each} + {#each data.posts as work} + workClickHandler(e) }> +{work.meta.title}
+ + {/each} + {#each data.posts as work} + workClickHandler(e) }> +{work.meta.title}
+ + {/each} +
- 
-
+ 
-
-
{@html data.svg}
+
+ ) {
+
+ workbulge.set(0.25);
+
+ gsap.registerPlugin( SplitText );
+
+ const h1Text = h1?.innerHTML || '';
+ h1.innerHTML = h1Text + h1Text + h1Text + h1Text || '';
+ 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' })
+ gsap.to(span, { xPercent: -100, duration: 4, ease: 'none', repeat: -1 })
+ });
+
+ gsap.set(canvasImgElems, {
+ opacity: 0, yPercent: 100
+ })
+
+ gsap.to(canvasImgElems, {
+ duration: 1,
+ opacity: 1,
+ yPercent: 0,
+ stagger: 0.05,
+ ease: 'elastic.out(0.75, 0.5)',
+ delay: 0.3
+ })
+
+ return {
+ text: spans,
+ images: canvasImgElems
+ }
+}
+
export function workClickHandler(e:Event){
e.preventDefault();
const target = e.target as HTMLElement;
@@ -20,8 +56,11 @@ export function workClickHandler(e:Event){
targetImg.style.height = `${targetImgRect.height}px`;
targetImg.style.top = `${targetImgRect.top}px`;
targetImg.style.left = `${targetImgRect.left}px`;
+ const clone = targetImg.cloneNode(true) as HTMLElement;
+ targetImg.parentElement?.insertBefore(clone, targetImg);
targetImg.style.position = 'fixed';
+
gsap.to('.work:not(.active) .workhero', {
duration: .3,
opacity: 0,
@@ -48,59 +87,14 @@ export function workClickHandler(e:Event){
workbulge.set(bulge.factor);
}
})
- gsap.to('h1', {
+ gsap.to('h1 span', {
duration: .3,
- yPercent: -200,
+ yPercent: -100,
+ opacity: 0,
ease: 'circ.inOut',
})
setTimeout(() => {
goto(originalLink);
}, 600);
-}
-
-export function initWorkPage( h1: HTMLElement, canvasImgElems: Array) {
-
- workbulge.set(0.25);
-
- gsap.registerPlugin( SplitText );
-
- console.log('initWorkPage:', h1);
- const h1Text = h1?.innerHTML || '';
- h1.innerHTML = h1Text + h1Text + h1Text + h1Text || '';
- h1.style.overflow = 'hidden';
- h1.style.whiteSpace = 'nowrap';
-
- h1.querySelectorAll('span').forEach((span) => {
- gsap.to(span, {xPercent: -100, duration: 4, ease: 'none', repeat: -1 })
- });
-
- const split = new SplitText(h1, { type: 'words', wordsClass: 'words' });
-
- gsap.set(split.words, {
- opacity: 0, yPercent: -10
- })
- gsap.to(split.words, {
- duration: 1,
- opacity: 1,
- yPercent: 0,
- stagger: 0.1,
- ease: 'power4.out',
- })
-
- gsap.set(canvasImgElems, {
- opacity: 1, yPercent: 100
- })
- gsap.to(canvasImgElems, {
- duration: 1,
- opacity: 1,
- yPercent: 0,
- stagger: 0.05,
- ease: 'power4.out',
- })
-
- return {
- text: Array.from(split.words),
- images: canvasImgElems
- }
}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index c126657..89989a4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,8 @@
import { sveltekit } from '@sveltejs/kit/vite';
+import{ imagetools }from'vite-imagetools';
import { defineConfig } from 'vite';
export default defineConfig({
- plugins: [sveltekit()]
+ plugins: [imagetools(),sveltekit()]
});
{@html data.svg}{data.title}
{@html data.Content.html}
@@ -65,18 +136,10 @@
\ No newline at end of file
diff --git a/src/routes/work/md/jpl.md b/src/routes/work/md/jpl.md
index b035936..1bc50e3 100644
--- a/src/routes/work/md/jpl.md
+++ b/src/routes/work/md/jpl.md
@@ -3,19 +3,13 @@ title: JustPeace Labs
header_bg_image: /work/jpl/jpl_hero.jpg
description: JustPeace Labs is a non-profit organization that works with local communities to build peace and prevent violence.
order: 11
-svg: ''
+svg: ''
---
-
-
-Client: Adidas E-commerce dept
- Tasks: --
-
- Visual Design -
- Campaign asset production -
- Illustration -
-
+
+## JPL's Mission
+The startup has declared their mission "to empower local communities to be active participants in creating lasting just peace through the use of technology". I created a logo and housestyle for them that conveyes their goals and products.
+
+## The "broken peace" logo
+Since 1958, the Symbol for the British nuclear disarmament movement by Gerald Holtom is used as an international symbol for peace.
+
+Clients of JustPeace Labs are peace builders. The logo is a 'broken' peace sign with only the frame intact. It stands for the technological and ethical frameworks that JPL aims to provide that can be used to achieve long lasting, just peace.
\ No newline at end of file
diff --git a/src/routes/work/work.scss b/src/routes/work/work.scss
index f0fb534..bfa581b 100644
--- a/src/routes/work/work.scss
+++ b/src/routes/work/work.scss
@@ -1,13 +1,14 @@
h1 {
- font-size: 12vw;
+ font-size: 16vw;
font-style: italic;
- margin: 0.5em 0 0.5em 0;
+ margin: 0 0 0.5em 0;
letter-spacing: -0.04em;
text-align: center;
position: fixed;
top: 0;
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;
@@ -21,9 +22,7 @@ h1 {
h2 {
line-height: 1.1;
letter-spacing: -0.025em;
- // font-weight: 400;
font-size: 2.5vw;
- // visibility: hidden;
opacity: 0;
position: absolute;
left: .5em;
@@ -31,7 +30,6 @@ h2 {
transform: scale(0.8) translateY(100%);
margin: 0;
padding: 0.1em 0.4em 0.2em 0.4em;
- // border-radius: .25em;
text-align: center;
transform-origin: center center;
width: auto;
@@ -48,17 +46,19 @@ h2 {
.works {
padding: 15vw 0.5em 0.5em 0.5em;
display: flex;
- gap: 0.5em;
+ gap: 0.25em;
flex-wrap: wrap;
@media screen and (min-width: 768px) {
gap: 0.25em;
padding: 8.5vw 0.5em 0.5em 0.5em;
width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
padding-bottom: 20svh;
}
}
.work {
- flex: 0 0 100%;
+ flex: 0 0 calc(50% - 0.125em );
display: block;
position: relative;
padding: 0;
@@ -68,11 +68,11 @@ h2 {
@media screen and (min-width: 768px) {
flex: 0 0 calc(33% - .125em);
-
}
}
.workhero {
width: 100%;
+ height: auto;
aspect-ratio: var(--aspect-ratio-heroes);
object-fit: fill;
visibility: hidden;
diff --git a/src/routes/work/workUtils.ts b/src/routes/work/workUtils.ts
index 9b33f9b..9727db3 100644
--- a/src/routes/work/workUtils.ts
+++ b/src/routes/work/workUtils.ts
@@ -8,6 +8,42 @@ workbulge.subscribe(value => {
bulge.factor = value;
})
+export function initWorkPage( h1: HTMLElement, canvasImgElems: ArrayAdidas, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator.
-