Responsive Styles Updated

AmbrizAlberto · Apr 22, 2024 · 9254214 · 9254214
1 parent d1fef80
commit 9254214
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/app/css/main.css b/app/css/main.css
@@ -113,14 +113,36 @@ body{
     transition: 500ms;
 }
 
-
-
 button{
     background-color: transparent;
     border: none;
     transition: 500ms;
 }
 
+.btnlinks{
+    margin: auto;
+    margin-top: 7vh;
+    width: 100%;
+    height: 10vh;
+    color: rgb(0, 0, 60);
+    margin-bottom: 3vh;
+}
+.btnlinks button{
+    margin: auto;
+    padding: 1vh;
+}
+.btnlinks i{
+    align-items: center;
+    margin: auto;
+    color: rgb(0, 0, 60);
+    font-size: 300%;
+}
+.btnlinks i:hover{
+    cursor: pointer;
+    color: rgb(255, 255, 255);
+    transition: 500ms;
+}
+
 
 
 

diff --git a/app/css/mainrespons.css b/app/css/mainrespons.css
@@ -8,11 +8,12 @@
         overflow-y: auto
     }
     .personaldata{
+        height: 80vh;
         margin: auto;
         width: 100%;
         flex-wrap: wrap;
-        height: 100vh;
-        margin-bottom: 20%;
+        height: 80vh;
+        margin-bottom: 7vh;
     }
     .datos{
         margin: auto;
@@ -153,7 +154,7 @@
         width: 90%;
     }.personaldata{
         width: 90%;
-        height: 100vh;
+        height: 80vh;
         font-size: 100%;
         margin-top: 15%;
         flex-wrap: wrap;

diff --git a/app/page.jsx b/app/page.jsx
@@ -22,7 +22,7 @@ export default function Portafolio() {
   useEffect(() => {
     if (typeof window !== 'undefined') {
       initScrollReveal('.personaldata', 'bottom');
-      initScrollReveal('.lenguajes', 'right');
+      initScrollReveal('.lenguajes', 'inherit');
       initScrollReveal('.projects', 'right');
       initScrollReveal('.contactme', 'right');
     }
@@ -83,6 +83,19 @@ export default function Portafolio() {
         </div>
       </div>
 
+      <div className='btnlinks'>
+          <button>
+            <i className="bi bi-linkedin"></i>
+          </button>
+          <button>
+            <i className="bi bi-github"></i>
+          </button>
+          <button>
+            <i className="bi bi-file-earmark-person-fill"></i>
+          </button>
+        </div>
+
+
       <Tecnologias/>
 
       <Proyectos/>