Conclusão do Curso JavaScript

assets/css/acordeon.css

@@ -5,13 +5,13 @@
     margin: 1rem 0;
     border: 1px solid #fff;
     border-radius: 1rem;
-    transition: .25s;
+    transition: 0.25s;
 }
 
 .acordeon.open,
 .acordeon:hover {
-    background-color: #55569E;
-    border-color: #55569E;
+    background-color: #0a2914;
+    border-color: #14e754;
 }
 
 .acordeon .trigger {

assets/css/footer.css

@@ -2,11 +2,6 @@ footer {
     width: 100%;
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 1rem;
+    justify-content: center;
+    padding-top: 1rem;
 }
-
-footer img {
-    max-width: 100px;
-}

assets/css/global.css

@@ -27,33 +27,23 @@ a:hover {
     padding: 1rem;
     border: 1px solid #fff;
     border-radius: 1rem;
+    background-image: url('http://www.summercomunicacao.com.br/imagens/new/fundo.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
 }
 
 .main::before,
 .main::after {
     content: '';
-    background-image: url('../img/background.svg');
-    background-repeat: no-repeat;
-    background-size: contain;
     display: inline-block;
     position: fixed;
     top: 0;
     left: 0;
-    width: 140vw;
+    width: 100%;
     height: 100vh;
     z-index: -1;
 }
 
-.main::after {
-    content: '';
-    top: auto;
-    left: auto;
-    bottom: 0;
-    right: 0;
-    transform: rotate(180deg);
-}
-
-
 @media only screen and (min-width: 768px) {
     .main {
         max-width: 1024px;

assets/css/header.css

@@ -62,6 +62,11 @@
     background-image: url('../img/icons/location.svg');
 }
 
+.information .github::before {
+    background-image: url('../img/icons/github.svg');
+    color:blueviolet;
+}
+
 .information .email::before {
     background-image: url('../img/icons/email.svg');
 }
@@ -87,7 +92,7 @@
     .header .title {
         grid-area: title;
         text-align: start;
-        max-width: 210px;
+        max-width: 600px;
     }
 
     .header .information {

assets/js/acordeon.js

@@ -5,7 +5,7 @@ acordeonTriggers.forEach((trigger) => {
     trigger.addEventListener('click', (e) => {
         const acordeon = trigger.parentElement
         const isOpen = acordeon.classList.contains('open')
-
+        
         if (isOpen) {
             acordeon.classList.remove('open')
         } else {

assets/js/api.js

@@ -1,6 +1,6 @@
 
 async function fetchProfileData() {
-    const url = 'https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/profile.json';
+    const url = 'https://raw.githubusercontent.com/RenanFrancaDev/js-developer-portfolio/main/data/profile.json';
     const response = await fetch(url)
     const profileData = await response.json()
     return profileData

assets/js/main.js

@@ -12,6 +12,12 @@ function updateProfileInfo(profileData) {
 
     const location = document.getElementById('profile.location')
     location.innerText = profileData.location
+    console.log(location)
+
+    const github = document.getElementById('profile.github')
+    github.innerText = profileData.github
+    github.href = `tel:${profileData.github}`
+    console.log(github)
 
     const phone = document.getElementById('profile.phone')
     phone.innerText = profileData.phone
@@ -22,6 +28,13 @@ function updateProfileInfo(profileData) {
     email.href = `mailto:${profileData.email}`
 }
 
+function updateAboutMe(profileData) {
+    const aboutMe = document.getElementById('profile.about')
+    const paragraf = profileData.about.split('<br>')
+    aboutMe.innerHTML = paragraf.join('<br><br>')
+
+}
+
 function updateSoftSkills(profileData) {
     const softSkills = document.getElementById('profile.skills.softSkills')
     softSkills.innerHTML = profileData.skills.softSkills.map(skill => `<li>${skill}</li>`).join('')
@@ -64,6 +77,8 @@ function updateProfessionalExperience(profileData) {
 
 (async () => {
     const profileData = await fetchProfileData()
+    // console.log(profileData)
+    updateAboutMe(profileData)
     updateProfileInfo(profileData)
     updateSoftSkills(profileData)
     updateHardSkills(profileData)

data/profile.json

@@ -1,78 +1,129 @@
 {
-  "name": "Renan J Paula",
-  "photo": "https://avatars.githubusercontent.com/u/3266640?v=4",
-  "job": "Tech Lead no S3 Bank",
-  "location": "São Paulo - SP",
-  "phone": "(16) 98159-7656",
-  "email": "renanjohannsen@gmail.com",
-  "skills": {
-    "hardSkills": [
-      {
-        "name": "Nodejs",
-        "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/nodejs.png"
+    "name": "Renan França",
+    "photo": "https://avatars.githubusercontent.com/u/112978343?v=4",
+    "job": "Desenvolvedor Front-End",
+    "location": "São Paulo - SP",
+    "phone": "+55(12) 99619-0019", 
+    "email": "renanfranca.dev@gmail.com",
+    "github": "https://github.com/RenanFrancaDev",
+    "about":"Profissional em transição de carreira para a área de Tecnologia, voltado a desenvolvimento web. Formado em Engenharia de Produção Mecânica, com experiência em Supply Chain, do planejamento à área de compras, em diferentes segmentos da indústria. Participação e coordenação de projetos, voltados a melhorias e redução de custos.<br>Todos esses anos de estudo em engenharia e trabalho na indústria, contribuíram para o ganho de experiência e habilidades em diferentes setores, onde hoje, busco levar para o novo ramo, o qual estou me aplicando. O Primeiro contato com o setor de desenvolvimento, foi no projeto de implementação de um novo ERP, onde fui Key User. Interesse em tecnologia e inovação foram cruciais para a decisão da transição de carreira.<br>Facilidade para me adaptar as novas funções, em diferentes tipos de negócios, trabalhando em equipe, agilidade para novos aprendizados, motivação por desafios e desenvolvimento de habilidades.<br>Atualmente estou desenvolvendo habilidades em React, JavaScript, HTML e CSS.",
+    "skills": {
+      "hardSkills": [
+        {
+          "name": "HTML",
+          "logo": "https://raw.githubusercontent.com/RenanFrancaDev/developer-portfolio/main/data/imgs/html.png"
+        },
+        {
+          "name": "CSS",
+          "logo": "https://raw.githubusercontent.com/RenanFrancaDev/developer-portfolio/main/data/imgs/css.png"
+        },
+        {
+          "name": "JavaScript",
+          "logo": "https://raw.githubusercontent.com/RenanFrancaDev/developer-portfolio/main/data/imgs/js.png"
+        },
+        {
+          "name": "React",
+          "logo": "https://raw.githubusercontent.com/RenanFrancaDev/developer-portfolio/main/data/imgs/react.png"
+        },
+          {
+          "name": "Typescript",
+          "logo": "https://raw.githubusercontent.com/RenanFrancaDev/developer-portfolio/main/data/imgs/typescript.png"
+        },
+        {
+          "name": "Nodejs",
+          "logo": "https://raw.githubusercontent.com/RenanFrancaDev/developer-portfolio/main/data/imgs/nodejs.png"
+        },
+        {
+          "name": "Data²",
+          "logo": "https://raw.githubusercontent.com/RenanFrancaDev/developer-portfolio/main/data/imgs/data2.png"
+        },
+        {
+          "name": "GitHub",
+          "logo": "https://raw.githubusercontent.com/RenanFrancaDev/developer-portfolio/main/data/imgs/github.png"
+        }
+      ],
+      "softSkills": [
+        "Proatividade",
+        "Empatia",
+        "Colaboração",
+        "Trabalho em equipe",
+        "Flexibilidade",
+        "Planejamento"
+      ]
+    },
+    "languages": [
+      "Português (Nativo)",
+      "Inglês (intermediário)",
+      "Espanhol (básico)"
+    ],
+    "portfolio": [
+         {
+        "name": "DIO - Clone",
+        "url": "https://github.com/RenanFrancaDev/dio-clone",
+        "github": true
+      },
+         {
+        "name": "Login com validação",
+        "url": "https://github.com/RenanFrancaDev/login_validacao_React-TypeScript",
+        "github": true
       },
       {
-        "name": "Java",
-        "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/java.png"
+        "name": "Pokedex - Pokemon",
+        "url": "https://github.com/RenanFrancaDev/pokedex",
+        "github": true
       },
       {
-        "name": "Angular",
-        "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/angular.png"
+        "name": "TO DO list",
+        "url": "https://github.com/RenanFrancaDev/ToDolist",
+        "github": true
       },
       {
-        "name": "React",
-        "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/react.png"
+        "name": "Simulador - Boletim de Turma",
+        "url": "https://github.com/RenanFrancaDev/mediaAlunos",
+        "github": true
       },
       {
-        "name": "Mongodb",
-        "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/mongodb.png"
+        "name": "Site Apple - Clone",
+        "url": "https://github.com/RenanFrancaDev/Apple",
+        "github": true
       },
       {
-        "name": "Postgresql",
-        "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/postgresql.png"
+        "name": "Memory Game",
+        "url": "https://github.com/RenanFrancaDev/MemoryGame",
+        "github": true
       }
     ],
-    "softSkills": [
-      "Empatia",
-      "Liderança",
-      "Trabalho em equipe",
-      "Flexibilidade",
-      "Organização"
+    "professionalExperience": [
+      {
+        "name": "Desenvolvedor Web / Mauá Bank",
+        "period": "2023",
+        "description": "Desenvolvedor Web, atuando como freelance. Site criado com React.js"
+      },
+      {
+        "name": "Desenvolvedor / Data²",
+        "period": "2023",
+        "description": "Desenvolvedor de aplicativo pelo Builder Data², desenvolvendo soluções para empresas."
+      },
+      {
+        "name": "Comprador / Pan-Metal Indústia Metalúrgica Ltda.",
+        "period": "2019 - 2022",
+        "description": "Comprador de materias e administrador de contratos. Key User do ERP (Oracle)."
+      },
+      {
+        "name": "Programador de Produção / Pan-Metal Indústia Metalúrgica Ltda.",
+        "period": "2019",
+        "description": "Atuando na programação de produção, de acordo com o pedido do Cliente."
+      },
+      {
+        "name": "Waiter / Basil Pizza - Ireland",
+        "period": "2018",
+        "description": "Experiência Internacional, trabalhando na Irlanda."
+      },
+      {
+        "name": "Estagiário / Nestlé",
+        "period": "2014 - 2017",
+        "description": "Estagiário no setor de Projetos, atuando com foco em Compras e Planejamento."
+      }
+
     ]
-  },
-  "languages": [
-    "Português BR",
-    "Inglês (intermediário)",
-    "Espanhol (intermediário)",
-    "Italiano (iniciante)"
-  ],
-  "portfolio": [
-    {
-      "name": "Curso Ministrado na DIO para a criação de uma Pokedex",
-      "url": "https://github.com/RenanJPaula/js-developer-pokedex",
-      "github": true
-    },
-    {
-      "name": "Curso Ministrado na DIO para a criação de uma página de portfolio",
-      "url": "https://github.com/RenanJPaula/js-developer-portfolio",
-      "github": true
-    }
-  ],
-  "professionalExperience": [
-    {
-      "name": "Arquiteto de software / S3 BANK",
-      "period": "2022 - até o momento",
-      "description": "É um prazer trabalhar ao lado de tantos profissionais excepcionais e construir tantas inovações de mercado."
-    },
-    {
-      "name": "Software Engineering Lead / DIO",
-      "period": "2021 - 2022",
-      "description": "Foi um grande prazer fazer parte deste time fantástico e poder contribuir com a transformação de tantas vidas."
-    },
-    {
-      "name": "CEO / Brain Machine",
-      "period": "2016 - 2021",
-      "description": "Anos incríveis ao lado de pessoas maravilhosas ajudando muitas empresas por todo o mundo."
-    }
-  ]
-}
+  }