okoyecharles · okoyecharles · May 7, 2024 · May 4, 2024 · May 4, 2024 · May 5, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -22,4 +22,4 @@
     "dist/",
     "build/"
   ]
-}
+}
diff --git a/.github/workflows/linters.yml b/.github/workflows/linters.yml
@@ -8,24 +8,24 @@ env:
 jobs:
   lighthouse:
     name: Lighthouse
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: "12.x"
+          node-version: "18.x"
       - name: Setup Lighthouse
-        run: npm install -g @lhci/cli@0.7.x
+        run: npm install -g @lhci/cli@0.11.x
       - name: Lighthouse Report
         run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
   webhint:
     name: Webhint
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: "12.x"
+          node-version: "18.x"
       - name: Setup Webhint
         run: |
           npm install --save-dev hint@7.x
@@ -34,12 +34,12 @@ jobs:
         run: npx hint .
   stylelint:
     name: Stylelint
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: "12.x"
+          node-version: "18.x"
       - name: Setup Stylelint
         run: |
           npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
@@ -48,12 +48,12 @@ jobs:
         run: npx stylelint "**/*.{css,scss}"
   eslint:
     name: ESLint
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: "12.x"
+          node-version: "18.x"
       - name: Setup ESLint
         run: |
           npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
@@ -62,9 +62,9 @@ jobs:
         run: npx eslint .
   nodechecker:
     name: node_modules checker
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Check node_modules existence
         run: |
-          if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi
+          if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -17,4 +17,4 @@
     "csstree/validator": true
   },
   "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
-}
+}
diff --git a/_config.yml b/_config.yml
diff --git a/about.html b/about.html
@@ -1,95 +1,196 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="about.js" defer></script>
-  <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
-  <title>Save The Child</title>
-</head>
-<body>
-  <!-- Top Navigation -->
-  <nav id="top-nav">
-    <ul class="top-nav-links">
-      <li class="top-nav-link"><a href="https://github.com/OkoyeCharles/" target="_blank" rel="noopener"><i class="fa-brands fa-github"></i></a></li>
-      <li class="top-nav-link"><a href="https://twitter.com/OkoyeCharles_" target="_blank" rel="noopener"><i class="fab fa-twitter"></i></a></li>
-      <li class="top-nav-link"><a href="#">English</a></li>
-      <li class="top-nav-link"><a href="#">My Page</a></li>
-      <li class="top-nav-link"><a href="#">Logout</a></li>
-    </ul>
-  </nav>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles/reset.css" />
+    <link rel="stylesheet" href="styles/layout.css" />
+    <link rel="stylesheet" href="styles/about.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+    />
+    <script src="js/navigation.js" defer></script>
+    <title>About</title>
+    <meta name="description" content="About the project 'Save a Child'. Our mission and Past travels.">
+    <meta name="robots" content="index,follow">
+    <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
+  </head>
+  <body>
+    <a class="skip-to-content" href="#welcome">
+      <button tabindex="-1">Skip To Content</button>
+    </a>
 
-  <!-- Main Nav-Bar -->
-  <nav id="nav-bar">
-    <div class="logo"><a href="index.html"><img src="./images/Save-The-Child-Logo.png" alt=""></a></div>
-    <div id="hamburger" class="hamburger">
-      <div class="ham-line"></div>
-      <div class="ham-line"></div>
-      <div class="ham-line"></div>
+    <!-- Top Navigation -->
+    <div class="top-nav-container">
+      <nav class="top-nav">
+        <ul class="top-nav-socials">
+          <li>
+            <a
+              href="https://github.com/okoyecharles"
+              aria-label="github"
+              target="_blank"
+              rel="noopener"
+              ><i class="fa-brands fa-github"></i
+            ></a>
+          </li>
+          <li>
+            <a
+              href="https://twitter.com/okoyecharlesk"
+              aria-label="social"
+              target="_blank"
+              rel="noopener"
+              ><i class="fab fa-twitter"></i
+            ></a>
+          </li>
+        </ul>
+        <ul class="top-nav-links">
+          <li>
+            <a href="https://okoyecharles.com" target="_blank" rel="noopener"
+              >Portfolio</a
+            >
+          </li>
+        </ul>
+      </nav>
     </div>
-    <ul class="nav-links" id="nav-links">
-      <li class="nav-link"><a href="index.html">Home</a></li>
-      <li class="nav-link active"><a href="about.html">About</a></li>
-      <li class="nav-link"><a href="">Program</a></li>
-      <li class="nav-link"><a href="">Join</a></li>
-      <li class="nav-link"><a href="">Sponsor</a></li>
-      <li class="nav-link"><a href="">News</a></li>
-      <li class="nav-link donate"><a href="">Donate</a></li>
-    </ul>
-  </nav>
 
-  <!-- About Welcome Section -->
-  <section class="about-welcome">
-    <h1>SAVE THE CHILD</h1>
-    <p class="a-w-description">
-      Save-the-child is a non-profit organization brought together solely for giving the youth from different continents (especcially the children) who have been inflicted mentally, physically or psychologically by the COVID-19 Pandemeic.<br>
-      Here at Save-the-child we firmly believe that every human in the world no matter their ethinicity, background or color deserves to be given a chance to live a well deserved life, Whether it's clear to you or not children are the leaders of tomorrow. <br>
-      <b>That is why we have to support children and victims to the best of our ability.</b> <br>
-      So if you're not encountering financial problems and you believe in the values we represent - Generosity, Kindness, Care and Love - we hope you find it in you to donate to the unfortunate.   
-    </p>
-    <p class="a-contact">
-      If you're unsure on what Step to take next you can always contact us per Email! <br>
-      <a href="mailto:okoyecharles509@gmail.com">okoyecharles509@gmail.com</a>
-    </p>
-  </section>
+    <!-- Main Nav-Bar -->
+    <div class="main-nav-container">
+      <nav class="main-nav">
+        <div class="logo">
+          <a href="/">
+            <img src="./assets/images/Logo.svg" height="40" width="69" alt="Logo" />
+          </a>
+        </div>
+        <button
+          id="hamburger"
+          class="hamburger"
+          aria-controls="nav-links"
+          aria-label="open main menu"
+          aria-expanded="false"
+        >
+          <div class="ham-line"></div>
+          <div class="ham-line"></div>
+          <div class="ham-line"></div>
+        </button>
+        <ul class="nav-links" id="nav-links">
+          <li class="nav-link active"><a href="/">Home</a></li>
+          <li class="nav-link"><a href="/about">About</a></li>
+          <li class="nav-link"><a href="/">Program</a></li>
+          <li class="nav-link"><a href="/">Join</a></li>
+          <li class="nav-link"><a href="/">Sponsor</a></li>
+          <li class="nav-link"><a href="/">News</a></li>
+        </ul>
+        <button class="donate-button">Donate</button>
+      </nav>
+    </div>
 
-  <!-- About Logo Section -->
-  <section class="about-logo">
-    <h1>SAVE THE CHILD LOGO</h1>
-    <hr>
-    <p class="a-l-description">
-      The Save the Child Logo was decided, created and influenced by real-life concepts.<br>
-      Three children with three different colors represents varying humans with different diversities in the vast world we all live in.<br>
-      After Discussing on other concepts we summarized the logo for Save the child as following:
-    </p>
-    <div class="a-l-img"><img src="./images/Save-The-Child-Logo.png" alt=""></div>
-  </section>
+    <!-- About Welcome Section -->
+    <section class="about-welcome-container" id="welcome">
+      <div class="about-welcome">
+        <div class="breadcrumb-bar">
+          <a href="/" aria-label="back to home"><i class="fa-solid fa-home"></i></a>
+          <i class="fa-solid fa-angle-right divider"></i>
+          <a href="/about">About</a>
+        </div>
 
-  <hr>
+        <h2 class="about-welcome-header">SAVE A CHILD</h2>
 
-  <!-- Past Visits Section -->
-  <section class="p-visits">
-    <h1>See our past Visits</h1>
-    <hr>
-    <p class="p-v-description">
-      If by now you still dont trust us why don't you take a look at our previous trips around the world.
-    </p>
-    <div class="p-v-images">
-      <div class="p-v-image"><img src="./images/kenya-help.jpg" alt=""><span><b class="p-v-image-description-date">2011</b><br><b class="p-v-image-description-text">Provided essential clothing resources for a more comfortable lifestyle in Kenya</b></span></div>
-      <div class="p-v-image"><img src="./images/mozambique-help.jpg" alt=""><span><b class="p-v-image-description-date">2015</b><br><b class="p-v-image-description-text">Encouraged Children on importance of education and provided academic resources like Computers, Books e.t.c</b></span></div>
-    </div>
-  </section>
+        <div class="about-welcome-description">
+          <p>
+            Save the Children is a non-profit organization dedicated to supporting young
+            people from around the world who have been impacted mentally, physically, or
+            psychologically.
+          </p>
+          <br />
+          <p>
+            We firmly believe that every individual, regardless of ethnicity, background,
+            or race, deserves the opportunity to thrive. Children, after all, are the
+            future, and their well-being is paramount.
+          </p>
+        </div>
 
-  <!-- Footer Section -->
-  <footer>
-    <div class="footer-logo"><img src="./images/Save-The-Child-Logo.png" alt=""></div>
-    <div class="footer-content">
-      <div class="footer-name">2022 Save The Child Africa.</div>
-      <div class="footer-licence">All Rights Reserved.</div>
-    </div>
-  </footer>
+        <div class="about-welcome-contact">
+          <p>
+            If you're unsure on what Step to take next you can always contact us per
+            Email!
+          </p>
+          <a
+            href="mailto:okoyecharles509@gmail.com"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            okoyecharles509@gmail.com
+          </a>
+        </div>
+      </div>
+    </section>
 
-</body>
-</html>
+    <!-- Visits Section -->
+    <section class="visits-container">
+      <div class="visits">
+        <h3 class="visits-header">See our past Visits</h3>
+        <p class="visits-description">
+          Take a look at our previous trips around the world.
+        </p>
+        <div class="visits-images">
+          <div class="visits-image">
+            <img src="./assets/places/kenya-help.jpg" alt="kenya trip photo" />
+            <div class="visits-image-description">
+              <datetime>2011</datetime>
+              <p>
+                Provided essential clothing resources for a more comfortable lifestyle in
+                Kenya
+              </p>
+
+              <p />
+            </div>
+          </div>
+          <div class="visits-image">
+            <img src="./assets/places/mozambique-help.jpg" alt="mozambique trip photo" />
+            <div class="visits-image-description">
+              <datetime >2015</datetime>
+              <p>
+                Encouraged Children on importance of education and provided academic
+                resources like Computers, Books e.t.c
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer Section -->
+    <div class="footer-container">
+      <footer>
+        <div>
+          <a href="/">
+            <img
+              src="./assets/images/Logo.svg"
+              class="footer-logo"
+              alt="Logo"
+              height="64"
+              width="110"
+            />
+          </a>
+        </div>
+        <div class="footer-content">
+          <div class="footer-license">
+            <p>2022 Save The Child Africa.</p>
+            <p>All Rights Reserved.</p>
+          </div>
+          <p>
+            Built by
+            <a rel="noopener noreferrer" target="_blank" href="https://okoyecharles.com"
+              >Okoye Charles</a
+            >
+          </p>
+          <p>Design Inspiration • <a rel="noopener noreferrer" target="_blank" href="https://www.behance.net/adagio07"
+            >Cindy Shin</a
+          ></p>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/about.js b/about.js
diff --git a/assets/background/african-boy.webp b/assets/background/african-boy.webp
diff --git a/assets/favicon.ico b/assets/favicon.ico
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,4 +22,4 @@ @@
         "dist/",
         "build/"
       ]
-    }
+    }