updated README

pasha-log · Oct 16, 2023 · b80eb9a · b80eb9a
1 parent f7cc646
commit b80eb9a
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+# Coalition Technologies, Inc. Job Application Front-End Challenge
+
+<img src='./images/CT_SkillTest_v3.png' alt=''>
+
+## Description: 
+
+This is my submission for a skills test as part of my job application for Coalition Technologies, Inc.'s front-end position. The assessment is designed to evaluate my ability to transform an Adobe Photoshop PSD into a static, single-page web application. The primary objective is to convert the provided PSD into a responsive single-page website. The carousel should adapt to various screen sizes, and on mobile devices, the tabs should transition into an accordion layout. You'll notice internal links on the page, 'History' and 'Team,' which allow users to navigate to their respective sections. 
+
+## Tools Used: 
+
+* [jQuery](https://www.typescriptlang.org/docs/)
+* [Flickity](https://reactjs.org/)
+* [Adobe Photoshop](https://www.adobe.com/products/photoshop.html)
+* [Bootstrap](https://getbootstrap.com/)
diff --git a/images/CT_SkillTest_v3.png b/images/CT_SkillTest_v3.png
diff --git a/index.html b/index.html
@@ -7,6 +7,9 @@
     <link rel="stylesheet" href="styles/index.css">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.min.css" integrity="sha512-fJcFDOQo2+/Ke365m0NMCZt5uGYEWSxth3wg2i0dXu7A1jQfz9T4hdzz6nkzwmJdOdkcS8jmy2lWGaRXl+nFMQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Mohave:wght@700&family=Nunito+Sans:ital,opsz,wght@1,6..12,665&display=swap" rel="stylesheet">
 </head>
 <body>
 
@@ -15,26 +18,26 @@
         <!-- Top Navbar -->
         <nav class="navbar">
             <div id="navbar-content" class="container-fluid">
-                <a class="navbar-brand">
+                <a class="navbar-brand" role="button">
                     <img id="top-logo" class="logo" src="images/lam-logo.png" alt="logo" width="40" height="40">
                 </a>
                 <div class="nav-links">
-                    <a class="history-link" href="#history">01. HISTORY</a>
-                    <a class="" href="#climb">02. TEAM</a>
+                    <a class="history-link" href="#history" role="button">01. HISTORY</a>
+                    <a class="" href="#climb" role="button">02. TEAM</a>
                 </div>
             </div>
         </nav>
     </section>
     <!-- Second Navbar -->
     <div class="navbar">
         <div id="navbar-content" class="container-fluid">
-            <a class="navbar-brand" href="#hero">
+            <a class="navbar-brand" href="#hero" role="button">
                 <img class="logo" src="images/lam-logo.png" alt="logo" width="40" height="40">
                 <img class="logo-text" src="images/lam-logo-text.png" alt="logo-text" width="100" height="40">
             </a>
             <div class="second-nav-links">
-                <a class="history-link" href="#history">01. HISTORY</a>
-                <a class="" href="#climb">02. TEAM</a>
+                <a class="history-link" href="#history" role="button">01. HISTORY</a>
+                <a class="" href="#climb" role="button">02. TEAM</a>
             </div>
         </div>
     </div>
@@ -69,8 +72,8 @@
     <!-- Schedule Section -->
     <div class="mountain-tabs">
         <div class="tabs">
-            <button type="button" class="active" id="mountain-one">MOUNTAIN 1</button>
-            <button type="button" class="inactive" id="mountain-two">MOUNTAIN 2</button>
+            <button role="button" type="button" class="active" id="mountain-one">MOUNTAIN 1</button>
+            <button role="button" type="button" class="inactive" id="mountain-two">MOUNTAIN 2</button>
         </div>
     </div>
     <div class="active-section" id="schedule-section">
@@ -83,7 +86,7 @@
     <div class="accordion accordion-flush" id="accordionFlush">
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button id="accordion-button-one" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+            <button id="accordion-button-one" class="accordion-button collapsed" role="button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
               MOUNTAIN 1
             </button>
           </h2>
@@ -95,7 +98,7 @@ <h2 class="accordion-header">
     </div>
     <div class="accordion-item">
         <h2 class="accordion-header">
-            <button id="accordion-button-two" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
+            <button id="accordion-button-two" class="accordion-button collapsed" role="button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                 MOUNTAIN 2
             </button>
         </h2>
@@ -109,11 +112,11 @@ <h2 class="accordion-header">
     <!-- Footer -->
     <div class="footer">
         <div class="footer-div">
-            <a class="footer-logo-link" href="#hero">
+            <a class="footer-logo-link" href="#hero" role="button">
                 <img class="footer-logo" src="images/lam-footer-logo.png" alt="footer-logo" width="205" height="65" />
             </a>
             <div class="copyright">
-                COPYRIGHT 2016. ALL RIGHTS RESERVED
+                COPYRIGHT 2016. ALL RIGHTS RESERVED.
             </div>
         </div>
     </div>
@@ -125,12 +128,4 @@ <h2 class="accordion-header">
     <script src="scripts/index.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.pkgd.min.js" integrity="sha512-achKCfKcYJg0u0J7UDJZbtrffUwtTLQMFSn28bDJ1Xl9DWkl/6VDT3LMfVTo09V51hmnjrrOTbtg4rEgg0QArA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </body>
-</html>
-
-<!-- TODO 
-* Refactor css 
-    - Minimize repeated code
-    - Code the color variables
-* Change font families
-* If I have time, make a parallax out of the hero section title
--->
+</html>