Skip to content

Commit 249fafb

Browse files
author
benpaquier
committed
References
1 parent 5a8541d commit 249fafb

27 files changed

+879
-88
lines changed

‎package-lock.json

+673-53
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,8 @@
2121
"svelte": "^3.44.0",
2222
"vite": "^3.0.0"
2323
},
24-
"type": "module"
24+
"type": "module",
25+
"dependencies": {
26+
"vite-imagetools": "^4.0.4"
27+
}
2528
}

‎src/lib/assets/images/contact.jpg

7.49 MB
Loading

‎src/lib/assets/images/koolicar.png

233 KB
Loading

‎src/lib/assets/images/koolicare.png

825 KB
Loading

‎src/lib/assets/images/lyrebird.png

195 KB
Loading

‎src/lib/assets/images/nink.png

505 KB
Loading

‎src/lib/assets/images/paye-ta-pinte.png

5 MB
Loading

‎src/lib/assets/images/usewalter.jpeg

258 KB
Loading

‎src/lib/assets/images/viens-la.png

1.68 MB
Loading

‎src/lib/assets/images/volume7.png

2.03 MB
Loading

‎src/lib/assets/images/vuse.png

1.83 MB
Loading

‎src/lib/assets/images/yapouni.jpeg

592 KB
Loading

‎src/lib/assets/images/yse.jpeg

183 KB
Loading

‎src/lib/Contact.svelte ‎src/lib/components/Contact.svelte

+13-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script>
2-
import Section from './Section.svelte'
2+
import Section from '$lib/components/Section.svelte'
3+
import contactImg from '$lib/assets/images/contact.jpg?width=500&webp'
34
</script>
45

56
<Section>
@@ -23,22 +24,24 @@
2324
</ul>
2425
</div>
2526
<div class="grid-item">
26-
<picture>
27+
<img
28+
alt="Benoit Paquier"
29+
loading="lazy"
30+
decoding="async"
31+
width="300"
32+
height="388"
33+
src={contactImg}
34+
/>
35+
<!-- <picture>
2736
<source srcset="/images/contact/contact.webp" type="image/webp" />
2837
<source srcset="/images/contact/contact.jpeg" type="image/jpeg" />
2938
<img src="/images/contact/contact.jpeg" alt="Benoit Paquier" width="300" height="388" />
30-
</picture>
39+
</picture> -->
3140
</div>
3241
</div>
3342
</Section>
3443

3544
<style>
36-
h3 {
37-
font-family: 'Raleway-Black', sans-serif;
38-
font-size: 3rem;
39-
margin-bottom: 2rem;
40-
}
41-
4245
.grid {
4346
display: flex;
4447
width: 640px;
@@ -62,7 +65,7 @@
6265
}
6366
6467
img {
65-
width: 300px;
68+
/* width: 300px; */
6669
filter: grayscale(0.8);
6770
transition: filter 2s;
6871
box-shadow: 20px 20px 0px 4px var(--darkBlue);

‎src/lib/Container.svelte ‎src/lib/components/Container.svelte

File renamed without changes.

‎src/lib/Hero.svelte ‎src/lib/components/Hero.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import Section from './Section.svelte'
2+
import Section from '$lib/components/Section.svelte'
33
</script>
44

55
<Section>

‎src/lib/components/Project.svelte

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<script>
2+
export let src, alt, width, height, title, link
3+
4+
let hoverClass = ''
5+
6+
const onMouseEnter = () => {
7+
hoverClass = 'active'
8+
}
9+
10+
const onMouseLeave = () => {
11+
hoverClass = ''
12+
}
13+
</script>
14+
15+
<a href={link} target="_blank">
16+
<article class={hoverClass} on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave}>
17+
<img {alt} loading="lazy" decoding="async" {width} {height} {src} />
18+
<h5>{title}</h5>
19+
</article>
20+
</a>
21+
22+
<style>
23+
a {
24+
text-decoration: none;
25+
}
26+
27+
article {
28+
position: relative;
29+
width: 368px;
30+
height: 368px;
31+
display: flex;
32+
align-items: flex-end;
33+
border-radius: 6px;
34+
box-shadow: 0px 0px 17px -10px rgba(0, 0, 0, 0.2);
35+
overflow: hidden;
36+
}
37+
38+
article img {
39+
position: absolute;
40+
width: 100%;
41+
height: 100%;
42+
transition: all 0.5s ease-out 0s;
43+
}
44+
45+
article.active img {
46+
transform: scale(1.1);
47+
}
48+
49+
h5 {
50+
color: white;
51+
font-family: 'Raleway-Bold';
52+
z-index: 2;
53+
padding-left: 1rem;
54+
padding-bottom: 1rem;
55+
opacity: 0;
56+
transition: all 0.5s ease-out 0s;
57+
}
58+
59+
article.active h5 {
60+
opacity: 1;
61+
}
62+
</style>

‎src/lib/components/Projects.svelte

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<script>
2+
import Section from '$lib/components/Section.svelte'
3+
import Project from '$lib/components/Project.svelte'
4+
5+
// images
6+
import usewalter from '$lib/assets/images/usewalter.jpeg?width=500&height=500&webp'
7+
import vuse from '$lib/assets/images/vuse.png?width=500&height=500&webp'
8+
import volume7 from '$lib/assets/images/volume7.png?width=500&height=500&webp'
9+
import yapouni from '$lib/assets/images/yapouni.jpeg?width=500&height=500&webp'
10+
import yse from '$lib/assets/images/yse.jpeg?width=500&height=500&webp'
11+
import nink from '$lib/assets/images/nink.png?width=500&height=500&webp'
12+
import lyrebird from '$lib/assets/images/lyrebird.png?width=500&height=500&webp'
13+
import viensla from '$lib/assets/images/viens-la.png?width=500&height=500&webp'
14+
import koolicar from '$lib/assets/images/koolicare.png?width=500&height=500&webp'
15+
import ptp from '$lib/assets/images/paye-ta-pinte.png?width=500&height=500&webp'
16+
17+
const width = 368
18+
const height = 368
19+
</script>
20+
21+
<Section>
22+
<h3>Références</h3>
23+
<div class="grid">
24+
<Project
25+
src={usewalter}
26+
{width}
27+
{height}
28+
alt="Usewalter"
29+
title="Usewalter"
30+
link="https://usewalter.com/"
31+
/>
32+
<Project
33+
src={vuse}
34+
{width}
35+
{height}
36+
alt="Vuse.com"
37+
title="Vuse.com"
38+
link="https://www.vuse.com/ca/en/"
39+
/>
40+
<Project
41+
src={volume7}
42+
{width}
43+
{height}
44+
alt="Volume7"
45+
title="Volume7"
46+
link="https://volume7.io/"
47+
/>
48+
<Project
49+
src={yapouni}
50+
{width}
51+
{height}
52+
alt="Yapouni"
53+
title="Yapouni"
54+
link="https://yapouni.com/"
55+
/>
56+
<Project
57+
src={yse}
58+
{width}
59+
{height}
60+
alt="Ysé Paris"
61+
title="Ysé Paris"
62+
link="https://yse-paris.com/"
63+
/>
64+
<Project src={nink} {width} {height} alt="Nink" title="Nink" link="https://nink.netlify.app/" />
65+
<Project
66+
src={lyrebird}
67+
{width}
68+
{height}
69+
alt="Lyrebird"
70+
title="Lyrebird"
71+
link="https://www.descript.com/overdub?lyrebird=true"
72+
/>
73+
<Project
74+
src={viensla}
75+
{width}
76+
{height}
77+
alt="Viens-la"
78+
title="Viens-la"
79+
link="https://viens-la.com/"
80+
/>
81+
<Project
82+
src={koolicar}
83+
{width}
84+
{height}
85+
alt="Koolicar"
86+
title="Koolicar"
87+
link="https://www.openfleet.com/"
88+
/>
89+
<Project
90+
src={ptp}
91+
{width}
92+
{height}
93+
alt="Paye ta pinte"
94+
title="Paye ta pinte"
95+
link="https://www.behance.net/gallery/28324731/Paye-Ta-Pinte-MOBILE-APP?fbclid=IwAR110DYxld2j7nK2ZA3WqM1dP7bcYNEv_5kEsKQ2sd-ebkrDxUKw_3_6Pxc"
96+
/>
97+
</div>
98+
</Section>
99+
100+
<style>
101+
.grid {
102+
display: grid;
103+
grid-template-columns: repeat(3, 1fr);
104+
gap: 2rem;
105+
}
106+
</style>

‎src/lib/Section.svelte ‎src/lib/components/Section.svelte

File renamed without changes.

‎src/lib/Services.svelte ‎src/lib/components/Services.svelte

+1-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import Section from './Section.svelte'
2+
import Section from '$lib/components/Section.svelte'
33
44
const mainExperiences = [
55
{
@@ -62,12 +62,6 @@
6262
</Section>
6363

6464
<style>
65-
h3 {
66-
font-family: 'Raleway-Black', sans-serif;
67-
font-size: 3rem;
68-
margin-bottom: 2rem;
69-
}
70-
7165
.grid-1 {
7266
display: grid;
7367
grid-template-columns: repeat(2, 1fr);

‎src/lib/Teaching.svelte ‎src/lib/components/Teaching.svelte

+1-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import Section from './Section.svelte'
2+
import Section from '$lib/components/Section.svelte'
33
44
const experiences = [
55
{
@@ -36,12 +36,6 @@
3636
</Section>
3737

3838
<style>
39-
h3 {
40-
font-family: 'Raleway-Black', sans-serif;
41-
font-size: 3rem;
42-
margin-bottom: 2rem;
43-
}
44-
4539
.grid {
4640
display: grid;
4741
grid-template-columns: repeat(2, 1fr);

‎src/routes/index.svelte

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<script>
2-
import Container from '$lib/Container.svelte'
3-
import Contact from '../lib/Contact.svelte'
4-
import Hero from '../lib/Hero.svelte'
5-
import Services from '../lib/Services.svelte'
6-
import Teaching from '../lib/Teaching.svelte'
2+
import Container from '$lib/components/Container.svelte'
3+
import Contact from '$lib/components/Contact.svelte'
4+
import Hero from '$lib/components/Hero.svelte'
5+
import Services from '$lib/components/Services.svelte'
6+
import Teaching from '$lib/components/Teaching.svelte'
7+
import Projects from '../lib/components/Projects.svelte'
78
</script>
89

910
<main>
1011
<Container>
1112
<Hero />
1213
<Teaching />
14+
<Projects />
1315
<Services />
1416
<Contact />
1517
</Container>

‎static/images/contact/contact.jpeg

-13.4 KB
Binary file not shown.

‎static/images/contact/contact.webp

-7.87 KB
Binary file not shown.

‎static/styles/global.css

+6
Original file line numberDiff line numberDiff line change
@@ -88,4 +88,10 @@ body {
8888

8989
main {
9090
background-color: white;
91+
}
92+
93+
h3 {
94+
font-family: 'Raleway-Black', sans-serif;
95+
font-size: 3rem;
96+
margin-bottom: 2rem;
9197
}

‎vite.config.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { sveltekit } from '@sveltejs/kit/vite';
1+
import { sveltekit } from '@sveltejs/kit/vite'
2+
import { imagetools } from 'vite-imagetools'
23

34
/** @type {import('vite').UserConfig} */
45
const config = {
5-
plugins: [sveltekit()]
6-
};
6+
plugins: [imagetools(), sveltekit()]
7+
}
78

8-
export default config;
9+
export default config

0 commit comments

Comments
 (0)