Add language to home

Signed-off-by: Dinne Kopelevich <[email protected]>

Author: DinneK

app/site/index.liquid

@@ -7,12 +7,17 @@ layout: base
       <h2>Metrics & Code.JSON</h2>
     </div>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis aliquet quam ut cursus. Ut ac orci eros. 
-      Suspendisse sodales nulla id metus egestas, euismod aliquet massa laoreet. Nulla vel blandit neque, ac efficitur augue. 
-      Donec consequat pulvinar lacus, a dignissim sem rhoncus ut. Nunc eu elit dignissim, elementum nunc ut, fermentum nulla. 
-      Proin sed enim vel lorem dictum lacinia quis id justo. Vestibulum ac justo commodo, interdum nisl nec, posuere lacus. 
-      In hac habitasse platea dictumst. Aliquam quis risus at tortor placerat congue ut in mi. 
-      Praesent suscipit lectus sit amet massa.
+      <strong>Metrics</strong> provides meaningful insights into project performance and code quality,
+      empowering teams to make informed decisions. By analyzing key data points such as contributor activity,
+      issue resolution times, code complexity and dependency health, Metrics transforms raw data into actionable visualizations.
+      With a focus on clarity and accessibility, Metrics enables organizations to monitor progress,
+      identify improvement opportunities and measure the impact of work.
+    </p>
+    <p>
+      <strong>Code.JSON</strong> serves as a powerful tool for open-source project transparency and compliance.
+      Code.JSON provides a standerdized metadata format that enables dicoverability, reuse and collaboration on governemnt open-source
+      projects. Using the <a href="https://github.com/DSACMS/codejson-generator" target="_blank" rel"noopener noreferrer">code.json generator,</a> organizations can effortlessly create and validate their code.json files,
+      ensuring alignment with federal guidelines while showcasing open-source contributions to the broader community. 
     </p>
     <p>
       {{ site.description }}

app/site/projects.liquid

@@ -107,7 +107,6 @@ layout: base
         </div>
       </div>
     </div>
-
     <div class="outer-search-block">
       <div class="search-block">
         <div class="search-and-sort">
@@ -132,7 +131,6 @@ layout: base
               </div>
             </form>
           </section>
-
           <div class="sort-dropdown sort-styling">
             <form class="usa-form sort-dropdown" id="sort-selection-form">
               <label class="usa-label" for="sort-selection"></label>
@@ -146,9 +144,11 @@ layout: base
                   <option value="maturity_model_tier">Maturity Model Tier</option>
                   <option value="forks_count">Forks</option>
                 </select>
+                <svg class="usa-icon filter-icon" aria-hidden="true" focusable="false" role="img">
+                  <use href="{{ site.baseurl }}/assets/img/sprite.svg#filter_list"></use>
+                </svg>
               </div>
             </form>
-
             <form class="usa-form project-search" id="sort-direction-form">
               <label class="usa-label" for="sort-direction"></label>
               <div class="sort-outer">
@@ -157,6 +157,9 @@ layout: base
                   <option value="ascending">Ascending</option>
                   <option value="descending">Descending</option>
                 </select>
+                <svg class="usa-icon filter-icon" aria-hidden="true" focusable="false" role="img">
+                  <use href="{{ site.baseurl }}/assets/img/sprite.svg#sort_arrow"></use>
+                </svg>
               </div>
             </form>
           </div>

app/src/css/style.css

@@ -344,6 +344,10 @@ a.usa-link:visited {
 }
 
 /* Projects */
+#content-container {
+  margin-top: 5%;
+}
+
 .grid-container-projects {
   display: flex;
   flex-direction: column;
@@ -402,39 +406,29 @@ section:active {
 }
 
 .sort-outer {
+  display: flex;
   background-color: #E0EAF8;
   border: 0.25px solid #bcbcbc;
   height: 37px;
   border-radius: 50px;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   margin-left: 30px;
+  align-items: center;
+  max-width: 15rem;
+  min-width: 7rem;
 }
 
-
-/* .search-and-sort {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.usa-search--small {
-  height: 100px; 
+.filter-icon {
+  margin: 0 0 0 -20%;
 }
 
-.sort-dropdown {
-  display: flex;
-} */
-
 .outer-project-template {
   height: fit-content;
   width: 60vw;
 }
 
 .container-project-template {
   display: flex;
-  /* height: fit-content; */
-  /* flex-direction: column;
-  align-items: flex-start;
-  justify-content: center; */
 }
 
 .text-container-project-template {
@@ -577,10 +571,6 @@ section:active {
   align-items: stretch;
 }
 
-/* .usa-table-styling {
-  width: 70%;
-} */
-
 /* This is so that augur visualizations have the buttons cropped out. */
 .firstResponsePRCrop img {
   width: 500px;
@@ -688,132 +678,4 @@ embed {
 iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   outline: none;
   outline-offset: 0rem;
-}
-
-
-
-/* .main-tag {
-  background-color: #1a4480;
-  padding: 0.5rem;
-  font-weight: bolder;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem; /*Adjust the gap as needed */
-  /* border-radius: 0.25rem; */
-/* } */ 
-
-
-/* .tools-tag {
-  background-color: green;
-}
-
-.apis-tag {
-  background-color: #E52109;
-}
-
-.apps-tag {
-  background-color: #0076D6;
-}
-
-.data-tag {
-  background-color: #E66F0F;
-}
-
-.docs-tag {
-  background-color: #03C585;
-}
-
-.libraries-tag {
-  background-color: #D72D79;
-} */
-
-/* .standards-tag {
-  background-color: #FFBE2F;
-}
-
-.icon-tag {
-  padding: 0.35rem;
-} */
-
-/* .primary-tag-group {
-  padding-top-1
-  padding-top: 0.5rem;
-} */
-
-/* .secondary-tag-group {
-  padding-y-3
-  padding-top:1.5rem;
-  padding-bottom:1.5rem;
-} */
-
-/* .projects-container {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-}
-
-.block {
-  display: block;
-  width: 100%;
-} */
-
-/* .dashboard-container {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  padding-top: 5rem;
-} */
-
-/* .filters-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding-top: 3.4rem;
-}
-
-.search-container {
-  flex:1;
-  margin-bottom: 1rem;
-  box-sizing: border-box; 
-}
-
-.search-and-sort {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 3rem;
-} */
-
-/* .sort-dropdown {
-  display: flex;
-  flex-direction: row;
-  box-sizing: border-box;
-  text-align: right;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-
-} */
-
-/* @media screen and (max-width: 1080px) {
-  .dashboard-container {
-    flex-direction: column;
-  }
-}
-
-@media screen and (max-width: 720px) {
-  .search-and-sort {
-    flex-direction: column;
-    gap: 0;
-  }
-
-  .search-container {
-    margin-bottom: 0;
-  }
-
-  .sort-dropdown {
-    text-align: left;
-  }
-} */
+}

app/src/js/projects.js

@@ -504,4 +504,4 @@ document.addEventListener("DOMContentLoaded", () => {
     createProjectCards()
   })
   createProjectCards()
-})
+})