first commit
This commit is contained in:
Valentin
commit
2b0f9b67d7
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
|
@ -0,0 +1,95 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Valentin Le Moign — Portfolio</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<h2>Hello! 👋<br>I'm Valentin Le Moign,<br>a graphic designer and front-end developper from France.</h2>
|
||||||
|
<p>As a member of the Paris based collective <a href="https://figureslibres.cc/" target="_blank">Figures Libres</a>, I build custom-made web experiences and visual universes.</p>
|
||||||
|
<p>My keen eye for visuals allows me to translate UI design into production applications, benefiting the artistic direction of any project.</p>
|
||||||
|
<p>I mainly like to work with the <a href="https://nuxt.com/" target="_blank">Nuxt framework</a> and have already used Wordpress and Drupal.<br>I am willing to discover new technologies !</p>
|
||||||
|
<p>I am familiar with Git and Docker, using these daily.<br>I also like to tinkle the server side from time to time.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Selected projects</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<h4>Partition Livre d'Images</h4>
|
||||||
|
<h5>A collaborative frieze to facilitate film studies.</h5>
|
||||||
|
<div>
|
||||||
|
<a href="https://citationslivredimage.huma-num.fr/" target="_blank">Visit Partition Livre d'images</a>
|
||||||
|
</div>
|
||||||
|
<video autoplay loop width="400" poster="./media/images/poster-citation.png">
|
||||||
|
<source src="./media/videos/partition.mp4" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
<p>Laetizia Lusuardi is a cinema researcher at the Sorbonne University. As part as her PHD thesis, she asked me to design and develop a collaborative timeline to list quotations and references in Jean-Luc Godard's film Le Livre d'image. Built with Wordpress, the website allows other researcher to login and submit the references they identified.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4>Érable</h4>
|
||||||
|
<h5>Interface design for a biodiversity research program.</h5>
|
||||||
|
<div>
|
||||||
|
<a href="https://erable.archi.fr/" target="_blank">Visit Érable</a>
|
||||||
|
</div>
|
||||||
|
<video autoplay loop width="400" poster="./media/images/poster-erable.png">
|
||||||
|
<source src="./media/videos/erable.mp4" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
<p>Érable is a government program helping local communities to build storytelling about biodiversity by linking artists and scientists around shared interests. Built with Drupal, the website aims at making these connections easier and report the results of the different actions.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4>Figures Libres</h4>
|
||||||
|
<h5>A design collective with alternative methods.</h5>
|
||||||
|
<div>
|
||||||
|
<a href="https://stage.figureslibres.cc/" target="_blank">Visit Figures Libres</a> [Work in progress]
|
||||||
|
</div>
|
||||||
|
<video autoplay loop width="400" poster="./media/images/poster-figures-libres.png">
|
||||||
|
<source src="./media/videos/figureslibres.mp4" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
<p>Figures Libres is an interactive and graphic design collective focusing on social and cultural missions. Joining them in 2021, I submitted a redesign of the website to improve the navigation and enhance the projects visibility. The website is based on the flatfile CMS Grav.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4>Mahée Auffret</h4>
|
||||||
|
<h5>Showcasing an artist's work without compromising her universe.</h5>
|
||||||
|
<div>
|
||||||
|
<a href="https://mahee-auffret.fr/" target="_blank">Visit Mahée Auffret</a> [Work in progress]
|
||||||
|
</div>
|
||||||
|
<video autoplay loop width="400" poster="./media/images/poster-mahee.png">
|
||||||
|
<source src="./media/videos/mahee.mp4" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
<p>Mahée Auffret is an illustrator and painter with a uniquely soft visual universe. Working on her portfolio I had to pay greater attention to details to make her work stand out. To help her easily manage her content we used the Directus CMS displayed with Nuxt.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4>Résonnances</h4>
|
||||||
|
<h5>Interactivity for a multimedia travel diary.</h5>
|
||||||
|
<div>
|
||||||
|
<a href="https://mehdi-hivert.fr/" target="_blank">Visit Résonnances</a> [For desktop only]
|
||||||
|
</div>
|
||||||
|
<video autoplay loop width="400" poster="./media/images/poster-mehdi.png">
|
||||||
|
<source src="./media/videos/mehdi.mp4" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
<p>Mehdi Hivert is an artist working on the synthetisation of natural sound. I design and developped his diploma dissertation with Jquery, an account of his work halfway between travel diary and mind map. The navigation system is inspired by the Pure Data software interface.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4>Immersion in the screen</h4>
|
||||||
|
<h5>Theoretical reflection on the conditions of image visibility on screen.</h5>
|
||||||
|
<div>
|
||||||
|
<a href="https://demo.valentin-le-moign.eu/immersion-dans-l-ecran/" target="_blank">Visit Immersion dans l'écran</a> [For desktop only]
|
||||||
|
</div>
|
||||||
|
<video autoplay loop width="400" poster="./media/images/poster-immersion.png">
|
||||||
|
<source src="./media/videos/immersion.mp4" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
<p>Writing, layout and integration of my diploma dissertation, raising historical and technical questions about the screen and the way the object gives images to see. Using Jquery I gave a great attention to typographical and layout animations.</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="mailto:valentin_le_moign@figureslibres.io" target="_blank">Send me an email</a>
|
||||||
|
<a href="https://www.instagram.com/valentinlemoign/" target="_blank">Instagram</a>
|
||||||
|
<a href="https://www.linkedin.com/in/valentin-le-moign/" target="_blank">Linkedin</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 629 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 555 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 920 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="19.5" xmlns="http://www.w3.org/2000/svg" height="19.5" id="screenshot-22f7690a-1575-80a9-8003-33ee267dfae5" viewBox="-0.75 -0.75 19.5 19.5" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-22f7690a-1575-80a9-8003-33ee267dfae5" width="24" height="24" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-22f7690a-1575-80a9-8003-33ee2681495a"><g class="fills" id="fills-22f7690a-1575-80a9-8003-33ee2681495a"><path fill="none" stroke-linecap="square" stroke-linejoin="round" rx="0" ry="0" d="M18.000,0.000L18.000,18.000L0.000,18.000L0.000,0.000L18.000,0.000ZZ" style="fill: none;"/></g><g id="strokes-22f7690a-1575-80a9-8003-33ee2681495a" class="strokes"><g class="stroke-shape"><path stroke-linecap="square" stroke-linejoin="round" rx="0" ry="0" d="M18.000,0.000L18.000,18.000L0.000,18.000L0.000,0.000L18.000,0.000ZZ" style="fill: none; stroke-width: 1.5; stroke: rgb(0, 0, 0);"/></g></g></g><g id="shape-22f7690a-1575-80a9-8003-33ee268260c2"><g class="fills" id="fills-22f7690a-1575-80a9-8003-33ee268260c2"><path fill="none" rx="0" ry="0" d="M13.500,9.000C13.500,11.485,11.485,13.500,9.000,13.500C6.515,13.500,4.500,11.485,4.500,9.000C4.500,6.515,6.515,4.500,9.000,4.500C11.485,4.500,13.500,6.515,13.500,9.000ZZ" style="fill: none;"/></g><g id="strokes-22f7690a-1575-80a9-8003-33ee268260c2" class="strokes"><g class="stroke-shape"><path rx="0" ry="0" d="M13.500,9.000C13.500,11.485,11.485,13.500,9.000,13.500C6.515,13.500,4.500,11.485,4.500,9.000C4.500,6.515,6.515,4.500,9.000,4.500C11.485,4.500,13.500,6.515,13.500,9.000ZZ" style="fill: none; stroke-width: 1.5; stroke: rgb(0, 0, 0);"/></g></g></g><g id="shape-22f7690a-1575-80a9-8003-33ee268332d8"><g class="fills" id="fills-22f7690a-1575-80a9-8003-33ee268332d8"><path fill="none" stroke-linecap="square" stroke-linejoin="round" rx="0" ry="0" d="M14.508,3.500L14.508,3.500Z" style="fill: none;"/></g><g id="strokes-22f7690a-1575-80a9-8003-33ee268332d8" class="strokes"><g class="stroke-shape"><path stroke-linecap="square" stroke-linejoin="round" rx="0" ry="0" d="M14.508,3.500L14.508,3.500Z" style="fill: none; stroke-width: 2; stroke: rgb(0, 0, 0);"/></g></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="19.5" xmlns="http://www.w3.org/2000/svg" height="19.5" id="screenshot-22f7690a-1575-80a9-8003-33ee26bb4d19" viewBox="-0.75 -0.75 19.5 19.5" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-22f7690a-1575-80a9-8003-33ee26bb4d19" width="24" height="24" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-22f7690a-1575-80a9-8003-33ee26bc5ce1"><g class="fills" id="fills-22f7690a-1575-80a9-8003-33ee26bc5ce1"><path fill="none" stroke-linejoin="round" rx="0" ry="0" d="M4.000,6.000L4.000,14.000" style="fill: none;"/></g><g id="strokes-22f7690a-1575-80a9-8003-33ee26bc5ce1" class="strokes"><g class="stroke-shape"><path stroke-linejoin="round" rx="0" ry="0" d="M4.000,6.000L4.000,14.000" style="fill: none; stroke-width: 1.5; stroke: rgb(0, 0, 0);"/></g></g></g><g id="shape-22f7690a-1575-80a9-8003-33ee26bde132"><g class="fills" id="fills-22f7690a-1575-80a9-8003-33ee26bde132"><path fill="none" stroke-linejoin="round" rx="0" ry="0" d="M8.000,10.000L8.000,14.000M8.000,10.000C8.000,8.343,9.343,7.000,11.000,7.000C12.657,7.000,14.000,8.343,14.000,10.000L14.000,14.000M8.000,10.000L8.000,6.000" style="fill: none;"/></g><g id="strokes-22f7690a-1575-80a9-8003-33ee26bde132" class="strokes"><g class="stroke-shape"><path stroke-linejoin="round" rx="0" ry="0" d="M8.000,10.000L8.000,14.000M8.000,10.000C8.000,8.343,9.343,7.000,11.000,7.000C12.657,7.000,14.000,8.343,14.000,10.000L14.000,14.000M8.000,10.000L8.000,6.000" style="fill: none; stroke-width: 1.5; stroke: rgb(0, 0, 0);"/></g></g></g><g id="shape-22f7690a-1575-80a9-8003-33ee26bebc8b"><g class="fills" id="fills-22f7690a-1575-80a9-8003-33ee26bebc8b"><path fill="none" stroke-linecap="round" stroke-linejoin="round" rx="0" ry="0" d="M4.008,4.000L4.008,4.000Z" style="fill: none;"/></g><g id="strokes-22f7690a-1575-80a9-8003-33ee26bebc8b" class="strokes"><g class="stroke-shape"><path stroke-linecap="round" stroke-linejoin="round" rx="0" ry="0" d="M4.008,4.000L4.008,4.000Z" style="fill: none; stroke-width: 2; stroke: rgb(0, 0, 0);"/></g></g></g><g id="shape-22f7690a-1575-80a9-8003-33ee26bf189d"><g class="fills" id="fills-22f7690a-1575-80a9-8003-33ee26bf189d"><path fill="none" stroke-linecap="square" stroke-linejoin="round" rx="0" ry="0" d="M18.000,0.000L18.000,18.000L0.000,18.000L0.000,0.000L18.000,0.000ZZ" style="fill: none;"/></g><g id="strokes-22f7690a-1575-80a9-8003-33ee26bf189d" class="strokes"><g class="stroke-shape"><path stroke-linecap="square" stroke-linejoin="round" rx="0" ry="0" d="M18.000,0.000L18.000,18.000L0.000,18.000L0.000,0.000L18.000,0.000ZZ" style="fill: none; stroke-width: 1.5; stroke: rgb(0, 0, 0);"/></g></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="21.5" xmlns="http://www.w3.org/2000/svg" height="18.5" id="screenshot-22f7690a-1575-80a9-8003-33ec66a350f2" viewBox="-0.75 -0.75 21.5 18.5" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-22f7690a-1575-80a9-8003-33ec66a350f2" width="24" height="24" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-22f7690a-1575-80a9-8003-33ec66a6b3cd"><g class="fills" id="fills-22f7690a-1575-80a9-8003-33ec66a6b3cd"><path fill="none" stroke-linejoin="round" rx="0" ry="0" d="M0.000,0.000L20.000,0.000L20.000,17.000L0.000,17.000L0.000,0.000ZZZ" style="fill: none;"/></g><g id="strokes-22f7690a-1575-80a9-8003-33ec66a6b3cd" class="strokes"><g class="stroke-shape"><path stroke-linejoin="round" rx="0" ry="0" d="M0.000,0.000L20.000,0.000L20.000,17.000L0.000,17.000L0.000,0.000ZZZ" style="fill: none; stroke-width: 1.5; stroke: rgb(0, 0, 0);"/></g></g></g><g id="shape-22f7690a-1575-80a9-8003-33ec66a786f2"><g class="fills" id="fills-22f7690a-1575-80a9-8003-33ec66a786f2"><path fill="none" rx="0" ry="0" d="M0.000,3.500L10.000,8.500L20.000,3.500" style="fill: none;"/></g><g id="strokes-22f7690a-1575-80a9-8003-33ec66a786f2" class="strokes"><g class="stroke-shape"><path rx="0" ry="0" d="M0.000,3.500L10.000,8.500L20.000,3.500" style="fill: none; stroke-width: 1.5; stroke: rgb(0, 0, 0);"/></g></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,135 @@
|
||||||
|
/* RESET */
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
*, *:before, *:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:visited, a:focus, a:active {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FONTS */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Aeonik';
|
||||||
|
src: url('./fonts/AeonikPro-Regular.woff') format('woff')
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CASCADE */
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Aeonik', Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
margin-top: 10vh;
|
||||||
|
margin-bottom: 10vh;
|
||||||
|
background-color: #eee;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > div:first-of-type {
|
||||||
|
margin-bottom: 6vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > div:first-of-type p {
|
||||||
|
margin-bottom: 2vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > div:first-of-type p:first-of-type {
|
||||||
|
margin-top: 4vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
margin-top: 2.5vh;
|
||||||
|
margin-bottom: 2.5vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > div:last-of-type {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-top: 8vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
li > div {
|
||||||
|
margin-top: 0.3rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
li > div > a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > div:last-of-type {
|
||||||
|
margin-top: 12vh;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 960px) {
|
||||||
|
body {
|
||||||
|
margin-left: 25vw;
|
||||||
|
width: 50vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:first-of-type p {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:nth-child(even) {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue