NuxtJS, Vue, real web app Nuxt content: blog Better mobile/responsive design and practices Better practices overall
This commit is contained in:
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtRouteAnnouncer />
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,39 @@
|
||||
h1, h2, h3, h4, h5, h6, p, a, input[type=text], ul, li, strong {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-style: normal;
|
||||
}
|
||||
h1 {
|
||||
font-weight: 600;
|
||||
}
|
||||
h2 {
|
||||
font-weight: 500;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 300;
|
||||
}
|
||||
p {
|
||||
font-weight: normal;
|
||||
}
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: grey;
|
||||
}
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: grey;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
color: #536878;
|
||||
}
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
color: grey;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1113.48 400">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #e95420;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: #fff;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="m381.86,354.01c-11.69,0-21.64-1.78-29.85-5.33-8.22-3.56-14.86-8.47-19.94-14.74-5.08-6.26-8.77-13.59-11.05-21.98-2.29-8.38-3.43-17.4-3.43-27.06v-110.77h17.28v108.49c0,9.65,1.14,18,3.43,25.03,2.29,7.03,5.46,12.83,9.53,17.4,4.06,4.57,8.98,7.96,14.74,10.16,5.76,2.21,12.2,3.3,19.31,3.3s13.55-1.1,19.31-3.3c5.76-2.2,10.67-5.59,14.74-10.16,4.07-4.57,7.24-10.37,9.53-17.4,2.29-7.03,3.43-15.37,3.43-25.03v-108.49h17.28v110.77c0,9.66-1.14,18.67-3.43,27.06-2.29,8.38-5.97,15.71-11.05,21.98-5.08,6.27-11.73,11.18-19.94,14.74-8.22,3.56-18.17,5.33-29.85,5.33Z"/>
|
||||
<path d="m500.61,226.73c2.88-2.2,7.49-4.53,13.85-6.99,6.35-2.45,13.85-3.68,22.48-3.68,9.48,0,17.91,1.69,25.28,5.08,7.37,3.39,13.59,8.13,18.67,14.23,5.08,6.1,8.93,13.34,11.56,21.72,2.62,8.38,3.94,17.57,3.94,27.56,0,10.67-1.57,20.24-4.7,28.71-3.14,8.47-7.54,15.67-13.21,21.59-5.68,5.93-12.45,10.46-20.33,13.59-7.88,3.13-16.64,4.7-26.3,4.7-11.69,0-21.34-.76-28.96-2.29-7.62-1.52-13.89-3.13-18.8-4.83v-190.04l16.51-3.05v73.68Zm0,107.98c2.54.85,6.31,1.65,11.31,2.41,4.99.76,11.56,1.14,19.69,1.14,14.23,0,25.66-4.61,34.3-13.85,8.64-9.23,12.96-22.48,12.96-39.76,0-7.28-.76-14.18-2.29-20.71-1.52-6.52-3.98-12.2-7.37-17.02-3.39-4.83-7.84-8.68-13.34-11.56-5.51-2.88-12.32-4.32-20.45-4.32-3.9,0-7.62.38-11.18,1.14-3.56.76-6.86,1.74-9.91,2.92-3.05,1.19-5.72,2.46-8,3.81-2.29,1.36-4.19,2.63-5.72,3.81v91.97Z"/>
|
||||
<path d="m726.96,345.63c-4.91,1.36-11.52,2.88-19.82,4.57-8.3,1.69-18.46,2.54-30.49,2.54-9.83,0-18.04-1.44-24.64-4.32-6.61-2.88-11.94-6.94-16.01-12.2-4.06-5.25-6.99-11.6-8.76-19.05-1.78-7.45-2.67-15.67-2.67-24.64v-73.68h16.51v68.34c0,9.32.68,17.19,2.03,23.63,1.35,6.44,3.56,11.65,6.61,15.62,3.05,3.98,6.99,6.86,11.81,8.64,4.83,1.78,10.71,2.67,17.66,2.67,7.79,0,14.56-.42,20.33-1.27,5.76-.85,9.4-1.61,10.92-2.29v-115.35h16.51v126.78Z"/>
|
||||
<path d="m763.38,223.43c4.91-1.35,11.52-2.88,19.82-4.57,8.3-1.69,18.46-2.54,30.49-2.54,9.99,0,18.33,1.44,25.03,4.32,6.69,2.88,12.02,6.99,16.01,12.32,3.98,5.34,6.82,11.73,8.51,19.18,1.69,7.46,2.54,15.67,2.54,24.64v73.42h-16.51v-68.09c0-9.31-.64-17.19-1.91-23.63-1.27-6.44-3.39-11.69-6.35-15.75-2.96-4.06-6.86-6.99-11.69-8.77-4.83-1.78-10.88-2.67-18.17-2.67-7.79,0-14.53.43-20.2,1.27-5.68.85-9.36,1.61-11.05,2.29v115.34h-16.51v-126.78Z"/>
|
||||
<path d="m916.61,218.85h52.34v13.97h-52.34v69.87c0,7.46.63,13.51,1.91,18.17,1.27,4.66,3.09,8.26,5.46,10.8,2.37,2.54,5.25,4.24,8.64,5.08,3.39.85,7.11,1.27,11.18,1.27,6.94,0,12.53-.8,16.77-2.41,4.23-1.61,7.53-3.09,9.91-4.45l4.07,13.72c-2.37,1.52-6.52,3.26-12.45,5.21-5.93,1.95-12.37,2.92-19.31,2.92-8.13,0-14.95-1.06-20.45-3.18-5.51-2.12-9.91-5.34-13.21-9.65s-5.63-9.69-6.99-16.13c-1.36-6.44-2.03-14.06-2.03-22.87v-120.94l16.51-3.05v41.67Z"/>
|
||||
<path d="m1094.4,345.63c-4.91,1.36-11.52,2.88-19.82,4.57-8.3,1.69-18.46,2.54-30.49,2.54-9.83,0-18.04-1.44-24.64-4.32-6.61-2.88-11.94-6.94-16.01-12.2-4.06-5.25-6.99-11.6-8.76-19.05-1.78-7.45-2.67-15.67-2.67-24.64v-73.68h16.51v68.34c0,9.32.68,17.19,2.03,23.63,1.35,6.44,3.56,11.65,6.61,15.62,3.05,3.98,6.99,6.86,11.81,8.64,4.83,1.78,10.71,2.67,17.66,2.67,7.79,0,14.56-.42,20.33-1.27,5.76-.85,9.4-1.61,10.92-2.29v-115.35h16.51v126.78Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="m346.66,131.23c-4.32,0-8.34-.78-12.05-2.32-3.71-1.55-6.94-3.81-9.68-6.78-2.74-2.97-4.9-6.63-6.48-10.98-1.58-4.36-2.37-9.34-2.37-14.95s.85-10.6,2.56-14.95c1.71-4.36,3.98-8.02,6.82-10.99,2.84-2.97,6.13-5.21,9.87-6.73,3.74-1.52,7.65-2.27,11.71-2.27,2.52,0,4.81.16,6.87.48,2.06.32,3.87.73,5.42,1.21,1.55.48,2.87.97,3.97,1.45,1.1.48,1.94.92,2.52,1.31l-2.13,5.71c-1.61-.97-3.66-1.92-6.15-2.86-2.48-.94-5.56-1.4-9.24-1.4-4.19,0-7.86.71-10.98,2.13-3.13,1.42-5.76,3.42-7.89,6-2.13,2.58-3.73,5.65-4.79,9.2-1.06,3.55-1.6,7.48-1.6,11.81s.53,8.47,1.6,12.05c1.06,3.58,2.63,6.63,4.69,9.15,2.06,2.52,4.6,4.45,7.6,5.81,3,1.36,6.44,2.03,10.31,2.03,4.26,0,7.82-.4,10.69-1.21,2.87-.8,5.05-1.63,6.53-2.47l1.84,5.61c-.45.32-1.23.69-2.32,1.11-1.1.42-2.48.86-4.16,1.31-1.68.45-3.61.82-5.81,1.11-2.19.29-4.65.44-7.36.44Z"/>
|
||||
<path d="m391.44,78.58c3.29,0,6.08.47,8.37,1.4,2.29.94,4.15,2.23,5.57,3.87,1.42,1.64,2.45,3.6,3.1,5.86.64,2.26.97,4.71.97,7.36v31.55c-.65.19-1.58.4-2.81.63-1.23.23-2.65.47-4.26.72-1.61.26-3.4.47-5.37.63-1.97.16-3.98.24-6.05.24-2.65,0-5.08-.29-7.31-.87-2.23-.58-4.16-1.5-5.81-2.76-1.65-1.26-2.94-2.87-3.87-4.84-.94-1.97-1.4-4.37-1.4-7.21s.52-5.03,1.55-6.97c1.03-1.94,2.48-3.53,4.36-4.79,1.87-1.26,4.1-2.18,6.68-2.76,2.58-.58,5.39-.87,8.42-.87.9,0,1.85.05,2.85.15,1,.1,1.97.23,2.9.39.93.16,1.74.32,2.42.48.68.16,1.15.31,1.4.44v-3.1c0-1.74-.13-3.44-.39-5.08-.26-1.64-.82-3.13-1.69-4.45s-2.1-2.39-3.68-3.2c-1.58-.8-3.66-1.21-6.24-1.21-3.68,0-6.42.26-8.23.77-1.81.52-3.13.94-3.97,1.26l-.87-5.52c1.1-.52,2.79-1,5.08-1.45,2.29-.45,5.05-.68,8.28-.68Zm.58,46.65c2.45,0,4.6-.08,6.44-.24,1.84-.16,3.4-.37,4.69-.63v-17.62c-.71-.32-1.84-.66-3.39-1.02-1.55-.35-3.68-.53-6.39-.53-1.55,0-3.16.11-4.84.34-1.68.23-3.23.71-4.65,1.45-1.42.74-2.58,1.76-3.48,3.05-.9,1.29-1.35,3-1.35,5.13,0,1.87.31,3.45.92,4.74.61,1.29,1.48,2.32,2.61,3.1,1.13.78,2.48,1.34,4.06,1.7,1.58.36,3.37.53,5.37.53Z"/>
|
||||
<path d="m423.03,81.48c1.87-.52,4.39-1.1,7.55-1.74,3.16-.64,7.03-.97,11.61-.97,3.81,0,6.98.55,9.53,1.64,2.55,1.1,4.58,2.66,6.1,4.7,1.52,2.03,2.6,4.47,3.24,7.31.64,2.84.97,5.97.97,9.39v27.97h-6.29v-25.94c0-3.55-.24-6.55-.73-9-.48-2.45-1.29-4.45-2.42-6-1.13-1.55-2.61-2.66-4.45-3.34-1.84-.68-4.15-1.02-6.92-1.02-2.97,0-5.53.16-7.69.48-2.16.32-3.57.62-4.21.87v43.94h-6.29v-48.3Z"/>
|
||||
<path d="m518.5,104.81c0,3.94-.57,7.52-1.69,10.74-1.13,3.23-2.71,5.97-4.74,8.23-2.03,2.26-4.44,4.02-7.21,5.28-2.77,1.26-5.84,1.89-9.19,1.89s-6.42-.63-9.19-1.89c-2.77-1.26-5.18-3.02-7.21-5.28-2.03-2.26-3.61-5-4.74-8.23-1.13-3.23-1.69-6.81-1.69-10.74s.56-7.52,1.69-10.74c1.13-3.23,2.71-5.98,4.74-8.28,2.03-2.29,4.44-4.07,7.21-5.32,2.77-1.26,5.84-1.89,9.19-1.89s6.42.63,9.19,1.89c2.77,1.26,5.18,3.03,7.21,5.32,2.03,2.29,3.61,5.05,4.74,8.28,1.13,3.23,1.69,6.81,1.69,10.74Zm-6.68,0c0-6.26-1.45-11.24-4.36-14.95-2.9-3.71-6.84-5.56-11.81-5.56s-8.9,1.86-11.81,5.56c-2.9,3.71-4.36,8.7-4.36,14.95s1.45,11.23,4.36,14.91c2.9,3.68,6.84,5.52,11.81,5.52s8.9-1.84,11.81-5.52c2.9-3.68,4.36-8.65,4.36-14.91Z"/>
|
||||
<path d="m529.83,81.48c1.87-.52,4.39-1.1,7.55-1.74,3.16-.64,7.03-.97,11.61-.97,3.81,0,6.98.55,9.53,1.64,2.55,1.1,4.58,2.66,6.1,4.7,1.52,2.03,2.6,4.47,3.24,7.31.64,2.84.97,5.97.97,9.39v27.97h-6.29v-25.94c0-3.55-.24-6.55-.73-9-.48-2.45-1.29-4.45-2.42-6-1.13-1.55-2.61-2.66-4.45-3.34-1.84-.68-4.15-1.02-6.92-1.02-2.97,0-5.53.16-7.69.48-2.16.32-3.57.62-4.21.87v43.94h-6.29v-48.3Z"/>
|
||||
<path d="m589.91,64.64c0,1.48-.45,2.66-1.35,3.53-.9.87-2,1.31-3.29,1.31s-2.39-.44-3.29-1.31c-.9-.87-1.35-2.05-1.35-3.53s.45-2.66,1.35-3.53c.9-.87,2-1.31,3.29-1.31s2.39.44,3.29,1.31c.9.87,1.35,2.05,1.35,3.53Zm-1.45,65.14h-6.29v-50.04h6.29v50.04Z"/>
|
||||
<path d="m623.21,130.85c-3.87,0-7.29-.61-10.26-1.84-2.97-1.22-5.44-2.98-7.4-5.28-1.97-2.29-3.47-5.03-4.5-8.23-1.03-3.19-1.55-6.73-1.55-10.6s.53-7.52,1.6-10.74c1.07-3.22,2.6-6,4.6-8.32,2-2.32,4.42-4.11,7.26-5.37,2.84-1.26,6.03-1.89,9.58-1.89,2.71,0,5.24.23,7.6.68,2.35.45,4.18,1.03,5.47,1.74l-1.65,5.42c-1.29-.64-2.74-1.16-4.36-1.55-1.61-.39-3.77-.58-6.48-.58-5.55,0-9.76,1.79-12.63,5.37-2.87,3.58-4.31,8.66-4.31,15.24,0,2.97.32,5.7.97,8.18.64,2.48,1.69,4.61,3.15,6.39,1.45,1.78,3.32,3.16,5.61,4.16,2.29,1,5.08,1.5,8.37,1.5,2.71,0,4.98-.31,6.82-.92s3.18-1.14,4.02-1.6l1.36,5.42c-1.16.65-2.99,1.28-5.47,1.89-2.48.61-5.08.92-7.79.92Z"/>
|
||||
<path d="m661.08,78.58c3.29,0,6.08.47,8.37,1.4,2.29.94,4.14,2.23,5.56,3.87,1.42,1.64,2.45,3.6,3.1,5.86.64,2.26.97,4.71.97,7.36v31.55c-.65.19-1.58.4-2.81.63-1.23.23-2.65.47-4.26.72-1.61.26-3.4.47-5.37.63-1.97.16-3.98.24-6.05.24-2.65,0-5.08-.29-7.31-.87-2.23-.58-4.16-1.5-5.81-2.76s-2.94-2.87-3.87-4.84c-.94-1.97-1.4-4.37-1.4-7.21s.52-5.03,1.55-6.97c1.03-1.94,2.48-3.53,4.36-4.79,1.87-1.26,4.1-2.18,6.68-2.76,2.58-.58,5.39-.87,8.42-.87.9,0,1.85.05,2.86.15,1,.1,1.97.23,2.9.39.93.16,1.74.32,2.42.48.68.16,1.14.31,1.4.44v-3.1c0-1.74-.13-3.44-.39-5.08-.26-1.64-.82-3.13-1.69-4.45s-2.1-2.39-3.68-3.2c-1.58-.8-3.66-1.21-6.24-1.21-3.68,0-6.42.26-8.23.77-1.81.52-3.13.94-3.97,1.26l-.87-5.52c1.1-.52,2.79-1,5.08-1.45,2.29-.45,5.05-.68,8.28-.68Zm.58,46.65c2.45,0,4.6-.08,6.44-.24,1.84-.16,3.4-.37,4.69-.63v-17.62c-.71-.32-1.84-.66-3.39-1.02-1.55-.35-3.68-.53-6.39-.53-1.55,0-3.16.11-4.84.34-1.68.23-3.23.71-4.65,1.45-1.42.74-2.58,1.76-3.48,3.05-.9,1.29-1.35,3-1.35,5.13,0,1.87.3,3.45.92,4.74.61,1.29,1.48,2.32,2.61,3.1,1.13.78,2.48,1.34,4.07,1.7,1.58.36,3.37.53,5.37.53Z"/>
|
||||
<path d="m705.23,130.65c-2.13-.06-3.99-.34-5.57-.82-1.58-.48-2.9-1.22-3.97-2.23-1.06-1-1.87-2.29-2.42-3.87-.55-1.58-.82-3.56-.82-5.95v-61.94l6.29-1.16v62.91c0,1.55.15,2.79.44,3.73.29.94.73,1.68,1.31,2.23.58.55,1.34.95,2.27,1.21.93.26,2.05.48,3.34.68l-.87,5.23Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect class="cls-2" width="254.06" height="400"/>
|
||||
<rect class="cls-1" x="30.25" y="169.38" width="193.57" height="193.57"/>
|
||||
<circle class="cls-3" cx="58.09" cy="255.92" r="26.3"/>
|
||||
<circle class="cls-3" cx="167.63" cy="198.25" r="26.3"/>
|
||||
<path class="cls-3" d="m117.41,323.62c-18.95-4.06-34.78-16.16-43.68-33.32-7.01,3.19-14.9,4.16-22.49,2.76,10.77,26.45,33.61,45.66,61.65,51.67,6.15,1.32,12.42,1.96,18.68,1.92-4.83-6.35-7.52-14.01-7.7-21.99-2.17-.24-4.33-.59-6.45-1.05Z"/>
|
||||
<circle class="cls-3" cx="161.71" cy="323.76" r="26.3"/>
|
||||
<path class="cls-3" d="m198.31,314.1c8.18-10.31,13.94-22.5,16.71-35.45,4.84-22.59.32-46.29-12.4-65.51-3.03,7.14-8.17,13.17-14.79,17.32,7.1,13.38,9.26,28.82,6.08,43.67-1.56,7.27-4.31,14.12-8.18,20.38,6.19,5.08,10.56,11.91,12.59,19.6Z"/>
|
||||
<path class="cls-3" d="m56.06,218.2c.67-.04,1.34-.05,2-.05,2.66,0,5.31.28,7.94.85,4.29.92,8.32,2.54,12.01,4.84,11.84-17.03,30.95-27.25,51.65-27.63.11-1.99.38-3.97.79-5.92,1.21-5.63,3.67-10.9,7.19-15.41-33.08-2.62-65.22,14.45-81.59,43.33Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.9 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="144" height="121" viewBox="0 0 144 121" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M73.7789 120.162C64.1122 120.162 55.5062 118.844 47.9607 116.208C40.4153 113.602 34.0365 109.768 28.8243 104.708C23.6122 99.6773 19.6425 93.5258 16.9152 86.2531C14.188 78.9804 12.8243 70.7076 12.8243 61.4349C12.8243 52.2834 14.188 43.9804 16.9152 36.5258C19.6728 29.0713 23.688 22.6773 28.9607 17.344C34.2334 11.9804 40.6728 7.85916 48.2789 4.98037C55.9153 2.10158 64.6122 0.662186 74.3698 0.662186C83.4001 0.662186 91.4607 1.98037 98.5516 4.61674C105.673 7.2531 111.703 11.0107 116.643 15.8895C121.612 20.7379 125.385 26.5107 127.961 33.2076C130.567 39.8743 131.855 47.2531 131.824 55.344C131.855 60.9198 131.37 66.041 130.37 70.7076C129.37 75.3743 127.794 79.4501 125.643 82.9349C123.521 86.3895 120.733 89.1319 117.279 91.1622C113.824 93.1622 109.643 94.2986 104.733 94.5713C101.218 94.844 98.3698 94.5864 96.188 93.7986C94.0062 93.0107 92.3395 91.844 91.188 90.2986C90.0668 88.7228 89.3395 86.8895 89.0062 84.7986H88.4607C87.7334 86.6167 86.3092 88.2682 84.188 89.7531C82.0668 91.2076 79.4759 92.344 76.4153 93.1622C73.3849 93.9501 70.1577 94.2379 66.7334 94.0258C63.1577 93.8137 59.7637 92.9804 56.5516 91.5258C53.3698 90.0713 50.5365 87.9652 48.0516 85.2076C45.5971 82.4501 43.6577 79.041 42.2334 74.9804C40.8395 70.9198 40.1274 66.2228 40.0971 60.8895C40.1274 55.6167 40.8698 51.0258 42.3243 47.1167C43.8092 43.2076 45.7637 39.9198 48.188 37.2531C50.6425 34.5864 53.3698 32.4955 56.3698 30.9804C59.3698 29.4652 62.3849 28.4955 65.4153 28.0713C68.8395 27.5561 72.0819 27.5561 75.1425 28.0713C78.2031 28.5864 80.7789 29.4198 82.8698 30.5713C84.991 31.7228 86.3092 32.9652 86.8243 34.2986H87.4607V29.2076H101.688V73.5713C101.718 75.6622 102.188 77.2834 103.097 78.4349C104.006 79.5864 105.233 80.1622 106.779 80.1622C108.87 80.1622 110.612 79.238 112.006 77.3895C113.43 75.541 114.491 72.7076 115.188 68.8895C115.915 65.0713 116.279 60.2076 116.279 54.2986C116.279 48.6016 115.521 43.6016 114.006 39.2986C112.521 34.9652 110.43 31.2834 107.733 28.2531C105.067 25.1925 101.961 22.7076 98.4153 20.7986C94.8698 18.8895 91.0213 17.4955 86.8698 16.6167C82.7486 15.7379 78.5062 15.2986 74.1425 15.2986C66.5971 15.2986 60.0062 16.4501 54.3698 18.7531C48.7334 21.0258 44.0365 24.2228 40.2789 28.344C36.5213 32.4652 33.7031 37.2986 31.8243 42.844C29.9759 48.3592 29.0365 54.3743 29.0062 60.8895C29.0365 68.0713 30.0365 74.4349 32.0062 79.9804C34.0062 85.4955 36.9456 90.1319 40.8243 93.8895C44.7031 97.647 49.491 100.496 55.188 102.435C60.8849 104.374 67.4304 105.344 74.8243 105.344C78.3092 105.344 81.7183 105.086 85.0516 104.571C88.3849 104.086 91.4001 103.48 94.0971 102.753C96.794 102.056 98.9607 101.374 100.597 100.708L105.097 113.889C103.188 114.98 100.597 115.996 97.3243 116.935C94.0819 117.905 90.4153 118.677 86.3243 119.253C82.2637 119.859 78.0819 120.162 73.7789 120.162ZM71.688 79.0713C75.385 79.0713 78.3243 78.3592 80.5062 76.9349C82.7183 75.5107 84.294 73.4046 85.2334 70.6167C86.2031 67.7986 86.6577 64.3289 86.5971 60.2076C86.5668 56.5713 86.0971 53.4955 85.188 50.9804C84.3092 48.4349 82.7789 46.5107 80.5971 45.2076C78.4456 43.8743 75.4456 43.2076 71.5971 43.2076C68.2334 43.2076 65.3698 43.9198 63.0062 45.344C60.6728 46.7683 58.8849 48.7683 57.6425 51.344C56.4304 53.8895 55.8092 56.8895 55.7789 60.344C55.8092 63.5561 56.3243 66.6016 57.3243 69.4804C58.3243 72.3289 59.9759 74.647 62.2789 76.4349C64.5819 78.1925 67.7183 79.0713 71.688 79.0713Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,40 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="2048"
|
||||
height="2048"
|
||||
viewBox="0 0 2048 2048"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="fluent-mdl2_blog.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="0.36767578"
|
||||
inkscape:cx="847.21381"
|
||||
inkscape:cy="977.76361"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="959"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg1" />
|
||||
<path
|
||||
d="M 1798.6826,279.55076 V 1442.2997 H 801.7162 L 442.1421,1801.8738 V 1442.2997 H 248.35059 V 279.55076 Z M 345.24635,376.44651 v 193.7915 H 1701.7868 V 376.44651 Z M 1701.7868,1345.404 V 667.13376 H 345.24635 V 1345.404 h 193.7915 v 221.8004 L 760.8383,1345.404 Z M 1217.3081,764.02951 h 387.583 v 484.47869 h -387.583 z m 96.8957,387.58299 h 193.7915 V 860.92524 H 1314.2038 Z M 442.1421,860.92524 h 678.2702 v 96.8958 H 442.1421 Z m 0,193.79146 h 678.2702 v 96.8958 H 442.1421 Z"
|
||||
fill="#000000"
|
||||
id="path1"
|
||||
style="stroke-width:0.756998" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
@@ -0,0 +1,10 @@
|
||||
<svg width="121" height="115" viewBox="0 0 121 115" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_6_43)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.825684 108.079V103.741C0.825684 99.4022 3.97095 94.3482 7.86147 92.4419L43.6088 74.9492C48.7941 72.4159 50.0004 66.7919 46.2615 62.3459L43.9752 59.6289C39.3267 54.1062 35.5625 43.7955 35.5625 36.5755V25.7455C35.5625 19.0267 38.2242 12.5831 42.9619 7.83215C47.6997 3.08122 54.1255 0.412186 60.8257 0.412186C67.5259 0.412186 73.9517 3.08122 78.6894 7.83215C83.4272 12.5831 86.0888 19.0267 86.0888 25.7455V36.5755C86.0888 43.7955 82.2994 54.1379 77.6762 59.6415L75.3962 62.3522C71.6699 66.7792 72.832 72.4095 78.0425 74.9555L113.79 92.4482C117.674 94.3482 120.826 99.3705 120.826 103.741V108.079C120.826 109.759 120.16 111.369 118.976 112.557C117.791 113.745 116.185 114.412 114.51 114.412H7.14147C5.46642 114.412 3.85998 113.745 2.67554 112.557C1.49109 111.369 0.825684 109.759 0.825684 108.079Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6_43">
|
||||
<rect width="120" height="114" fill="white" transform="translate(0.825684 0.412186)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,56 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
viewBox="0 0 640 640"
|
||||
width="32"
|
||||
height="32"
|
||||
version="1.1"
|
||||
id="svg3"
|
||||
sodipodi:docname="logo_black.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs3" />
|
||||
<sodipodi:namedview
|
||||
id="namedview3"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="24.050196"
|
||||
inkscape:cx="14.282628"
|
||||
inkscape:cy="16.985309"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="959"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg3" />
|
||||
<g
|
||||
id="g4">
|
||||
<path
|
||||
d="M395.9 484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12z"
|
||||
fill="#fff"
|
||||
id="path1" />
|
||||
<g
|
||||
fill="#609926"
|
||||
id="g3">
|
||||
<path
|
||||
d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6zM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1z"
|
||||
id="path2" />
|
||||
<path
|
||||
d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"
|
||||
id="path3" />
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
style="fill:#1a1a1a;stroke-width:0.0415797"
|
||||
d="M 14.379874,26.484514 C 14.149747,26.438992 13.690019,26.252922 13.431277,26.100579 12.670943,25.652908 11.324175,24.266327 10.59522,23.180684 10.293988,22.732055 9.7818139,21.8206 9.4949958,21.222746 l -0.2811794,-0.5861 -0.5736772,-0.02694 C 6.7834258,20.52251 4.8305345,19.978944 3.5195438,19.184443 1.4071397,17.904262 0.22485841,15.475017 0.32444291,12.61944 0.3677987,11.376216 0.65415259,10.420909 1.2592088,9.5009621 1.66235,8.8880132 2.527812,8.1422306 3.2619801,7.775142 3.6534834,7.5793879 4.4268034,7.3368001 4.922895,7.2541187 5.4345645,7.1688411 6.1241588,7.1809218 8.3783101,7.3146528 12.632228,7.567023 16.45773,7.7338247 17.991775,7.7338247 h 0.94778 v 2.7348763 2.734877 l 0.395557,0.196492 c 0.217556,0.108071 0.41402,0.196493 0.436586,0.196493 0.0266,0 0.04103,-1.031033 0.04103,-2.931369 V 7.7338247 l 0.634091,-1.836e-4 c 1.273799,-3.69e-4 4.763674,-0.137779 8.590218,-0.3382304 l 1.719172,-0.090058 0.182093,0.088468 c 0.746546,0.3627002 0.936509,2.0698486 0.555647,4.9934623 -0.35369,2.715025 -1.411476,6.298937 -2.639544,8.943105 -0.731548,1.575104 -1.608215,2.91515 -2.492873,3.81053 -0.607632,0.614996 -1.088337,0.95976 -1.652667,1.185299 l -0.343159,0.137147 -1.891877,0.02737 c -2.670163,0.03863 -7.887507,0.03462 -8.093955,-0.0062 z m 6.286823,-2.716125 c 0.115777,-0.05391 0.284988,-0.183327 0.378279,-0.289311 0.172355,-0.195805 0.750354,-1.329032 2.156315,-4.227676 0.919664,-1.896054 0.944828,-1.956292 0.968535,-2.318473 0.02691,-0.411091 -0.05226,-0.607399 -0.359545,-0.891556 -0.209198,-0.193451 -0.478269,-0.336835 -2.208034,-1.176629 -1.083393,-0.525983 -1.984026,-0.956333 -2.001408,-0.956333 -0.01738,0 -0.184644,0.308729 -0.371696,0.686065 l -0.340094,0.686065 0.106772,0.190318 c 0.05872,0.104676 0.118586,0.264198 0.133025,0.354495 0.02619,0.163761 0.02769,0.16489 0.594151,0.445911 1.015049,0.503567 1.348547,0.787122 1.487359,1.26462 0.120446,0.41432 0.07,0.676425 -0.28617,1.486829 -0.170863,0.38877 -0.41506,0.927476 -0.542662,1.197124 l -0.232002,0.490269 0.101871,0.191594 c 0.267706,0.503485 -0.01341,1.128338 -0.567414,1.261243 -0.58491,0.140318 -1.168477,-0.429984 -1.036909,-1.013339 0.08046,-0.356733 0.386053,-0.643453 0.726743,-0.681854 l 0.177988,-0.02006 0.303682,-0.650118 c 0.636048,-1.361646 0.782526,-1.779649 0.72712,-2.074985 -0.04388,-0.233908 -0.298153,-0.430661 -1.034776,-0.800699 l -0.677544,-0.340361 -0.18035,0.09201 c -0.09919,0.0506 -0.262317,0.104033 -0.362499,0.118732 l -0.18215,0.02672 -0.598432,1.225918 c -0.522577,1.070524 -0.591025,1.234104 -0.539994,1.290493 0.106231,0.117384 0.186349,0.367609 0.186349,0.582006 0,0.91635 -1.286583,1.169117 -1.640414,0.322281 -0.208839,-0.499821 0.119097,-1.114622 0.631177,-1.183307 l 0.168784,-0.02264 0.607335,-1.24546 c 0.334035,-0.685002 0.607335,-1.2608 0.607335,-1.279549 0,-0.01875 -0.03701,-0.115655 -0.08225,-0.215345 -0.158388,-0.349057 -0.0834,-0.73812 0.192783,-1.000247 0.135262,-0.128378 0.381429,-0.24129 0.526053,-0.24129 0.08665,0 0.140203,-0.086 0.437923,-0.703276 0.186558,-0.386802 0.339197,-0.715618 0.339197,-0.730703 0,-0.03928 -1.235771,-0.626415 -1.434499,-0.681554 -0.218192,-0.06054 -0.530458,-0.05897 -0.743611,0.0037 -0.263587,0.07755 -0.598013,0.437442 -0.803228,0.864404 -0.09343,0.194385 -0.70733,1.457369 -1.364224,2.80663 -0.656895,1.349262 -1.24226,2.565468 -1.300813,2.702681 -0.145473,0.340902 -0.154619,0.833822 -0.02016,1.086403 0.187514,0.352241 0.333834,0.436325 3.138201,1.803407 3.102108,1.512225 3.304048,1.608007 3.443087,1.63309 0.284928,0.0514 0.567554,0.02636 0.770809,-0.06828 z M 8.1457332,17.266483 C 7.2378417,14.638477 6.9323714,13.329331 6.5283863,10.335057 6.4699481,9.9019243 6.4130895,9.5384973 6.4020339,9.5274414 6.3597881,9.4851958 5.1784302,9.6078003 4.8630136,9.6871651 4.6810592,9.7329482 4.3552431,9.8575262 4.1389776,9.964005 3.4107152,10.322567 2.94337,10.908135 2.7165454,11.746266 c -0.1234992,0.456337 -0.1333763,1.532003 -0.018899,2.058195 0.1834779,0.843351 0.4888669,1.564976 0.8905806,2.104416 0.2815076,0.378022 0.7589196,0.842853 1.089556,1.060845 0.5399519,0.355997 1.4752354,0.744817 2.2325714,0.928136 0.3399677,0.08229 1.3172924,0.262555 1.4558177,0.268519 0.087537,0.0038 0.077275,-0.03813 -0.2204389,-0.899894 z"
|
||||
id="path4"
|
||||
transform="scale(20)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.4 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M8 17q.425 0 .713-.288T9 16t-.288-.712T8 15t-.712.288T7 16t.288.713T8 17m0-4q.425 0 .713-.288T9 12t-.288-.712T8 11t-.712.288T7 12t.288.713T8 13m0-4q.425 0 .713-.288T9 8t-.288-.712T8 7t-.712.288T7 8t.288.713T8 9m3 8h6v-2h-6zm0-4h6v-2h-6zm0-4h6V7h-6zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z"/></svg>
|
||||
|
After Width: | Height: | Size: 494 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 9H11V7H13M13 17H11V11H13M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 650 B |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 372 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 5V19H5V5H19M21 3H3V21H21V3M17 17H7V16H17V17M17 15H7V14H17V15M17 12H7V7H17V12Z" /></svg>
|
||||
|
After Width: | Height: | Size: 160 B |
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="sm:mt-12 mt-7 m-auto w-fit sm:flex-row flex-col flex">
|
||||
<img class="sm:w-[400px] sm:h-[400px] xl:self-auto self-center w-[80%] h-auto rounded-full"
|
||||
src="~/assets/img/photo_web.JPG"/>
|
||||
<div class="xl:ml-[90px] ml-0 flex flex-col xl:items-end items-center">
|
||||
<h1 class="sm:text-8xl text-5xl mt-2 mb-2 xl:text-right text-center">
|
||||
Valentin Haudiquet
|
||||
</h1>
|
||||
<h4 class="sm:text-4xl text-3xl mt-2 mb-2 xl:text-right text-center">
|
||||
Software Engineer at Canonical - Ubuntu
|
||||
</h4>
|
||||
<p class="sm:text-4xl text-2xl sm:mr-[-3px] sm:ml-0 mr-1 ml-1 max-w-[770px] font-extralight xl:text-right text-center" id="header-paragraph">
|
||||
Working on Ubuntu support for RISC-V architecture
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title: string,
|
||||
previousLink?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex sm:flex-row flex-col xl:w-[1270px] lg:w-[924px] sm:mt-12 mt-4 m-auto">
|
||||
|
||||
<Icon
|
||||
@click="previousLink == undefined ? $router.back() : $router.replace(previousLink)"
|
||||
name="material-symbols:arrow-back"
|
||||
class="w-8 h-8 mt-auto mb-auto ml-2 mr-10 hover:cursor-pointer sm:order-none order-1 sm:visible collapse" />
|
||||
|
||||
<h1 class="lg:max-w-3xl text-3xl text-left sg:ml-0 sg:mt-0 ml-2 mt-4 m-auto pr-5 sm:order-none order-3">
|
||||
{{ title }}
|
||||
</h1>
|
||||
|
||||
<div @click="$router.replace('/')"
|
||||
class="flex hover:cursor-pointer w-fit sm:m-0 m-auto sm:order-none order-2">
|
||||
<img class="rounded-full sm:w-14 sm:h-14 w-10 h-10 ml-5 mr-0 mt-auto mb-auto" src="~/assets/img/photo_web.JPG"/>
|
||||
<div class="ml-5 mr-5 m-auto flex flex-col">
|
||||
<h1 class="sm:text-xl text-base text-left">Valentin Haudiquet</h1>
|
||||
<h4 class="sm:text-base text-sm text-left">Software Engineer</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
title: string,
|
||||
description: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full w-full flex flex-row">
|
||||
<img class="rounded-full h-[450px] w-[450px] m-10" src="/photo_web.JPG" />
|
||||
<div class="mt-8 flex flex-col">
|
||||
<h1 class="text-6xl w-[640px]">{{ title }}</h1>
|
||||
<h3 class="text-4xl font-normal w-[640px] h-[200px] overflow-hidden text-ellipsis">{{ description }}</h3>
|
||||
<h3 class="text-3xl font-light italic text-gray-500 mt-2 ml-[420px]">Read more...</h3>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full w-full flex flex-row">
|
||||
<img class="rounded-full h-[450px] w-[450px] m-10" src="/photo_web.JPG" />
|
||||
<div class="mt-8 flex flex-col">
|
||||
<h1 class="text-8xl w-[640px]">{{ title }}</h1>
|
||||
<h2 class="text-6xl font-normal w-[640px]">Valentin Haudiquet</h2>
|
||||
<h3 class="text-4xl font-normal w-[640px]">Software engineer at Canonical</h3>
|
||||
<h4 class="text-3xl font-normal w-[640px]">Working on Ubuntu support for RISC-V architecture</h4>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
image: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<img class="object-contain sm:max-w-[85%] max-w-[95%] m-auto" :src="props.image" />
|
||||
<div class="ml-auto mr-auto w-fit">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
image: string,
|
||||
imageRight?: boolean | string
|
||||
}>()
|
||||
|
||||
let imagePosition = "sm:flex-row";
|
||||
if(props.imageRight == true || props.imageRight == "true") imagePosition = "sm:flex-row-reverse"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="imagePosition" class="flex mt-5 mb-4 flex-col">
|
||||
<img class="object-contain sm:max-w-[40%] sm:max-h-[350px] max-h-[300px] max-w-[80%] m-auto" :src="props.image" />
|
||||
<p class="self-center ml-5 sm:mt-2 mt-4">
|
||||
<slot />
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import type { TocLink } from '@nuxt/content';
|
||||
|
||||
const props = defineProps<{
|
||||
link: TocLink
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li class="mt-1 mb-1"><a :href="`#${link.id}`">{{ link.text }}</a></li>
|
||||
<ul class="ml-2 mt-1 mb-1">
|
||||
<BlogTocLink v-for="child in link.children" :link="child" />
|
||||
</ul>
|
||||
</template>
|
||||
@@ -0,0 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug
|
||||
const { data } = await useAsyncData(() => queryCollection('blog').path("/blog/" + slug).first())
|
||||
const title = (data.value == undefined ? 'Blog' : data.value!.title);
|
||||
|
||||
useSeoMeta({
|
||||
title: data.value?.title,
|
||||
description: data.value?.description
|
||||
})
|
||||
defineOgImageComponent('BlogPost', {
|
||||
title: title,
|
||||
description: data.value?.description
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HeaderCompact :title="title" previous-link="/blog" />
|
||||
|
||||
<div class="flex xl:flex-row flex-col-reverse xl:mt-20 sm:mt-10 mt-5 xl:mb-20 mb-5 m-auto">
|
||||
<ContentRenderer v-if="data" :value="data" class="max-w-4xl w-[90%] xl:mr-10 m-auto content" />
|
||||
|
||||
<div v-if="data?.body.toc != undefined" class="xl:visible collapse xl:mt-0 mt-5 xl:ml-10 ml-5 mb-10 m-auto max-w-60 xl:sticky xl:top-16">
|
||||
<ul>
|
||||
<BlogTocLink v-for="link of data.body.toc.links" :link="link" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.content h2 {
|
||||
font-size: 30px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content h3 {
|
||||
font-size: 26px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content h4 {
|
||||
font-size: 23px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content h5 {
|
||||
font-size: 21px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content p {
|
||||
font-size: 20px;
|
||||
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.content ul {
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
font-size: 20px;
|
||||
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.content li {
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.content a {
|
||||
color: initial;
|
||||
}
|
||||
.content a:link {
|
||||
color: initial;
|
||||
}
|
||||
.content a:visited {
|
||||
color: initial;
|
||||
}
|
||||
.content a:hover {
|
||||
color: initial;
|
||||
}
|
||||
.content a:active {
|
||||
color: initial;
|
||||
}
|
||||
.content p a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
defineOgImageComponent('Site', {
|
||||
title: 'Blog'
|
||||
})
|
||||
|
||||
const content = await queryCollection('blog').order('date', 'DESC').all()
|
||||
|
||||
function formatDateString(dateString: string) : string {
|
||||
let date = new Date(Date.parse(dateString))
|
||||
return new Intl.DateTimeFormat("en-US", {
|
||||
dateStyle: "long",
|
||||
timeZone: "Europe/Paris",
|
||||
}).format(date)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HeaderCompact title="Blog" previous-link="/" class="mb-20" />
|
||||
|
||||
<div class="m-auto lg:w-[56rem] w-[90%]" v-for="article in content">
|
||||
<h1 class="text-2xl" v-if="article">{{ article.title }}</h1>
|
||||
|
||||
<h3 class="text-xl" v-if="article">
|
||||
{{ formatDateString(article.date) }}
|
||||
</h3>
|
||||
|
||||
<div class="flex">
|
||||
<h4 v-for="tag in article.tags"
|
||||
class="p-1 bg-slate-100 mr-3 hover:cursor-pointer">
|
||||
{{ tag }}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<h4 class="text-xl mt-2" v-if="article">{{ article.description }}</h4>
|
||||
|
||||
<a :href="article.path">
|
||||
<h2 class="text-xl text-right">[ Read more ]</h2>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,223 @@
|
||||
<script setup lang="ts">
|
||||
defineOgImageComponent('Site', {
|
||||
title: 'CV'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<HeaderBig />
|
||||
|
||||
<!-- CV -->
|
||||
<div class="sm:mt-[100px] sm:mb-[200px] flex flex-col w-fit m-auto">
|
||||
|
||||
<!-- Professional experience -->
|
||||
<div class="sm:mt-[50px] mt-8">
|
||||
<h2 style="margin-bottom: 20px;">Professional experience</h2>
|
||||
|
||||
<div class="grid-flow-col section">
|
||||
|
||||
<p class="date">2025 - Now</p>
|
||||
<p style="max-width: 1015px;"><strong>Sofware engineer</strong>, Canonical, Ubuntu engineering</p>
|
||||
<p class="subtext" style="max-width: 1015px;">Working on Ubuntu support for RISC-V architecture</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
<p class="date">2025</p>
|
||||
<p style="max-width: 1015px;"><strong>Master's internship</strong>, ONERA, “Probabilistic analysis of execution time on multi/manycore heterogeneous boards for optimal task mapping”</p>
|
||||
<p class="subtext" style="max-width: 1015px;">Real-time multicore optimal task mapping using a solver that automatically measures a pWCET for a solution on target platform</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
<p class="date">Summer 2023</p>
|
||||
<p style="max-width: 1015px;"><strong>Master's internship</strong>, Huawei Research Zurich, “Improving performances of virtualized servers by removing the guest kernel/user isolation layer”</p>
|
||||
<p class="subtext">Working on a Linux kernel patch to allow programs to run in kernel mode</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
<p class="date">2022 - 2023</p>
|
||||
<p style="max-width: 1015px;"><strong>Master's research project</strong>, IRISA (Rennes), “Transparent use of node-local storage for asynchronous I/O on supercomputers”</p>
|
||||
<p class="subtext">Library replacing MPI-IO calls, caching data locally, with neighbour communication</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
<p class="date">Summer 2022</p>
|
||||
<p style="max-width: 1015px;"><strong>Bachelor's internship</strong>, IRIT (Toulouse), “Reducing traffic in data centers by avoiding the transition of data through intermediate servers”</p>
|
||||
<p class="subtext">Library replacing read/write, using memory protection to provide data on-demand</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Education -->
|
||||
<div>
|
||||
<h2 style="margin-bottom: 20px;">Education</h2>
|
||||
|
||||
<div class="section">
|
||||
|
||||
<p class="date">2024 - 2025</p>
|
||||
<p><strong>M2 SIF</strong>, ENS Rennes, Second year of CS Master's Degree (Research)</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
<p class="date">2023 - 2024</p>
|
||||
<p><strong>Agrégation</strong>, ENS Rennes, Preparation for national competitive exam</p>
|
||||
<p class="subtext">'Agrégé' in computer science, rank 14/22</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
<p class="date">2022 - 2023</p>
|
||||
<p><strong>M1 SIF</strong>, ENS Rennes, First year of CS Master's Degree (Research)</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
<p class="date">2021 - 2022</p>
|
||||
<p><strong>L3 SIF</strong>, ENS Rennes, Last year of CS Bachelor's Degree</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
<p class="date">2018 - 2021</p>
|
||||
<p style="max-width: 1015px;"><strong>Prépa</strong>, Lycée Bellevue Toulouse, two-year intensive program preparing
|
||||
for the national competitive exams for entry to engineering schools.</p>
|
||||
<p class="subtext">Prépa MPSI/MP, entry to ENS Rennes</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Personal projects -->
|
||||
<div class="sm:mt-12 mt-5">
|
||||
<h2 style="margin-bottom: 20px;">Personal projects</h2>
|
||||
|
||||
<div class="section">
|
||||
|
||||
<p class="date">2023 - 2024</p>
|
||||
<p style="max-width: 1015px;"><a href="https://git.vhaudiquet.fr/vhaudiquet/vriscv/" target="_blank" rel="noopener noreferrer"><strong>RISC-V simulator</strong></a></p>
|
||||
<p class="subtext">Basic RISC-V processor simulator, capable of running BBL and booting Linux</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
<p class="date">2022 - 2023</p>
|
||||
<p style="max-width: 1015px;"><strong>Java Virtual Machine implementation</strong>, school project</p>
|
||||
<p class="subtext">Basic C JVM for GNU/Linux, Java 8 specs, using OpenJRE runtime</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
<p class="date">2018 - Now?</p>
|
||||
<p style="max-width: 1015px;"><a href="https://github.com/vhaudiquet/BladePlayer/" target="_blank" rel="noopener noreferrer"><strong>Blade Player</strong></a>, Android multi-source music player</p>
|
||||
<p class="subtext">Maintaining for 100+ users this Android application that plays music from Spotify or Deezer</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
<p class="date">2018 - 2020</p>
|
||||
<p style="max-width: 1015px;"><a href="https://github.com/vhaudiquet/vk/" target="_blank" rel="noopener noreferrer"><strong>Operating system kernel development</strong></a>,x86 architecture</p>
|
||||
<p class="subtext">Basic operating system kernel, with drivers, filesystem, Newlib ported, dash shell</p>
|
||||
<div class="entry-sep" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skills -->
|
||||
<div class="sm:mt-12 mt-5">
|
||||
<h2 style="margin-bottom: 20px;">Skills</h2>
|
||||
|
||||
<div class="section">
|
||||
|
||||
<p style="margin-left: 10px; font-weight: 500; grid-column: 1;">Programming languages</p>
|
||||
<p class="sm:col-start-2 col-start-1" style="max-width: 900px;">C, Assembly (x86, RISC-V, ARM), Java, TypeScript/JavaScript, Kotlin, Python, OCaml</p>
|
||||
|
||||
<p style="margin-left: 10px; font-weight: 500;">DevOps / Workflow</p>
|
||||
<p>Linux, Bash, Git, CI/CD, Docker, Kubernetes, virtual machines</p>
|
||||
|
||||
<p style="margin-left: 10px; font-weight: 500;">Presentation tools</p>
|
||||
<p>LaTeX, Figma, HTML/CSS, Inkscape, Gimp</p>
|
||||
|
||||
<p style="margin-left: 10px; font-weight: 500;">Spoken languages</p>
|
||||
<p>French (native), English (fluent), Spanish (basic)</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact -->
|
||||
<div class="sm:mt-12 mt-5 sm:mb-0 mb-8">
|
||||
<h2 style="margin-bottom: 20px;">Contact</h2>
|
||||
|
||||
<div class="section">
|
||||
|
||||
<p style="margin-left: 10px; font-weight: 500; grid-column: 1;">E-Mail</p>
|
||||
<a href="mailto:valentin.haudiquet@ens-rennes.fr" style="grid-column: 2;"><p style="grid-column: 2;">valentin.haudiquet@ens-rennes.fr</p></a>
|
||||
|
||||
<p style="margin-left: 10px; font-weight: 500;">Website</p>
|
||||
<a href="https://vhaudiquet.fr" target="_blank" rel="noopener noreferrer"><p>https://vhaudiquet.fr</p></a>
|
||||
|
||||
<p style="margin-left: 10px; font-weight: 500;">Phone number</p>
|
||||
<p>+33 7 87 18 09 65</p>
|
||||
|
||||
<p style="margin-left: 10px; font-weight: 500;">Street address</p>
|
||||
<p>30 rue Achille Viadieu, 31400 Toulouse, France</p>
|
||||
|
||||
<p style="margin-left: 10px; font-weight: 500;">GitHub</p>
|
||||
<a href="https://github.com/vhaudiquet/" target="_blank" rel="noopener noreferrer"><p>vhaudiquet</p></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
|
||||
.section {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
column-gap: 50px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-left: 10px;
|
||||
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-weight: 200;
|
||||
font-size: 26px;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
p {
|
||||
font-size: 30px;
|
||||
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.entry-sep {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
margin-left: 5px;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
margin-left: 10px;
|
||||
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.subtext {
|
||||
grid-column: 1;
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.entry-sep {
|
||||
grid-column: 1;
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
defineOgImageComponent('Site', {
|
||||
title: 'vhaudiquet.fr'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<HeaderBig />
|
||||
|
||||
<div class="content-holder">
|
||||
|
||||
<!-- Links -->
|
||||
<div id="links-div" style="grid-column: 1;">
|
||||
<a href="/blog/" style="grid-column: 1;">
|
||||
<img src="~/assets/img/post-outline.svg"
|
||||
class="sm:w-[150px] w-[70px] h-auto m-auto" />
|
||||
<p class="text-center sm:text-3xl text-xl">Blog</p>
|
||||
</a>
|
||||
|
||||
<a href="/projects">
|
||||
<img src="~/assets/img/material-symbols--list-alt-outline.svg"
|
||||
class="sm:w-[150px] w-[70px] h-auto m-auto" />
|
||||
<p class="text-center sm:text-3xl text-xl">Projects</p>
|
||||
</a>
|
||||
|
||||
<a href="/cv/">
|
||||
<img src="~/assets/img/icon-park-solid_people.svg"
|
||||
class="sm:w-[150px] w-[70px] h-auto pb-4 p-3 m-auto" />
|
||||
<p class="text-center sm:text-3xl text-xl">CV</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="lg:w-[350px] w-0 col-2" />
|
||||
|
||||
<div id="contact-div" class="mt-12 mb-12">
|
||||
<h4 class="sm:text-4xl text-3xl text-left pb-4">Find me on...</h4>
|
||||
|
||||
<a href="https://github.com/vhaudiquet" class="flex">
|
||||
<img src="~/assets/img/github-mark.png" class="contact-image"/>
|
||||
<p class="contact-text sm:text-3xl text-xl mt-1 mb-1">GitHub</p>
|
||||
</a>
|
||||
|
||||
<a href="https://git.vhaudiquet.fr/vhaudiquet/" class="flex">
|
||||
<img src="~/assets/img/logo_black.svg" class="contact-image"/>
|
||||
<p class="contact-text sm:text-3xl text-xl mt-1 mb-1">Gitea (personal)</p>
|
||||
</a>
|
||||
|
||||
<a href="https://launchpad.net/~vhaudiquet" class="flex">
|
||||
<img src="~/assets/img/launchpad-white-black.png" class="contact-image"/>
|
||||
<p class="contact-text sm:text-3xl text-xl mt-1 mb-1">Launchpad</p>
|
||||
</a>
|
||||
|
||||
<a href="mailto:valentin.haudiquet@ens-rennes.fr" class="flex">
|
||||
<img src="~/assets/img/arobase.svg" class="contact-image"/>
|
||||
<p class="contact-text sm:text-3xl text-xl mt-1 mb-1">Mail</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.content-holder {
|
||||
display: grid;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.contact-image {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
.contact-text {
|
||||
text-align: right;
|
||||
padding-left: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
#links-div {
|
||||
display: grid;
|
||||
column-gap: 40px;
|
||||
grid-auto-flow: column;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
#links-div {
|
||||
display: grid;
|
||||
column-gap: 40px;
|
||||
row-gap: 40px;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.content-holder {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
#header-div {
|
||||
margin-top: 30px;
|
||||
}
|
||||
#links-div {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<script setup lang="ts">
|
||||
defineOgImageComponent('Site', {
|
||||
title: 'Projects'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HeaderBig />
|
||||
|
||||
<!-- Projects -->
|
||||
<div id="projects-div">
|
||||
|
||||
<!-- BuildPath -->
|
||||
<a href="https://buildpath.win">
|
||||
<div class="project-div">
|
||||
<h2 class="project-title">BuildPath</h2>
|
||||
<img class="project-img" src="https://buildpath.win/favicon.svg"/>
|
||||
<h3 class="project-link">https://buildpath.win</h3>
|
||||
<p class="project-desc">a tool for League of Legends champions runes and build paths</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- homeprod -->
|
||||
<a href="https://github.com/vhaudiquet/homeprod">
|
||||
<div class="project-div">
|
||||
<h2 class="project-title">homeprod</h2>
|
||||
<img class="project-img" src="https://vhaudiquet.fr/public/github_assets/homeprod/p330_sff.png"/>
|
||||
<h3 class="project-link" style="display: flex;">
|
||||
<img src="~/assets/img/github-mark.png" width="16px" style="margin: auto; display: block; margin-right: 4px;"/>
|
||||
vhaudiquet/homeprod
|
||||
</h3>
|
||||
<p class="project-desc">personal home production environment</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- BladePlayer -->
|
||||
<a href="https://github.com/vhaudiquet/BladePlayer">
|
||||
<div class="project-div">
|
||||
<h2 class="project-title">Blade Player</h2>
|
||||
<img class="project-img" src="~/assets/img/blade-icon.png"/>
|
||||
<h3 class="project-link" style="display: flex;">
|
||||
<img src="~/assets/img/github-mark.png" width="16px" style="margin: auto; display: block; margin-right: 4px;"/>
|
||||
vhaudiquet/BladePlayer
|
||||
</h3>
|
||||
<p class="project-desc">android music player that plays from multiple sources</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- vhaudiquet.fr -->
|
||||
<a href="https://vhaudiquet.fr">
|
||||
<div class="project-div">
|
||||
<h2 class="project-title">vhaudiquet.fr</h2>
|
||||
<img class="project-img" src="~/assets/img/favicon.ico_256x256.png"/>
|
||||
<h3 class="project-link" style="display: flex;">
|
||||
https://vhaudiquet.fr
|
||||
</h3>
|
||||
<p class="project-desc">this website: my personal website with information, CV, projects</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
#projects-div {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
|
||||
margin-top: 100px;
|
||||
|
||||
column-gap: 40px;
|
||||
}
|
||||
|
||||
.project-div {
|
||||
max-width: 280px;
|
||||
width: 280px;
|
||||
height: 350px;
|
||||
background-color: #FEFEFE;
|
||||
|
||||
border-radius: 12px;
|
||||
border: 1px solid #E0E0E0;
|
||||
|
||||
box-shadow: 5px 2px 2px #E0E0E0;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
.project-div:hover {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
.project-title {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
|
||||
font-weight: 400;
|
||||
|
||||
font-size: 30px;
|
||||
color: black;
|
||||
}
|
||||
.project-img {
|
||||
max-width: 140px;
|
||||
max-height: 140px;
|
||||
/* width: fit-content; */
|
||||
margin: auto;
|
||||
display: block;
|
||||
|
||||
margin-top: 10px;
|
||||
}
|
||||
.project-link {
|
||||
font-size: 12px;
|
||||
width: fit-content;
|
||||
font-weight: 400;
|
||||
margin: auto;
|
||||
|
||||
margin-top: 8px;
|
||||
|
||||
color: black;
|
||||
}
|
||||
.project-desc {
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
|
||||
margin-top: 30px;
|
||||
font-weight: 300;
|
||||
|
||||
color: black;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
#projects-div {
|
||||
grid-auto-flow: row;
|
||||
row-gap: 40px;
|
||||
grid-template-columns: repeat(2, 270px);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
#projects-div {
|
||||
margin-top: 50px;
|
||||
grid-template-columns: repeat(1, 270px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user