finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
feat: add wip-banner
+144
-64
+1
src/assets/styles/index.css
+1
src/assets/styles/index.css
+143
-64
src/layouts/Layout.astro
+143
-64
src/layouts/Layout.astro
···
26
26
<title>Colin Ozanne</title>
27
27
</head>
28
28
<body>
29
-
<aside>
30
-
<header>
31
-
<picture class="container">
32
-
<source srcset={colinWebp.src} type="image/webp" />
33
-
<img src={colinPng.src} alt="Colin Ozanne" />
34
-
</picture>
35
-
<h1 class="container">
36
-
Colin <br class="desktop-only" /> Ozanne
37
-
</h1>
38
-
<p class="container">{subtitle}</p>
39
-
</header>
40
-
<footer>
41
-
<div class="container lang-switcher">
29
+
<div class="wip-banner">
30
+
<div>
31
+
<h3>Work in Progress</h3>
32
+
<span>
33
+
You are previewing the next version of my portfolio. Any
34
+
feedback is welcome!
35
+
</span>
36
+
</div>
37
+
</div>
38
+
<div class="app">
39
+
<aside>
40
+
<header>
41
+
<picture class="container">
42
+
<source srcset={colinWebp.src} type="image/webp" />
43
+
<img src={colinPng.src} alt="Colin Ozanne" />
44
+
</picture>
45
+
<h1 class="container">
46
+
Colin <br class="desktop-only" /> Ozanne
47
+
</h1>
48
+
<p class="container">{subtitle}</p>
49
+
</header>
50
+
<footer>
51
+
<div class="container lang-switcher">
52
+
<a
53
+
class={locale === "en" ? "active" : ""}
54
+
href={`${config.domains.en}${path}`}
55
+
target="_self"
56
+
>
57
+
EN
58
+
</a>
59
+
<Icon name="pixel:globe" />
60
+
<a
61
+
class={locale === "fr" ? "active" : ""}
62
+
href={`${config.domains.fr}${path}`}
63
+
target="_self"
64
+
>
65
+
FR
66
+
</a>
67
+
</div>
68
+
42
69
<a
43
-
class={locale === "en" ? "active" : ""}
44
-
href={`${config.domains.en}${path}`}
45
-
target="_self"
70
+
href="mailto:contact@colinozanne.fr"
71
+
target="_blank"
72
+
rel="noopener noreferrer"
73
+
class="container"
46
74
>
47
-
EN
75
+
<Icon name="pixel:envelope" />
76
+
<span> Email </span>
77
+
<Icon
78
+
name="pixel:external-link"
79
+
class="external-link"
80
+
/>
48
81
</a>
49
-
<Icon name="pixel:globe" />
50
82
<a
51
-
class={locale === "fr" ? "active" : ""}
52
-
href={`${config.domains.fr}${path}`}
53
-
target="_self"
83
+
href="https://www.linkedin.com/in/colin-ozanne/"
84
+
target="_blank"
85
+
rel="noopener noreferrer"
86
+
class="container"
54
87
>
55
-
FR
88
+
<Icon name="pixel:linkedin" />
89
+
<span> Linkedin </span>
90
+
<Icon
91
+
name="pixel:external-link"
92
+
class="external-link"
93
+
/>
56
94
</a>
57
-
</div>
58
-
59
-
<a
60
-
href="mailto:contact@colinozanne.fr"
61
-
target="_blank"
62
-
rel="noopener noreferrer"
63
-
class="container"
64
-
>
65
-
<Icon name="pixel:envelope" />
66
-
<span> Email </span>
67
-
<Icon name="pixel:external-link" class="external-link" />
68
-
</a>
69
-
<a
70
-
href="https://www.linkedin.com/in/colin-ozanne/"
71
-
target="_blank"
72
-
rel="noopener noreferrer"
73
-
class="container"
74
-
>
75
-
<Icon name="pixel:linkedin" />
76
-
<span> Linkedin </span>
77
-
<Icon name="pixel:external-link" class="external-link" />
78
-
</a>
79
-
<a
80
-
href="https://finxol.io"
81
-
target="_blank"
82
-
rel="noopener noreferrer"
83
-
class="container"
84
-
>
85
-
<Icon name="pixel:pen-nib" />
86
-
<span> Blog </span>
87
-
<Icon name="pixel:external-link" class="external-link" />
88
-
</a>
89
-
<p class="container">
90
-
© {new Date().getFullYear()} Colin Ozanne
91
-
</p>
92
-
</footer>
93
-
</aside>
94
-
<main class="">
95
-
<slot />
96
-
</main>
95
+
<a
96
+
href="https://finxol.io"
97
+
target="_blank"
98
+
rel="noopener noreferrer"
99
+
class="container"
100
+
>
101
+
<Icon name="pixel:pen-nib" />
102
+
<span> Blog </span>
103
+
<Icon
104
+
name="pixel:external-link"
105
+
class="external-link"
106
+
/>
107
+
</a>
108
+
<p class="container">
109
+
© {new Date().getFullYear()} Colin Ozanne
110
+
</p>
111
+
</footer>
112
+
</aside>
113
+
<main class="">
114
+
<slot />
115
+
</main>
116
+
</div>
97
117
</body>
98
118
</html>
99
119
100
120
<style>
121
+
.wip-banner {
122
+
padding: 0.5rem 1rem;
123
+
text-align: center;
124
+
font-weight: bold;
125
+
font-size: 2rem;
126
+
color: #000;
127
+
background: repeating-linear-gradient(
128
+
135deg,
129
+
var(--yellow-300),
130
+
var(--yellow-300) 20px,
131
+
var(--yellow-500) 20px,
132
+
var(--yellow-500) 40px
133
+
);
134
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
135
+
136
+
div {
137
+
display: flex;
138
+
flex-direction: column;
139
+
align-items: center;
140
+
justify-content: center;
141
+
width: fit-content;
142
+
margin: 0 auto;
143
+
background: oklch(from var(--yellow-300) l c h / 30%);
144
+
backdrop-filter: blur(10px);
145
+
padding: 0.25rem 0.75rem;
146
+
border-radius: 4px;
147
+
148
+
h3 {
149
+
margin: 0;
150
+
font-size: 1.5rem;
151
+
font-weight: bold;
152
+
font-family: "Spagetty", serif;
153
+
}
154
+
155
+
span {
156
+
display: inline-block;
157
+
margin-top: 0rem;
158
+
font-size: 0.95rem;
159
+
font-weight: normal;
160
+
text-wrap: balance;
161
+
}
162
+
}
163
+
}
164
+
101
165
body {
102
-
width: 100%;
166
+
font-family: "Scorekard", sans-serif;
167
+
}
168
+
169
+
.app {
170
+
width: 100svw;
103
171
display: grid;
104
172
grid-template-columns: clamp(15rem, 20vw, 30rem) auto;
105
173
grid-template-rows: 1fr auto;
106
174
grid-auto-flow: row;
107
175
grid-template-areas: "aside main";
108
176
gap: 0;
109
-
font-family: "Scorekard", sans-serif;
110
177
111
178
& > aside {
112
179
position: sticky;
···
135
202
gap: 0;
136
203
height: auto;
137
204
min-height: 100svh;
205
+
206
+
& > aside {
207
+
display: contents;
208
+
209
+
& > header {
210
+
grid-area: header;
211
+
}
212
+
213
+
& > footer {
214
+
grid-area: footer;
215
+
}
216
+
}
138
217
}
139
218
}
140
219