53 lines
2.5 KiB
JavaScript
53 lines
2.5 KiB
JavaScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import FadeInSection from "./components/FadeInSection";
|
||
|
||
export default function Home() {
|
||
return (
|
||
<>
|
||
<div className="shell">
|
||
<section className="hero">
|
||
<div>
|
||
<p className="eyebrow">Developer · Digital maker</p>
|
||
<h1>Code with<br/><em>character.</em></h1>
|
||
</div>
|
||
<div className="hero-side">
|
||
<div className="availability">Open to opportunities</div>
|
||
<p>I’m Frederik, a developer from Switzerland creating useful, expressive experiences across web, games, and software.</p>
|
||
<Link className="button" href="/projects">Explore my work</Link>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div className="marquee" aria-hidden="true">
|
||
<div className="marquee-track">
|
||
{[0, 1].map(group => (
|
||
<div className="marquee-group" key={group}>
|
||
<span>JavaScript</span><b>✦</b>
|
||
<span>Python</span><b>✦</b>
|
||
<span>Java</span><b>✦</b>
|
||
<span>Creative development</span><b>✦</b>
|
||
<span>Web experiences</span><b>✦</b>
|
||
<span>SQL</span><b>✦</b>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<FadeInSection>
|
||
<section className="shell featured">
|
||
<div className="featured-grid">
|
||
<div>
|
||
<p className="eyebrow">A little about me</p>
|
||
<h2>Curious by default.</h2>
|
||
<p>I like learning how things work, then making them work better. My projects move between polished interfaces, practical backend systems, and playful experiments.</p>
|
||
<Link className="button light" href="/about">My journey</Link>
|
||
</div>
|
||
<div className="image-frame">
|
||
<Image src="/images/portfolio1.jpg" alt="A featured development project" fill sizes="(max-width: 800px) 100vw, 60vw"/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</FadeInSection>
|
||
</>
|
||
);
|
||
}
|