UI Improvements and Bug Fixes

.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.12.8","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"rawEnvValues\":false},\"legacy\":{\"collections\":false}}"]

.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1740190382923
+		"lastUpdateCheck": 1754466975165
 	}
 }

src/cra-project/App.css

@@ -1,13 +1,21 @@
+* {
+  padding: 0%;
+  margin: 0%;
+}
+
 .App {
   /* height: 500px; */
   background-color: #0a0a0a;
   text-align: center;
   display: flex;
   justify-content: center;
   flex-direction: column;
+  font-family: monospace, sans-serif;
 }
 
 .App-header {
+  width: 80%;
+  margin: 20px auto;
   padding: 20px;
   color: white;
 }
@@ -17,24 +25,28 @@
   color: unset;
 }
 
-.App-header > h1 {
+.App-header a:hover {
+  text-decoration: underline;
+  color: unset;
+}
+
+.App-header>h1 {
   /* padding-top: 6%; */
   font-size: 5.1rem;
   letter-spacing: -0.05em;
   font-weight: 700;
 }
 
-.App-header > h1 span{
+.App-header>h1 span {
   background: linear-gradient(to right, #60a5fa, #1d4ed8);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 @media (max-width: 700px) {
-  .App-header > h1 {
+  .App-header>h1 {
     font-size: 3.1rem;
     letter-spacing: -0.05em;
     font-weight: 700;
   }
-
-}
+}

src/cra-project/App.jsx

@@ -1,22 +1,28 @@
-import React from 'react';
-import './App.css';
-import LinkButton from './components/LinkButton/LinkButton';
-import Navbar from './components/Navbar/Navbar';
-import CardsContainer from './components/ProjectList/CardsContainer';
+import React from "react";
+import "./App.css";
+import LinkButton from "./components/LinkButton/LinkButton";
+import CardsContainer from "./components/ProjectList/CardsContainer";
 // import ScrollUpButton from './components/ScrollUpButton/ScrollUpButton';
-import SocialShare from './components/SocialShare/SocialShare';
+import SocialShare from "./components/SocialShare/SocialShare";
 
 const App = () => {
   return (
     <div className="App">
-        <div className="App-header">
-            <h1>Make your first <br/> <a href="https://firstcontributions.github.io/contribute-to-opensource"> open source <span>contribution</span> </a> <br/> in 5 minutes</h1>
-        </div>
-        <LinkButton />
-        <CardsContainer />
-        <SocialShare/>
+      <div className="App-header">
+        <h1>
+          Make your first <br />{" "}
+          <a href="https://firstcontributions.github.io/contribute-to-opensource">
+            {" "}
+            open source <span>contribution</span>{" "}
+          </a>{" "}
+          <br /> in 5 minutes
+        </h1>
+      </div>
+      <LinkButton />
+      <CardsContainer />
+      <SocialShare />
     </div>
   );
-}
+};
 
 export default App;

src/cra-project/components/LinkButton/LinkButton.css

@@ -2,54 +2,55 @@
   padding: 16px 20px;
   text-decoration: none;
   margin: 20px auto;
-
   overflow: hidden;
-
   border-width: 0;
   border-radius: 8px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-
-  background-color:  #2563eb;
+  border: 2px solid white;
   color: #fff;
-
-  -webkit-transition: background-color 0.3s;
-  -moz-transition: background-color 0.3s;
-  transition: background-color 0.3s;
   margin-bottom: 0 !important;
+  font-size: large;
 }
 
 .LinkButton:hover {
-  background-color: #3b82f6;
+  background-color: white;
+  color: black;
 }
 
-.LinkButton > span {
+.LinkButton>span {
   font-size: 1.1em;
   letter-spacing: 0.05em;
 }
+
 .LinkButton-Wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   margin-bottom: 2rem;
 }
+
 .Scroll-Down {
   cursor: pointer;
   position: relative;
   animation: swing alternate 0.5s infinite;
 }
+
 .Scroll-Down:active {
   opacity: 0.75;
 }
+
 .Scroll-Down-Wrapper {
   padding: 1vw;
   padding-bottom: 1.75vw;
 }
+
 @keyframes swing {
   from {
     top: -0.5rem;
   }
+
   to {
     top: 1rem;
   }
-}
+}

src/cra-project/components/LinkButton/LinkButton.jsx

@@ -1,7 +1,5 @@
 import React, { Component } from "react";
 import "./LinkButton.css";
-import scrollDown from "./scroll-down.svg";
-
 class LinkButton extends Component {
   render() {
     return (

src/cra-project/components/ProjectList/CardsContainer.jsx

@@ -15,7 +15,7 @@ export default class CardsContainer extends React.Component {
     this.state = {
       value: [],
       filterList: this.sortArrayRandom(projectList),
-      hydrated: false
+      hydrated: false,
     };
 
     this.setTags = new Set();
@@ -102,54 +102,56 @@ export default class CardsContainer extends React.Component {
 
   // Triggers re-render after mount to remove hydration errors caused by sortArrayRandom
   componentDidMount() {
-    this.setState({ hydrated: true})
+    this.setState({ hydrated: true });
   }
 
   render() {
-    return this.state.hydrated && (
-      <div>
-        <div id="container">
-          <div className="inputContainer">
-            <input
-              id="search"
-              type="text"
-              name="search"
-              placeholder="Search..."
-              onChange={this.handleChange}
-              aria-label="Search"
-            />
-          </div>
-          <div id="tag-selector-container" className="inputContainer">
-            <Select
-              name="tag-selector"
-              value={this.state.value}
-              onChange={this.handleSelectChange}
-              options={this.filterOptions}
-              isMulti={true}
-              placeholder={
-                <div className="filter-placeholder-text">Filter</div>
-              }
-              aria-labelledby="tag-selector-container"
-              instanceId="tag-selector"
-            />
+    return (
+      this.state.hydrated && (
+        <div>
+          <div id="container">
+            <div className="inputContainer">
+              <input
+                id="search"
+                type="text"
+                name="search"
+                placeholder="Search..."
+                onChange={this.handleChange}
+                aria-label="Search"
+              />
+            </div>
+            <div id="tag-selector-container" className="inputContainer">
+              <Select
+                name="tag-selector"
+                value={this.state.value}
+                onChange={this.handleSelectChange}
+                options={this.filterOptions}
+                isMulti={true}
+                placeholder={
+                  <div className="filter-placeholder-text">Filter</div>
+                }
+                aria-labelledby="tag-selector-container"
+                instanceId="tag-selector"
+              />
+            </div>
           </div>
+          <section id="project-list" className="containerLayout">
+            {this.state.filterList.map((item, key) => {
+              return (
+                <Card
+                  key={key}
+                  name={item.name}
+                  logoLink={item.imageSrc}
+                  projectLink={item.projectLink}
+                  description={item.description}
+                  tags={item.tags}
+                  className="testing-testing"
+                />
+              );
+            })}
+          </section>
         </div>
-        <section id="project-list" className="containerLayout">
-          {this.state.filterList.map((item, key) => {
-            return (
-              <Card
-                key={key}
-                name={item.name}
-                logoLink={item.imageSrc}
-                projectLink={item.projectLink}
-                description={item.description}
-                tags={item.tags}
-                className="testing-testing"
-              />
-            );
-          })}
-        </section>
-      </div>
+      )
     );
   }
 }

src/cra-project/components/ProjectList/css/cards-container.css

@@ -1,18 +1,18 @@
-.containerLayout{
-  background: #f7f7fc;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  padding: 1vw;
-  overflow: hidden;
+.containerLayout {
+    background: #f7f7fc;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 1vw;
+    overflow: hidden;
 }
 
 .filter-placeholder-text {
-  color: #757575;
+    color: #757575;
 }
 
 @media screen and (max-width: 500px) {
-  .containerLayout{
-    padding: 15px;
-  }
-}
+    .containerLayout {
+        padding: 15px;
+    }
+}