Files
Portfolio-2026/index.html
T
2026-05-26 23:32:24 +02:00

156 lines
7.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lars Winter</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled>
<meta name="description" content="Creator of visual identities and digital interfaces">
<meta property="og:title" content="Lars Winter">
<meta property="og:description" content="Portfolio of Lars Winter">
<meta property="og:url" content="https://larswinter.me">
<meta property="og:image" content="https://larswinter.me/img/lw-og_image.png">
<meta property="og:image:alt" content="">
<meta name="fediverse:creator" content="@larswinter@mastodon.social">
<link rel="icon" href="img/favicon.ico" sizes="any">
<!-- <link rel="icon" href="img/icon.svg" type="image/svg+xml"> -->
<link rel="apple-touch-icon" href="img/lw.png">
<meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="0f0f0f" media="(prefers-color-scheme: dark)">
<script src="js/app.js" defer></script>
</head>
<body>
<div id="skipLink">
<a href="#siteContent">Skip to content</a>
</div>
<header class="site-header">
<div class="menu-bar">
<div class="menu-left">
<a class="logo" href="/">
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" aria-hidden="true" focusable="false" viewBox="0 0 1080 1080"><path d="M1000.022 50H499.59c-20.565 0-34.827 20.502-27.676 39.783l146.561 395.171c8.419 22.699 40.635 22.382 48.605-.478l61.821-177.315c6.903-19.8 34.906-19.8 41.809 0l61.821 177.315c7.97 22.861 40.187 23.178 48.605.478l146.561-395.171c7.151-19.281-7.112-39.783-27.676-39.783Z"/><path d="M360 538V106c0-30.928-25.072-56-56-56H106c-30.928 0-56 25.072-56 56v868c0 30.928 25.072 56 56 56h868c30.928 0 56-25.072 56-56V650c0-30.928-25.072-56-56-56H416c-30.928 0-56-25.072-56-56"/></svg>
<span class="visually-hidden">Home page</span>
</a>
<nav class="desktop-nav" aria-label="Primary navigation">
<ul>
<li><a href="/" class="menu-button" aria-current="page">Work</a></li>
<li><a href="/about.html" class="menu-button">About</a></li>
<li><a href="/privacy.html" class="menu-button">Blog</a></li>
</ul>
</nav>
</div>
<nav class="desktop-nav-secondary" aria-label="Secondary navigation">
<ul>
<li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
<path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
</svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
<li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
</svg><span class="visually-hidden">Change light/dark mode</span></button></li>
</ul>
</nav>
<button
class="menu-toggle"
id="menuToggle"
type="button"
aria-expanded="false"
aria-controls="mobileMenu"
aria-haspopup="true"
aria-label="Open menu"
>
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<div class="menu-overlay" id="menuOverlay" hidden></div>
<aside
class="mobile-menu"
id="mobileMenu"
aria-label="Mobile navigation"
aria-hidden="true"
>
<div class="mobile-menu__header">
<strong>Menu</strong>
<button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
</button>
</div>
<nav aria-label="Mobile navigation">
<ul>
<li><a href="/" class="button-primary" aria-current="page">Work</a></li>
<li><a href="/legal-notice.html" class="button-primary">About</a></li>
<li><a href="/privacy.html" class="button-primary">Blog</a></li>
</ul>
</nav>
</aside>
<main id="siteContent" class="page-content">
<!-- target="_blank" rel="noopener noreferrer" -->
<header class="content-box content-intro">
<h1 class="headline size-h2">
Hey, I am Lars Winter, a graphic designer from Hamburg. I conceptualize and design projects focused on UX/UI design, design systems, icon design, corporate design, and editorial design.
</h1>
</header>
<section class="content-box content-text">
<p class="text">
As usual, my portfolio is a work in progress and currently only available on request. Please feel free to contact me <a href="mailto:contact@larswinter.me">via email</a> for work collaborations and other requests. You can also find me on one of those fancy social networks, like <a rel="me" href="https://mastodon.social/@larswinter">Mastodon</a>, <a href="https://www.linkedin.com/in/larswinter">LinkedIn</a> (if really necessary), <del>Instagram</del>, and <del>Twitter</del>.
</p>
</section>
<div class="content-box placeholder">
</div>
<!-- <div class="footer-fade"></div> -->
</main>
<footer>
<div class="footer-content">
<span>© 2018<span id="year"></span> Lars Winter</span>
<div class="footer-links">
<div>
<a href="/legal-notice.html">Legal notice</a>
</div>
<div>
<a href="/privacy.html">Privacy</a>
</div>
<div>
<a href="/archive">Archived Portfolio</a>
</div>
</div>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</div>
</footer>
<!-- Add your site or application content here -->
<!-- <script src="js/app.js" defer></script> -->
</body>
</html>