+
-
What I did:
-
+ What I did:
+
{#each data.tags as tag (tag)}
- {tag}
+
+ {tag}
+
{/each}
-
Reference:
+
Reference:
{#if data.agency}
{/if}
-
+
{#await import(`../md/${data.slug}.md`) then { default: Content }}
-
-
\ No newline at end of file
diff --git a/src/routes/work/md/adidas.md b/src/routes/work/md/adidas.md
index 5328135..b580d05 100644
--- a/src/routes/work/md/adidas.md
+++ b/src/routes/work/md/adidas.md
@@ -4,10 +4,13 @@ header_bg_image: adidas_hero_ceurd8
images: [ '/work/adidas/adidas_hero_ceurd8', '/work/adidas/adidas-mockup_ozihu3', '/work/adidas/adidas-illus-bg_t2t5ts' ]
order: 12
tags: ['graphic design', 'illustration']
-description: Design & Illustration for the international sports and lifestyle clothing brand.
+description: Design & Illustration
svg: '
'
reference: https://www.linkedin.com/in/stanislasdupart/
referenceName: Stan Dupart
+colorBg: '#000033'
+colorText: '#FFFFFF'
+colorHighlight: '#D21A00'
---
As a freelancer embedded in adidas' ecommerce and digital experiences team, I worked on digital campaigns and assets.
diff --git a/src/routes/work/md/aqr.md b/src/routes/work/md/aqr.md
new file mode 100644
index 0000000..abe4ba6
--- /dev/null
+++ b/src/routes/work/md/aqr.md
@@ -0,0 +1,28 @@
+---
+title: Association for Qualitative Research
+images: [
+ 'https://res.cloudinary.com/dkvjosg5p/image/upload/v1770633579/work/aqr/aqr_home_ecla11.png',
+ 'https://res.cloudinary.com/dkvjosg5p/image/upload/v1770640900/work/aqr/aqr_logo_spacing_qb0a4w.jpg',
+ 'https://res.cloudinary.com/dkvjosg5p/image/upload/v1770640900/work/aqr/aqr_handdrawn_varur8.jpg',
+ 'https://res.cloudinary.com/dkvjosg5p/image/upload/v1770641360/work/aqr/aqr_join_vx8nwf.png',
+ 'https://res.cloudinary.com/dkvjosg5p/image/upload/v1770633577/work/aqr/aqr_directory_vireyu.png',
+ 'https://res.cloudinary.com/dkvjosg5p/image/upload/v1770633578/work/aqr/aqr_business_vohd6a.png',
+ 'https://res.cloudinary.com/dkvjosg5p/image/upload/v1770641578/work/aqr/aqr_timeline2_q3eue7.png'
+]
+order: 12
+tags: ['Tech consultancy', 'Frontend development', 'Backend Development']
+description: Brand refresh & new website
+reference: https://www.linkedin.com/in/judy-taylor-8859822/
+referenceName: Judy Taylor
+svg: '
'
+colorBg: '#4c8618'
+colorText: 'rgb(255, 228, 207)'
+colorHighlight: 'rgb(57, 0, 17)'
+---
+Zya’s mission is simple: to make better nutrition accessible without sacrificing the taste and enjoyment of everyday food.
+
+In another collaboration with the ever-inspiring creative agency [forpeople](https://forpeople.com), we created a website with scroll-based storytelling animations that playfully brings the complex information behind the science to life.
+
+In a second phase we added more storytelling features and a blog.
+
+
Check it out live
\ No newline at end of file
diff --git a/src/routes/work/md/booking.md b/src/routes/work/md/booking.md
index 73e15d6..f3da192 100644
--- a/src/routes/work/md/booking.md
+++ b/src/routes/work/md/booking.md
@@ -1,11 +1,14 @@
---
title: Booking.com
-description: I worked at Booking.com as a UX Designer and Team lead
+description: UX Designer and Team lead
images: ['work/booking/booking_hero_jtrmdm', 'work/booking/booking_join_screen01_hrfsby', 'work/booking/booking_infograph_lbdlzk', 'work/booking/booking_enterprise_screen02_sptotl']
reference: https://www.linkedin.com/in/marco-broccoli/
referenceName: Marco Broccoli
tags: ['UX Design', 'Frontend Development', 'Team Lead']
svg: '
'
+colorBg: '#00357F'
+colorText: '#FFFFFF'
+colorHighlight: '#25A7FF'
---
Booking.com is one of the biggest accommodation reservation services in the world. Each day, over a million room nights are reserved through its websites and apps.
diff --git a/src/routes/work/md/etosis.md b/src/routes/work/md/etosis.md
index 188c681..6988895 100644
--- a/src/routes/work/md/etosis.md
+++ b/src/routes/work/md/etosis.md
@@ -1,11 +1,14 @@
---
title: etosis
images: ['work/etosis/etosis_og_ogqfae', 'https://res.cloudinary.com/dkvjosg5p/video/upload/v1696948648/work/etosis/etosis_mail_wawrua.mp4', 'work/etosis/scrnli_Oct_10_2023_3_._xkz9er', 'work/etosis/scrnli_Oct_10_2023_2_._lxh0xh' ]
-description: Simple housestyle and website for a software company specialised in complexity
+description: Housestyle and website
referenceName: Patrick Simpson
reference: https://www.linkedin.com/in/patricksimpson/
tags: ['Housestyle', 'Graphic Design', 'Web Development', 'Animation']
svg: '
'
+colorBg: '#FFFFFF'
+colorText: '#000000'
+colorHighlight: '#FD9C09'
---
Etosis is a small software consultancy and development company based in Helsinki, Finland that specialises in solving extremely complex software challenges.
@@ -23,4 +26,4 @@ So I developed simplistic vector-based animations for each product that make the
The website was built in [Eleventy](https://www.11ty.dev/), a static site generator. The animations were created as SVGs and then animated with Javascript.
-
Live Site
\ No newline at end of file
+
Live Site
\ No newline at end of file
diff --git a/src/routes/work/md/formo.md b/src/routes/work/md/formo.md
index 87d70a1..acafe7e 100644
--- a/src/routes/work/md/formo.md
+++ b/src/routes/work/md/formo.md
@@ -11,6 +11,9 @@ reference: https://www.linkedin.com/in/ozollmanthomas/
referenceName: Oscar Zollman
agency: https://forpeople.com
agencyName: forpeople
+colorBg: '#0000FE'
+colorText: '#FFF7E9'
+colorHighlight: '#FFCA11'
---
Formo is using precision fermentation instead of cows to make dairy products and save the world. Creative agency [forpeople](https://forpeople.com) is in charge of branding and brought me on board to develop a brand new website.
@@ -22,4 +25,4 @@ After consulting with the team, we decided that the comfort of the new visual ed
With custom-made, React-based content blocks and the Gutenberg editor, creating new pages and articles in the new formo identity framework is now easily achievable through a WYSIWYG interface.
-
Live site
\ No newline at end of file
+
Live site
\ No newline at end of file
diff --git a/src/routes/work/md/hatetracker.md b/src/routes/work/md/hatetracker.md
index 9d93941..aa7d048 100644
--- a/src/routes/work/md/hatetracker.md
+++ b/src/routes/work/md/hatetracker.md
@@ -1,6 +1,6 @@
---
title: Hatetracker
-description: A webapp that helped citizens report hate crimes they experienced or witnessed.
+description: Webapp to report incidents of hate crime
images: ['work/hatetracker/HateTracker_app_sx7h8g', 'work/hatetracker/HateTracker_website_xf7ebd', 'work/hatetracker/HateTracker_add_e3y528']
reference: 'https://www.linkedin.com/in/jennifereasterday/'
referenceName: 'Jennifer Easterday'
@@ -8,6 +8,9 @@ agency: '/work/jpl'
agencyName: 'JustPeace Labs'
tags: ['Branding', 'Graphic Design', 'UX Design', 'Frontend Development']
svg: '
'
+colorBg: '#FE0000'
+colorText: '#FFFFFF'
+colorHighlight: '#000000'
---
This app was envisioned by peace technology organisation [JustPeace Labs](/work/jpl). I designed and developed it in collaboration with one of the founders, a [gifted engineer](https://https://sergimansilla.com/about/).
diff --git a/src/routes/work/md/jpl.md b/src/routes/work/md/jpl.md
index 2ca87e0..58c2f6d 100644
--- a/src/routes/work/md/jpl.md
+++ b/src/routes/work/md/jpl.md
@@ -2,13 +2,16 @@
title: JustPeace Labs
header_bg_image: jpl_hero_eukxaw
images: [ '/work/jpl/jpl_hero_eukxaw.jpg', '/work/jpl/website_01_zsk9oe.png', '/work/jpl/jpllogo_v7s2pl']
-description: Housestyle, website and design for the peacebuilding tech non-profit organisation.
+description: Branding & Website
order: 11
tags: ['branding', 'logo design', 'graphic design', 'illustration']
tasks: ['Housestyle', 'Visual Design', 'Product Design', 'Frontend Development']
reference: 'https://www.linkedin.com/in/jennifereasterday/'
referenceName: 'Jennifer Easterday'
svg: '
'
+colorBg: '#013563'
+colorText: '#FFFFFF'
+colorHighlight: '#F9A870'
---
JustPeace Labs is a non-profit organization that works with local communities to build peace and prevent violence.
diff --git a/src/routes/work/md/letshost.md b/src/routes/work/md/letshost.md
index f37342f..39e868a 100644
--- a/src/routes/work/md/letshost.md
+++ b/src/routes/work/md/letshost.md
@@ -1,11 +1,14 @@
---
title: Letshost.ie
-description: Design and development for the irish hosting provider
+description: Design & development
images: ['work/letshost/letshost_hero_ibd4sx', 'work/letshost/letshost_sharedhosting_desktop_sriv5t', 'work/letshost/letshost_testimonials_desktop_ijwxmy', 'work/letshost/letshost_wordpress_desktop_qaknlm']
tags: ['Graphc Design', 'Web Design', 'Frontend Development']
reference: https://www.linkedin.com/in/daraghmacloughlin/
referenceName: Daragh Mac Loughlin
svg: '
'
+colorBg: '#011355'
+colorText: '#FFFFFF'
+colorHighlight: '#96DA1F'
---
LetsHost.ie is the leading irish webhosting provider. I worked with the marketing team to redesign their website and improve their user journeys.
diff --git a/src/routes/work/md/peak.md b/src/routes/work/md/peak.md
index b39557e..6a1aff4 100644
--- a/src/routes/work/md/peak.md
+++ b/src/routes/work/md/peak.md
@@ -1,13 +1,20 @@
---
title: peak.capital
header_bg_image: peak_hero_ewp1wb
-images: ['/work/peak/peak-mobile-mockup_wtp3ea', '/work/peak/peak_hero_ewp1wb']
+images: [
+ 'https://res.cloudinary.com/dkvjosg5p/video/upload/v1770654489/work/peak/peak_home_out_x3ljcp.mp4',
+ '/work/peak/peak-mobile-mockup_wtp3ea',
+ '/work/peak/peak_hero_ewp1wb'
+]
order: 12
description: A new website for the european investment fund
tags: ['Webdesign', 'Frontend Development']
svg: '
'
referenceName: Madeline Lawrence
reference: https://www.linkedin.com/in/madelinelawren/
+colorBg: '#000000'
+colorText: '#FFFFFF'
+colorHighlight: '#FF00FF'
---
Peak is an early-stage investment fund backed by entrepreneurs in Europe.
@@ -15,4 +22,4 @@ In 2021 the creative agency [forpeople](https://forpeople.com) helped Peak with
Over the past years I have worked with the team at peak to develop the site further.
-
Live site
\ No newline at end of file
+
Live site
\ No newline at end of file
diff --git a/src/routes/work/md/uncommon.md b/src/routes/work/md/uncommon.md
index 688c345..345093a 100644
--- a/src/routes/work/md/uncommon.md
+++ b/src/routes/work/md/uncommon.md
@@ -10,6 +10,9 @@ referenceName: Patrick Niall
agency: https://forpeople.com
agencyName: forpeople
svg: '
'
+colorBg: '#4D2C7C'
+colorText: '#F0EBE6'
+colorHighlight: '#B3B6FE'
---
Uncommon's mission is to sell rashers and rashers of cultivated pork at price parity. For happy pigs and piggy banks.
diff --git a/src/routes/work/md/zya.md b/src/routes/work/md/zya.md
new file mode 100644
index 0000000..4543c64
--- /dev/null
+++ b/src/routes/work/md/zya.md
@@ -0,0 +1,27 @@
+---
+title: zya.co
+images: [
+ 'https://res.cloudinary.com/dkvjosg5p/video/upload/v1770392733/work/zya/zya_home_2pxpms_opt_pjyitt.mp4',
+ 'https://res.cloudinary.com/dkvjosg5p/image/upload/v1770392695/work/zya/zya_approach_hzpelu.png',
+ 'https://res.cloudinary.com/dkvjosg5p/video/upload/v1770392738/work/zya/zya_convero_2pxpms_opt_qqq5jt.mp4',
+ 'https://res.cloudinary.com/dkvjosg5p/image/upload/v1770392695/work/zya/zya_mission_ygzf3t.png'
+]
+order: 12
+tags: ['Tech consultancy', 'Frontend development',]
+description: An enzyme that converts sugar into fiber
+reference: https://www.linkedin.com/in/josh-sauer-phd/
+referenceName: Joshua Sauer
+agency: https://forpeople.com
+agencyName: forpeople
+svg: '
'
+colorBg: '#083247'
+colorText: '#FFFBF3'
+colorHighlight: '#E681FF'
+---
+Zya’s mission is simple: to make better nutrition accessible without sacrificing the taste and enjoyment of everyday food.
+
+In another collaboration with the ever-inspiring creative agency [forpeople](https://forpeople.com), we created a website with scroll-based storytelling animations that playfully brings the complex information behind the science to life.
+
+In a second phase we added more storytelling features and a blog.
+
+
Check it out live
\ No newline at end of file
diff --git a/src/routes/work/work.scss b/src/routes/work/work.scss
deleted file mode 100644
index 4862fef..0000000
--- a/src/routes/work/work.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-:global(html){
- overflow: hidden;
- overscroll-behavior: none;
-}
-.works-wrapper {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- overflow: hidden;
- perspective: 700px;
- transform-origin: 0 0;
- will-change: transform;
-}
-.headline {
- position: fixed;
- pointer-events: none;
- display: flex;
- width: 100%;
- height: 100%;
- text-align: center;
- flex-direction: column;
- justify-content: center;
- align-content: center;
- letter-spacing: -0.05em;
- z-index: 10;
- transform: translateZ(500px);
- margin-left: 40.5vw;
- margin-top: 37.25vh;
- font-size: 14vw;
-
- @media screen and (min-width: 768px) {
- margin-left: 41.66vw;
- margin-top: 40.5vh;
- font-size: 7vw;
- transform: translateZ(600px);
- }
-}
-.works {
- margin: 0 auto;
- position: absolute;
- top: 0;
- left: 0;
- width: 600vw;
- height: 600vw;
- transform: scale(.333);
- transform-origin: 0 0;
- display: grid;
- grid-template-columns: repeat(6, 100vw);
- grid-auto-rows: 100vh;
- gap: 6px;
- will-change: transform;
-}
-.work {
- background-color: var(--color-highlight);
- text-decoration: none;
- text-align: center;
- width: 100vw;
- height: 100vh;
- opacity: 0;
- visibility: hidden;
- transform: translateZ(700px);
- will-change: transform;
-}
-:global(.work-logo) {
- width: 100%;
- height: 100%;
- color: var(--color-bg);
- padding: 3em;
- margin: auto;
- display: flex;
- flex-direction: column;
- justify-content: center;
- will-change: transform;
-
- @media screen and (min-width: 768px) {
- width: 60%;
- }
-}
-:global(.work-logo svg) {
- object-fit: fill;
- width: 100%;
- height: 100%;
-}
-.work-info {
- display: none;
-}
-.work-info .tags {
- display: flex;
- list-style: none;
- gap: .25em;
-}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index bbfcf9f..bf699a8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,7 @@
import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
export default defineConfig({
- plugins: [ sveltekit() ]
+ plugins: [tailwindcss(), sveltekit()]
});