diff --git a/README.md b/README.md new file mode 100644 index 000000000..bcbc64894 --- /dev/null +++ b/README.md @@ -0,0 +1,37 @@ +# 📄 Currículo Online - Julio Cezar S. Alves + +Currículo desenvolvido em HTML5, CSS3 com importação de informações de arquivo Json, com foco em apresentação clara, responsiva e moderna das minhas habilidades como Desenvolvedor Full-Stack. Projeto leve, direto ao ponto e hospedado no GitHub Pages. + +🔗 [Repositório no GitHub](https://github.com/juliocsalves/curriculo) + +--- + +## 🛠 Tecnologias Utilizadas + +- HTML + CSS (sem frameworks externos) +- Responsividade em todos os dispositivos +- Deploy com GitHub Pages + +--- + +## 👨‍💼 O que esse projeto apresenta? + +- Informações profissionais atualizadas +- Habilidades técnicas organizadas +- Seções de formação, experiências e contato +- Design limpo, com foco na leitura e navegação + +--- + +PRINTS + +![image](https://github.com/user-attachments/assets/a46e33f4-908a-424f-820f-df12ab11a50f) + +![image](https://github.com/user-attachments/assets/b5332494-eb75-4385-bf19-978c9bb45bac) + + +--- + +## 🚀 Como rodar localmente + +localhost diff --git a/assets/css/about.css b/assets/css/about.css new file mode 100644 index 000000000..8de7cd798 --- /dev/null +++ b/assets/css/about.css @@ -0,0 +1,13 @@ +.about { + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + list-style: none; + text-indent: 2em; +} + +.about-me { + text-align: left; + text-indent: 2rem; +} \ No newline at end of file diff --git a/assets/css/acordeon.css b/assets/css/acordeon.css index 0a250de2a..d7849ee1d 100644 --- a/assets/css/acordeon.css +++ b/assets/css/acordeon.css @@ -5,7 +5,7 @@ margin: 1rem 0; border: 1px solid #fff; border-radius: 1rem; - transition: .25s; + transition: 0.3s ease, opacity 0.3s ease-in-out; } .acordeon.open, @@ -45,7 +45,7 @@ background-repeat: no-repeat; background-size: contain; background-image: url('../img/icons/arrow-top.svg'); - transition: .25s; + transition: 0.3s ease, opacity 0.3s ease-in-out; } .acordeon.open .trigger::after { @@ -56,7 +56,7 @@ overflow: hidden; height: 0; opacity: 0; - transition: opacity .25s ease-in-out; + transition: 0.3s ease, opacity 0.3s ease-in-out; } .acordeon.open .content { diff --git a/assets/css/footer.css b/assets/css/footer.css index d63625ad1..0f8a16d00 100644 --- a/assets/css/footer.css +++ b/assets/css/footer.css @@ -4,9 +4,20 @@ footer { flex-direction: row; justify-content: flex-end; align-items: center; + justify-content: center; padding: 1rem; + margin-top: 2rem; } -footer img { - max-width: 100px; +footer>a { + display: block; + text-align: center; + font-size: 1rem; + color: white; + padding: 20px 0; + transition: color 0.3s; +} + +footer>a:hover { + text-decoration: none; } \ No newline at end of file diff --git a/assets/css/global.css b/assets/css/global.css index 1f2c0d6ad..ba56f3d1e 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -16,6 +16,7 @@ body { a { color: #fff; text-decoration: none; + padding-bottom: 5px; } a:hover { @@ -58,10 +59,8 @@ a:hover { .main { max-width: 1024px; margin: 1rem auto; - } - - .main::before, - .main::after { - width: 70vw; + display: flex auto; + justify-content: center; + flex-direction: column; } } \ No newline at end of file diff --git a/assets/css/header.css b/assets/css/header.css index 572ab9438..d3efd88a5 100644 --- a/assets/css/header.css +++ b/assets/css/header.css @@ -15,18 +15,19 @@ height: 2rem; background-repeat: no-repeat; background-size: contain; - background-image: url('../img/icons/header.svg'); } .header .photo { width: 200px; height: 200px; border-radius: 50%; + border: 4px groove #8b3989; + box-shadow: 0 0 28px 5px #e9e9e9; } .header .title { font-family: 'Neue Machina'; - text-align: center; + text-align: center; } .information { @@ -42,6 +43,7 @@ align-items: center; margin: .5rem; font-size: 1.125rem; + } .information p::before { @@ -70,13 +72,76 @@ background-image: url('../img/icons/phone.svg'); } +.information .pcd::before { + background-image: url('../img/icons/autism.png'); + color: #55569b; +} + +.information +/* .information .pcd { + display: flex; + align-items: center; + margin: .5rem; + font-size: 1.125rem; + +} */ + +.information .pcd::before { + content: ''; + display: inline-block; + width: 1rem; + height: 1rem; + background-repeat: no-repeat; + background-size: contain; + margin-right: .5rem; + background-image: url('../img/icons/autism.png'); + +} + + +/* Media queryes */ +/* Extra Pequeno (XS):c Tela pequena (smartphones): até 575px */ +@media only screen and (max-width: 575px) { + .header .title { + font-family: 'Neue Machina'; + text-align: center; + font-size: 1.4rem; + } + + .information p { + display: flex; + flex-direction: row; + align-items: center; + margin: .5rem; + font-size: 1.2rem; + } +} + +/* Pequeno (SM): Telão de smartphones: 576px a 768px */ +@media only screen and (min-width: 576px) and (max-width: 767px) { + .header .title { + font-family: 'Neue Machina'; + text-align: center; + font-size: 2rem; + } + + .information p { + display: flex; + flex-direction: row; + align-items: center; + margin: .5rem; + font-size: 1.7rem; + } +} + + +/* Estilo para quando a tela for maior que 768px */ @media only screen and (min-width: 768px) { .header { - display: grid; + display: grid; grid-template-areas: "photo title" - "photo information" - ; + "photo information"; } .header .photo { @@ -87,7 +152,7 @@ .header .title { grid-area: title; text-align: start; - max-width: 210px; + max-width: 464px; } .header .information { diff --git a/assets/css/languages.css b/assets/css/languages.css index c8fb1fb94..6140ca865 100644 --- a/assets/css/languages.css +++ b/assets/css/languages.css @@ -14,6 +14,7 @@ align-items: center; padding-right: 1rem; font-weight: 700; + border } .languages li::before { @@ -25,4 +26,24 @@ background-size: contain; background-image: url('../img/icons/check.svg'); margin-right: .5rem; -} \ No newline at end of file +} + +/* media queryes */ +@media only screen and (max-width: 575px) { + .languages li { + padding-bottom: 0.8rem; + } +} + +/* Pequeno (SM): Telão de smartphones: 576px a 768px */ +@media only screen and (min-width: 576px) and (max-width: 767px) { + .portfolio li h3.github::before { + width: 1rem; + min-width: 1rem; + } + + .portfolio li h3 { + font-size: 1rem; + font-weight: 700; + } +} diff --git a/assets/css/portfolio.css b/assets/css/portfolio.css index 78543f3e3..437b2e8ba 100644 --- a/assets/css/portfolio.css +++ b/assets/css/portfolio.css @@ -1,3 +1,9 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + .portfolio { display: flex; flex-direction: column; @@ -22,7 +28,7 @@ font-size: 1.25rem; font-weight: 700; margin: 0; - margin-bottom: .5rem; + margin-bottom: .5rem; } .portfolio li h3.github::before { @@ -33,5 +39,37 @@ background-repeat: no-repeat; background-size: contain; background-image: url('../img/icons/github.svg'); - margin-right: .5rem; -} \ No newline at end of file + margin-right: .5rem; +} +.portfolio > li > a { + width: auto; /* Para ajustar ao conteúdo */ + margin-top: .1rem; + margin-bottom: .3rem; + padding-left: 1.5rem; +} + +/* media queryes */ +@media only screen and (max-width: 575px) { + .portfolio li h3.github::before { + width: 1rem; + min-width: 1rem; + } + + .portfolio li h3 { + font-size: 1rem; + font-weight: 700; + } +} + +/* Pequeno (SM): Telão de smartphones: 576px a 768px */ +@media only screen and (min-width: 576px) and (max-width: 767px) { + .portfolio li h3.github::before { + width: 1rem; + min-width: 1rem; + } + + .portfolio li h3 { + font-size: 1rem; + font-weight: 700; + } +} diff --git a/assets/css/skills.css b/assets/css/skills.css index 2995ada54..edd1fec8d 100644 --- a/assets/css/skills.css +++ b/assets/css/skills.css @@ -22,19 +22,59 @@ .skills .personal ul { display: flex; - flex-direction: row; + flex-direction: column; justify-content: flex-start; - align-items: center; - flex-wrap: wrap; + align-items: flex-start; + flex-wrap: wrap; margin: 0; - padding: 0; + padding: 0; +} +.skills .personal > h3 { + margin-bottom: 0; } .skills .personal ul li { - margin-left: 2rem; - padding: .5rem + margin-left: 1.2rem; + padding: .3rem; +} + +/* media queryes */ +/* media queryes */ +@media only screen and (max-width: 575px) { + .skills .tools ul { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 0; + } + + .skills .tools ul li img { + max-width: 4rem; + max-height: 4rem; + margin: 0 .5rem; + } + + .skills .personal ul { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; + margin: 0; + padding: 0; + } + .skills .personal > h3 { + margin-bottom: 0; + } + + .skills .personal ul li { + margin-left: 1.2rem; + padding: .3rem; + } } + @media only screen and (min-width: 768px) { .skills { display: grid; diff --git a/assets/css/title.css b/assets/css/title.css new file mode 100644 index 000000000..e69de29bb diff --git a/assets/img/icons/autism.png b/assets/img/icons/autism.png new file mode 100644 index 000000000..f07315924 Binary files /dev/null and b/assets/img/icons/autism.png differ diff --git a/assets/img/personal-photo.png b/assets/img/personal-photo.png new file mode 100644 index 000000000..0ff307379 Binary files /dev/null and b/assets/img/personal-photo.png differ diff --git a/assets/js/api.js b/assets/js/api.js index 29f0a21e9..d7a3bcfc9 100644 --- a/assets/js/api.js +++ b/assets/js/api.js @@ -1,7 +1,15 @@ - -async function fetchProfileData() { - const url = 'https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/profile.json'; - const response = await fetch(url) - const profileData = await response.json() - return profileData +async function fetchProfileData() { + const url = './data/profile.json'; + console.log(url); + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error('Erro ao carregar o perfil: ' + response.status); + } + const profileData = await response.json(); + return profileData; + } catch (error) { + console.error('Erro ao buscar dados:', error); + } } + diff --git a/assets/js/main.js b/assets/js/main.js index f5e871966..b213dc8c4 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,73 +1,109 @@ +// Função genérica para atualizar um elemento +function updateElement(elementId, value, isHtml = false) { + const element = document.getElementById(elementId); + if (element) { + if (isHtml) { + element.innerHTML = value; + } else { + element.innerText = value; + } + } +} function updateProfileInfo(profileData) { - const photo = document.getElementById('profile.photo') - photo.src = profileData.photo - photo.alt = profileData.name - - const name = document.getElementById('profile.name') - name.innerText = profileData.name + updateElement('profile.photo', profileData.photo); + const photo = document.getElementById('profile.photo'); + if (photo) { + photo.alt = profileData.name; + } - const job = document.getElementById('profile.job') - job.innerText = profileData.job + updateElement('profile.name', profileData.name); + updateElement('profile.job', profileData.job); + updateElement('profile.location', profileData.location); + updateElement('profile.about', profileData.about, true); + updateElement('profile.pcd', profileData.pcd); + updateElement('profile.phone', profileData.phone); + updateElement('profile.site', profileData.site); - const location = document.getElementById('profile.location') - location.innerText = profileData.location + const phone = document.getElementById('profile.phone'); + if (phone) { + phone.href = `tel:${profileData.phone}`; + } - const phone = document.getElementById('profile.phone') - phone.innerText = profileData.phone - phone.href = `tel:${profileData.phone}` + updateElement('profile.email', profileData.email); + const email = document.getElementById('profile.email'); + if (email) { + email.href = `mailto:${profileData.email}`; + } - const email = document.getElementById('profile.email') - email.innerText = profileData.email - email.href = `mailto:${profileData.email}` + // Atualiza o texto para PCD + updateElement('profile.pcd', profileData.pcd); } -function updateSoftSkills(profileData) { - const softSkills = document.getElementById('profile.skills.softSkills') - softSkills.innerHTML = profileData.skills.softSkills.map(skill => `
  • ${skill}
    • `).join('') -} +function updateSkills(profileData) { + const updateSkillsList = (elementId, skills, isHardSkills = true) => { + const skillsElement = document.getElementById(elementId); + if (skillsElement) { + const skillsHtml = skills.map(skill => { + if (isHardSkills) { + return `
  • ${skill.name}
    • `; + } else { + return `
  • ${skill}
    • `; + } + }).join(''); + skillsElement.innerHTML = skillsHtml; + } + }; -function updateHardSkills(profileData) { - const hardSkills = document.getElementById('profile.skills.hardSkills') - hardSkills.innerHTML = profileData.skills.hardSkills.map(skill => `
  • ${skill.name}
    • `).join('') + updateSkillsList('profile.skills.hardSkills', profileData.skills.hardSkills, true); + updateSkillsList('profile.skills.softSkills', profileData.skills.softSkills, false); } function updateLanguages(profileData) { - const languages = document.getElementById('profile.languages') - languages.innerHTML = profileData.languages.map(language => `
  • ${language}
    • `).join('') + updateElement('profile.languages', profileData.languages.map(language => `
  • ${language}
    • `).join(''), true); } function updatePortfolio(profileData) { - const portfolio = document.getElementById('profile.portfolio') - portfolio.innerHTML = profileData.portfolio.map(project => { - return ` -
  • -

    ${project.name}

    - ${project.url} -
    • - ` - }).join('') + const portfolioElement = document.getElementById('profile.portfolio'); + if (portfolioElement) { + portfolioElement.innerHTML = profileData.portfolio.map(project => { + return ` +
  • +

    ${project.name}

    + Clique aqui para visualizar o código do projeto. + ${ + project.site && project.site !== '' + ? `Ver protótipo rodando.` + : `Somente código fonte` + } +
    • + `; + }).join(''); + } } + function updateProfessionalExperience(profileData) { - const professionalExperience = document.getElementById('profile.professionalExperience') - professionalExperience.innerHTML = profileData.professionalExperience.map(experience => { - return ` -
  • -

    ${experience.name}

    -

    ${experience.period}

    -

    ${experience.description}

    -
    • - ` - }).join('') + const professionalExperienceElement = document.getElementById('profile.professionalExperience'); + if (professionalExperienceElement) { + professionalExperienceElement.innerHTML = profileData.professionalExperience.map(experience => { + return ` +
  • +

    ${experience.name}

    +

    ${experience.period}

    +

    ${experience.description}

    +
    • + `; + }).join(''); + } } (async () => { - const profileData = await fetchProfileData() - updateProfileInfo(profileData) - updateSoftSkills(profileData) - updateHardSkills(profileData) - updateLanguages(profileData) - updatePortfolio(profileData) - updateProfessionalExperience(profileData) -})() + const profileData = await fetchProfileData(); + updateProfileInfo(profileData); + updateSkills(profileData); + updateLanguages(profileData); + updatePortfolio(profileData); + updateProfessionalExperience(profileData); +})(); + diff --git a/assets/js/title.js b/assets/js/title.js new file mode 100644 index 000000000..b3d9ec613 --- /dev/null +++ b/assets/js/title.js @@ -0,0 +1,9 @@ +document.addEventListener("DOMContentLoaded", function () { + let profileSpan = document.getElementById("profile.name"); + if (profileSpan) { + let observer = new MutationObserver(() => { + document.title = profileSpan.textContent; + }); + observer.observe(profileSpan, { childList: true }); + } +}); diff --git a/data/imgs/maven.png b/data/imgs/maven.png new file mode 100644 index 000000000..11b3b1212 Binary files /dev/null and b/data/imgs/maven.png differ diff --git a/data/profile.json b/data/profile.json index 50da6a25a..39994a1d2 100644 --- a/data/profile.json +++ b/data/profile.json @@ -1,78 +1,132 @@ { - "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", + "name": "Julio Cezar da Silva Alves", + "photo": "assets/img/personal-photo.png", + "job": "Desenvolvedor Full Stack", + "location": "Meia Praia, Itapema - SC", + "phone": "(47) 99252-7514", + "email": "juliocsalves@gmail.com", + "about": "

    Sou um profissional com forte perfil lógico, visual e sistêmico. Tenho facilidade em identificar padrões, estruturar soluções eficientes e transformar ideias complexas em resultados práticos.

    Possuo raciocínio lógico-matemático afiado, aliado a uma visão espacial desenvolvida — características que impulsionam meu desempenho em áreas como desenvolvimento de software, arquitetura de sistemas e automação de processos.

    Tenho grande afinidade com tecnologias, resolução de problemas e ambientes que exigem autonomia, foco e criatividade técnica. Minha comunicação é clara e objetiva, com facilidade para colaborar em times técnicos ou atuar de forma independente.

    Além da tecnologia, também tenho forte sensibilidade naturalista, com olhar atento para sistemas, organização e funcionamento de ambientes — tanto digitais quanto físicos. Gosto de entender o “porquê das coisas” e de explorar soluções de forma estruturada e eficiente.

    Neurodivergente com diagnóstico de TEA (nível 1), transformo foco intenso e pensamento analítico em resultados concretos. Sempre buscando evolução constante, aprendizado autodirigido e projetos com propósito claro.

    ", + "pcd": "Vaga PCD - Autismo nível 1", "skills": { "hardSkills": [ { - "name": "Nodejs", - "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/nodejs.png" + "name": "Angular", + "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/angular.png" }, { - "name": "Java", - "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/java.png" + "name": "TypeScript", + "logo": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/2048px-Typescript_logo_2020.svg.png" }, { - "name": "Angular", - "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/angular.png" + "name": "HTML", + "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/html.png" }, { - "name": "React", - "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/react.png" + "name": "CSS", + "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/css.png" }, { - "name": "Mongodb", - "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/mongodb.png" + "name": "Java", + "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/java.png" }, { - "name": "Postgresql", - "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/postgresql.png" + "name": "Spring Framework", + "logo": "https://toppng.com/uploads/preview/spring-framework-logo-115631739970c79rwadnp.png" } + ], "softSkills": [ - "Empatia", "Liderança", "Trabalho em equipe", - "Flexibilidade", - "Organização" + "Flexibilidade" ] }, "languages": [ "Português BR", "Inglês (intermediário)", - "Espanhol (intermediário)", - "Italiano (iniciante)" + "Espanhol (básico)" ], "portfolio": [ { "name": "Curso Ministrado na DIO para a criação de uma Pokedex", - "url": "https://github.com/RenanJPaula/js-developer-pokedex", + "url": "https://github.com/juliocsalves/js-developer-pokedex", + "site": "https://juliocsalves.github.io/js-developer-pokedex/", + "github": true + }, + { + "name": "Portfólio criado usando HTML5, CSS3, Normalize e importando dados dinamicamente", + "url": "https://github.com/juliocsalves/curriculo", + "site": "https://juliocsalves.github.io/curriculo/", + "github": true + }, + { + "name": "Protótipo de front-end minimalista de e-commerce usando HTML, CSS e Javascript", + "url": "https://github.com/juliocsalves/ecommerce", + "site": "https://juliocsalves.github.io/ecommerce/", + "github": true + }, + { + "name": "Protótipo de blog Filhos da Anarquia usando Angular.", + "url": "https://github.com/juliocsalves/angular-soa", + "site": "https://juliocsalves.github.io/angular-soa/", "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", + "name": "Clone da loja virtual PlayStation Store usando Angular.", + "url": "https://github.com/juliocsalves/psn-store", + "site": "https://juliocsalves.github.io/psn-store/", + "github": true + }, + { + "name": "Pokedex v2.0 utilizando framework Angular 19 Standalone, Typescript, Html5 e CSS3.", + "url": "https://github.com/juliocsalves/angular-pokedex.git", + "site": "https://juliocsalves.github.io/angular-pokedex/", + "github": true + }, + { + "name": "Naruto Shinobiverse utilizando framework Angular 19 Standalone, Typescript, Html5 e CSS3.", + "url": "https://github.com/juliocsalves/angular-shinobiverse.git", + "site": "https://juliocsalves.github.io/angular-shinobiverse/", + "github": true + }, + { + "name": "Design Patterns com Java: Dos Clássicos (GoF) ao Sprint Framework", + "url": "https://github.com/juliocsalves/lab-padroes-spring.git", + "site": "", + "github": true + }, + { + "name": "Java RESTful API criada como parte do desafio do BootCamp Santander Dev 2023 na DIO", + "url": "https://github.com/juliocsalves/santander-dev-week-2023.git", + "site": "", "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": "Programador III - Benner Sistemas", + "period": "2011 - 2011", + "description": "Desenvolvendo o backoffice do sistema Benner Turismo, periodo em que tive uma grande experiencia profissional." + }, + { + "name": "Prefeitura de Curitibanos - SC", + "period": "2001 - 2016", + "description": "Trabalhei como agente administrativo nas secretarias de Obras, de Administração e também na secretaria de Assistencia Social" + }, + { + "name": "Professor de Lab. de Informática", + "period": "2018-2019", + "description": "Atuei como professor na rede pública de ensino na Prefeitura Municipal de Baln. Camboriú." }, { - "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": "Corretor de Imóveis", + "period": "2021 - Atual", + "description": "Realizando o seu sonho do imóvel na praia. Eu tenho seu imóvel!" }, { - "name": "CEO / Brain Machine", - "period": "2016 - 2021", - "description": "Anos incríveis ao lado de pessoas maravilhosas ajudando muitas empresas por todo o mundo." + "name": "Sócio-proprietário na empresa Ponto.Com Informática", + "period": "2010 - 2011", + "description": "Manutenção e suprimentos de informática." } ] } \ No newline at end of file diff --git a/index.html b/index.html index 00a0165c3..4a047c566 100644 --- a/index.html +++ b/index.html @@ -5,16 +5,13 @@ - Portifólio Renan J Paula - + carregando.... - - @@ -23,17 +20,16 @@ +
    - Foto de Perfil - + Foto de Perfil

    - Olá,
    eu sou Carregando... + Olá,
    Sou Carregando...

    -

    Carregando...

    Carregando...

    @@ -42,10 +38,23 @@

    +

    +

    Carregando...

    +
    + + +
    +
    +

    +
    +
    +
    +
    + \ No newline at end of file