[01] LATEST — MUSIC WEBAPP
Bloop
A browser-based music creation studio for beginners — compose, mix and create without installing anything. Professional studio feel, zero setup.
- — Web Audio
- — Modern JS
- — Cloud-hosted
[02] LIVE_SITE
Trocadero
A guided vitrine of Paris's Trocadéro monument. Semantic HTML, SCSS architecture, responsive across devices.
- — HTML5 / SCSS
- — Vanilla Javascript
- — Deployed on Vercel
[03] GAME_APP
Pokedex
A vanilla-JS Pokédex that talks to the PokéAPI. Focus on fetch-based state and clean list/detail interactions.
- — Vanilla JS
- — REST / fetch
- — Responsive UI
[04] MOBILE_UI
App‑phone
A phone-first contacts interface — small screen constraints, touch targets, snappy interactions.
- — HTML / CSS
- — Mobile-first
- — Vercel CI
Tech Stack
Frameworks, tools & skills
Frameworks
'%3e%3cmetadata%20id='metadata14'%3e%3crdf:RDF%3e%3ccc:Work%20rdf:about=''%3e%3cdc:format%3eimage/svg+xml%3c/dc:format%3e%3cdc:type%20rdf:resource='http://purl.org/dc/dcmitype/StillImage'%20/%3e%3cdc:title%3e%3c/dc:title%3e%3c/cc:Work%3e%3c/rdf:RDF%3e%3c/metadata%3e%3cdefs%20id='defs12'%20/%3e%3csodipodi:namedview%20pagecolor='%23ffffff'%20bordercolor='%23666666'%20borderopacity='1'%20objecttolerance='10'%20gridtolerance='10'%20guidetolerance='10'%20inkscape:pageopacity='0'%20inkscape:pageshadow='2'%20inkscape:window-width='1566'%20inkscape:window-height='855'%20id='namedview10'%20showgrid='false'%20inkscape:zoom='10.546875'%20inkscape:cx='32'%20inkscape:cy='32'%20inkscape:window-x='70'%20inkscape:window-y='27'%20inkscape:window-maximized='0'%20inkscape:current-layer='svg8'%20inkscape:pagecheckerboard='true'%20/%3e%3cpath%20d='M%2039.33333,5.5%2032,18.33333%2024.666667,5.5%20H%200%20L%2032,61%2064,5.5%20Z'%20id='path4'%20inkscape:connector-curvature='0'%20style='fill:%2342b883;stroke-width:0.16666667'%20/%3e%3cpath%20d='M%2039.33333,5.5%2032,18.33333%2024.666667,5.5%20H%2012.833333%20L%2032,38.83333%2051.16667,5.5%20Z'%20id='path6'%20inkscape:connector-curvature='0'%20style='fill:%2335495e;stroke-width:0.16666667'%20/%3e%3c/svg%3e)
Languages
'/%3e%3cpath%20d='M128.757%20254.126c64.832%200%2060.784-28.115%2060.784-28.115l-.072-29.127H127.6v-8.745h86.441s41.486%204.705%2041.486-60.712c0-65.416-36.21-63.096-36.21-63.096h-21.61v30.355s1.165%2036.21-35.632%2036.21h-61.362s-34.475-.557-34.475%2033.32v56.013s-5.235%2033.897%2062.518%2033.897zm34.114-19.586a11.12%2011.12%200%200%201-11.13-11.13%2011.12%2011.12%200%200%201%2011.13-11.131%2011.12%2011.12%200%200%201%2011.13%2011.13%2011.12%2011.12%200%200%201-11.13%2011.13z'%20fill='url(%23b)'/%3e%3c/svg%3e)
'%3e%3cmask%20id='b'%20width='242'%20height='256'%20x='0'%20y='0'%20maskUnits='userSpaceOnUse'%20style='mask-type:luminance'%3e%3cpath%20fill='%23fff'%20d='M0%200h242v256H0V0Z'/%3e%3c/mask%3e%3cg%20mask='url(%23b)'%3e%3cpath%20fill='url(%23c)'%20d='m241%2043-9%20136L149%200l92%2043Zm-58%20176-62%2036-63-36%2012-31h101l12%2031ZM121%2068l32%2080H88l33-80ZM9%20179%200%2043%2092%200%209%20179Z'/%3e%3cpath%20fill='url(%23d)'%20d='m241%2043-9%20136L149%200l92%2043Zm-58%20176-62%2036-63-36%2012-31h101l12%2031ZM121%2068l32%2080H88l33-80ZM9%20179%200%2043%2092%200%209%20179Z'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='c'%20x1='53.2'%20x2='245'%20y1='231.9'%20y2='140.7'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23E40035'/%3e%3cstop%20offset='.2'%20stop-color='%23F60A48'/%3e%3cstop%20offset='.4'%20stop-color='%23F20755'/%3e%3cstop%20offset='.5'%20stop-color='%23DC087D'/%3e%3cstop%20offset='.7'%20stop-color='%239717E7'/%3e%3cstop%20offset='1'%20stop-color='%236C00F5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='d'%20x1='44.5'%20x2='170'%20y1='30.7'%20y2='174'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FF31D9'/%3e%3cstop%20offset='1'%20stop-color='%23FF5BE1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='a'%3e%3cpath%20fill='%23fff'%20d='M0%200h242v256H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
Styling
Design Tools
Project Management
'%20gradientUnits='userSpaceOnUse'%20x1='102.4'%20x2='56.15'%20y1='218.63'%20y2='172.39'%3e%3cstop%20offset='.18'%20stop-color='%230052cc'/%3e%3cstop%20offset='1'%20stop-color='%232684ff'/%3e%3c/linearGradient%3e%3clinearGradient%20id='b'%20x1='114.65'%20x2='160.81'%20xlink:href='%23a'%20y1='85.77'%20y2='131.92'/%3e%3cpath%20d='m214.06%20105.73-96.39-96.39-9.34-9.34-72.56%2072.56-33.18%2033.17a8.89%208.89%200%200%200%200%2012.54l66.29%2066.29%2039.45%2039.44%2072.55-72.56%201.13-1.12%2032.05-32a8.87%208.87%200%200%200%200-12.59zm-105.73%2039.39-33.12-33.12%2033.12-33.12%2033.11%2033.12z'%20fill='%232684ff'/%3e%3cpath%20d='m108.33%2078.88a55.75%2055.75%200%200%201%20-.24-78.61l-72.47%2072.44%2039.44%2039.44z'%20fill='url(%23a)'/%3e%3cpath%20d='m141.53%20111.91-33.2%2033.21a55.77%2055.77%200%200%201%200%2078.86l72.67-72.63z'%20fill='url(%23b)'/%3e%3c/svg%3e)
DevOps
