design changes
This commit is contained in:
saiminh
parent
94a87add3f
commit
3047202db6
15 changed files with 143 additions and 55 deletions
|
|
@ -87,7 +87,7 @@ onMount(()=>{
|
|||
strength: -0.25,
|
||||
duration: .5,
|
||||
ease: 'power4.inOut',
|
||||
}, 1.5)
|
||||
}, 2)
|
||||
introTl.to(bulgefilter, {
|
||||
strength: 0.5,
|
||||
duration: 1.25,
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
:root {
|
||||
--spacing-outer: 5vw;
|
||||
--spacing-nav: 5vw;
|
||||
--color-bg: rgb(0, 0, 90);
|
||||
--color-text: rgb(255, 240, 240);
|
||||
--color-highlight: rgb(250, 125, 0);
|
||||
--color-bg: var(--color-bg-variant-1);
|
||||
--color-text: var(--color-text-variant-1);
|
||||
--color-highlight: var(--color-highlight-variant-1);
|
||||
|
||||
--color-bg-variant-1: rgb(207, 63, 70);
|
||||
--color-text-variant-1: rgb(255, 234, 217);
|
||||
|
|
@ -47,6 +47,65 @@
|
|||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Lack';
|
||||
src: url('/fonts/Lack-Regular.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Syne';
|
||||
src: url('/fonts/Syne-Regular.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Syne';
|
||||
src: url('/fonts/Syne-Bold.woff2') format('woff2');
|
||||
font-weight: bold;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Syne';
|
||||
src: url('/fonts/SyneTactile-Regular.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Cantique';
|
||||
src: url('/fonts/Cantique-Normal.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Feroniapi';
|
||||
src: url('/fonts/Feroniapi-MediumItalic.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Lineal';
|
||||
src: url('/fonts/LinealVF.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'LeMurmure';
|
||||
src: url('/fonts/LeMurmure-Regular.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'PPFormula';
|
||||
src: url('/fonts/PPFormula-Medium.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'PPFormula';
|
||||
src: url('/fonts/PPFormula-ExtraBold.woff2') format('woff2');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
a:hover, input:hover, button:hover {
|
||||
cursor: url('/pointer.svg'), auto;
|
||||
|
|
@ -54,7 +113,7 @@ a:hover, input:hover, button:hover {
|
|||
|
||||
body {
|
||||
cursor: url('/cursor.svg'), auto;
|
||||
font-family: stratos, sans-serif;
|
||||
font-family: Stratos, sans-serif;
|
||||
font-size: var(--font-size-p);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -73,8 +132,10 @@ body * {
|
|||
:where(h1, h2, h3, h4, h5) {
|
||||
font-size: 2em;
|
||||
line-height: 1.1;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.025em;
|
||||
font-family: Stratos, sans-serif;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -54,14 +54,15 @@
|
|||
}
|
||||
|
||||
function setTheme() {
|
||||
if (page.data.theme) {
|
||||
if (page.data.theme && page.data.theme.bg && page.data.theme.text && page.data.theme.highlight) {
|
||||
document.documentElement.style.setProperty('--color-bg', page.data.theme.bg);
|
||||
document.documentElement.style.setProperty('--color-text', page.data.theme.text);
|
||||
document.documentElement.style.setProperty('--color-highlight', page.data.theme.highlight);
|
||||
} else {
|
||||
document.documentElement.style.setProperty('--color-bg', 'var(--color-bg)');
|
||||
document.documentElement.style.setProperty('--color-text', 'var(--color-text)');
|
||||
document.documentElement.style.setProperty('--color-highlight', 'var(--color-highlight)');
|
||||
// Remove inline styles to let CSS :root defaults take effect
|
||||
document.documentElement.style.removeProperty('--color-bg');
|
||||
document.documentElement.style.removeProperty('--color-text');
|
||||
document.documentElement.style.removeProperty('--color-highlight');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
duration: .5,
|
||||
color: 'var(--color-highlight)',
|
||||
ease: 'power4.out',
|
||||
delay: 2
|
||||
delay: 2.55
|
||||
})
|
||||
|
||||
sections.forEach( (section) => {
|
||||
|
|
@ -38,16 +38,17 @@
|
|||
word.innerHTML = word.innerHTML.replace(' ', '');
|
||||
})
|
||||
gsap.set(split.words, {
|
||||
opacity: 1,
|
||||
y: -window.innerHeight,
|
||||
opacity: 0,
|
||||
y: -50,
|
||||
transformOrigin: '50% 100%'
|
||||
})
|
||||
gsap.to(split.words, {
|
||||
duration: 1,
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
stagger: -0.01,
|
||||
ease: 'elastic.out(1, .5)',
|
||||
stagger: 0.025,
|
||||
ease: 'power2.inOut',
|
||||
// ease: 'elastic.out(1, .5)',
|
||||
delay: .3
|
||||
})
|
||||
}
|
||||
|
|
@ -108,23 +109,22 @@
|
|||
snap-start box-border
|
||||
px-(--spacing-outer) p-(--spacing-outer)
|
||||
min-h-svh flex flex-col justify-center
|
||||
max-w-full landscape:max-w-[75vw] landscape:mx-auto
|
||||
max-w-full landscape:max-w-[74vw] landscape:mx-auto
|
||||
cursor-[url('/pointer.svg'),auto]
|
||||
"
|
||||
>
|
||||
<h1
|
||||
class="
|
||||
align-middle select-none
|
||||
leading-[0.85] text-[14.75vw] tracking-[-0.05em]
|
||||
leading-[0.85] text-[13vw] tracking-[-0.02em]
|
||||
text-(--color-text)
|
||||
landscape:text-[9vw] landscape:px-4
|
||||
landscape:-mt-[0.5em]
|
||||
[&_em]:not-italic [&_em]:font-normal
|
||||
uppercase
|
||||
opacity-0 invisible
|
||||
"
|
||||
>
|
||||
I'm Simon Flöter. <br>
|
||||
I create brands and websites that <em>stand out.</em>
|
||||
Simon Flöter creates brands and websites <em>that stand out.</em>
|
||||
</h1>
|
||||
</section>
|
||||
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
<h2
|
||||
class="
|
||||
select-none cursor-[url('/pointer.svg'),auto]
|
||||
text-[12vw] leading-[0.9] tracking-[-0.033em] mb-[0.5em]
|
||||
text-[10vw] leading-[0.9] tracking-[-0.01em] mb-[0.5em]
|
||||
landscape:text-[6vw] landscape:m-0
|
||||
[&_em]:not-italic [&_em]:font-normal [&_em]:text-(--color-highlight)
|
||||
"
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
<p
|
||||
class="
|
||||
text-[0.66em] mb-[1em]
|
||||
landscape:mt-4 landscape:mb-[0.25em] landscape:text-[0.6em] landscape:tracking-[-0.02em]
|
||||
landscape:mt-4 landscape:mb-[0.25em] landscape:text-[0.5em] landscape:tracking-[-0.02em]
|
||||
"
|
||||
>
|
||||
I create exquisitly tailored web experiences for discerning enterprises and their audiences.
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
<h2
|
||||
class="
|
||||
select-none cursor-[url('/pointer.svg'),auto]
|
||||
text-[12vw] leading-[0.9] tracking-[-0.033em] mb-[0.5em]
|
||||
text-[10vw] leading-[0.9] tracking-[-0.01em] mb-[0.5em]
|
||||
landscape:text-[6vw] landscape:m-0
|
||||
[&_em]:not-italic [&_em]:font-normal [&_em]:text-(--color-highlight)
|
||||
"
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
<p
|
||||
class="
|
||||
text-[0.66em] mb-[1em]
|
||||
landscape:mt-4 landscape:mb-[0.25em] landscape:text-[0.6em] landscape:tracking-[-0.02em]
|
||||
landscape:mt-4 landscape:mb-[0.25em] landscape:text-[0.5em] landscape:tracking-[-0.02em]
|
||||
"
|
||||
>
|
||||
I'm a seasoned designer, with a long list of succesful projects and happy clients.
|
||||
|
|
@ -230,17 +230,17 @@
|
|||
<h2
|
||||
class="
|
||||
align-middle select-none cursor-[url('/pointer.svg'),auto]
|
||||
text-[12.5vw] leading-[0.9] tracking-[-0.033em] mb-6
|
||||
landscape:text-[8vw] landscape:mb-16 landscape:mt-0 landscape:px-4
|
||||
opacity-0 invisible
|
||||
[&_em]:not-italic [&_em]:font-normal [&_em]:text-(--color-highlight)
|
||||
text-[12.5vw] leading-[0.9] tracking-[-0.01em] mb-6
|
||||
landscape:text-[7vw]! landscape:mb-16 landscape:mt-0 landscape:px-4
|
||||
opacity-0 invisible text-center
|
||||
[&_em]:text-(--color-highlight)
|
||||
"
|
||||
>
|
||||
I am currently available <em>for freelance work.</em>
|
||||
</h2>
|
||||
</div>
|
||||
{#if mounted}
|
||||
<div class="hireme-date text-[0.66em] text-center tracking-tight">
|
||||
<div class="hireme-date text-[0.5em] text-center tracking-tight">
|
||||
(as of {currentMonth})
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,6 @@ export const prerender = true
|
|||
export function load() {
|
||||
return {
|
||||
title: 'Simon Flöter, creative developer and designer',
|
||||
description: 'Simon Flöter is a creative developer and designer you can hire as a freelancer',
|
||||
theme: {
|
||||
bg: 'rgb(0, 0, 90)',
|
||||
text: 'rgb(255, 240, 240)',
|
||||
highlight: 'rgb(250, 125, 0)',
|
||||
}
|
||||
description: 'Simon Flöter is a creative developer and designer you can hire as a freelancer'
|
||||
}
|
||||
}
|
||||
|
|
@ -79,8 +79,8 @@
|
|||
|
||||
<div class="pagewrapper">
|
||||
<div class="intro w-full min-h-screen flex flex-col justify-center pb-16 md:pb-0">
|
||||
<h1 class="toCanvas contact-h1">Let's be strange,<br>not strangers.</h1>
|
||||
<div class="alternatives mx-auto my-0 mb-4 w-full text-center md:mb-8 md:pb-4 [&_p]:opacity-0 [&_.button]:opacity-0 [&_p]:text-base [&_p]:my-2 md:[&_p]:text-[1.33em] [&_ul]:mx-[var(--spacing-outer)] [&_ul]:list-none [&_ul]:flex [&_ul]:justify-center [&_ul]:gap-1 [&_ul_li]:block [&_ul_li]:m-0 [&_.button]:my-1 [&_.button]:block [&_.button]:text-[0.9em] md:[&_.button]:text-[1.2em]">
|
||||
<h1 class="toCanvas contact-h1">Let's be strange,<br><em>not strangers.</em></h1>
|
||||
<div class="alternatives mx-auto my-0 mb-4 w-full text-center md:mb-8 md:pb-4 [&_p]:opacity-0 [&_.button]:opacity-0 [&_p]:text-base [&_p]:my-2 md:[&_p]:text-[1.33em] [&_ul]:mx-(--spacing-outer) [&_ul]:list-none [&_ul]:flex [&_ul]:justify-center [&_ul]:gap-1 [&_ul_li]:block [&_ul_li]:m-0 [&_.button]:my-1 [&_.button]:block [&_.button]:text-[0.9em] md:[&_.button]:text-[1.2em]">
|
||||
<p>Choose your flavour of contact:</p>
|
||||
<ul>
|
||||
<li><span class="button button--primary" on:click={contactFormClickHandler} on:keydown={contactFormClickHandler} role="button" tabindex="0">Contact form</span></li>
|
||||
|
|
@ -89,10 +89,10 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formwrapper fixed inset-0 w-full h-full p-[var(--spacing-outer)] pb-16 pl-[var(--spacing-outer)] pr-[var(--spacing-outer)] bg-[var(--color-bg)] z-0 opacity-0 invisible overflow-y-auto [--form-maxwidth:1000px]">
|
||||
<div class="formwrapper fixed inset-0 w-full h-full p-(--spacing-outer) pb-16 pl-(--spacing-outer) pr-(--spacing-outer) bg-(--color-bg) z-0 opacity-0 invisible overflow-y-auto [--form-maxwidth:1000px]">
|
||||
<span class="button button-back m-0" on:click={contactFormClickHandler} on:keydown={contactFormClickHandler} role="button" tabindex="0">← Back</span>
|
||||
<form name="contact" method="POST" use:enhance class="box-border max-w-[var(--form-maxwidth)] mx-auto overflow-hidden py-4">
|
||||
<div class="inputs-flex-row md:flex md:gap-4 md:justify-center md:max-w-[var(--form-maxwidth)] md:mx-auto [&_label]:md:basis-1/2">
|
||||
<form name="contact" method="POST" use:enhance class="box-border max-w-(--form-maxwidth) mx-auto overflow-hidden py-4">
|
||||
<div class="inputs-flex-row md:flex md:gap-4 md:justify-center md:max-w-(--form-maxwidth) md:mx-auto [&_label]:md:basis-1/2">
|
||||
<label for="name" class="contact-label">
|
||||
<input type="text" name="name" id="name" placeholder="Your name" value={form?.fields?.name ?? ''} class="contact-input">
|
||||
</label>
|
||||
|
|
@ -103,13 +103,13 @@
|
|||
<label for="contact" class="contact-label">
|
||||
<textarea rows="8" name="contact" id="contact" placeholder="Your business propositions, praise, complaints and/or threats" required class="contact-input">{form?.fields?.contact ?? ''}</textarea>
|
||||
</label>
|
||||
<div class="disclaimer max-w-[var(--form-maxwidth)] my-4 mx-auto text-base">
|
||||
<div class="disclaimer max-w-(--form-maxwidth) my-4 mx-auto text-base">
|
||||
<p>Disclaimer: I will only use the data you submit here (name, email, message) to respond. I will not pass it on to any third party. If I don't hear from you I will delete the data and keep no records of it.</p>
|
||||
</div>
|
||||
{#if form?.error}
|
||||
<p class="form-error max-w-[var(--form-maxwidth)] mx-auto mb-4 p-3 border border-[var(--color-text)] rounded text-[0.95em] bg-white/10" role="alert" aria-live="polite">{form.error}</p>
|
||||
<p class="form-error max-w-(--form-maxwidth) mx-auto mb-4 p-3 border border-(--color-text) rounded text-[0.95em] bg-white/10" role="alert" aria-live="polite">{form.error}</p>
|
||||
{/if}
|
||||
<div class="send max-w-[var(--form-maxwidth)] mx-auto">
|
||||
<div class="send max-w-(--form-maxwidth) mx-auto">
|
||||
<button class="button button--xl button--primary" type="submit">Send it!</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -122,8 +122,12 @@
|
|||
visibility: hidden;
|
||||
font-size: 12vw;
|
||||
line-height: .9;
|
||||
letter-spacing: -0.04em;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 1em var(--spacing-nav) 1em var(--spacing-nav);
|
||||
|
||||
& em {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.contact-h1 {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@ export const prerender = false
|
|||
export function load() {
|
||||
return {
|
||||
title: 'Contact me!',
|
||||
description: 'Reach out via a contact form, email or LinkedIn'
|
||||
description: 'Reach out via a contact form, email or LinkedIn',
|
||||
theme: {
|
||||
bg: '#01132D',
|
||||
text: '#FFFFFF',
|
||||
highlight: '#E95E33',
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -211,7 +211,10 @@
|
|||
color: var(--color-text);
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
h1 { font-size: 6vw; letter-spacing: -0.025em; }
|
||||
h1 {
|
||||
font-size: 6vw;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
}
|
||||
.services {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ export function load() {
|
|||
title: 'Services I provide',
|
||||
description: 'A list of profesional webdevelopment and design services I provide',
|
||||
theme: {
|
||||
bg: '#00005A',
|
||||
bg: '#5959A2',
|
||||
text: '#FFF0F0',
|
||||
highlight: '#FA7D00',
|
||||
highlight: '#490A0A',
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -17,9 +17,9 @@ export async function load() {
|
|||
title: 'Work References',
|
||||
description: 'A few of the projects I have worked on',
|
||||
theme: {
|
||||
bg: '#FA7D00',
|
||||
bg: '#E95E33',
|
||||
text: '#FFFFFF',
|
||||
highlight: '#00005A',
|
||||
highlight: '#01132D',
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,26 @@
|
|||
import gsap from 'gsap';
|
||||
import { SplitText } from 'gsap/SplitText';
|
||||
import { goto } from '$app/navigation';
|
||||
let { data } = $props();
|
||||
let { data }: {
|
||||
data: {
|
||||
posts: Array<{
|
||||
meta: {
|
||||
order: number,
|
||||
title: string,
|
||||
tags: string[],
|
||||
svg: string,
|
||||
},
|
||||
path: string
|
||||
}>,
|
||||
title: string,
|
||||
description: string,
|
||||
theme: {
|
||||
bg: string,
|
||||
text: string,
|
||||
highlight: string,
|
||||
}
|
||||
}
|
||||
} = $props();
|
||||
|
||||
const orderedPosts = $derived.by(() => (data.posts || []).sort((a, b) => {
|
||||
return a.meta.order - b.meta.order;
|
||||
|
|
@ -291,7 +310,7 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
letter-spacing: -0.05em;
|
||||
letter-spacing: -0.02em;
|
||||
z-index: 10;
|
||||
transform: translateZ(500px);
|
||||
margin-left: 40.5vw;
|
||||
|
|
@ -302,7 +321,7 @@
|
|||
.headline {
|
||||
margin-left: 41.66vw;
|
||||
margin-top: 40.5vh;
|
||||
font-size: 7vw;
|
||||
font-size: 5vw;
|
||||
transform: translateZ(600px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
svg-logo
|
||||
flex flex-col justify-center
|
||||
w-full h-full m-auto p-[3em]
|
||||
text-(--color-highlight)
|
||||
text-[#440011]
|
||||
[&_svg]:object-fill [&_svg]:w-full [&_svg]:h-full
|
||||
md:w-3/5
|
||||
"
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Add table
Reference in a new issue