[{"data":1,"prerenderedAt":140},["ShallowReactive",2],{"project-projects_en-project-lockdown":3,"project-order-projects_en":135},{"id":4,"title":5,"body":6,"client":13,"collaborators":14,"cover":16,"description":10,"extension":17,"featured":18,"kind":19,"meta":20,"navigation":18,"path":21,"roles":22,"sections":28,"sector":118,"seo":119,"slug":120,"stem":121,"steps":122,"summary":126,"tagline":127,"testimonial":16,"thumbnails":128,"tools":131,"url":132,"year":133,"__hash__":134},"projects_en\u002Fen\u002Fstudio-ergane\u002Fproject-lockdown.md","Project Lockdown",{"type":7,"value":8,"toc":9},"minimark",[],{"title":10,"searchDepth":11,"depth":11,"links":12},"",2,[],"Thibault Chapelain",[15],"Bastien Tafforeau, full-stack developer",null,"md",true,"Showcase website",{},"\u002Fen\u002Fstudio-ergane\u002Fproject-lockdown",[23,24,25,26,27],"ui","ux","identity","front","a11y",{"presentation":29,"identity":34,"typography":56,"responsive":89,"choices":102,"stack":112,"scope":115},{"paragraphs":30},[31,32,33],"Project Lockdown is the work of a French collective of Counter-Strike enthusiasts. The website had to showcase two creations: a 3D cinematic paying tribute to the franchise, and a collection of skins designed for a fictional Counter-Strike 2 operation.","Beyond the tribute, the creators hope to see their work become part of the game’s official ecosystem. On release, the project was picked up by the specialist gaming press.","The visual world blends two influences: industrial aesthetics (mechanical textures, labels, signs of wear) and modern favelas, with graffiti-inspired patterns ranging from minimalist marks to sticker art. The challenge was to bring the two together, with a dark palette lifted by vivid colours and sharp, angular, dynamic linework.",{"paragraphs":35,"visuals":37},[36],"The logo was created by the client, following work we did together, particularly on the colours. It became the cornerstone of the identity: the palette, the typefaces and the site’s whole visual world all stem from it.",[38,46,50],{"type":39,"label":40,"src":41,"width":42,"height":43,"alt":44,"background":45},"logo","Logo","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-logo-white.webp",360,203,"Project Lockdown graffiti logo on a dark background","#0A0A0A",{"type":39,"src":47,"width":42,"height":43,"alt":48,"background":49},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-logo-black.webp","The same logo on a light background","#F7FEE7",{"type":51,"label":52,"src":53,"width":54,"height":54,"alt":55,"background":45},"square","Favicon","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-favicon.webp",80,"Project Lockdown favicon",{"paragraphs":57,"fonts":61,"colors":81},[58,59,60],"For headings, Schabo X Condensed brings the project’s raw, urban edge: a very distinctive typeface that commands attention at first glance. As a counterpoint, Smooch Sans, used for subheadings, is thin and angular, echoing the industrial, pared-back feel of this world.","The body copy deliberately uses a display typeface, Funnel Display: the site has few long texts, and its graphic details give it character without hindering readability.","The palette is deliberately restrained: a deep black, a cream white and a bright, saturated, almost incandescent pinkish red. Attention must stay on the collective’s creations; the site is only there to showcase them.",[62,69,75],{"type":63,"label":64,"src":65,"width":66,"height":67,"alt":68},"font","Headings","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-schabo-x-condensed.webp",282,58,"Schabo X Condensed",{"type":63,"label":70,"src":71,"width":72,"height":73,"alt":74},"Subheadings","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-smooch-sans.webp",298,46,"Smooch Sans",{"type":63,"label":76,"src":77,"width":78,"height":79,"alt":80},"Body copy","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-funnel-display.webp",322,44,"Funnel Display",[82,85,87],{"label":83,"hex":84},"Primary","#FE0041",{"label":86,"hex":49},"Text",{"label":88,"hex":45},"Background",{"visuals":90},[91,97],{"type":92,"src":93,"width":94,"height":95,"alt":96},"screenshot-desktop","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-responsive-desktop.webp",1271,627,"The Project Lockdown website on a wide screen: the trailer and a weapon page",{"type":98,"src":99,"width":100,"height":95,"alt":101},"screenshot-mobile","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-responsive-mobile.webp",289,"The same page on a phone, with the elements stacked",[103,106,109],{"title":104,"text":105},"Showcasing without weighing things down","The site relies on rich visuals: a cinematic, videos and some twenty skin renders. To show them without weighing the page down, every image was resized to its actual display size and compressed to WebP, bringing the total image weight down from 9.5 MB to 1.7 MB. The homepage cinematic went from 32 MB to 4.4 MB, with a lighter version for phones.",{"title":107,"text":108},"A loading screen with a purpose","The loading screen does more than keep visitors waiting: while it animates, the page is built underneath and its images load. A still from the cinematic appears straight away, and the video starts as soon as the site is ready to explore.",{"title":110,"text":111},"Animations that serve the project","The animations, made with GSAP, extend the world of Project Lockdown: for example, smoke drifting across the skin carousel, or tags that write themselves under the creators’ names, as if on a wall.",{"paragraphs":113},[114],"This project was built with the \u003Cstrong>Vue.js 3\u003C\u002Fstrong> framework, together with \u003Cstrong>TypeScript\u003C\u002Fstrong> to keep it maintainable over time. Most of the animations rely on \u003Cstrong>GSAP\u003C\u002Fstrong> (GreenSock Animation Platform), a JavaScript animation library.",{"paragraphs":116},[117],"I created the visual identity and the mockups. On the development side, I focused mainly on the animations: the loading screen, the smoke effect in the carousel, the tags under the contributors’ names, and so on.","Video games",{"title":5,"description":10},"project-lockdown","en\u002Fstudio-ergane\u002Fproject-lockdown",[123,25,124,125],"discovery","design","integration","A website showcasing a cinematic trailer and fan-made cosmetics for the game Counter-Strike 2.","Showcasing community craft worthy of a professional studio.",{"desktop":129,"mobile":130},"\u002Fimg\u002Fstudio-ergane\u002Fthumbnails\u002Fproject-lockdown-desktop.webp","\u002Fimg\u002Fstudio-ergane\u002Fthumbnails\u002Fproject-lockdown-mobile.webp",[],"https:\u002F\u002Fproject-lockdown.com\u002F",2025,"X2i_JnRcNRb3wnB46nMjA8dA_To9aWOqG5s4dQWPioI",[136,137],{"slug":120,"title":5},{"slug":138,"title":139},"blog-kollori","Blog Kollori",1790606057651]