Skip to content

Commit b231f1b

Browse files
author
benpaquier
committed
Hero + Teaching
1 parent b60833a commit b231f1b

10 files changed

+175
-4
lines changed

‎.prettierrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"useTabs": true,
3-
"singleQuote": false,
3+
"singleQuote": true,
44
"trailingComma": "none",
55
"printWidth": 100,
66
"semi": false

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.0.1",
44
"scripts": {
55
"dev": "vite dev",
6+
"dev-host": "vite dev --host 0.0.0.0",
67
"build": "vite build",
78
"package": "svelte-kit package",
89
"preview": "vite preview",

‎src/app.html

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<meta property="og:url" content="https://benoitpaquier.com" />
1414
<meta property="og:image" content="https://media-exp1.licdn.com/dms/image/C4E03AQGpKjbKhe5Cwg/profile-displayphoto-shrink_800_800/0/1623924860868?e=1665014400&v=beta&t=uNLlWQZh-oQqliyeXU_kaSbkltIoHFb6gVUK6DeQ-FM" />
1515
<link rel="stylesheet" href="%sveltekit.assets%\styles\reset.css">
16+
<link rel="stylesheet" href="%sveltekit.assets%\styles\variables.css">
1617
<link rel="stylesheet" href="%sveltekit.assets%\styles\global.css">
1718
%sveltekit.head%
1819
</head>

‎src/lib/Hero.svelte

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script>
2+
import Section from './Section.svelte'
3+
</script>
4+
5+
<Section>
6+
<p class="greeting">Hello,</p>
7+
<span class="greeting">Je suis{` `}</span>
8+
<h1 class="greeting">Benoit Paquier</h1>
9+
<span class="greeting">.</span>
10+
<h3>Formateur & développeur web indépendant</h3>
11+
</Section>
12+
13+
<style>
14+
h1 {
15+
display: inline;
16+
}
17+
18+
.greeting {
19+
font-family: 'Raleway-Black';
20+
font-size: 5rem;
21+
}
22+
23+
h3 {
24+
font-family: 'Raleway-Bold';
25+
font-size: 2rem;
26+
margin-top: 1rem;
27+
}
28+
29+
@media (max-width: 992px) {
30+
.greeting {
31+
font-size: 4rem;
32+
}
33+
}
34+
35+
@media (max-width: 576px) {
36+
.greeting {
37+
font-size: 3rem;
38+
}
39+
40+
h3 {
41+
font-size: 1.5rem;
42+
}
43+
}
44+
</style>

‎src/lib/Layout.svelte

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<main>
2+
<slot />
3+
</main>
4+
5+
<style>
6+
main {
7+
max-width: 1200px;
8+
width: calc(100% - 1.5rem);
9+
margin: 0 auto;
10+
}
11+
</style>

‎src/lib/Section.svelte

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<section>
2+
<slot />
3+
</section>
4+
5+
<style>
6+
section {
7+
padding-top: 5rem;
8+
}
9+
10+
section:nth-last-child(1) {
11+
padding-bottom: 5rem;
12+
}
13+
</style>

‎src/lib/Teaching.svelte

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<script>
2+
import Section from './Section.svelte'
3+
4+
const experiences = [
5+
{
6+
title: '🎓 Konexio',
7+
occupation: 'Formateur',
8+
description:
9+
"Je suis formateur principal sur un la formation <i>Développeur web et web mobile chez Konexio</i>. La formation est une formation en alternance initiée par un Bootcamp intensif de 3 mois et demi, suivi du cursus alternance pendant 9 mois. Je forme au métier de développeur web fullstack, avec notamment HTML5/CSS3, Javascript, Typescript, Algorithmique, React, Node, Express, SQL, NoSQL, tout en mettant en avant l'accessibilité web et bien sur l'éco-conception.",
10+
url: 'https://www.konexio.eu/'
11+
},
12+
{
13+
title: '🚸 OpenClassRoom',
14+
occupation: 'Mentor',
15+
description:
16+
"J'accompagne les étudiants durant leur formation de développeur web front-end React, à raison d'une demie heure par semaine. Je partage avec eux les bonnes pratiques du métier, les astuces et les conseils qui vont les aider. Je participe aussi à la préparation et l'élaboration de leur projets et soutenances durant la formation.",
17+
url: 'https://openclassrooms.com/'
18+
}
19+
]
20+
</script>
21+
22+
<Section>
23+
<h2>Formation</h2>
24+
<div class="grid">
25+
{#each experiences as experience}
26+
<article>
27+
<div>
28+
<h4>{experience.title}</h4>
29+
<span>• {experience.occupation}</span>
30+
<p>{@html experience.description}</p>
31+
</div>
32+
<span>🔗 - <a href={experience.url} target="_blank">{experience.url}</a></span>
33+
</article>
34+
{/each}
35+
</div>
36+
</Section>
37+
38+
<style>
39+
h2 {
40+
font-family: 'Raleway-Black';
41+
font-size: 3rem;
42+
margin-bottom: 2rem;
43+
}
44+
45+
.grid {
46+
display: grid;
47+
grid-template-columns: repeat(2, 1fr);
48+
gap: 2rem;
49+
}
50+
51+
article {
52+
border-radius: 6px;
53+
box-shadow: 0px 0px 17px -10px rgba(0, 0, 0, 0.2);
54+
padding: 2rem;
55+
display: flex;
56+
flex-direction: column;
57+
justify-content: space-between;
58+
}
59+
60+
h4 {
61+
font-family: 'Raleway-Bold';
62+
display: inline;
63+
}
64+
65+
p {
66+
margin: 2rem 0;
67+
line-height: 1.5rem;
68+
}
69+
70+
a {
71+
color: var(--teal);
72+
font-family: 'Raleway-Bold';
73+
}
74+
75+
@media (max-width: 992px) {
76+
.grid {
77+
grid-template-columns: repeat(1, 1fr);
78+
}
79+
}
80+
81+
@media (max-width: 576px) {
82+
article {
83+
padding: 1rem;
84+
}
85+
}
86+
</style>

‎src/routes/index.svelte

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,10 @@
1-
<h1>Welcome to SvelteKit</h1>
2-
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
1+
<script>
2+
import Layout from '$lib/Layout.svelte'
3+
import Hero from '../lib/Hero.svelte'
4+
import Teaching from '../lib/Teaching.svelte'
5+
</script>
6+
7+
<Layout>
8+
<Hero />
9+
<Teaching />
10+
</Layout>

‎static/styles/global.css

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
2+
13
@font-face {
24
font-family: "Raleway-Regular";
35
src: url("../fonts/Raleway-Regular.ttf");
@@ -14,6 +16,7 @@
1416
}
1517

1618
body {
17-
font-size: 16px;
19+
font-size: 18px;
1820
font-family: "Raleway-Regular";
21+
color: var(--darkBlue);
1922
}

‎static/styles/variables.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:root {
2+
--darkBlue: #2D3748;
3+
--teal: #319795;
4+
}

0 commit comments

Comments
 (0)