{"id":275,"date":"2025-04-27T22:46:21","date_gmt":"2025-04-27T22:46:21","guid":{"rendered":"https:\/\/leosix.fr\/?post_type=portfolio&#038;p=275"},"modified":"2025-09-30T08:54:28","modified_gmt":"2025-09-30T08:54:28","slug":"bibliotheque-de-composants-ui-cyber-css","status":"publish","type":"portfolio","link":"https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/","title":{"rendered":"Biblioth\u00e8que de composants UI &#8211; Cyber CSS"},"content":{"rendered":"\n<p>Ce projet universitaire consistait \u00e0 r\u00e9aliser une biblioth\u00e8que de composants (header, boutons, cartes, formulaires, &#8230;) r\u00e9utilisables et flexibles dans un style cyberpunk. Ce style s\u2019inspire d\u2019un futur dystopique, souvent urbain, technologique et chaotique. Graphiquement, il se caract\u00e9rise par des couleurs vives (rose flashy, bleu \u00e9lectrique, jaune) sur des fonds sombres ou noirs, ce qui donne un contraste important, donc une bonne lisibilit\u00e9. Ce style contient aussi des textures num\u00e9riques, comme des effets glitchs ou des hologrammes, en guise d&rsquo;animation. <\/p>\n\n\n\n<p>Durant tout le long du projet, j&rsquo;ai d\u00fb mettre en place des comp\u00e9tences que j&rsquo;ai acquis en cours d&rsquo;int\u00e9gration web, telles que :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>l&rsquo;utilisation du HTML, CSS et SASS,<\/li>\n\n\n\n<li>la conception de composants responsive (format mobile, tablette, desktop),<\/li>\n\n\n\n<li>l&rsquo;ajout d&rsquo;animation \/ micro-interaction sur des \u00e9l\u00e9ments au survol ou au clique,<\/li>\n\n\n\n<li>le respect des principes de l&rsquo;accessibilit\u00e9, notamment en ce qui concerne le contraste, la visibilit\u00e9 du focus et l\u2019utilisation de labels appropri\u00e9s.<\/li>\n\n\n\n<li>la r\u00e9daction de la documentation (fichier README) contenant une pr\u00e9sentation des composants et des instructions sur l&rsquo;utilisation de la biblioth\u00e8que,<\/li>\n\n\n\n<li>ainsi que l&rsquo;organisation des fichiers dans leurs dossiers respectives (ex: les fichiers _mixins.scss et _variables.scss dans le dossier abstract).<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\" style=\"margin-top:2em;margin-bottom:2em\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/leosix.fr\/cyber-css\/\" style=\"border-radius:12px;background-color:#5b22e6;font-style:normal;font-weight:500;text-decoration:none\" target=\"_blank\" rel=\"noreferrer noopener\">Voir la d\u00e9mo<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/github.com\/leosix10\/cyber-css\" style=\"border-radius:12px;background-color:#5b22e6;font-style:normal;font-weight:500;text-decoration:none\" target=\"_blank\" rel=\"noreferrer noopener\">Consulter le d\u00e9p\u00f4t sur GitHub<\/a><\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/leosix.fr\/wp-content\/uploads\/2025\/09\/cyber-css.jpg\" alt=\"\" class=\"wp-image-311\" srcset=\"https:\/\/leosix.fr\/wp-content\/uploads\/2025\/09\/cyber-css.jpg 1000w, https:\/\/leosix.fr\/wp-content\/uploads\/2025\/09\/cyber-css-300x300.jpg 300w, https:\/\/leosix.fr\/wp-content\/uploads\/2025\/09\/cyber-css-150x150.jpg 150w, https:\/\/leosix.fr\/wp-content\/uploads\/2025\/09\/cyber-css-768x768.jpg 768w, https:\/\/leosix.fr\/wp-content\/uploads\/2025\/09\/cyber-css-500x500.jpg 500w, https:\/\/leosix.fr\/wp-content\/uploads\/2025\/09\/cyber-css-800x800.jpg 800w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Ce projet universitaire consistait \u00e0 r\u00e9aliser une biblioth\u00e8que de composants (header, boutons, cartes, formulaires, &#8230;) r\u00e9utilisables et flexibles dans un style cyberpunk. Ce style s\u2019inspire d\u2019un futur dystopique, souvent urbain, technologique et chaotique. Graphiquement, il se caract\u00e9rise par des couleurs vives (rose flashy, bleu \u00e9lectrique, jaune) sur des fonds sombres ou noirs, ce qui donne [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":311,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"portfolio_category":[7],"portfolio_tag":[],"class_list":["post-275","portfolio","type-portfolio","status-publish","format-standard","has-post-thumbnail","hentry","portfolio_category-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Biblioth\u00e8que de composants UI - Cyber CSS - L\u00e9o Six - Portfolio<\/title>\n<meta name=\"description\" content=\"Biblioth\u00e8que de composants UI Cyber CSS : style cyberpunk contrast\u00e9, boutons, cartes &amp; animations responsive accessibles.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Biblioth\u00e8que de composants UI - Cyber CSS - L\u00e9o Six - Portfolio\" \/>\n<meta property=\"og:description\" content=\"Biblioth\u00e8que de composants UI Cyber CSS : style cyberpunk contrast\u00e9, boutons, cartes &amp; animations responsive accessibles.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/\" \/>\n<meta property=\"og:site_name\" content=\"L\u00e9o Six - Portfolio\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-30T08:54:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/leosix.fr\/wp-content\/uploads\/2025\/09\/cyber-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/leosix.fr\\\/index.php\\\/portfolio\\\/bibliotheque-de-composants-ui-cyber-css\\\/\",\"url\":\"https:\\\/\\\/leosix.fr\\\/index.php\\\/portfolio\\\/bibliotheque-de-composants-ui-cyber-css\\\/\",\"name\":\"Biblioth\u00e8que de composants UI - Cyber CSS - L\u00e9o Six - Portfolio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/leosix.fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/leosix.fr\\\/index.php\\\/portfolio\\\/bibliotheque-de-composants-ui-cyber-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/leosix.fr\\\/index.php\\\/portfolio\\\/bibliotheque-de-composants-ui-cyber-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/leosix.fr\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/cyber-css.jpg\",\"datePublished\":\"2025-04-27T22:46:21+00:00\",\"dateModified\":\"2025-09-30T08:54:28+00:00\",\"description\":\"Biblioth\u00e8que de composants UI Cyber CSS : style cyberpunk contrast\u00e9, boutons, cartes & animations responsive accessibles.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/leosix.fr\\\/index.php\\\/portfolio\\\/bibliotheque-de-composants-ui-cyber-css\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/leosix.fr\\\/index.php\\\/portfolio\\\/bibliotheque-de-composants-ui-cyber-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/leosix.fr\\\/index.php\\\/portfolio\\\/bibliotheque-de-composants-ui-cyber-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/leosix.fr\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/cyber-css.jpg\",\"contentUrl\":\"https:\\\/\\\/leosix.fr\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/cyber-css.jpg\",\"width\":1000,\"height\":1000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/leosix.fr\\\/index.php\\\/portfolio\\\/bibliotheque-de-composants-ui-cyber-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/leosix.fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Portfolio\",\"item\":\"https:\\\/\\\/leosix.fr\\\/index.php\\\/portfolio\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Biblioth\u00e8que de composants UI &#8211; Cyber CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/leosix.fr\\\/#website\",\"url\":\"https:\\\/\\\/leosix.fr\\\/\",\"name\":\"L\u00e9o Six - Portfolio\",\"description\":\"Graphiste - UX\\\/UI designer, \u00e9tudiant en Master Design Graphique et d&#039;Interaction \u00e0 l&#039;Universit\u00e9 de Valenciennes\",\"publisher\":{\"@id\":\"https:\\\/\\\/leosix.fr\\\/#\\\/schema\\\/person\\\/9799a1431e4244d18b9449462b41c49d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/leosix.fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/leosix.fr\\\/#\\\/schema\\\/person\\\/9799a1431e4244d18b9449462b41c49d\",\"name\":\"L\u00e9o Six\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/leosix.fr\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/logo-2024.jpg\",\"url\":\"https:\\\/\\\/leosix.fr\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/logo-2024.jpg\",\"contentUrl\":\"https:\\\/\\\/leosix.fr\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/logo-2024.jpg\",\"width\":500,\"height\":500,\"caption\":\"L\u00e9o Six\"},\"logo\":{\"@id\":\"https:\\\/\\\/leosix.fr\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/logo-2024.jpg\"},\"sameAs\":[\"https:\\\/\\\/leosix.fr\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Biblioth\u00e8que de composants UI - Cyber CSS - L\u00e9o Six - Portfolio","description":"Biblioth\u00e8que de composants UI Cyber CSS : style cyberpunk contrast\u00e9, boutons, cartes & animations responsive accessibles.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/","og_locale":"fr_FR","og_type":"article","og_title":"Biblioth\u00e8que de composants UI - Cyber CSS - L\u00e9o Six - Portfolio","og_description":"Biblioth\u00e8que de composants UI Cyber CSS : style cyberpunk contrast\u00e9, boutons, cartes & animations responsive accessibles.","og_url":"https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/","og_site_name":"L\u00e9o Six - Portfolio","article_modified_time":"2025-09-30T08:54:28+00:00","og_image":[{"width":1000,"height":1000,"url":"https:\/\/leosix.fr\/wp-content\/uploads\/2025\/09\/cyber-css.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/","url":"https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/","name":"Biblioth\u00e8que de composants UI - Cyber CSS - L\u00e9o Six - Portfolio","isPartOf":{"@id":"https:\/\/leosix.fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/#primaryimage"},"image":{"@id":"https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/#primaryimage"},"thumbnailUrl":"https:\/\/leosix.fr\/wp-content\/uploads\/2025\/09\/cyber-css.jpg","datePublished":"2025-04-27T22:46:21+00:00","dateModified":"2025-09-30T08:54:28+00:00","description":"Biblioth\u00e8que de composants UI Cyber CSS : style cyberpunk contrast\u00e9, boutons, cartes & animations responsive accessibles.","breadcrumb":{"@id":"https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/#primaryimage","url":"https:\/\/leosix.fr\/wp-content\/uploads\/2025\/09\/cyber-css.jpg","contentUrl":"https:\/\/leosix.fr\/wp-content\/uploads\/2025\/09\/cyber-css.jpg","width":1000,"height":1000},{"@type":"BreadcrumbList","@id":"https:\/\/leosix.fr\/index.php\/portfolio\/bibliotheque-de-composants-ui-cyber-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/leosix.fr\/"},{"@type":"ListItem","position":2,"name":"Portfolio","item":"https:\/\/leosix.fr\/index.php\/portfolio\/"},{"@type":"ListItem","position":3,"name":"Biblioth\u00e8que de composants UI &#8211; Cyber CSS"}]},{"@type":"WebSite","@id":"https:\/\/leosix.fr\/#website","url":"https:\/\/leosix.fr\/","name":"L\u00e9o Six - Portfolio","description":"Graphiste - UX\/UI designer, \u00e9tudiant en Master Design Graphique et d&#039;Interaction \u00e0 l&#039;Universit\u00e9 de Valenciennes","publisher":{"@id":"https:\/\/leosix.fr\/#\/schema\/person\/9799a1431e4244d18b9449462b41c49d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/leosix.fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":["Person","Organization"],"@id":"https:\/\/leosix.fr\/#\/schema\/person\/9799a1431e4244d18b9449462b41c49d","name":"L\u00e9o Six","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/leosix.fr\/wp-content\/uploads\/2025\/08\/logo-2024.jpg","url":"https:\/\/leosix.fr\/wp-content\/uploads\/2025\/08\/logo-2024.jpg","contentUrl":"https:\/\/leosix.fr\/wp-content\/uploads\/2025\/08\/logo-2024.jpg","width":500,"height":500,"caption":"L\u00e9o Six"},"logo":{"@id":"https:\/\/leosix.fr\/wp-content\/uploads\/2025\/08\/logo-2024.jpg"},"sameAs":["https:\/\/leosix.fr"]}]}},"_links":{"self":[{"href":"https:\/\/leosix.fr\/index.php\/wp-json\/wp\/v2\/portfolio\/275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leosix.fr\/index.php\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/leosix.fr\/index.php\/wp-json\/wp\/v2\/types\/portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/leosix.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leosix.fr\/index.php\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":5,"href":"https:\/\/leosix.fr\/index.php\/wp-json\/wp\/v2\/portfolio\/275\/revisions"}],"predecessor-version":[{"id":339,"href":"https:\/\/leosix.fr\/index.php\/wp-json\/wp\/v2\/portfolio\/275\/revisions\/339"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/leosix.fr\/index.php\/wp-json\/wp\/v2\/media\/311"}],"wp:attachment":[{"href":"https:\/\/leosix.fr\/index.php\/wp-json\/wp\/v2\/media?parent=275"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/leosix.fr\/index.php\/wp-json\/wp\/v2\/portfolio_category?post=275"},{"taxonomy":"portfolio_tag","embeddable":true,"href":"https:\/\/leosix.fr\/index.php\/wp-json\/wp\/v2\/portfolio_tag?post=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}