From b2c6d4c070d4fafecdb90c48a58c5cea26e7a890 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luc=C3=A0s?= <vabrelucas@gmail.com>
Date: Thu, 4 Jan 2024 15:43:18 +0100
Subject: [PATCH] Add Builder for shields

---
 .idea/workspace.xml          |  62 +++---
 README.md                    |  75 +++----
 assets/banner.svg            | 375 +++++++++++++++++------------------
 config.yaml                  | 119 +++--------
 main.py                      |  16 +-
 src/config.py                |  71 ++-----
 src/model/skill.py           |  22 +-
 src/model/skill_list.py      |  14 +-
 src/model/social.py          |  27 ++-
 src/model/social_list.py     |   7 +-
 src/shield/shield_builder.py |  94 +++++++++
 src/template.py              |  14 +-
 template.md                  |  11 +-
 13 files changed, 466 insertions(+), 441 deletions(-)
 create mode 100644 src/shield/shield_builder.py

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index e3a293d..afef44a 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,35 +4,20 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b25cc8d3-396f-4036-b751-5d061242b2fc" name="Changes" comment="Add ts-node and some skills">
-      <change afterPath="$PROJECT_DIR$/assets/banner.svg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/main.py" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/requirements" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/config.py" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/model/skill.py" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/model/skill_list.py" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/model/social.py" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/model/social_list.py" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/template.py" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/template.md" afterDir="false" />
+    <list default="true" id="b25cc8d3-396f-4036-b751-5d061242b2fc" name="Changes" comment="Use only Python">
+      <change afterPath="$PROJECT_DIR$/src/shield/shield_builder.py" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/components/ImageComponent.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/components/LinkComponent.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/banner.svg" beforeDir="false" afterPath="$PROJECT_DIR$/assets/banner.svg" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/config.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/config.yaml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/main.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/models/BadgeModel.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/models/BannerModel.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/models/ConfigModel.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/models/LinkModel.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/Banner.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/Context.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/Link.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/Skill.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/url_builder/BadgeUrlBuilder.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/url_builder/BannerUrlBuilder.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/url_builder/UrlBuilder.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/views/template.njk" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/main.py" beforeDir="false" afterPath="$PROJECT_DIR$/main.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/config.py" beforeDir="false" afterPath="$PROJECT_DIR$/src/config.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/model/skill.py" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/skill.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/model/skill_list.py" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/skill_list.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/model/social.py" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/social.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/model/social_list.py" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/social_list.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/template.py" beforeDir="false" afterPath="$PROJECT_DIR$/src/template.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/template.md" beforeDir="false" afterPath="$PROJECT_DIR$/template.md" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -77,7 +62,10 @@
   <component name="PropertiesComponent"><![CDATA[{
   "keyToString": {
     "ASKED_MARK_IGNORED_FILES_AS_EXCLUDED": "true",
+    "Python.download_skill_badges.executor": "Run",
     "Python.main.executor": "Run",
+    "Python.shield_builder.executor": "Run",
+    "Python.skill.executor": "Run",
     "RunOnceActivity.OpenProjectViewOnStart": "true",
     "RunOnceActivity.ShowReadmeOnStart": "true",
     "WebServerToolWindowFactoryState": "false",
@@ -203,7 +191,9 @@
       <workItem from="1683016877648" duration="634000" />
       <workItem from="1686672064522" duration="10000" />
       <workItem from="1691244360881" duration="1235000" />
-      <workItem from="1703610497268" duration="12128000" />
+      <workItem from="1703610497268" duration="12323000" />
+      <workItem from="1704274694444" duration="8000" />
+      <workItem from="1704364154441" duration="11806000" />
     </task>
     <task id="LOCAL-00001" summary="Add OpenClassRooms link">
       <created>1660658552230</created>
@@ -247,7 +237,15 @@
       <option name="project" value="LOCAL" />
       <updated>1672348457528</updated>
     </task>
-    <option name="localTasksCounter" value="7" />
+    <task id="LOCAL-00007" summary="Use only Python">
+      <option name="closed" value="true" />
+      <created>1703624982444</created>
+      <option name="number" value="00007" />
+      <option name="presentableId" value="LOCAL-00007" />
+      <option name="project" value="LOCAL" />
+      <updated>1703624982444</updated>
+    </task>
+    <option name="localTasksCounter" value="8" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -270,13 +268,17 @@
     <MESSAGE value="Switch to Node.JS stack" />
     <MESSAGE value="Add package.json and typescript configuration files" />
     <MESSAGE value="Add ts-node and some skills" />
-    <option name="LAST_COMMIT_MESSAGE" value="Add ts-node and some skills" />
+    <MESSAGE value="Use only Python" />
+    <option name="LAST_COMMIT_MESSAGE" value="Use only Python" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
     <select />
   </component>
   <component name="com.intellij.coverage.CoverageDataManagerImpl">
-    <SUITE FILE_PATH="coverage/LucasVbr$main.coverage" NAME="main Coverage Results" MODIFIED="1703624206428" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="true" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$" />
+    <SUITE FILE_PATH="coverage/LucasVbr$skill.coverage" NAME="skill Coverage Results" MODIFIED="1704375618832" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="true" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$/src/model" />
+    <SUITE FILE_PATH="coverage/LucasVbr$download_skill_badges.coverage" NAME="download_skill_badges Coverage Results" MODIFIED="1704375392377" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="true" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$/src" />
+    <SUITE FILE_PATH="coverage/LucasVbr$shield_builder.coverage" NAME="shield_builder Coverage Results" MODIFIED="1704374403309" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="true" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$/src/shield" />
+    <SUITE FILE_PATH="coverage/LucasVbr$main.coverage" NAME="main Coverage Results" MODIFIED="1704379050479" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="true" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$" />
   </component>
 </project>
\ No newline at end of file
diff --git a/README.md b/README.md
index 5de77df..6a80e16 100644
--- a/README.md
+++ b/README.md
@@ -1,51 +1,57 @@
-<header align="center">
+<header>
+<div align="center">
 
 ![Hi I'm Lucàs👋](assets/banner.svg)
 
+</div>
 </header>
 
 ## 🚀 About Me
+
 I'm a passionate developer from 🇫🇷 **Pau, France**.
 
 ## 🔗 Social Links
-[![Linkedin](https://img.shields.io/static/v1?style=for-the-badge&amp;label=+&amp;logoColor=white&amp;message=Linkedin&amp;color=0e76a8&amp;logo=linkedin)](https://www.linkedin.com/in/lucasvbr)
-[![FreeCodeCamp](https://img.shields.io/static/v1?style=for-the-badge&amp;label=+&amp;logoColor=white&amp;message=FreeCodeCamp&amp;color=0a0a23&amp;logo=freecodecamp)](https://www.freecodecamp.org/LucasVbr)
-[![OpenClassRooms](https://img.shields.io/static/v1?style=for-the-badge&amp;label=+&amp;logoColor=white&amp;message=OpenClassRooms&amp;color=7451eb&amp;logo=openclassrooms)](https://openclassrooms.com/fr/members/97j9zltv6225)
-[![Exercism](https://img.shields.io/static/v1?style=for-the-badge&amp;label=+&amp;logoColor=white&amp;message=Exercism&amp;color=2e57e8&amp;logo=exercism)](https://exercism.org/profiles/LucasVbr)
+
+![Linkedin](https://img.shields.io/static/v1?message=Linkedin&style=for-the-badge&logo=Linkedin&logoColor=white&label=+&color=black&link=https%3A%2F%2Fwww.linkedin.com%2Fin%2Flucasvbr)
+![FreeCodeCamp](https://img.shields.io/static/v1?message=FreeCodeCamp&style=for-the-badge&logo=FreeCodeCamp&logoColor=white&label=+&color=black&link=https%3A%2F%2Fwww.freecodecamp.org%2FLucasVbr)
+![OpenClassRooms](https://img.shields.io/static/v1?message=OpenClassRooms&style=for-the-badge&logo=OpenClassRooms&logoColor=white&label=+&color=black&link=https%3A%2F%2Fopenclassrooms.com%2Ffr%2Fmembers%2F97j9zltv6225)
+![Exercism](https://img.shields.io/static/v1?message=Exercism&style=for-the-badge&logo=Exercism&logoColor=white&label=+&color=black&link=https%3A%2F%2Fexercism.org%2Fprofiles%2FLucasVbr)
 
 ## 🛠 Skills
-![Android](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Android&amp;color=3DDC84&amp;logo=android)
-![Angular](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Angular&amp;color=DD0031&amp;logo=angular)
-![Bootstrap](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Bootstrap&amp;color=7952B3&amp;logo=bootstrap)
-![Bulma](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Bulma&amp;color=00D1B2&amp;logo=bulma)
-![C](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=C&amp;color=A8B9CC&amp;logo=c)
-![CSS3](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=CSS3&amp;color=1572B6&amp;logo=css3)
-![Deno](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Deno&amp;color=black&amp;logo=deno)
-![Docker](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Docker&amp;color=2496ED&amp;logo=docker)
-![Express](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Express&amp;color=black&amp;logo=express)
-![Figma](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Figma&amp;color=F24E1E&amp;logo=figma)
-![Git](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Git&amp;color=F05032&amp;logo=git)
-![GNU Bash](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=GNU%20Bash&amp;color=4EAA25&amp;logo=gnu-bash)
-![HTML5](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=HTML5&amp;color=E34F26&amp;logo=html5)
-![JavaScript](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=JavaScript&amp;color=F7DF1E&amp;logo=javascript)
-![MariaDB](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=MariaDB&amp;color=003545&amp;logo=mariadb)
-![MongoDB](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=MongoDB&amp;color=47A248&amp;logo=mongodb)
-![MySQL](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=MySQL&amp;color=4479A1&amp;logo=mysql)
-![Node.js](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Node.js&amp;color=339933&amp;logo=node.js)
-![Nunjucks](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Nunjucks&amp;color=1C4913&amp;logo=nunjucks)
-![OCaml](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=OCaml&amp;color=EC6813&amp;logo=ocaml)
-![PHP](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=PHP&amp;color=777BB4&amp;logo=php)
-![PostgreSQL](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=PostgreSQL&amp;color=4169E1&amp;logo=postgresql)
-![Pug](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Pug&amp;color=A86454&amp;logo=pug)
-![Python](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Python&amp;color=3776AB&amp;logo=python)
-![React](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=React&amp;color=61DAFB&amp;logo=react)
-![SQLite](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=SQLite&amp;color=003B57&amp;logo=sqlite)
-![Symfony](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Symfony&amp;color=black&amp;logo=symfony)
-![TypeScript](https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=TypeScript&amp;color=3178C6&amp;logo=typescript)
+
+![Android](https://img.shields.io/static/v1?message=Android&logo=Android&logoColor=white&label=+&color=black)
+![Angular](https://img.shields.io/static/v1?message=Angular&logo=Angular&logoColor=white&label=+&color=black)
+![Bootstrap](https://img.shields.io/static/v1?message=Bootstrap&logo=Bootstrap&logoColor=white&label=+&color=black)
+![Bulma](https://img.shields.io/static/v1?message=Bulma&logo=Bulma&logoColor=white&label=+&color=black)
+![C](https://img.shields.io/static/v1?message=C&logo=C&logoColor=white&label=+&color=black)
+![CSS3](https://img.shields.io/static/v1?message=CSS3&logo=CSS3&logoColor=white&label=+&color=black)
+![Deno](https://img.shields.io/static/v1?message=Deno&logo=Deno&logoColor=white&label=+&color=black)
+![Docker](https://img.shields.io/static/v1?message=Docker&logo=Docker&logoColor=white&label=+&color=black)
+![Express](https://img.shields.io/static/v1?message=Express&logo=Express&logoColor=white&label=+&color=black)
+![Figma](https://img.shields.io/static/v1?message=Figma&logo=Figma&logoColor=white&label=+&color=black)
+![GNU Bash](https://img.shields.io/static/v1?message=GNU_Bash&logo=GNU+Bash&logoColor=white&label=+&color=black)
+![Git](https://img.shields.io/static/v1?message=Git&logo=Git&logoColor=white&label=+&color=black)
+![HTML5](https://img.shields.io/static/v1?message=HTML5&logo=HTML5&logoColor=white&label=+&color=black)
+![JavaScript](https://img.shields.io/static/v1?message=JavaScript&logo=JavaScript&logoColor=white&label=+&color=black)
+![MariaDB](https://img.shields.io/static/v1?message=MariaDB&logo=MariaDB&logoColor=white&label=+&color=black)
+![MongoDB](https://img.shields.io/static/v1?message=MongoDB&logo=MongoDB&logoColor=white&label=+&color=black)
+![MySQL](https://img.shields.io/static/v1?message=MySQL&logo=MySQL&logoColor=white&label=+&color=black)
+![Node.js](https://img.shields.io/static/v1?message=Node.js&logo=Node.js&logoColor=white&label=+&color=black)
+![Nunjucks](https://img.shields.io/static/v1?message=Nunjucks&logo=Nunjucks&logoColor=white&label=+&color=black)
+![OCaml](https://img.shields.io/static/v1?message=OCaml&logo=OCaml&logoColor=white&label=+&color=black)
+![PHP](https://img.shields.io/static/v1?message=PHP&logo=PHP&logoColor=white&label=+&color=black)
+![PostgreSQL](https://img.shields.io/static/v1?message=PostgreSQL&logo=PostgreSQL&logoColor=white&label=+&color=black)
+![Pug](https://img.shields.io/static/v1?message=Pug&logo=Pug&logoColor=white&label=+&color=black)
+![Python](https://img.shields.io/static/v1?message=Python&logo=Python&logoColor=white&label=+&color=black)
+![React](https://img.shields.io/static/v1?message=React&logo=React&logoColor=white&label=+&color=black)
+![SQLite](https://img.shields.io/static/v1?message=SQLite&logo=SQLite&logoColor=white&label=+&color=black)
+![Symfony](https://img.shields.io/static/v1?message=Symfony&logo=Symfony&logoColor=white&label=+&color=black)
+![TypeScript](https://img.shields.io/static/v1?message=TypeScript&logo=TypeScript&logoColor=white&label=+&color=black)
 
 ---
 
-<footer align="center">
+<footer>
+<div align="center">
 
 ![SVG Stats](https://github-stats-alpha.vercel.app/api?username=LucasVbr&cc=000&tc=fff&ic=fff&bc=000)
 
@@ -53,4 +59,5 @@ I'm a passionate developer from 🇫🇷 **Pau, France**.
 ![FreeCodeCamp Points](https://img.shields.io/freecodecamp/points/lucasvbr?label=FreeCodeCamp%20points)
 ![Made with love](https://img.shields.io/badge/-made%20with%20%E2%9D%A4%EF%B8%8F-red)
 
+</div>
 </footer>
\ No newline at end of file
diff --git a/assets/banner.svg b/assets/banner.svg
index 8709496..bb07842 100644
--- a/assets/banner.svg
+++ b/assets/banner.svg
@@ -1,216 +1,215 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 400" width="800" height="400">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1000 400" width="1000" height="400">
 	<foreignObject width="100%" height="100%">
 		<div xmlns="http://www.w3.org/1999/xhtml">
 			<style>
                 .container {
-                font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-
-                margin: 0;
-                width: 100%;
-                height: 400px;
-
-                background: #333;
-                background-size: 600% 400%;
-                border-radius: 10px;
-                /* color: white; */
-                text-align: center;
+                    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    margin: 0;
+                    width: 100%;
+                    height: 400px;
+                    /* background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7); */
+                    background: #333;
+                    background-size: 600% 400%;
+                    border-radius: 10px;
+                    /* color: white; */
+                    text-align: center;
                 }
 
 
                 h1 {
-                text-align: center;
-                color: #fff;
-                font-size: 5em;
-                letter-spacing: 8px;
-                font-family: "Lucida Console", Monaco, monospace;
-                font-weight: 400;
-                /*Create overlap*/
+                    text-align: center;
+                    color: #fff;
+                    font-size: 5em;
+                    letter-spacing: 8px;
+                    font-family: "Lucida Console", Monaco, monospace;
+                    font-weight: 400;
+                    /*Create overlap*/
 
-                margin: 0;
-                line-height: 0;
-                /*Animation*/
+                    margin: 0;
+                    line-height: 0;
+                    /*Animation*/
 
-                animation: glitch1 2.5s infinite;
+                    animation: glitch1 2.5s infinite;
                 }
 
                 h1:nth-child(2) {
-                color: #67f3da;
-                animation: glitch2 2.5s infinite;
+                    color: #67f3da;
+                    animation: glitch2 2.5s infinite;
                 }
 
                 h1:nth-child(3) {
-                color: #f16f6f;
-                animation: glitch3 2.5s infinite;
+                    color: #f16f6f;
+                    animation: glitch3 2.5s infinite;
                 }
                 /*Keyframes*/
 
                 @keyframes glitch1 {
-                0% {
-                    transform: none;
-                    opacity: 1;
-                }
-                7% {
-                    transform: skew(-0.5deg, -0.9deg);
-                    opacity: 0.75;
-                }
-                10% {
-                    transform: none;
-                    opacity: 1;
-                }
-                27% {
-                    transform: none;
-                    opacity: 1;
-                }
-                30% {
-                    transform: skew(0.8deg, -0.1deg);
-                    opacity: 0.75;
-                }
-                35% {
-                    transform: none;
-                    opacity: 1;
-                }
-                52% {
-                    transform: none;
-                    opacity: 1;
-                }
-                55% {
-                    transform: skew(-1deg, 0.2deg);
-                    opacity: 0.75;
-                }
-                50% {
-                    transform: none;
-                    opacity: 1;
-                }
-                72% {
-                    transform: none;
-                    opacity: 1;
-                }
-                75% {
-                    transform: skew(0.4deg, 1deg);
-                    opacity: 0.75;
-                }
-                80% {
-                    transform: none;
-                    opacity: 1;
-                }
-                100% {
-                    transform: none;
-                    opacity: 1;
-                }
+                    0% {
+                        transform: none;
+                        opacity: 1;
+                    }
+                    7% {
+                        transform: skew(-0.5deg, -0.9deg);
+                        opacity: 0.75;
+                    }
+                    10% {
+                        transform: none;
+                        opacity: 1;
+                    }
+                    27% {
+                        transform: none;
+                        opacity: 1;
+                    }
+                    30% {
+                        transform: skew(0.8deg, -0.1deg);
+                        opacity: 0.75;
+                    }
+                    35% {
+                        transform: none;
+                        opacity: 1;
+                    }
+                    52% {
+                        transform: none;
+                        opacity: 1;
+                    }
+                    55% {
+                        transform: skew(-1deg, 0.2deg);
+                        opacity: 0.75;
+                    }
+                    50% {
+                        transform: none;
+                        opacity: 1;
+                    }
+                    72% {
+                        transform: none;
+                        opacity: 1;
+                    }
+                    75% {
+                        transform: skew(0.4deg, 1deg);
+                        opacity: 0.75;
+                    }
+                    80% {
+                        transform: none;
+                        opacity: 1;
+                    }
+                    100% {
+                        transform: none;
+                        opacity: 1;
+                    }
                 }
 
                 @keyframes glitch2 {
-                0% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                7% {
-                    transform: translate(-2px, -3px);
-                    opacity: 0.5;
-                }
-                10% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                27% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                30% {
-                    transform: translate(-5px, -2px);
-                    opacity: 0.5;
-                }
-                35% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                52% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                55% {
-                    transform: translate(-5px, -1px);
-                    opacity: 0.5;
-                }
-                50% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                72% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                75% {
-                    transform: translate(-2px, -6px);
-                    opacity: 0.5;
-                }
-                80% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                100% {
-                    transform: none;
-                    opacity: 0.25;
-                }
+                    0% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    7% {
+                        transform: translate(-2px, -3px);
+                        opacity: 0.5;
+                    }
+                    10% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    27% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    30% {
+                        transform: translate(-5px, -2px);
+                        opacity: 0.5;
+                    }
+                    35% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    52% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    55% {
+                        transform: translate(-5px, -1px);
+                        opacity: 0.5;
+                    }
+                    50% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    72% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    75% {
+                        transform: translate(-2px, -6px);
+                        opacity: 0.5;
+                    }
+                    80% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    100% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
                 }
 
                 @keyframes glitch3 {
-                0% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                7% {
-                    transform: translate(2px, 3px);
-                    opacity: 0.5;
-                }
-                10% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                27% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                30% {
-                    transform: translate(5px, 2px);
-                    opacity: 0.5;
-                }
-                35% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                52% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                55% {
-                    transform: translate(5px, 1px);
-                    opacity: 0.5;
-                }
-                50% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                72% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                75% {
-                    transform: translate(2px, 6px);
-                    opacity: 0.5;
-                }
-                80% {
-                    transform: none;
-                    opacity: 0.25;
-                }
-                100% {
-                    transform: none;
-                    opacity: 0.25;
-                }
+                    0% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    7% {
+                        transform: translate(2px, 3px);
+                        opacity: 0.5;
+                    }
+                    10% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    27% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    30% {
+                        transform: translate(5px, 2px);
+                        opacity: 0.5;
+                    }
+                    35% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    52% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    55% {
+                        transform: translate(5px, 1px);
+                        opacity: 0.5;
+                    }
+                    50% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    72% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    75% {
+                        transform: translate(2px, 6px);
+                        opacity: 0.5;
+                    }
+                    80% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
+                    100% {
+                        transform: none;
+                        opacity: 0.25;
+                    }
                 }
 			</style>
 			<div class="container">
@@ -220,4 +219,4 @@
             </div>
         </div>
 	</foreignObject>
-</svg>
\ No newline at end of file
+<script xmlns=""/></svg>
\ No newline at end of file
diff --git a/config.yaml b/config.yaml
index ca25801..8c9a83b 100644
--- a/config.yaml
+++ b/config.yaml
@@ -1,107 +1,44 @@
 user: "LucasVbr"
 
 socials:
-#  - name: "My Portfolio"
-#    url: "https://lucasvbr.github.io/portfolio"
-#    img: "https://img.shields.io/static/v1?style=for-the-badge&amp;label=+&amp;logoColor=white&amp;message=My+Portfolio&amp;logo=ko-fi&amp;color=000"
-
   - name: "Linkedin"
     url: "https://www.linkedin.com/in/lucasvbr"
-    img: "https://img.shields.io/static/v1?style=for-the-badge&amp;label=+&amp;logoColor=white&amp;message=Linkedin&amp;color=0e76a8&amp;logo=linkedin"
 
   - name: "FreeCodeCamp"
     url: "https://www.freecodecamp.org/LucasVbr"
-    img: "https://img.shields.io/static/v1?style=for-the-badge&amp;label=+&amp;logoColor=white&amp;message=FreeCodeCamp&amp;color=0a0a23&amp;logo=freecodecamp"
 
   - name: "OpenClassRooms"
     url: "https://openclassrooms.com/fr/members/97j9zltv6225"
-    img: "https://img.shields.io/static/v1?style=for-the-badge&amp;label=+&amp;logoColor=white&amp;message=OpenClassRooms&amp;color=7451eb&amp;logo=openclassrooms"
 
   - name: "Exercism"
     url: "https://exercism.org/profiles/LucasVbr"
-    img: "https://img.shields.io/static/v1?style=for-the-badge&amp;label=+&amp;logoColor=white&amp;message=Exercism&amp;color=2e57e8&amp;logo=exercism"
 
 skills:
-  - name: "Android"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Android&amp;color=3DDC84&amp;logo=android"
-
-  - name: "Angular"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Angular&amp;color=DD0031&amp;logo=angular"
-
-  - name: "Bootstrap"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Bootstrap&amp;color=7952B3&amp;logo=bootstrap"
-
-  - name: "Bulma"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Bulma&amp;color=00D1B2&amp;logo=bulma"
-
-  - name: "C"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=C&amp;color=A8B9CC&amp;logo=c"
-
-  - name: "CSS3"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=CSS3&amp;color=1572B6&amp;logo=css3"
-
-  - name: "Deno"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Deno&amp;color=black&amp;logo=deno"
-
-  - name: "Docker"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Docker&amp;color=2496ED&amp;logo=docker"
-
-  - name: "Express"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Express&amp;color=black&amp;logo=express"
-
-  - name: "Figma"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Figma&amp;color=F24E1E&amp;logo=figma"
-
-  - name: "Git"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Git&amp;color=F05032&amp;logo=git"
-
-  - name: "GNU Bash"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=GNU%20Bash&amp;color=4EAA25&amp;logo=gnu-bash"
-
-  - name: "HTML5"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=HTML5&amp;color=E34F26&amp;logo=html5"
-
-  - name: "JavaScript"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=JavaScript&amp;color=F7DF1E&amp;logo=javascript"
-
-  - name: "MariaDB"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=MariaDB&amp;color=003545&amp;logo=mariadb"
-
-  - name: "MongoDB"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=MongoDB&amp;color=47A248&amp;logo=mongodb"
-
-  - name: "MySQL"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=MySQL&amp;color=4479A1&amp;logo=mysql"
-
-  - name: "Node.js"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Node.js&amp;color=339933&amp;logo=node.js"
-
-  - name: "Nunjucks"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Nunjucks&amp;color=1C4913&amp;logo=nunjucks"
-
-  - name: "OCaml"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=OCaml&amp;color=EC6813&amp;logo=ocaml"
-
-  - name: "PHP"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=PHP&amp;color=777BB4&amp;logo=php"
-
-  - name: "PostgreSQL"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=PostgreSQL&amp;color=4169E1&amp;logo=postgresql"
-
-  - name: "Pug"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Pug&amp;color=A86454&amp;logo=pug"
-
-  - name: "Python"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Python&amp;color=3776AB&amp;logo=python"
-
-  - name: "React"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=React&amp;color=61DAFB&amp;logo=react"
-
-  - name: "SQLite"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=SQLite&amp;color=003B57&amp;logo=sqlite"
-
-  - name: "Symfony"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=Symfony&amp;color=black&amp;logo=symfony"
-
-  - name: "TypeScript"
-    url: "https://img.shields.io/static/v1?style=flat&amp;label=+&amp;logoColor=white&amp;message=TypeScript&amp;color=3178C6&amp;logo=typescript"
+  - "Android"
+  - "Angular"
+  - "Bootstrap"
+  - "Bulma"
+  - "C"
+  - "CSS3"
+  - "Deno"
+  - "Docker"
+  - "Express"
+  - "Figma"
+  - "Git"
+  - "GNU Bash"
+  - "HTML5"
+  - "JavaScript"
+  - "MariaDB"
+  - "MongoDB"
+  - "MySQL"
+  - "Node.js"
+  - "Nunjucks"
+  - "OCaml"
+  - "PHP"
+  - "PostgreSQL"
+  - "Pug"
+  - "Python"
+  - "React"
+  - "SQLite"
+  - "Symfony"
+  - "TypeScript"
\ No newline at end of file
diff --git a/main.py b/main.py
index 903b851..c878ea5 100644
--- a/main.py
+++ b/main.py
@@ -1,19 +1,17 @@
-from src.config import load_data
-from src.template import load_template
+from src.config import Config
+from src.template import Template
 
 CONFIG_FILE = 'config.yaml'
 TEMPLATE_FILE = 'template.md'
 OUTPUT_FILE = 'README.md'
 
 if __name__ == '__main__':
-    data = load_data(CONFIG_FILE)
-    template = load_template(TEMPLATE_FILE)
-
-    # Add data to template
-    result = template.format(**data)
+    template = Template(TEMPLATE_FILE)
+    data = Config(CONFIG_FILE).get_data()
 
     # Generate README file
-    with open(OUTPUT_FILE, 'w') as readme_file:
-        readme_file.write(result)
+    render = template.render(**data)
+    with open(OUTPUT_FILE, 'w') as f:
+        f.write(render)
 
     print(f"{OUTPUT_FILE} generated successfully! 🎉")
diff --git a/src/config.py b/src/config.py
index 997c641..0f56f1b 100644
--- a/src/config.py
+++ b/src/config.py
@@ -1,80 +1,37 @@
 import yaml
-
 from src.model.skill_list import SkillList
 import requests
-
 from src.model.social_list import SocialList
 
 
-def load_data(config_file_path: str) -> dict:
-    """Load data from config file and return a dict"""
-    config_data_builder = ConfigDataBuilder(config_file_path)
-    return (config_data_builder
-            .load_config_file()
-            .load_user_info()
-            .load_skill_section()
-            .load_social_section()
-            .build())
-
-
-class ConfigDataBuilder:
+class Config:
+    config_file_path: str
+    config_data: dict[str, any] = None
 
     def __init__(self, config_file_path: str):
-        """
-        Initialize ConfigDataBuilder
-
-        :param config_file_path: Path to config file
-        """
         self.config_file_path = config_file_path
-        self.config_data = None
 
-    def load_config_file(self) -> 'ConfigDataBuilder':
-        """
-        Load config file and return ConfigDataBuilder
-
-        :return: ConfigDataBuilder
-        """
+    def load_config_file(self):
         with open(self.config_file_path, 'r') as config_file:
             self.config_data = yaml.safe_load(config_file)
-        return self
 
-    def load_user_info(self) -> 'ConfigDataBuilder':
-        """
-        Load user info from GitHub API and return ConfigDataBuilder
-
-        :return: ConfigDataBuilder
-        """
+    def handle_user_info(self):
         user = self.config_data["user"]
         response = requests.get(f"https://api.github.com/users/{user}")
-
         if response.status_code != 200:
             raise Exception("User not found")
-
         self.config_data["user"] = response.json()
-        return self
 
-    def load_social_section(self) -> 'ConfigDataBuilder':
-        """
-        Load social section and return ConfigDataBuilder
-
-        :return: ConfigDataBuilder
-        """
-        self.config_data["socials"] = str(SocialList(self.config_data["socials"]))
-        return self
-
-    def load_skill_section(self) -> 'ConfigDataBuilder':
-        """
-        Load skill section and return ConfigDataBuilder
-
-        :return: ConfigDataBuilder
-        """
+    def handle_skill_section(self):
         self.config_data["skills"] = str(SkillList(self.config_data["skills"]))
-        return self
 
-    def build(self) -> dict:
-        """
-        Return config data
+    def handle_social_section(self):
+        self.config_data["socials"] = str(SocialList(self.config_data["socials"]))
+
+    def get_data(self):
+        self.load_config_file()
+        self.handle_user_info()
+        self.handle_skill_section()
+        self.handle_social_section()
 
-        :return: dict
-        """
         return self.config_data
diff --git a/src/model/skill.py b/src/model/skill.py
index 31ee08f..77dc66f 100644
--- a/src/model/skill.py
+++ b/src/model/skill.py
@@ -1,10 +1,18 @@
+from src.shield.shield_builder import ShieldBuilder
+
+
 class Skill:
-    def __init__(self, name: str, url: str):
-        self.name = name
-        self.url = url
+    alt: str
+    src: str
 
-    def __str__(self):
-        return f"![{self.name}]({self.url})"
+    def __init__(self, name: str):
+        self.alt = name
+        self.src = (
+            ShieldBuilder()
+            .set_message(name)
+            .set_logo(name)
+            .build()
+        )
 
-    def __repr__(self):
-        return f"![{self.name}]({self.url})"
\ No newline at end of file
+    def __str__(self) -> str:
+        return f"![{self.alt}]({self.src})"
diff --git a/src/model/skill_list.py b/src/model/skill_list.py
index 2966801..e30517d 100644
--- a/src/model/skill_list.py
+++ b/src/model/skill_list.py
@@ -2,12 +2,14 @@ from src.model.skill import Skill
 
 
 class SkillList:
-    def __init__(self, skills: list):
-        self.skills = [Skill(skill.get("name"), skill.get("url")) for skill in skills]
+    skills: list[Skill]
+
+    def __init__(self, skills: list[str]):
+        # Sort and remove duplicates
+        skills = list(set(skills))
+        skills.sort()
+
+        self.skills = [Skill(skill) for skill in skills]
 
     def __str__(self) -> str:
         return "\n".join([str(skill) for skill in self.skills])
-
-    def __repr__(self) -> str:
-        return "\n".join([repr(skill) for skill in self.skills])
-
diff --git a/src/model/social.py b/src/model/social.py
index 80ce615..6230821 100644
--- a/src/model/social.py
+++ b/src/model/social.py
@@ -1,11 +1,20 @@
-class Social:
-    def __init__(self, name: str, url: str, img: str):
-        self.name = name
-        self.url = url
-        self.img = img
+from src.shield.shield_builder import ShieldBuilder
+
+
+class Social:
+    name: str
+    img: str
+
+    def __init__(self, name: str, url: str):
+        self.name = name
+        self.img = (
+            ShieldBuilder()
+            .set_message(name)
+            .set_logo(name)
+            .set_link(url)
+            .set_style("for-the-badge")
+            .build()
+        )
 
-    def __repr__(self) -> str:
-        return f"[![{self.name}]({self.img})]({self.url})"
-    
     def __str__(self) -> str:
-        return f"[![{self.name}]({self.img})]({self.url})"
\ No newline at end of file
+        return f"![{self.name}]({self.img})"
diff --git a/src/model/social_list.py b/src/model/social_list.py
index b5f912c..0d6b2a9 100644
--- a/src/model/social_list.py
+++ b/src/model/social_list.py
@@ -2,11 +2,10 @@ from src.model.social import Social
 
 
 class SocialList:
+    socials: list[Social]
+
     def __init__(self, socials: list):
-        self.socials = [Social(social.get("name"), social.get("url"), social.get("img")) for social in socials]
+        self.socials = [Social(social.get("name"), social.get("url")) for social in socials]
 
     def __str__(self) -> str:
         return "\n".join([str(social) for social in self.socials])
-
-    def __repr__(self) -> str:
-        return "\n".join([str(social) for social in self.socials])
\ No newline at end of file
diff --git a/src/shield/shield_builder.py b/src/shield/shield_builder.py
new file mode 100644
index 0000000..377b56f
--- /dev/null
+++ b/src/shield/shield_builder.py
@@ -0,0 +1,94 @@
+from urllib.parse import urlunsplit, urlencode
+
+
+class ShieldBuilder:
+    BASE_URL = "https://img.shields.io/static/v1"
+
+    message: str = None
+    style: str = None
+    logo: str = None
+    logo_color: str = None
+    label: str = None
+    label_color: str = None
+    color: str = None
+    cache_seconds: int = None
+    link: str = None
+
+    def __init__(self):
+        self.logo_color = "white"
+        self.label = " "
+        self.color = "black"
+
+    def set_message(self, message: str):
+        self.message = (
+            message
+            .replace("_", "__")
+            .replace("-", "--")
+            .replace(" ", "_")
+        )
+        return self
+
+    def set_style(self, style: str):
+        if not style in ["flat", "flat-square", "plastic", "for-the-badge", "social"]:
+            raise Exception("Invalid style")
+
+        self.style = style
+        return self
+
+    def set_logo(self, logo: str):
+        self.logo = logo
+        return self
+
+    def set_logo_color(self, logo_color: str):
+        self.logo_color = logo_color
+        return self
+
+    def set_label(self, label: str):
+        self.label = label
+        return self
+
+    def set_label_color(self, label_color: str):
+        self.label_color = label_color
+        return self
+
+    def set_color(self, color: str):
+        self.color = color
+        return self
+
+    def set_cache_seconds(self, cache_seconds: int):
+        self.cache_seconds = cache_seconds
+        return self
+
+    def set_link(self, link: str):
+        self.link = link
+        return self
+
+    def get_query(self):
+        query = {
+            "message": self.message,
+            "style": self.style,
+            "logo": self.logo,
+            "logoColor": self.logo_color,
+            "label": self.label,
+            "labelColor": self.label_color,
+            "color": self.color,
+            "cacheSeconds": self.cache_seconds,
+            "link": self.link
+        }
+
+        # Remove None values
+        return {k: v for k, v in query.items() if v is not None}
+
+    def build(self):
+        query = urlencode(self.get_query())
+        return urlunsplit(("", "", self.BASE_URL, query, ""))
+
+
+if "__main__" == __name__:
+    shield_builder = (
+        ShieldBuilder()
+        .set_logo("HTML5")
+        .set_message("HTML5")
+        .build()
+    )
+    print(shield_builder)
diff --git a/src/template.py b/src/template.py
index f19f5ec..c96987b 100644
--- a/src/template.py
+++ b/src/template.py
@@ -1,4 +1,10 @@
-def load_template(template_file_path: str):
-    with open(template_file_path, 'r') as template_file:
-        template_content = template_file.read()
-    return template_content
+class Template:
+
+    def __init__(self, template_path: str):
+        self.template_path = template_path
+
+    def render(self, **kwargs) -> str:
+        with open(self.template_path, 'r') as f:
+            template = f.read()
+
+        return template.format(**kwargs)
diff --git a/template.md b/template.md
index f3826ad..2fe98e1 100644
--- a/template.md
+++ b/template.md
@@ -1,21 +1,27 @@
-<header align="center">
+<header>
+<div align="center">
 
 ![Hi I'm Lucàs👋](assets/banner.svg)
 
+</div>
 </header>
 
 ## 🚀 About Me
+
 I'm a passionate developer from 🇫🇷 **{user[location]}**.
 
 ## 🔗 Social Links
+
 {socials}
 
 ## 🛠 Skills
+
 {skills}
 
 ---
 
-<footer align="center">
+<footer>
+<div align="center">
 
 ![SVG Stats](https://github-stats-alpha.vercel.app/api?username=LucasVbr&cc=000&tc=fff&ic=fff&bc=000)
 
@@ -23,4 +29,5 @@ I'm a passionate developer from 🇫🇷 **{user[location]}**.
 ![FreeCodeCamp Points](https://img.shields.io/freecodecamp/points/lucasvbr?label=FreeCodeCamp%20points)
 ![Made with love](https://img.shields.io/badge/-made%20with%20%E2%9D%A4%EF%B8%8F-red)
 
+</div>
 </footer>
\ No newline at end of file