commit 9179ff296edbf4008b412c4008bcbee54e5d2adf Author: mohassani1 Date: Thu Jun 27 18:37:05 2024 +0200 :sparkles: portfolio created diff --git a/Portfolio/app.js b/Portfolio/app.js new file mode 100644 index 0000000..0241caf --- /dev/null +++ b/Portfolio/app.js @@ -0,0 +1,40 @@ +const burgerButton = document.getElementsByClassName("burger-button")[0]; +const menu = document.querySelector("header > .menu"); +let menuCollapsed = false; +const menuLinks = document.getElementsByClassName("link"); + +const openMenu = () => { + menuCollapsed = true; + burgerButton.src = "assets/img/close.svg"; + burgerButton.style.width = "25px"; + menu.style.visibility = "visible"; + menu.style.opacity = "1"; +}; + +const closeMenu = () => { + menuCollapsed = false; + burgerButton.style.width = "35px"; + burgerButton.src = "assets/img/burger.svg"; + menu.style.visibility = "hidden"; + menu.style.opacity = "0"; +}; + +burgerButton.addEventListener("click", () => { + if (menuCollapsed === false) { + openMenu(); + } else { + closeMenu(); + } +}); + +for (let i = 0; i < menuLinks.length; i++) { + menuLinks[i].addEventListener("click", () => { + if (menuCollapsed === true) { + closeMenu(); + } + }); +} + +const seeMoreProjectsButton = document.querySelector('#see-more-projects') +const seeMoreProjectsContent = document.querySelector('.more-projects__container') +seeMoreProjectsButton.addEventListener('click', () => seeMoreProjectsContent.classList.toggle('more-projects__container--show')) \ No newline at end of file diff --git a/Portfolio/assets/cv.pdf b/Portfolio/assets/cv.pdf new file mode 100644 index 0000000..89975f5 Binary files /dev/null and b/Portfolio/assets/cv.pdf differ diff --git a/Portfolio/assets/fonts/MonumentExtended-Regular.otf b/Portfolio/assets/fonts/MonumentExtended-Regular.otf new file mode 100644 index 0000000..0673962 Binary files /dev/null and b/Portfolio/assets/fonts/MonumentExtended-Regular.otf differ diff --git a/Portfolio/assets/fonts/MonumentExtended-Ultrabold.otf b/Portfolio/assets/fonts/MonumentExtended-Ultrabold.otf new file mode 100644 index 0000000..fd41187 Binary files /dev/null and b/Portfolio/assets/fonts/MonumentExtended-Ultrabold.otf differ diff --git a/Portfolio/assets/img/72AF9324-C50A-42F9-9236-C21DB13B90D9.png b/Portfolio/assets/img/72AF9324-C50A-42F9-9236-C21DB13B90D9.png new file mode 100644 index 0000000..b3858d7 Binary files /dev/null and b/Portfolio/assets/img/72AF9324-C50A-42F9-9236-C21DB13B90D9.png differ diff --git a/Portfolio/assets/img/Docker-Logo.png b/Portfolio/assets/img/Docker-Logo.png new file mode 100644 index 0000000..a45dad0 Binary files /dev/null and b/Portfolio/assets/img/Docker-Logo.png differ diff --git a/Portfolio/assets/img/HTML5_Logo_512.png b/Portfolio/assets/img/HTML5_Logo_512.png new file mode 100644 index 0000000..81d1fcb Binary files /dev/null and b/Portfolio/assets/img/HTML5_Logo_512.png differ diff --git a/Portfolio/assets/img/Java_programming_language_logo.svg b/Portfolio/assets/img/Java_programming_language_logo.svg new file mode 100644 index 0000000..80260a7 --- /dev/null +++ b/Portfolio/assets/img/Java_programming_language_logo.svg @@ -0,0 +1,41 @@ + + + + diff --git a/Portfolio/assets/img/Logo_C_sharp.svg.png b/Portfolio/assets/img/Logo_C_sharp.svg.png new file mode 100644 index 0000000..c560210 Binary files /dev/null and b/Portfolio/assets/img/Logo_C_sharp.svg.png differ diff --git a/Portfolio/assets/img/React-icon.svg.png b/Portfolio/assets/img/React-icon.svg.png new file mode 100644 index 0000000..5fdb243 Binary files /dev/null and b/Portfolio/assets/img/React-icon.svg.png differ diff --git a/Portfolio/assets/img/Reflection.png b/Portfolio/assets/img/Reflection.png new file mode 100644 index 0000000..4b0d4dc Binary files /dev/null and b/Portfolio/assets/img/Reflection.png differ diff --git a/Portfolio/assets/img/Swift-Logo.png b/Portfolio/assets/img/Swift-Logo.png new file mode 100644 index 0000000..b080a04 Binary files /dev/null and b/Portfolio/assets/img/Swift-Logo.png differ diff --git a/Portfolio/assets/img/athletix mockup.png b/Portfolio/assets/img/athletix mockup.png new file mode 100644 index 0000000..70ad818 Binary files /dev/null and b/Portfolio/assets/img/athletix mockup.png differ diff --git a/Portfolio/assets/img/bg.jpg b/Portfolio/assets/img/bg.jpg new file mode 100644 index 0000000..ce152de Binary files /dev/null and b/Portfolio/assets/img/bg.jpg differ diff --git a/Portfolio/assets/img/burger.svg b/Portfolio/assets/img/burger.svg new file mode 100644 index 0000000..005928f --- /dev/null +++ b/Portfolio/assets/img/burger.svg @@ -0,0 +1,4 @@ + diff --git a/Portfolio/assets/img/close.svg b/Portfolio/assets/img/close.svg new file mode 100644 index 0000000..c641f62 --- /dev/null +++ b/Portfolio/assets/img/close.svg @@ -0,0 +1,4 @@ + diff --git a/Portfolio/assets/img/code.jpg b/Portfolio/assets/img/code.jpg new file mode 100644 index 0000000..b7fd581 Binary files /dev/null and b/Portfolio/assets/img/code.jpg differ diff --git a/Portfolio/assets/img/cover-main-bg.jpg b/Portfolio/assets/img/cover-main-bg.jpg new file mode 100644 index 0000000..72f4006 Binary files /dev/null and b/Portfolio/assets/img/cover-main-bg.jpg differ diff --git a/Portfolio/assets/img/css.png b/Portfolio/assets/img/css.png new file mode 100644 index 0000000..e8182a9 Binary files /dev/null and b/Portfolio/assets/img/css.png differ diff --git a/Portfolio/assets/img/favicon.svg b/Portfolio/assets/img/favicon.svg new file mode 100644 index 0000000..57795bd --- /dev/null +++ b/Portfolio/assets/img/favicon.svg @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/Portfolio/assets/img/js.png b/Portfolio/assets/img/js.png new file mode 100644 index 0000000..14b2a67 Binary files /dev/null and b/Portfolio/assets/img/js.png differ diff --git a/Portfolio/assets/img/metex.png b/Portfolio/assets/img/metex.png new file mode 100644 index 0000000..485e502 Binary files /dev/null and b/Portfolio/assets/img/metex.png differ diff --git a/Portfolio/assets/img/profil.jpg b/Portfolio/assets/img/profil.jpg new file mode 100644 index 0000000..e7e4965 Binary files /dev/null and b/Portfolio/assets/img/profil.jpg differ diff --git a/Portfolio/assets/img/rdash.png b/Portfolio/assets/img/rdash.png new file mode 100644 index 0000000..8c65b30 Binary files /dev/null and b/Portfolio/assets/img/rdash.png differ diff --git a/Portfolio/assets/style.css b/Portfolio/assets/style.css new file mode 100644 index 0000000..c70e657 --- /dev/null +++ b/Portfolio/assets/style.css @@ -0,0 +1,789 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"); + +:root { + --dark: #333333; + --white: #ffffff; + --light-grey: #f0f0f0; + --primary-color: #e24444; + --secondary-color: #df9f6c; +} + +@font-face { + font-family: "MonumentExtend"; + src: url("./fonts/MonumentExtended-Regular.otf"); + font-weight: normal; +} + +@font-face { + font-family: "MonumentExtend"; + src: url("./fonts/MonumentExtended-Ultrabold.otf"); + font-weight: bold; +} + +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + border: var(--dark) 0.5px solid; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "MonumentExtend", sans-serif; + scroll-behavior: smooth; +} + +body { + background-color: var(--light-grey); + color: var(--dark); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + text-transform: uppercase; + color: var(--dark); +} + +a { + text-decoration: none; + color: var(--primary-color); + text-transform: uppercase; + transition: border 400ms; +} + +a:hover { + color: var(--dark); + border-color: var(--dark); +} + +.link { + border: transparent 3px solid; + border-right: none; + border-left: none; + padding: 10px 0px; +} + +button { + background-color: transparent; + outline: none; + padding: 10px 15px; + border: transparent solid 1px; + text-transform: uppercase; + cursor: pointer; + font-size: 16px; + margin: 8px 0; + transition: 400ms color, 400ms background, 400ms border; +} + +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); + color: var(--white); +} + +.btn-primary:hover { + background-color: transparent; + color: var(--primary-color); +} + +.btn-secondary { + background-color: var(--light-grey); + color: var(--primary-color); + border-color: var(--primary-color); +} + +.btn-secondary:hover { + color: var(--dark); + border-color: var(--dark); +} + +p { + font-family: "Inter", sans-serif; + color: var(--dark); + font-size: 14px; + font-size: 20px; +} + +header { + width: 100%; + border-bottom: var(--dark) solid 0.5px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 35px; + position: fixed; + background-color: var(--white); + backdrop-filter: blur(20px); + z-index: 2; +} + +header > h1 { + font-size: 30px; +} + +.burger-button { + display: none; +} + +.menu > ul { + list-style: none; + display: flex; + gap: 20px; +} + +main { + scroll-snap-type: proximity; +} + +section { + scroll-snap-align: start; +} + +#home { + display: grid; + grid-template-columns: 2fr 1fr; + align-items: center; + gap: 50px; + padding: 0 50px; + width: 100%; + height: 100vh; + background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.9)), + url("img/cover-main-bg.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +#home > div:first-child > h2 { + font-size: 70px; + margin-bottom: 20px; +} + +.back-card { + background-color: var(--primary-color); + color: var(--white); + padding: 0px 5px; + font-weight: normal; +} + +#home > div:first-child > p { + width: 90%; +} + +#home > div:last-child { + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; +} + +#home > div:last-child > .social-media { + font-size: 14px; + margin-bottom: 50px; + text-align: end; + z-index: 1; +} + +#home > div:last-child > .social-media > a { + border-bottom: transparent 3px solid; + margin-left: 15px; + padding: 10px 0; + font-size: 16px; +} + +#home > div:last-child > .social-media > a:hover { + border-color: var(--dark); +} + +#projects { + display: grid; + grid-template-columns: 35% 32.5% 32.5%; + grid-template-rows: 20vh 100px 70vh; + margin-top: -20vh; + text-align: center; + column-gap: 15px; + padding: 50px; + z-index: 0; + width: 100%; +} +.tech-icons { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 5%; +} + +.tech-icons img { + height: 50px; /* ajustez la taille selon vos besoins */ + transition: transform 0.3s; +} + +.tech-icons img:hover { + transform: scale(1.1); +} + +#experiences > h2{ + font-size: 52px; + text-align: center; + column-gap: 15px; + padding: 50px; + z-index: 0; + width: 100%; +} + +#projects > h2 { + font-size: 52px; + grid-column: 2 / 4; + grid-row: 2 / 3; +} + +.project { + background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.9)), + url("img/bg.jpg"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + flex-direction: column; + text-align: left; + justify-content: flex-end; + padding: 25px; + grid-row: 3 / 4; + transition: 400ms ease-in-out; + border: var(--primary-color) 0px solid; + border-radius: 2%; +} + +.project:nth-child(2) { + background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.9)), + url("img/athletix\ mockup.png"); + background-repeat: no-repeat; + background-position: top center; + background-size: cover; +} + +.project:nth-child(3) { + background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.9)), + url("img/rdash.png"); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} + +.project:nth-child(4) { + background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.9)), + url("img/Reflection.png"); + background-repeat: no-repeat; + background-position: top center; + background-size: cover; +} + +.experience { + background: linear-gradient(rgba(192, 255, 163, 0.3), rgba(140, 237, 250, 0.9)); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + flex-direction: column; + text-align: left; + justify-content: flex-end; + padding: 25px; + grid-row: 3 / 4; + transition: 400ms ease-in-out; + border: var(--primary-color) 0px solid; + +} + +.project:hover { + cursor: pointer; + transition: 400ms ease-in-out; + border: var(--primary-color) 25px solid; +} + +.project > h2 { + font-size: 35px; + width: auto; +} + +.project > p { + text-transform: none; + font-size: 16px; + margin-top: 10px; + transition: 400ms ease; + background: -webkit-linear-gradient( + rgba(0, 0, 0, 0.8), + rgba(0, 0, 0, 0.2) + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +#projects > a:nth-child(2) { + grid-row: 1 / 4; +} + +#more-projects { + margin: 10px auto 0; + text-align: center; +} + +#more-projects .back-card { + font-size: 24px; + padding: 10px 30px; + border: var(--primary-color) solid 1px; + transition: 400ms ease; +} + +#more-projects .back-card:hover { + background: transparent; + color: var(--primary-color); +} + +#skills { + margin-top: 100px; + margin-right: auto; + margin-bottom: 10px; + margin-left: auto; + + text-align: center; +} + +#skills > h2 { + font-size: 60px; +} + +#skills > p { + width: 75%; + margin: auto; +} + +.tech-stack { + height: 90px; + overflow: hidden; + position: relative; + background-color: var(--primary-color); + color: var(--dark); +} + +.tech-stack > div > h3 { + color: var(--dark); + font-size: 24px; + font-weight: normal; + white-space: nowrap; +} + +.tech-stack > div { + padding: 20px; + position: absolute; + top: 0; + left: 0; + height: 100%; + line-height: 50px; + text-align: center; + /* Starting position */ + -moz-transform: translateX(100%); + -webkit-transform: translateX(100%); + transform: translateX(100%); + animation: scroll-left 30s linear infinite; +} + +#contact { + margin: auto; + padding: 25px 0; + text-align: center; + height: 70vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +#contact > h2 { + font-size: 45px; +} + +#contact > a:first-of-type { + padding: 40px 0 0; + color: var(--dark); + display: block; + font-size: 52px; +} + +#contact > a:first-of-type:hover { + color: var(--primary-color); +} + +#contact > a { + font-size: 30px; + transition: 400ms; +} + +.more-projects__container { + padding-top: 80px; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 15px; + width: 95%; + margin: auto; + display: none; +} + +.more-projects__container--show { + display: grid !important; +} + +.more-projects__container > .project { + grid-row: initial; + height: 600px; +} + +@keyframes scroll-left { + 0% { + -moz-transform: translateX(100%); /* Browser bug fix */ + -webkit-transform: translateX(100%); /* Browser bug fix */ + transform: translateX(100%); + } + 100% { + -moz-transform: translateX(-100%); /* Browser bug fix */ + -webkit-transform: translateX(-100%); /* Browser bug fix */ + transform: translateX(-100%); + } +} + +#certifications { + padding: 35px 75px 45px; +} + +#certifications > h2 { + font-size: 52px; +} + +#certifications > p { + width: 90%; +} + +.courses-repository { + display: flex; + align-items: flex-start; + margin-top: 30px; +} + +.courses-repository > ul { + list-style: none; +} + +.courses-repository > ul > a > li { + font-size: 18px; + transition: 400ms ease; + border: var(--primary-color) 1px solid; + padding: 15px; +} + +.courses-repository > ul > a > li:hover { + background-color: var(--primary-color); + color: var(--white); +} + +/* Tablet */ +@media screen and (max-width: 992px) { + body { + max-width: 100%; + } + + header > .menu { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: var(--light-grey); + visibility: hidden; + opacity: 0; + transition: 400ms ease-in-out; + } + + .menu > ul { + flex-direction: column; + text-align: center; + z-index: 0; + } + + .link { + font-size: 40px; + } + + .burger-button { + z-index: 1; + } + + #home { + grid-template-columns: 1fr; + grid-template-rows: 80% auto; + text-align: center; + } + + #home > div:first-child > p { + margin: auto; + width: 80%; + } + + #home > div:last-child { + align-items: center; + } + + .burger-button { + display: inline; + } + + #projects { + margin: 20px 0 40px; + grid-template-columns: 100vw; + grid-template-rows: 10% 40% 25% 25%; + height: 1200px; + row-gap: 15px; + padding: 50px 10px; + } + + #projects > h2 { + grid-column: 1 / 2; + grid-row: 1 / 2; + } + + #projects > .project:nth-child(2) { + grid-column: 1 / 2; + grid-row: 2 / 3; + } + + #projects > .project:nth-child(3) { + grid-column: 1 / 2; + grid-row: 4 / 5; + } + + .project { + width: 95%; + margin: -40px 0 45px 8px; + } + + #skills { + margin-bottom: 100px; + } + + #skills > p { + width: 90%; + } + + #certifications { + padding: 30px 25px; + } + + #certifications > p { + width: 100%; + } + + .courses-repository { + display: flex; + flex-direction: column; + } + + .courses-repository > ul { + width: 100%; + } + + #contact { + margin: 100px auto; + padding: 0 25px; + width: 100%; + } + + #contact > h2 { + font-size: 34px; + } + + #contact > a:first-of-type { + font-size: 30px; + padding: 25px 0 0; + } + + #contact > a { + font-size: 24px; + } +} + +/* Mobile */ +@media screen and (max-width: 600px) { + header { + padding: 15px 20px 15px 10px; + } + + header > h1 { + padding: 0; + font-size: 18px; + } + + .burger-button { + width: 28px !important; + } + + .link { + font-size: 30px; + } + + button { + font-size: 10px; + } + + h2 { + font-size: 28px !important; + } + + p { + font-size: 16px !important; + } + + #home { + height: 80vh; + padding: 0; + grid-template-rows: auto 5%; + } + + #home > div:first-child > h2 { + font-size: 36px !important; + } + + #home > div:first-child > p { + width: 90%; + margin: auto; + } + + #home > div:last-child > .social-media { + margin: 30px; + } + + #home > div:last-child > .social-media > a { + font-size: 14px; + text-align: center; + margin: 0; + padding: 0; + } + + #home > div:first-child > a:first-of-type { + display: none; + } + + #projects { + grid-template-rows: 5% 40% 25% 25%; + margin: 0; + padding-bottom: 0; + } + + .project { + margin: 0; + padding: 10px; + } + + #more-projects > a { + font-size: 14px !important; + } + + #skills { + margin: 100px 0 80px; + } + + #skills > h2 { + font-size: 34px !important; + } + + #certifications { + text-align: center; + } + + #certifications > h2 { + font-size: 26px !important; + } + + #contact { + margin: 30px auto; + } + + #contact > h2 { + font-size: 24px !important; + } + + #contact > a:first-of-type { + font-size: 100%; + } + + #contact > a { + font-size: 14px; + } +} + +.ease-in-out { + transition-timing-function: cubic-bezier(.4,0,.2,1); +} +.duration-1000 { + transition-duration: 1s; +} +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(.4,0,.2,1); + transition-duration: .15s; +} +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.font-medium { + font-weight: 500; +} +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} +.py-1 { + padding-top: .25rem; + padding-bottom: .25rem; +} +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} +.bg-grey-400 { + --tw-bg-opacity: 1; + background-color: rgb(20 19 20 / var(--tw-bg-opacity)); +} +.border-grey-300 { + --tw-border-opacity: 1; + border-color: rgb(36 36 36 / var(--tw-border-opacity)); +} +.border { + border-width: .5px; +} +.rounded-full { + border-radius: 9999px; +} +.justify-center { + justify-content: center; +} +.items-center { + align-items: center; +} +.flex { + display: flex; +} \ No newline at end of file diff --git a/Portfolio/index.html b/Portfolio/index.html new file mode 100644 index 0000000..f744d82 --- /dev/null +++ b/Portfolio/index.html @@ -0,0 +1,153 @@ + + + + + + + + + Mohamed Hassani | Développeur Informatique + + + + + + + + + + +

+

Mohamed Hassani 👨‍💻

+

+ +

+

+

+

+

Développeur Informatique.

+

+ Photo de Mohamed Hassani + + Bonjour, Je suis Mohamed Hassani, développeur Informatique.
+ Actuellement étudiant en troisième année de BUT Informatique à l'Université Clermont Auvergne. J'ai un intérêt pour le développement web, le développement mobile, la science des données, l'apprentissage automatique, les microservices, le clean code et les bonnes pratiques et surtout le design. + +

+ +
+ + + + + + +

+

+ +

+

+

+

Réalisations 🏗️

💪 AthletiX

+ AthletiX est une application mobile développée en Flutter pour les sportifs, intégrant des exercices de musculation et des fonctionnalités de partage d'expérience. +

🏎️ R-Dash

+ R-Dash est une application mobile développée en React Native permettant aux pilotes de course de consulter et comparer les données de performance de leurs voitures. +

🎮 Reflection

+ Reflection est un jeu vidéo d'horreur réalisé avec le moteur de jeu Unity et C# pour le code, le jeu se déroule dans un manoir hanté et met en scène un monstre contrôlé par une intelligence artificielle. +

+ +

+

Expériences professionnelles

+

+

+

2024

+

1 an et 6 mois

+

+

+

+ Metabolic Explorer +

+ + Alternance d'un an + Stage de 10 semaines.

+ J’ai eu l’opportunité de rejoindre une entreprise dynamique et agréable qui m’a permis de me professionnaliser dans un contexte favorable. J’ai travaillé en tant que développeur fullstack sur un logiciel de laboratoire (LIMS).

+ Ma mission principale consistait à l’améliorer et maintenir un logiciel LIMS (Application web en Java) utilisé par des scientifiques.

+ J’ai pu mettre en pratique mes compétences en gestion de base de données structurée, en algorithmique et en design pour toute la partie vue. + +

+

+ + + +

+

Compétences

+
+

+ Mes compétences incluent le développement informatique dans sa globalité, dont le développement d'applications web et mobile avec plusieurs technologies. J'ai également de l'expérience dans la gestion des systèmes et réseau. En outre, je maîtrise les bases de données SQL et NoSQL, ainsi que divers outils et frameworks tels que Docker, Kubernetes, et CI/CD. +

+

+

+

+

+ ✴ C# ✴ Java ✴ Flutter ✴ Swift ✴ React Native ✴ HTML ✴ CSS ✴ JavaScript ✴ SQL ✴ NoSQL ✴ Docker ✴ Kubernetes ✴ Git ✴ et plus encore ✴ +

+

+

+ +

+

+

Java

+

Flutter

+

+

+

HTML

+

CSS

+

JavaScript

+

+

+

+ +

+ + + + +