feat(nav): create navigation bar (#6)

* refactor(intro): update header text * chore(workspace): disable selector-class-pattern rule * feat(nav): add navigation content * feat(colors): create colors black and white * refactor(intro): adjust intro padding * feat(nav): style navigation bar
raskolnikov-rodion · Sep 26, 2023 · 366f4a8 · 366f4a8
1 parent 76a71f9
commit 366f4a8
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 11 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -5,6 +5,7 @@
   ],
   "rules": {
     "selector-max-id": 1,
-    "scss/at-import-no-partial-leading-underscore": null
+    "scss/at-import-no-partial-leading-underscore": null,
+    "selector-class-pattern": null
   }
 }
diff --git a/dist/styles.css b/dist/styles.css
diff --git a/index.html b/index.html
@@ -13,13 +13,40 @@
     />
   </head>
   <body>
-    <section class="intro">
+    <nav class="nav">
+      <ul class="nav__list">
+        <li class="nav__item">
+          <a class="nav__link" href="#intro">Gustavo</a>
+        </li>
+        <li class="nav__item">
+          <a class="nav__link" href="#contact">Contact</a>
+        </li>
+        <li class="nav__item--square">
+          <a
+            class="nav__link"
+            href="https://github.com/raskolnikov-rodion"
+            target="_blank"
+          >
+            <img src="./svg/github.svg" alt="Github" />
+          </a>
+        </li>
+        <li class="nav__item--square">
+          <a
+            class="nav__link"
+            href="https://1drv.ms/b/s!AhFcsd63GAVbgSFs5EDJppxw_K6T?e=qAza0A"
+            target="_blank"
+            >Resume</a
+          >
+        </li>
+      </ul>
+    </nav>
+    <section id="intro" class="intro">
       <p class="intro__greeting">
         Hi, my name is <span>Gustavo Oliveira.</span>
       </p>
 
       <h2 class="intro__header">
-        I develop user interfaces of feature-rich, data-intensive applications.
+        I build user interfaces of feature-rich, data-intensive applications.
       </h2>
 
       <p>
@@ -37,7 +64,7 @@ <h2 class="intro__header">
         management application.
       </p>
     </section>
-    <section class="contact">
+    <section id="contact" class="contact">
       <h2>Contact me</h2>
 
       <p>Have any questions or interesting projects I could contribute to?</p>

diff --git a/styles/_colors.scss b/styles/_colors.scss
@@ -1,13 +1,15 @@
 :root {
+  --color-white: #fff;
+  --color-black: #2b2b2b;
   --color-primary-extra-dark: #131a40;
   --color-primary-dark: #273273;
   --color-primary: #4e64a6;
   --color-primary-light: #829fd9;
   --color-primary-extra-light: #99b7f9;
-  --color-text-on-primary-extra-dark: #fff;
-  --color-text-on-primary-dark: #fff;
-  --color-text-on-primary: #fff;
-  --color-text-on-primary-light: #2b2b2b;
-  --color-text-on-primary-extra-light: #2b2b2b;
+  --color-text-on-primary-extra-dark: var(--color-white);
+  --color-text-on-primary-dark: var(--color-white);
+  --color-text-on-primary: var(--color-white);
+  --color-text-on-primary-light: var(--color-black);
+  --color-text-on-primary-extra-light: var(--color-black);
   --color-link-on-primary-extra-dark: var(--color-primary-extra-light);
 }
diff --git a/styles/_intro.scss b/styles/_intro.scss
@@ -1,5 +1,5 @@
 .intro {
-  padding: 4rem 3rem 10rem;
+  padding: 5rem 3rem 10rem;
 
   p {
     font-size: 1rem;

diff --git a/styles/_navigation.scss b/styles/_navigation.scss
@@ -0,0 +1,59 @@
+.nav {
+  position: sticky;
+  top: 0;
+  padding: 1.5rem;
+  font-family: var(--font-family-mono);
+  background-color: var(--color-primary-extra-dark);
+
+  &__list {
+    display: flex;
+    align-items: center;
+    column-gap: 1.5rem;
+    list-style: none;
+  }
+
+  &__link {
+    color: var(--color-text-on-primary-extra-dark);
+    font-size: 1rem;
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-primary-extra-light);
+    }
+  }
+
+  &__item {
+    &--square {
+      display: grid;
+      min-width: 2rem;
+      height: 2rem;
+      padding: 0 0.5rem;
+      text-align: center;
+      background-color: var(--color-white);
+      border-radius: 5px;
+      place-content: center;
+
+      &:hover {
+        background-color: var(--color-primary-extra-light);
+      }
+
+      .nav__link {
+        color: var(--color-text-on-primary-extra-light);
+      }
+
+      img {
+        display: block;
+        height: 1.3rem;
+      }
+    }
+
+    &:first-of-type {
+      margin-right: auto;
+      font-family: var(--font-family-sans);
+
+      .nav__link {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
diff --git a/styles/main.scss b/styles/main.scss
@@ -3,3 +3,4 @@
 @import 'typography';
 @import 'intro';
 @import 'contact';
+@import 'navigation';
diff --git a/svg/github.svg b/svg/github.svg