static website generator + waaaay better design
This commit is contained in:
parent
9e88caa67d
commit
2a6fd3faff
17 changed files with 2688 additions and 307 deletions
18
.eleventy.js
Normal file
18
.eleventy.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
module.exports = function(eleventyConfig) {
|
||||
// Copying static assets
|
||||
eleventyConfig.addPassthroughCopy("src/style.css");
|
||||
eleventyConfig.addPassthroughCopy("src/photo.png");
|
||||
|
||||
// Configuring permalinks to be ~.html instead of ~/
|
||||
eleventyConfig.addGlobalData("permalink", () => {
|
||||
return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
|
||||
});
|
||||
|
||||
// Options
|
||||
return {
|
||||
dir: {
|
||||
input: "src",
|
||||
output: "dist"
|
||||
}
|
||||
}
|
||||
};
|
||||
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
node_modules
|
||||
dist
|
||||
9
LICENSE
Normal file
9
LICENSE
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2024 Louis Guidez
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
16
README.md
16
README.md
|
|
@ -1,3 +1,17 @@
|
|||
# Monsieur Louis, le site web
|
||||
|
||||
Site web de https://monsieurlouis.se/.
|
||||
Site web de https://monsieurlouis.se/.
|
||||
|
||||
## Develop
|
||||
|
||||
```bash
|
||||
npx @11ty/eleventy --serve
|
||||
```
|
||||
|
||||
## Compile
|
||||
|
||||
```bash
|
||||
npx @11ty/eleventy
|
||||
```
|
||||
|
||||
## Deploy
|
||||
2417
package-lock.json
generated
Normal file
2417
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
11
package.json
Normal file
11
package.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"name": "monsieurlouis_website",
|
||||
"version": "1.0.0",
|
||||
"description": "Website for [monsieurlouis.se](https://monsieurlouis.se).",
|
||||
"keywords": [],
|
||||
"author": "Louis Guidez",
|
||||
"license": "",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^2.0.1"
|
||||
}
|
||||
}
|
||||
21
src/_includes/ionicons/LICENSE
Normal file
21
src/_includes/ionicons/LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015-present Ionic (http://ionic.io/)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
1
src/_includes/ionicons/call-outline.svg
Normal file
1
src/_includes/ionicons/call-outline.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M451 374c-15.88-16-54.34-39.35-73-48.76-24.3-12.24-26.3-13.24-45.4.95-12.74 9.47-21.21 17.93-36.12 14.75s-47.31-21.11-75.68-49.39-47.34-61.62-50.53-76.48 5.41-23.23 14.79-36c13.22-18 12.22-21 .92-45.3-8.81-18.9-32.84-57-48.9-72.8C119.9 44 119.9 47 108.83 51.6A160.15 160.15 0 0083 65.37C67 76 58.12 84.83 51.91 98.1s-9 44.38 23.07 102.64 54.57 88.05 101.14 134.49S258.5 406.64 310.85 436c64.76 36.27 89.6 29.2 102.91 23s22.18-15 32.83-31a159.09 159.09 0 0013.8-25.8C465 391.17 468 391.17 451 374z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/></svg>
|
||||
|
After Width: | Height: | Size: 667 B |
1
src/_includes/ionicons/git-branch-outline.svg
Normal file
1
src/_includes/ionicons/git-branch-outline.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><circle cx="160" cy="96" r="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><circle cx="160" cy="416" r="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M160 368V144"/><circle cx="352" cy="160" r="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M352 208c0 128-192 48-192 160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
|
||||
|
After Width: | Height: | Size: 745 B |
1
src/_includes/ionicons/logo-instagram.svg
Normal file
1
src/_includes/ionicons/logo-instagram.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z"/><path d="M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z"/></svg>
|
||||
|
After Width: | Height: | Size: 583 B |
1
src/_includes/ionicons/logo-linkedin.svg
Normal file
1
src/_includes/ionicons/logo-linkedin.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z"/></svg>
|
||||
|
After Width: | Height: | Size: 634 B |
1
src/_includes/ionicons/mail-outline.svg
Normal file
1
src/_includes/ionicons/mail-outline.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><rect x="48" y="96" width="416" height="320" rx="40" ry="40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M112 160l144 112 144-112"/></svg>
|
||||
|
After Width: | Height: | Size: 380 B |
306
src/index.html
306
src/index.html
|
|
@ -1,306 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Louis Guidez</title>
|
||||
|
||||
<style>
|
||||
html, body {min-height: 100%;}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
min-height: 200vh;
|
||||
position: relative;
|
||||
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#hello_slide {
|
||||
position: relative;
|
||||
|
||||
height: 100vh;
|
||||
|
||||
background: url("./louis_guidez_besseggen.jpg");
|
||||
background-size: cover;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
box-sizing: border-box;
|
||||
margin: -1em;
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
#hello_slide::after {
|
||||
content: " ";
|
||||
border-bottom: 1em solid #9DC4EB;
|
||||
position: absolute;
|
||||
bottom: -1em;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#hello_slide h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
|
||||
width: 100%;
|
||||
max-width: 50rem;
|
||||
}
|
||||
|
||||
@media (min-width: 50rem) {
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
column-gap: 1em;
|
||||
}
|
||||
.small-screens-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.columns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
@media (max-width: 50rem) {
|
||||
.columns:not(ul.contact) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 30rem) {
|
||||
.columns {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
ul.contact {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
align-items: center;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.contact svg {
|
||||
height: 2em;
|
||||
vertical-align: middle;
|
||||
margin: .5em;
|
||||
}
|
||||
|
||||
ul.contact a {
|
||||
display: inline-block;
|
||||
padding: .5em;
|
||||
background: #9DC4EBaa;
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
ul.contact a:hover {
|
||||
background: #9DC4EBDD;
|
||||
}
|
||||
|
||||
header h1,
|
||||
header h2 {
|
||||
text-shadow: .1em .1em 0 #d9e9f9,
|
||||
-.05em -.05em 0 #d9e9f9,
|
||||
.05em -.05em 0 #d9e9f9,
|
||||
-.05em .05em 0 #d9e9f9,
|
||||
.05em .05em 0 #d9e9f9;
|
||||
}
|
||||
|
||||
header p.bubble,
|
||||
header .p-link {
|
||||
background: #ffffff88;
|
||||
padding: .5em;
|
||||
border-radius: .5em;
|
||||
transition: all .1s ease-in;
|
||||
display: block;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
header p.bubble:hover,
|
||||
header .p-link:hover {
|
||||
background: #ffffffcc;
|
||||
text-decoration: none;
|
||||
}
|
||||
p.bubble[data-language="fr"] {
|
||||
background: #9DC4EBaa;
|
||||
}
|
||||
p.bubble[data-language="fr"]:hover {
|
||||
background: #9DC4EBDD;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 50rem) {
|
||||
p.bubble {
|
||||
background: #ffffffcc;
|
||||
}
|
||||
p.bubble[data-language="fr"] {
|
||||
background: #9DC4EBDD;
|
||||
}
|
||||
|
||||
ul.contact a {
|
||||
background: #9DC4EBDD;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #4899ea;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bubble-link {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
overflow: hidden;
|
||||
background-color: #324B6F;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
margin: auto;
|
||||
color: white;
|
||||
transition: all .1s ease-in;
|
||||
}
|
||||
.bubble-link:hover {
|
||||
text-decoration: none;
|
||||
background-color: #445874;
|
||||
}
|
||||
.back_to_top {
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header id="hello_slide">
|
||||
<div class="container">
|
||||
<h1>Louis Guidez</h1>
|
||||
<div class="columns">
|
||||
<p class="bubble" data-language="en">
|
||||
Hej! Thank you for stopping on my website.
|
||||
</p>
|
||||
<p class="bubble" data-language="fr">
|
||||
Bienvenue ! Merci de vous être arrêté·e sur mon site.
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
<a class="bubble-link" href="#about">↓</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<p data-language="en" class="bubble">Want to get to know me better?</p>
|
||||
<p data-language="fr" class="bubble">Vous souhaitez en savoir plus ? Contactez-moi.</p>
|
||||
</div>
|
||||
|
||||
<ul class="contact columns">
|
||||
<li><a href="mailto:hello@monsieurlouis.se">hello@monsieurlouis.se</a></li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/in/louis-guidez-42a4a0170/" target="_blank" title="LinkedIn">
|
||||
<svg data-icon="linkedin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.instagram.com/wingsofxiv/" target="_blank" title="Instagram">
|
||||
<svg data-icon="instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://louis.hostux.fr/blog" target="_blank" title="Blog">
|
||||
<svg data-icon="pen-nib" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M136.6 138.79a64.003 64.003 0 0 0-43.31 41.35L0 460l14.69 14.69L164.8 324.58c-2.99-6.26-4.8-13.18-4.8-20.58 0-26.51 21.49-48 48-48s48 21.49 48 48-21.49 48-48 48c-7.4 0-14.32-1.81-20.58-4.8L37.31 497.31 52 512l279.86-93.29a64.003 64.003 0 0 0 41.35-43.31L416 224 288 96l-151.4 42.79zm361.34-64.62l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.75 18.75-49.15 0-67.91z"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="grid" id="about">
|
||||
<h2 data-language="en">About</h2>
|
||||
<p data-language="en">
|
||||
I am a young engineer specialised in mechanical design with an interest in digital technologies and automation.
|
||||
</p>
|
||||
<p data-language="en">
|
||||
In my spare time, I like to fly, go on hikes, play board games, prototype small things... and much more.
|
||||
</p>
|
||||
|
||||
<h2 data-language="fr">À propos de moi</h2>
|
||||
<p data-language="fr">
|
||||
Je suis un jeune ingénieur en conception mécanique, particulièrement intéressé par les nouvelles technologies.
|
||||
</p>
|
||||
<p data-language="fr">
|
||||
Quand je ne travaille pas, j'aime : piloter, faire des randonnées, les jeux de société, bidouiller des petits projets...
|
||||
</p>
|
||||
</div>
|
||||
<a href="#" role="button" class="back_to_top bubble-link">↑</a>
|
||||
|
||||
<script>
|
||||
// If debug_language is empty / unset, autodetect the language
|
||||
debug_language = "";
|
||||
|
||||
function show_only_french() {
|
||||
// Hiding the other languages (just English)
|
||||
document.querySelectorAll("[data-language=\"en\"]").forEach(function(el) {
|
||||
el.style.display = "none";
|
||||
});
|
||||
// So the styling is consistent
|
||||
document.querySelectorAll("[data-language=\"fr\"]").forEach(function(el) {
|
||||
el.removeAttribute("data-language");
|
||||
});
|
||||
}
|
||||
function show_only_english() {
|
||||
// Hiding the other languages (just French)
|
||||
document.querySelectorAll("[data-language=\"fr\"]").forEach(function(el) {
|
||||
el.style.display = "none";
|
||||
});
|
||||
}
|
||||
function autodetect_language() {
|
||||
navigator.languages.some(function(language) {
|
||||
console.log(language);
|
||||
if(["en", "en-GB", "en-US"].includes(language)) {
|
||||
show_only_english();
|
||||
return true;
|
||||
}
|
||||
else if(["fr"].includes(language)) {
|
||||
show_only_french();
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if(typeof debug_language == "undefined") {
|
||||
autodetect_language();
|
||||
}
|
||||
else if(debug_language == "fr") {
|
||||
show_only_french();
|
||||
}
|
||||
else if(debug_language == "en") {
|
||||
show_only_english();
|
||||
}
|
||||
else {
|
||||
autodetect_language();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
src/index.njk
Normal file
41
src/index.njk
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Monsieur Louis</title>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div>
|
||||
<h1>Louis Guidez</h1>
|
||||
<h2 id="subtitle" style="--n: 6">
|
||||
<span>
|
||||
<span>Mechanical Engineer.</span>
|
||||
<span>Private Pilot.</span>
|
||||
<span>Geek.</span>
|
||||
<span>Pianist.</span>
|
||||
<span>Hiker.</span>
|
||||
<span>Board-"gamer".</span>
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<img id="photo" alt="Photo of Louis Guidez" src="photo.png">
|
||||
<ul id="contact">
|
||||
<li title="Phone: +33 6 99 39 23 90"><a href="tel:+33699392390"><i>{% include "ionicons/call-outline.svg" %}</i></a></li>
|
||||
<li title="Email: louis@hostux.fr"><a href="mailto:louis@hostux.fr"><i>{% include "ionicons/mail-outline.svg" %}</i></a></li>
|
||||
<li title="LinkedIn"><a href="https://www.linkedin.com/in/louis-guidez-42a4a0170/"><i>{% include "ionicons/logo-linkedin.svg" %}</i></a></li>
|
||||
<li title="Instagram: @wingsofxiv"><a href="https://www.instagram.com/wingsofxiv/"><i>{% include "ionicons/logo-instagram.svg" %}</i></a></li>
|
||||
<li title="Git"><a href="https://git.hostux.fr/louis/"><i>{% include "ionicons/git-branch-outline.svg" %}</i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{#
|
||||
<div class="page">
|
||||
Hey
|
||||
</div>
|
||||
#}
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 624 KiB |
BIN
src/photo.png
Normal file
BIN
src/photo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
149
src/style.css
Normal file
149
src/style.css
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Updock&family=Advent+Pro:wght@500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Updock&family=Advent+Pro:wght@600&display=swap');
|
||||
|
||||
/**
|
||||
* Styles
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #131721;
|
||||
/* Hides scrollbar */
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Advent Pro", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings: "wdth" 100;
|
||||
}
|
||||
|
||||
.page:first-of-type {
|
||||
height: 100vh;
|
||||
border: none;
|
||||
background: rgb(133,141,143);
|
||||
background: linear-gradient(178deg, #F2F2F2 0%, #D5E7F2 85%, #4D6F8C 100%);
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1em solid #4D6F8C;
|
||||
background: #D5E7F2;
|
||||
}
|
||||
.page:has(+ .page) {
|
||||
margin-bottom: .2em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Updock", cursive;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
||||
margin: 0;
|
||||
font-size: 7rem;
|
||||
color: #252C40;
|
||||
margin-bottom: -0.4em;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2#subtitle {
|
||||
--d: 2s;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
|
||||
color: #4D6F8C;
|
||||
}
|
||||
h2#subtitle > span {
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
height: 1.2em;
|
||||
}
|
||||
h2#subtitle > span > span {
|
||||
width: 0%;
|
||||
max-width: max-content;
|
||||
overflow: hidden;
|
||||
height: inherit;
|
||||
word-break: break-all;
|
||||
animation:
|
||||
c 1s infinite steps(1),
|
||||
t var(--d) linear infinite alternate,
|
||||
m calc(var(--d) * 2 * var(--n)) steps(var(--n)) infinite;
|
||||
}
|
||||
h2#subtitle > span > span {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes t{
|
||||
90%,100% { width:100% }
|
||||
}
|
||||
|
||||
@keyframes c{
|
||||
0%,100% { box-shadow: 5px 0 0 #0000 }
|
||||
50% { box-shadow: 5px 0 0 #131721 }
|
||||
}
|
||||
|
||||
@keyframes m{
|
||||
100% { transform: translateY(calc(-100% * var(--n))) }
|
||||
}
|
||||
|
||||
#photo-container {
|
||||
position: absolute;
|
||||
}
|
||||
#photo {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
bottom: 0;
|
||||
height: min(80vh, 100vh - 10.5rem);
|
||||
min-height: 15rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
i svg {
|
||||
height: 2em;
|
||||
color: #131721;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
ul#contact {
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
justify-content: center;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 480px) {
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
#photo {
|
||||
max-height: 50vh;
|
||||
}
|
||||
ul#contact {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue