ALTERAÇÕES DE 09-03

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

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;
+}

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 {

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;
 }

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;
     }
 }

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 {

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;
-}
+}
+
+/* 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;
+    }
+}

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;
-}
+    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;
+    }
+}