protfolio updated

Alibaba2023 · Feb 7, 2024 · 4b31ec6 · 4b31ec6
1 parent d2b65d6
commit 4b31ec6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <link rel="stylesheet" href="css-animations/navbar-logo-animation.css" />
+    <link rel="stylesheet" href="navbar-logo-animation.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -44,16 +44,16 @@
           <div class="headline-container">
             <h1 class="heading-primary">
               Hey There. <br />
-              I’m Ali.
+              I’m Ali Baba
             </h1>
             <h2 class="headline-support">I'm a Software Developer</h2>
             <p class="headline-description description-text">
-              Crafting innovative solutions for your software needs is my expertise. Explore my portfolio and delve into my skills! Should your vision align with my work and you harbor a coding project, don't hesitate to get in touch. I'm prepared to breathe life into your ideas!
+              Certified  Software engineer, Full-stack web developer, and problem solver skilled in crafting innovative programs for organizational efficiency. Proven mentor, adept at motivating and managing a team of 5+ developers for efficient software development.
             </p>
           </div>
           <ul class="flex social-media-list social-list">
             <li>
-              <a href="https://github.com/Alibaba2023">
+              <a href="https://github.com/Alibaba2023" target="_blank">
                 <svg
                   class="hero-icons"
                   width="18"
@@ -68,7 +68,7 @@ <h2 class="headline-support">I'm a Software Developer</h2>
               </a>
             </li>
             <li>
-              <a href="https://www.linkedin.com/in/ali-baba-hussaini-630607267">
+              <a href="https://www.linkedin.com/in/ali-baba-hussaini-630607267" target="_blank">
                 <svg
                   class="hero-icons"
                   width="20"
@@ -104,7 +104,7 @@ <h2 class="headline-support">I'm a Software Developer</h2>
               </a>
             </li>
             <li>
-              <a href="https://twitter.com/AliBabaHu2023">
+              <a href="https://twitter.com/AliBabaHu2023" target="_blank">
                 <svg
                   class="hero-icons"
                   width="20"
@@ -148,7 +148,7 @@ <h2 class="heading-about-me">About me</h2>
                 <p class="about-me-description description-text">
                   Greetings! I specialize in software development and possess the skills to assist you in crafting a remarkable product, feature, or website. Take a glance at my portfolio and explore my diverse experience. If my work resonates with your vision and you have a coding project in mind, feel free to reach out – I'm here to bring your ideas to life!
                 </p>
-                <a href="https://docs.google.com/document/d/167cpX08X8uCl3-AGUJL3m-MilgC7B6LcJKWBxEMWFGY/edit?usp=sharing" class="btn btn-inline-block">
+                <a href="https://docs.google.com/document/d/167cpX08X8uCl3-AGUJL3m-MilgC7B6LcJKWBxEMWFGY/edit?usp=sharing" class="btn btn-inline-block" target="_blank">
                   <p>Get my resume</p>
                 </a>
               </div>

diff --git a/index.js b/index.js
@@ -114,7 +114,7 @@ const featureCard = [
     card_description:
       'A calculator and can provide the calculated operation. Has been the industrys standard.Responsive and nice user interface best for math operations. With a ramdom quote that fetches from the API.',
     long_description:
-      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint ipsa illo eum enim. Nihil nemo adipisci ex, quos sit quisquam. Id veritatis nihil rerum quis, voluptatum porro velit! Nulla, sequi.<br><br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora, aperiam et. Nobis esse et repellat quos reprehenderit laboriosam. Pariatur aut cupiditate consectetur laborum non delectus maxime laboriosam hic qui molestias.',
+      'A calculator and can provide the calculated operation. Has been the industrys standard.Responsive and nice user interface best for math operations. With a ramdom quote that fetches from the API.',
     tech: ['HTML', 'Bootstrap', 'Ruby'],
     livelink: 'https://math-magicians-hffp.onrender.com/',
     sourcelink: 'https://github.com/Alibaba2023/math-magicians',
@@ -210,7 +210,7 @@ const popupWindow = (data) => `
     </p>
     <ul class="btns-popup flex">
     <li>
-    <a class="centering" href="${data.livelink}">
+    <a class="centering" href="${data.livelink}" target="_blank">
     <p class="btn centering padding-2px">See live
     <svg class="hero-icons " width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M5 12C5 8.13401 8.13401 5 12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12ZM16 3C15.4477 3 15 3.44772 15 4C15 4.55228 15.4477 5 16 5H17.5858L11.2929 11.2929C10.9024 11.6834 10.9024 12.3166 11.2929 12.7071C11.6834 13.0976 12.3166 13.0976 12.7071 12.7071L19 6.41421V8C19 8.55228 19.4477 9 20 9C20.5523 9 21 8.55228 21 8V4C21 3.44772 20.5523 3 20 3H16Z" fill="white"/>
@@ -219,7 +219,7 @@ const popupWindow = (data) => `
       </a>
     </li>
     <li>
-    <a class="centering" href="${data.sourcelink}">
+    <a class="centering" href="${data.sourcelink}" target="_blank">
     <p class="btn">See source
       <svg
       class="hero-icons"

diff --git a/navbar-logo-animation.css b/navbar-logo-animation.css
@@ -0,0 +1,30 @@
+:root {
+    --orange: #ff6b00;
+  }
+
+  .logo-box {
+    animation: rotateLogo 1.5s ease-in;
+    animation-delay: 0.5s;
+    padding: 0.5rem 0 0.4rem 0;
+  }
+
+  @keyframes rotateLogo {
+    0% {
+      transform: rotate(-180deg);
+      border-bottom: 1px solid var(--orange);
+    }
+
+    25% {
+      border-bottom: 3px solid var(--orange);
+    }
+
+    50% {
+      transform: rotate(360deg) scale(1.2);
+      box-shadow: var(--orange) 2px 2px 20px 1px;
+    }
+
+    100% {
+      transform: scale(1.1);
+      box-shadow: var(--orange) 2px 2px 20px 1px;
+    }
+  }
diff --git a/style.css b/style.css
@@ -82,6 +82,8 @@ body {
 }
 
 .section-header {
+  position: fixed;
+  width: 100%;
   background-color: #3c3a39;
   padding-top: 0.6rem;
   padding-bottom: 0.6rem;
@@ -138,7 +140,7 @@ body {
 .menu-mobile {
   display: block;
   width: 100%;
-  height: 95vh;
+  height: 100vh;
   background-color: #3c3a39;
   position: fixed;
   left: 0;
@@ -646,7 +648,7 @@ footer {
     background-repeat: no-repeat;
     background-size: contain;
     background-position: 100% 0;
-    height: 90vh;
+    height: 100vh;
   }
 
   .work-heading-box {