Merge #3 from FHumberto/fix/v2_responsividade

Fix/v2-#1-responsividade
FHumberto · Jun 11, 2024 · 11c8504 · 11c8504
2 parents 0655c9b + d7dedf8
commit 11c8504
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 119 deletions.
diff --git a/src/Nexo.UI/Layout/MainLayout.razor.css b/src/Nexo.UI/Layout/MainLayout.razor.css
@@ -26,6 +26,6 @@ article
 {
     main
     {
-        padding: 4rem 0 4rem 0;
+        padding: 4rem 1rem 4rem 1rem;
     }
 }
diff --git a/src/Nexo.UI/Layout/NavMenu.razor b/src/Nexo.UI/Layout/NavMenu.razor
@@ -5,12 +5,11 @@
         <button id="topbar-nav-toggle" type="button" @onclick="ToggleNavMenu">☰</button>
 
         <nav class="topbar-nav-items @NavCollapse">
-            <NavLink href="" Match="NavLinkMatch.All">Início</NavLink>
-            <NavLink href="about">Sobre</NavLink>
-            <NavLink href="education">Educação</NavLink>
-            <NavLink href="experience">Experiência</NavLink>
-            <NavLink href="projects">Projetos</NavLink>
-            <NavLink href="#contact">Contato</NavLink>
+            <NavLink href="" Match="NavLinkMatch.All" @onclick="ToggleNavMenu">Início</NavLink>
+            <NavLink href="about" @onclick="ToggleNavMenu">Sobre</NavLink>
+            <NavLink href="education" @onclick="ToggleNavMenu">Educação</NavLink>
+            <NavLink href="experience" @onclick="ToggleNavMenu">Experiência</NavLink>
+            <NavLink href="projects" @onclick="ToggleNavMenu">Projetos</NavLink>
         </nav>
     </div>
 </div>

diff --git a/src/Nexo.UI/Pages/About.razor b/src/Nexo.UI/Pages/About.razor
@@ -3,7 +3,7 @@
 @using Nexo.UI.Util
 @inject HttpClient Http
 
-<PageTitle>Sobre</PageTitle>
+<PageTitle>FH | Sobre</PageTitle>
 
 <div class="section">
 

diff --git a/src/Nexo.UI/Pages/About.razor.css b/src/Nexo.UI/Pages/About.razor.css
@@ -78,3 +78,12 @@
         flex-direction: column;
     }
 }
+
+@media screen and (max-width: 480px)
+{
+    #infoContainer-left
+    {
+        width: 100%;
+        height: fit-content;
+    }
+}
diff --git a/src/Nexo.UI/Pages/Education.razor b/src/Nexo.UI/Pages/Education.razor
@@ -1,7 +1,7 @@
 @page "/education"
 @inject HttpClient Http
 
-<PageTitle>Formação</PageTitle>
+<PageTitle>FH | Formação</PageTitle>
 
 <div class="section">
 

diff --git a/src/Nexo.UI/Pages/Experience.razor b/src/Nexo.UI/Pages/Experience.razor
@@ -1,7 +1,7 @@
 @page "/experience"
 @inject HttpClient Http
 
-<PageTitle>Experiência</PageTitle>
+<PageTitle>FH | Experiência</PageTitle>
 
 <section class="section">
 

diff --git a/src/Nexo.UI/Pages/Home.razor b/src/Nexo.UI/Pages/Home.razor
@@ -1,7 +1,7 @@
 @page "/"
 @inject HttpClient Http
 
-<PageTitle>Home</PageTitle>
+<PageTitle>FH | Início</PageTitle>
 
 <section id="lead">
     <div>
@@ -24,111 +24,113 @@
     </div>
 </section>
 
-<section id="summary" class="fade-in">
-    <div>
-        <h2>O que eu faço?</h2>
-    </div>
-
-    <div id="summaryContainer">
-        @if (_summary is null)
-        {
-            <p>Carregando...</p>
-        }
-        else
-        {
-            foreach (var summary in _summary)
-            {
-                <div class="summaryCard">
-                    <img src="@summary.Cover" alt="@summary.Name" />
-
-                    <div class="summaryCard-right">
-                        <h3>@summary.Name</h3>
-
-                        <ul class="summaryCard-right-tools">
-                            @if (summary.Tools is not null)
-                            {
-                                @foreach (var tools in summary.Tools)
-                                {
-                                    <li class="tools-li" title="@tools.Name">
-                                        <IconComponent IconName="@tools.Icon" Size="icon-small" />
-                                    </li>
-                                }
-                            }
-                        </ul>
-
-                        <ul class="summaryCard-right-points">
-                            @if (summary.Points is not null)
-                            {
-                                @foreach (string point in summary.Points)
-                                {
-                                    <li class="points-li">
-                                        <IconComponent IconName="BootstrapIcon.Check2Square" Size="icon-small" />
-                                        <span>@point</span>
-                                    </li>
-                                }
-                            }
-                        </ul>
-                    </div>
-                </div>
-            }
-        }
-    </div>
-</section>
+ <section id="summary" class="fade-in">
+     <div>
+         <h2>O que eu faço?</h2>
+     </div>
+
+     <div id="summaryContainer">
+         @if (_summary is null)
+         {
+             <p>Carregando...</p>
+         }
+         else
+         {
+             foreach (var summary in _summary)
+             {
+                 <div class="summaryCard">
+                     <img src="@summary.Cover" alt="@summary.Name" />
+
+                     <div class="summaryCard-right">
+                         <h3>@summary.Name</h3>
+
+                         <ul class="summaryCard-right-tools">
+                             @if (summary.Tools is not null)
+                             {
+                                 @foreach (var tools in summary.Tools)
+                                 {
+                                     <li class="tools-li" title="@tools.Name">
+                                         <IconComponent IconName="@tools.Icon" Size="icon-small" />
+                                     </li>
+                                 }
+                             }
+                         </ul>
+
+                         <ul class="summaryCard-right-points">
+                             @if (summary.Points is not null)
+                             {
+                                 @foreach (string point in summary.Points)
+                                 {
+                                     <li class="points-li">
+                                         <div class="points-li-icon">
+                                            <IconComponent IconName="BootstrapIcon.Check2Square" Size="icon-small" />
+                                         </div>
+                                         <span>@point</span>
+                                     </li>
+                                 }
+                             }
+                         </ul>
+                     </div>
+                 </div>
+             }
+         }
+     </div>
+ </section>
 
 <section id="services" class="fade-in">
-    <div>
-        <h2>Meus Serviços</h2>
-    </div>
-
-    <div id="servicesContainer">
-        @if (_services is null)
-        {
-            <p>Carregando...</p>
-        }
-        else
-        {
-            foreach (var service in _services)
-            {
-                <div class="serviceCard">
-
-                    <h3>@service.Name</h3>
-
-                    <IconComponent IconName="@service.Icon" Size="icon-large" />
-
-                    <div class="serviceCard-body">
-                        <p>@service.Body</p>
-                    </div>
-                </div>
-            }
-        }
-    </div>
-</section>
-
-<section id="contact" class="fade-in">
-
-    <div>
-        <h2>Contato</h2>
-    </div>
-
-    <div id="contactContainer">
-        <a class="contact-icon" href="https://www.linkedin.com/in/fhumberto" title="LinkedIn" target=" _blank">
-            <IconComponent IconName="DeviconPlain.Linkedin" Size="icon-medium" />
-            <span>Linkedin</span>
-        </a>
-        <a class="contact-icon" href="https://github.com/FHumberto" title="GithubProfile" target="_blank">
-            <IconComponent IconName="BootstrapIcon.Github" Size="icon-medium" />
-            <span>GitHub</span>
-        </a>
-        <a class="contact-icon" href="https://github.com/FHumberto/FHumberto/raw/main/src/doc/Curriculo.pdf"
-           title="CurriculumVitae" target="_blank">
-            <IconComponent IconName="BootstrapIcon.PersonBadge" Size="icon-medium" />
-            <span>Currículo</span>
-        </a>
-        <a class="contact-icon" href="mailto:fhumberto.trab@hotmail.com"
-           title="E-Mail">
-            <IconComponent IconName="MdiIcon.Email" Size="icon-medium" />
-            <span>E-Mail</span>
-        </a>
-    </div>
-
-</section>
+     <div>
+         <h2>Meus Serviços</h2>
+     </div>
+
+     <div id="servicesContainer">
+         @if (_services is null)
+         {
+             <p>Carregando...</p>
+         }
+         else
+         {
+             foreach (var service in _services)
+             {
+                 <div class="serviceCard">
+
+                     <h3>@service.Name</h3>
+
+                     <IconComponent IconName="@service.Icon" Size="icon-large" />
+
+                     <div class="serviceCard-body">
+                         <p>@service.Body</p>
+                     </div>
+                 </div>
+             }
+         }
+     </div>
+ </section>
+
+ <section id="contact" class="fade-in">
+
+     <div>
+         <h2>Contato</h2>
+     </div>
+
+     <div id="contactContainer">
+         <a class="contact-icon" href="https://www.linkedin.com/in/fhumberto" title="LinkedIn" target=" _blank">
+             <IconComponent IconName="DeviconPlain.Linkedin" Size="icon-medium" />
+             <span>Linkedin</span>
+         </a>
+         <a class="contact-icon" href="https://github.com/FHumberto" title="GithubProfile" target="_blank">
+             <IconComponent IconName="BootstrapIcon.Github" Size="icon-medium" />
+             <span>GitHub</span>
+         </a>
+         <a class="contact-icon" href="https://github.com/FHumberto/FHumberto/raw/main/src/doc/Curriculo.pdf"
+            title="CurriculumVitae" target="_blank">
+             <IconComponent IconName="BootstrapIcon.PersonBadge" Size="icon-medium" />
+             <span>Currículo</span>
+         </a>
+         <a class="contact-icon" href="mailto:fhumberto.trab@hotmail.com"
+            title="E-Mail">
+             <IconComponent IconName="MdiIcon.Email" Size="icon-medium" />
+             <span>E-Mail</span>
+         </a>
+     </div>
+
+ </section>
diff --git a/src/Nexo.UI/Pages/Home.razor.css b/src/Nexo.UI/Pages/Home.razor.css
@@ -106,6 +106,7 @@
 {
     display: flex;
     gap: 1rem;
+    flex-wrap: wrap;
 }
 
 .summaryCard-right-points
@@ -229,3 +230,26 @@
         grid-template-columns: 1fr;
     }
 }
+
+@media screen and (max-width: 480px)
+{
+    .points-li-icon
+    {
+        display: none;    
+    }
+
+    #contactContainer
+    {
+        flex-direction: column;
+    }
+
+    .lead-tittle-sec
+    {
+        font-size: clamp(0.8rem, 3.5vw, 2rem);
+    }
+
+    .summaryCard > img
+    {
+        width: 100%;
+    }
+}
diff --git a/src/Nexo.UI/Pages/Projects.razor b/src/Nexo.UI/Pages/Projects.razor
@@ -1,7 +1,7 @@
 @page "/projects"
 @inject HttpClient Http
 
-<PageTitle>Projetos</PageTitle>
+<PageTitle>FH | Projetos</PageTitle>
 
 <section class="section">
 

diff --git a/src/Nexo.UI/Pages/Projects.razor.css b/src/Nexo.UI/Pages/Projects.razor.css
@@ -59,6 +59,7 @@
     display: flex;
     gap: 0.5rem;
     margin-top: 1rem;
+    flex-wrap: wrap;
 }
 
 .projectCard-tools-li

diff --git a/src/Nexo.UI/wwwroot/css/global.css b/src/Nexo.UI/wwwroot/css/global.css
@@ -7,7 +7,7 @@
 :root
 {
     --body-background: rgb(31, 29, 29);
-    --topbar-background: rgba(0, 0, 0, 0.4);
+    --topbar-background: rgba(0, 0, 0, 0.91);
     --topbar-background-sec: rgb(51, 51, 51);
     --button-color-background: rgba(255, 255, 255, 0.1);
     --button-color-border: rgba(255, 255, 255, 0.1);
@@ -202,3 +202,5 @@ option
     height: 10rem;
     resize: none;
 }
+
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,6 @@ article @@
     {
         main
         {
-            padding: 4rem 0 4rem 0;
+            padding: 4rem 1rem 4rem 1rem;
         }
     }