From 847de104f67947f3cb499d80e4e6b3da3105e5f0 Mon Sep 17 00:00:00 2001
From: vhaudiquet <vhaudiquet343@hotmail.fr>
Date: Thu, 19 Jun 2025 18:52:07 +0200
Subject: [PATCH] Added 'projects' category to site :)

---
 src/assets/blade-icon.png                     | Bin 0 -> 6754 bytes
 .../material-symbols--list-alt-outline.svg    |   1 +
 src/index.html                                |   6 +-
 src/projects/index.html                       |  85 ++++++++++++++++++
 src/stylesheets/style.css                     |  80 +++++++++++++++++
 5 files changed, 169 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/blade-icon.png
 create mode 100644 src/assets/material-symbols--list-alt-outline.svg
 create mode 100644 src/projects/index.html

diff --git a/src/assets/blade-icon.png b/src/assets/blade-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..a82c6b2332700d22799722b1515e115803bc9780
GIT binary patch
literal 6754
zcmb7pWmJ^m)Azm0(p`&yk^+J>2r9KSB8?y+u%t*WBGR#h(h?F95-MHm(nu_!gp`0Z
zEGUR{!vYID>;F98p7XxX`+m6VTyy<q&dgjhbI-&W=xI_@uu%X2K>a{V&4}>C{JY3V
z2zR47H&Os#6MUei{K(IG>%Fg^iAi&meMk75+{eeHYN-Gyc|=tpEFY=W0M`^IlYw;%
zkxkt&RQsGC4u(GR6JFH11J@$s{$xND22o-DDtVG9C)K|@e`Fb0{bFL8Z#6PlTy7d0
zkb4rd>x}lrw+056Z@o>zB(TeR%r!p${q6trrJ-c&lWo`Q_bIu#AuiheB^ElK$|Om|
z4xMZ%SrdAr9_j3|md3PSBiZ;PsM?Oi-j1D5y8Z|@@G9p}wUFo_W`#j3PD{9XbnZ=K
zock0=tg>=syfwbpa!-eQbzG5$FygbxZ{k9)hSN2m=wxb#ZV{!QWow0c<s1=#(d<w7
zxL(JEne@gRr<bXZi8VT|FAAn-%ejcZvwg!~OmnJ_8<u1*sJQ9NdHBh=C}^QJrRSFK
zICYFDVpjqr5zpRN%EMcVmQM+7`!tJ`Wl*sPU1g{WWU~0D94{+5Dek$;eivs(E-b$L
zOI+gL(>A;|jdmDP(oLANETYj#6!v$M?GgXX_3*>PW^3ianWGl)v{#nl;X`AmTw&3m
zI@4n_M69iyW~!=4Gwmm*8-c6QZa*bo{Ass_DO`xHEwt<7)`ssW{ieRhPiNlTc(5{#
z(p^vMHPhCnP}_YhMSQnV{iFlowbs?0!L4aXa>rx#fXHDW(UGqCCY6B;x&7p4KqrXR
zi^<Wz=!>;FkA2->#pzQGErkpAx{V2gC!2~jcw5lByAsPKekh}{RBO@=KE4LnM34yy
zpMXFff7`groM>xA<5VaCCnvc^Sy%4xa*|kg=1^rKB_&0#;SZ|c!f2Ga@!eR;%+cn|
z=oD62r1?9u;zokFPN4+)CQ0Xwb9_jMQFdFeg`M3QE4gAO_5Hq<cT!okTR#$r;lC0X
z^38h|+VilVUMe|MDo0d3<q1qStjH>Y+^u<@J^l!ajFD{yj@TO36Dv-&fde}iS(kZ*
ze>-(Q0V1Sau16ciaG72faE=>=r|C!2dDK=WVKG(|L!4kqqc))f3X)*%2a5|ZVJYF(
zRFs$;I&aXrj5bGP#m~ywGhv6}l&?b11O!10mM^#Zz~Xz~l#%y~fVOKyw?OMCU?2ub
z3<pzFVjyf#B)POO!02oS@Q<JXoqU4cU|nGGu-E^00>Av1!v*7IQG2$OI!BSjyBO+^
zoFC-2LpzU8bdJIZ-zDV6&ck7<M&NDoG67*EDHn!T=}P5G|4Cn{#~{NaIWvIv76@~U
zR`8xw)$e~Ec7(OZQ&KL1tN@hzQ`Y&5-7#V1JK@B;ND}~6_bGMTKa#IR6a{d2GH~4l
zoj`tqp%@|$aAbc$RIVL)5Dn#GSS$qiTKMJJVTArZQ)!|tNS;m?FhB>2B?Q4!w%Q%>
zAOejU1aLg3*^T|I|8Kn<uqEezes5WdAj~5TVAtJ==4In1+w6&L84UqGjTwG4BfmZp
z_-^Z5+=P@M95nx|3+#s^F1aK~a+e-lyLK;irpSh`&Dwm0=+A^gRPV-aS6$960-hf|
z5Vk(GYSFw|HoJ1aV{B}p$XD@+)<OFdl{^t^y}Y2h)P<|VhgoNTuCtv?vN(?no)}Gr
z$o7g`RP%CtdJ;f=bWJ*^iv3O)$2&Za!ugDFmf|^YK=8JJwEd94;lA8~^XNmws8yo8
zF43Utv+NMNs+GilcGx2uS=rxMi`~!|JK%xemVB{%__u>IafBPx#(`VX?7Qqz8d2<6
z*r6R;P>m{ey8`tOVYLvH4?Nmd4Yiv#*|?K0vV@50pB-KgqD;t>Ok1$rWp=Fi{&Dle
zV6D$@r_-NsM#r#D-P$5g-b%qKE$j-*kH@UoAGPM3BO>-3#d^Wj<@E{>f~xx|P|pI%
zgPWuy`e`{n?1Y|Wwkhp1-eBOu3E|I8aP72F?f8+C6op^yv%!l=sY|mJFQvC*SU!<W
zY{ZguuLTckW!-;4Q#tg#_+@szwwH{1a>YCukGcWFUmgc-R*JQ_v~uUpw_<%9gJ(7P
zfA;UE0BCq|U<ej^+4ZBV{T!prjZqe2X4sr*$TO`n*W~@C6YoD}b#f^?IyQza(Ai@e
zo<}Em$r5n`Neol!y)-fKHEL;kNy=DfLk<3f9PuWLG!2613h`oWnJ;<MsIHV(cQdx7
zAX81gO75b9g=;$@TJvg+m6Ii~7_a#f(zOFeR!Q7O19a?61a7GX5meTKsD@t`3=<5u
zhOV_L+nR;PADv2Hv?i9Wj##=+E@~3|q+1Af7q79ax^&fX55Hcz1HH7e!1->^Yx1p}
zmo&Q3ir~*F)&sZR*KfGpCK>vji_0$AlO1{OKKra|Vk=bu0+^D|si88|mliOk!e@Sa
zMr;8aX4pjPf6zQYI4Auj=hjjW+?O-=Oms;sj^XmgO5n4e+*YG-gsG$975g@Y6>sMi
z?x5PJp3FI9kETBg;P+>ag=?dx3x!8}NZvRa(g(N6s~+DENk<az!lXfSouOPzA@)T*
zY?lhmudq}hxA1}Sy9lh6-q&#VBrbbutAL+dUL03T#l<m_PEyQF8Du{17&gfsz@y>X
zi(D#htzqX}tPD?Ho?p~s-`l`J@&?I(3(A!?bXoeT&XR22nFg*-Kq(wSepQd2uPt?8
z8MN9>laH@4jjZtujQIrIBCp`-o?^cnvnZ`)$^#2Ojm!Aq_!w(@esK!=PgI!d+L7-O
z>*ACcv!@PShO=<tj(2%+8n}i{p^ryAN%weyns`2`%lT+igvF61w}yQoOJ;b-bC)V*
zi-D<+_>R(cq$5av@g_`XsbT0)EfVWr)WdP<Wr=G@-!2Mw|5|Gbse(oNfBZ|1Oo7Fs
z=IJ_;FonWiNw8QtRm7r<mUUW&{)ukT(6L;F3&9L##3i@zhAfRjRPFS5h8HMT>MK(z
z{H<UwHQWnzGTANRv`|w9w>f%f!H0$X(FlhOb?M@?<*%%nsWQ%uTPJ2|gjh2|98K1q
zwH71UlZdMBpN7e)H-3C&GkC~_FF8?N61&rxI4YnI@p2F0W{xpHyar;)=r>!#n3NAm
zTxFR0JT+6*jlimr{nRO2j`aQ9n*!)dj&cTquIMoJ7-oB%;r?QbqTRr6Y5aob$^f-W
zbyRz|2p+v0L!}hnTAy#Ac(J!S2#dt(M)sn6lYraZT|0sCP*HQii0TY=z1A>e^JQtr
zvJCa_=!w1r?+L7<Ne9>uMzLtH-zeg_wxl^7VSx2J>Dmu`xgB^z_uW2&<0{K5mkYD5
zL==L~b|78<>PA8Pq`GGcj0M!%!L;Z7O_3Yo-I-ciD=ej{O=k{eWl*~vmkObea1iX|
zZ(jZJ)UEw{86i6W5Q1)h6y5WUhGG3OxB*N!{huA1+<T89%~LWx)ls2w&=B+UxP5Sh
z4c<!Yjgcz&H#Tm8UB~~la-<H9pf3`&@w2a=lU=^A<wM79VJ^KfCKg;{6HN%D?|%ze
z9v`Y%F5YL77>t2$fN#;gDMz&D{Sh_0xpBICy`3U-d92l7eAAqr!nu_!D~o={Nqcde
zy)h=AGT-KVTEm-<CyM9VkbsBd=-wvT=p4xlAFEvXK=_5Z2_Y4M$nq!8nWM1xdqNEq
zf4qkncy9)aBm{U;h**5Kcs(JACwrbtHlNiJB*auer5~q}uC2#o#`jKgP!tI!_4gE+
z(uqPv1rSvVOWuqwl${dRZr5~E`Y1#=P5BT{s`lU4Lzlsir9n)kM2Pfre^jQfVn-do
z+qj{Y&jp0LiDVq!0Sl0O)92>Mj2+iheu{C;#5J(is!%x@QkaahPpORrL}=z^Z=b^S
z<q4PosA8!B;pk(tsFLZWN(BbuY0s$GA5;&VC3&ew%cNaf(%gD8!^t;dO259#7A9fB
z2IUqG%O?9wmS0tfJ^HxzbDGo8v_s<|0?yJ=DjaY+PpdbzH`I>-`@xrS54I_v2;oGR
zdZY!y{kp7Zr`r(fTtU}32W)B|4GqE17?y_n#Zr|gNr&FFhKVY7b2Y{1#u@^|G`lu(
zF5qC{Dq>|{&YQD=5$1V8%3ETsGsg;7go1{4QT&TB?kJ^41aG$3$@m2gzJ(g}A6L~M
zP5C*UD%hX58Lq<WcgLNr$<A$yI;V$3zjeQUYqeYDi}mBauKn9JFFsb?EU$~8ZO4CO
z35*~B&V^ht_S^^=*hA1ek}A6VJPWob9!o_8@3K}74KfyL6_5q{cZU@G<xxvl*XJw-
z00l;pKChx)$A_;J9b>I|XKveFlKsO88s<&kjViu3ujjc&`K07aq9#)G!Xy8IF*bi^
zpF*w4P`J&5j?W;BD$oyW;J1^+t$c|7>j#1Dk}i1D4np~;J8x`|eDTi<4Sqs;_M4iJ
z{R()$jd;*|x#HZT%&vDP8rV(zInyRX`kur?9fv1bGbJB+4Zk6qSU>Ww)gUwAX)8V&
zKw2X5WyaQc9+@H!3mQfbq?}^%teBdrd+R%f+I++hx`@%<=#XJ0HbS6Kh>FkOa$K2#
zPjcfY=5t(JBgo(t;QR$n887)kbClK)zzr9ALiUykMisdyl|wT$6-Z<SR)q*+4yPcP
zFA3lDLz2@&8cazPC$=U6%n$J!HTEHIzs3+s7NB`|lUiL=KZLov7g!f)M1@uIfDEh`
zljIh#Z<`9lYh8_%dcy+(Oscp6pS1Pjo*Xq#wwvV}{`|4PR-lz`!`#WW;IktyR<}FM
zuJaz12vp4p$!ox#UlDPB`JbaUU_We$nySY*(zYLvi$Ye;e$dXeiTzbv<PX4QKJ!v#
zQ*nq?x_;9{5AH&b@cteN{CZjjYPh(z5+WE~_b&+!x17D%x)0=z6REvdI*1@nZSc<y
zrXRGmNnT*T_5A0Nszr<SkFytLgrbyp>W=vj9sRrbW5y>_t1m7}v_J-{Sf4A#TF<@)
zv>Qr6eK5e{=cw6}ezS&L$*;(3wmo%f)`=#N6LhZ-5WuxL-N8|?8J_UQl~m7CXp`q}
zt8$F+d;C819s#?xszsNi>mGjMnbr%Mg`5y!VH!%LdLc-5LFB11of~sbY-gf?ps9(J
zm)D8~P^CPmxW>?J0aYj`M<VTJ_a*5~2N;?vZ)nj!2_R}Pb~eUl{f;~1L;=qi$G(1d
zTWZ+)?R&T572KW*d2wgB?O1e$=~>j2RabQpLqeL#W_h1kIVIga>J9$z<_S-82x#Gs
zsjsG9(n;;h$!&^Bn(_3_{zH;$L{DDM-kse+mBB&3FwvhGOB=lj>aZ}ko$smcOvL1q
z`q^(6^I-hxl|M(>=yJbqfO6sYA<%l3YAa1_<#2{=#@Od(2sb^Ann;|};8plS)(NXS
zgT6<xGJ0$#tWq|br;|{-oc&p&HACJ-($?aF)*8|%+S{^gKI}%V4sR`Ko<>xDy<NkN
zAz}5dBNc4nVhKbbH|o>X_pQCj?WT;DWVF6zeU1K{I2#gbLQY91fU0bQr3wm(TX!OC
z<VQO>KiB!i$-92xk<+9==3Dv}tlu8f<7qr1(Ti{>Co5Rs`XD?S7=eN`4mVM<^hLco
z@_kIm(a*ugAI26k1yteGp*Wmfqx48uHA!^U(&O3K!QFC&qq|nG8bm63`wM<H(Jdy;
zrGK83kD}uaS49xgTT=pcj=JYMbxuDIAAWr<=u}X40&8i~1@2Dfh(IJ4CRuYt>UoxW
zVMOpQVc)s&XEJsQ_*<c93fa;9iaIX|D(=UDZx4y?9iz24*&jWDzT)$=mh)ujuz=dO
zGbq0LmMGTe2>LZJLT|tFOwbkgzMmryC-OzWeW{^6h(fHus{R`tkS8B8U%GzRDU!@E
zkf_=*xlmU8J5PmAyY!1UPq3)VDm*|*_jEV)%UZ7HEnb1){pG|QYVxg2Ln(zn$VrZn
zqqZA?IK#`u*6i<+H7hRSDjbUGtcqFY&k=Cuj#k-dvj;wO9W(5UZP=Xi(&_~whgZaR
zK``)jZ}T>O0Xt~-{i(X)y(pGOw<TF@N&Z52#X{}t$LYdp;EIg8E6{<J+Is#Qdqn<w
z%V<;R*9CS$fNfl5-5D;fdW@6BBZ=>Z!5vu;=3^}3b6uQGn8Jmk{B~o_Rx|BTQYFO%
z$39<kGz*NJN%3O^=cq3|_pbr;LqtApifUXip<vQ`^(&XZ{jf-krbR7+_-+S$WA}xW
zQ=g}0*UsI+(!o8=RCyYLSJenrBb^2^^-mO!<AZ*r2S{Y7Y11jz1hqICsz*2w;&GaJ
z)4sbe&XZ<ir!x@+gwnkO=hS#6Q~4KmRWG2g?=6dcAb!|Zn9Nwz8^L!s#~2-m_^Y7a
zOr{NP6;|1Os2=@3AVRzPX58+o$DH=t;x^?Q<sHU0QN%c+4xW)azVfi@)|1acJ&9Cp
z-@zF#QRSU^$=PByBGHQ*oCee&pI8CZm@C_RwW)enSt~g&`PQ>-&06b7mX2yS1Tr9W
zdfn}8gHr02`=Y0f-V2Qg;u7#~vvQEidGFrawZewgQO&sYk(7bD{k|%ty}dn^?`W^T
zZ`;L+A7iiHebWt4=16*e|6yPu6Wpd-Q}W)wKLq#3tS`U((r6MZ4!p|#JMo$E6&2^`
z2j+5Tt0kuy>v~NRn^&A+*cN-1O6ac;v~y|DtNx!232()YD&KTGMgb;NE{^hjfmF@v
zZ7U#B{nzo=9!9*zJ`8?6FPLcci!P`(qfZ5CwL*vSv#dL+>8s$$Cq)8hC$OZw`x?E|
zkMWxwT{|Cbed9A)p(KZ`UyllD8mC!y4q{k@Vbn|7+|-Z}rA#!TrfwV;h0)o9T*&Bv
zh#Ah1QKeiH+a2oqjBQ)cs2P%t2y!a|C`fce$HI@voDfL1JYqP=g~|w!Fu2&uuvydm
zPI_`LO<k_P-yA6o&HpBTm@e_iqAl+Y3=r(7UeZT-|D{Gbe*>d{J0t@GI-#pX=4Y^Q
z6xmQK2s&s6K=U=iM0&;+vTo<$G(%1`&A_De|4mNQ;w68xquP|b(~+JMjscIu9Q4Is
zR8gJjCt>(I#cExL6`@=S#3i2>6>_DVLT{3`G()r@!dagIVORnQ(eFuYw%F<gcbF*H
zDgGa$ZxIPE5Vy!L_u9Gtn?)EbWAUkRIJ%Y8j37IgI1HSs8uj%Zz_7W{0|ua6Fu0HN
zx6Q;AVY+|(AyicHHvWMe`Vm<u00dbX!95T&iuztQc{<MsqNFn@JCOM1*ZIFUhyK^@
z(f@(qkrasJYKYLS>OKKWJC7{t?9~mu61iW<S4@2=K#A#Q<bxUY7hc_OSmGl}syjQ{
z_+79;3u0ho9Hz4wE}LCWN$)F-pe1y%<dxIas!ATr=0*)Saea>KwYYImut5pZgXZwV
zGQ6$hJctg=0e)*PTwkf`C9jvdu0^psBkLE;z|5M{aaqd}kDkJ6&WlUSAcdV@Ll=Jt
zUBVUvu=GyQJ*)ASF&>A3ftk{ObPqs7isze3G1aS9<LHCk<#A;QdG}Y&ngzP9M<l$e
zswK~~#mZ(&zFu?K9R9%l;@_46ny#<;miHeg`8_XIWKa3>kUS)!V<Ow`otZdVYPsQ$
z)tRB4S4Jg|rS3rdPYJ2jI0-=X7gI;(%k}ZoI9!13#ix4SAC5~TjZAiLNKMZ2vz$lk
zNq_3PNkFIXZ&cK*^SC<w3E~5s!iS)fJ_WcLX^EzTIj0-v(b?C$brOD6%JzxtMRqCS
z%#6;xn^ETH!%2ctmQS<I4-x=p7k(`&J(o!q8+J+y>(n{N=VLS($)+?nq&$W~#&l4I
zP2#SX*xhB>&OG#Wb4kgU{7y)5Kw~25o(;Ld?T+iDInTeb(k<F4yV~yHKOMJfrK!E1
zCi%;Hjif{ej+t$Fq2w~hpTH*VUSr@;LXCECqBv5Ld|h#B2UKKPli13XEUXphE$9Tf
z8<v|^${exP`-y*c%&@zbfc~3Obz#VsdHmbh;2l?laP40ir0Di|M#@Z~ao4im?1q*1
zURN)Tq=QpwZl(w}O{r|H6>~+#7M)wxl+Wy;HnP{!?UZOW)zY>9y3fi-#%2CO%ji7!
zN>BTNl2AZ2Hj^tQr1sglb^D!X**=iWMwI_K^XeV9`-TpMZ|N_`ELd4p(jAI|P7fdJ
z9)ZmY&c!<X!BiGmnf$8ZKH<m3xdASdO79Oc%7;s_&dW_KH{U3pg!AigJ!qjM^!Ss=
z9f(*ZYQhH=`x2?RANDe#SH2gwySV5A^Qli*^~6269wZ5Sl(}!s)Nw0Y@)327OQQ49
zAW+KSK*=ue!`@WHpUZhRQN1cEfk-|KhFD59hTKc&Hpq&tpGS+!qs=EapNLV*NC&iA
zi*R%zVpTRxVs+4@ZLf9;nadIdH49hF*lt7P9Nv9%x#gS+zxF0uUA70p;sBV#_>-s|
zAm++WNjDryW+H9w@PXFr#u(z$<i<T41<exJ<&`>6*JTI(C$YsV8$<vCnVq~!!a!B?
zqt4cXl0BQL(ZA@=$15exe=`v9G)yBY&E;g=*R>JUs)<Rk6{3`l*`{7B%3LhCyyB(o
zg`f+R_R52CM@4b@m_f<-+!!_%d~8;;IscUB|H~-mVBwPU)_6A4lRy3*gxL}BKwVF*
IN(CPNUuHF@$N&HU

literal 0
HcmV?d00001

diff --git a/src/assets/material-symbols--list-alt-outline.svg b/src/assets/material-symbols--list-alt-outline.svg
new file mode 100644
index 0000000..b397253
--- /dev/null
+++ b/src/assets/material-symbols--list-alt-outline.svg
@@ -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>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 3302447..5ad2f33 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,9 +30,9 @@
 
     <!-- Links -->
     <div id="links-div">
-        <a href="/blog" style="grid-column: 1;">
-            <img src="/assets/fluent-mdl2_blog.svg" class="link-image"/>
-            <p class="link-text">Blog</p>
+        <a href="/projects" style="grid-column: 1;">
+            <img src="/assets/material-symbols--list-alt-outline.svg" class="link-image"/>
+            <p class="link-text">Projects</p>
         </a>
         
         <a href="https://github.com/vhaudiquet/" style="grid-column: 2;">
diff --git a/src/projects/index.html b/src/projects/index.html
new file mode 100644
index 0000000..089a04e
--- /dev/null
+++ b/src/projects/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+<head>
+    <title>Valentin Haudiquet</title>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="stylesheet" href="/stylesheets/style.css">
+
+    <link rel="icon" type="image/png" href="/assets/favicon.ico_256x256.png">
+    
+    <!-- Inter font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap" rel="stylesheet"> 
+</head>
+  
+<body>
+    
+    <!-- Header -->
+    <div id="header-div">
+        <img src="/assets/photo_web.JPG" id="header-img"/>
+        <div id="header-text-container">
+            <h1>Valentin Haudiquet</h1>
+            <h4>Computer science student at ENS Rennes</h4>
+            <p id="header-paragraph">Interested in operating systems, virtualization, computer architecture, embedded systems</p>
+        </div>
+    </div>
+
+    <!-- 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/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/blade-icon.png"/>
+            <h3 class="project-link" style="display: flex;">
+                <img src="/assets/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/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>
+
+    </div>
+</body>
\ No newline at end of file
diff --git a/src/stylesheets/style.css b/src/stylesheets/style.css
index 99d348c..687d9a5 100644
--- a/src/stylesheets/style.css
+++ b/src/stylesheets/style.css
@@ -130,6 +130,73 @@ strong {
     font-size: 26px;
 }
 
+#projects-div {
+    display: grid;
+    grid-auto-flow: column;
+    width: fit-content;
+    margin: auto;
+
+    margin-top: 100px;
+
+    column-gap: 40px;
+}
+
+.project-div {
+    max-width: 250px;
+    width: 250px;
+    height: 300px;
+    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) {
     /* Tablet, small screens version */
     #header-img {
@@ -163,6 +230,19 @@ strong {
         margin: auto;
         margin-top: 100px;
     }
+
+    #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);
+    }
 }
 
 @media only screen and (max-width: 450px) {