-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
59 lines (59 loc) · 2.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en" style="scroll-behavior: smooth">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mikael Dahlgren - Portfolio</title>
<link rel="stylesheet" href="./styles/main.css" />
<link rel="preload" href="./assets/profile/profile-loading-xs.webp" as="image/webp">
<style>
html{
font-family: system-ui, sans-serif;
font-weight: normal;
}
h1{
letter-spacing: -0.25px;
}
/* variables */
:root {
--color-primary: #4353eb;
--color-background: #FAEDDA;
--color-text: #202020;
--color-text-secondary: #817561;
}
</style>
</head>
<body id="home">
<_Header title="Mikael Dahlgren" />
<Section class="hero-section" >
<h1>Efficient Code,<br/>Elegant Experiences</h1>
<p>Hello. Explore my work and get in touch if you'd like to<br/>create something amazing together.</p>
<button class="button primary fit-content">Explore projects</button>
<div class="hero-image">
<_Image
width="900px"
height="900px"
loadingSrc="./assets/profile/profile-loading-xs.webp"
avifSrcset="./assets/profile/profile-800.avif 800w, ./assets/profile/profile-600.avif 600w, ./assets/profile/profile-400.avif 400w"
webpSrcset="./assets/profile/profile-800.webp 800w, ./assets/profile/profile-600.webp 600w, ./assets/profile/profile-400.webp 400w"
fallbackSrcset="./assets/profile/profile-800.jpeg 800w, ./assets/profile/profile-600.jpeg 600w, ./assets/profile/profile-400.jpeg 400w"
loadingSrc="./assets/profile/profile-loading-xs.webp"
fallbackMaskSrc="./assets/profile/profile-mask-hires.png"
sizes="33w"
/>
<div class="text-overlay">
<h2>Hello.<br /> I'm <span>Mikael</span></h2>
<p class="lead-text"> check out some of <br /> my work </p>
</div>
</div>
</Section>
<h2>Discover my interactive web designs.</h2>
<p>
Join me on a journey through my creative portfolio. Let's build
something amazing together.
</p>
<_BackToTop />
<div class="body-bg">
<div class="body-bg--top-gradient"></div>
</div>
</body>
</html>