Merge branch 'source' into thrilaBranch

firstcontributions · Dec 7, 2024 · f7a58e9 · f7a58e9
2 parents 3892809 + 88d234a
commit f7a58e9
Show file tree

Hide file tree

Showing 9 changed files with 3,673 additions and 3,085 deletions.
diff --git a/public/funding.json b/public/funding.json
@@ -0,0 +1,87 @@
+{
+  "version": "v1.0.0",
+  "entity": {
+    "type": "organisation",
+    "role": "owner",
+    "name": "firstcontributions",
+    "email": "[email protected]",
+    "phone": "",
+    "description": "Improve accessibility with enhanced documentation tailored for beginners and create opportunities for first-time contributors to get involved. Focus on building great software while inspiring a thriving, collaborative community around open source projects.",
+    "webpageUrl": {
+      "url": "https://firstcontributions.github.io/"
+    }
+  },
+  "projects": [
+    {
+      "guid": "first-contributions",
+      "name": "First contributions",
+      "description": "Help beginners learn how to contribute to open-source projects. It provides a simple and beginner-friendly way for users to understand the contribution workflow using Git and GitHub. We've had over 90,000 users since we started in 2016",
+      "webpageUrl": {
+        "url": "https://firstcontributions.github.io/",
+        "wellKnown": ""
+      },
+      "repositoryUrl": {
+        "url": "https://github.com/firstcontributions/first-contributions",
+        "wellKnown": ""
+      },
+      "licenses": ["spdx:MIT"],
+      "tags": ["tutorial", "beginner", "open-source", "contribution"]
+    }
+  ],
+  "funding": {
+    "channels": [
+      {
+        "guid": "opencollective",
+        "type": "payment-provider",
+        "address": "https://opencollective.com/firstcontributions",
+        "description": "Fiscal host is Open Source Collective. Payment methods can be found in https://docs.opencollective.com/help/financial-contributors/payments#select-a-payment-method"
+      },
+      {
+        "guid": "github-sponsors",
+        "type": "payment-provider",
+        "address": "https://github.com/sponsors/firstcontributions",
+        "description": "Uses open collective"
+      }
+    ],
+    "plans": [
+      {
+        "guid": "maintainer-time",
+        "status": "active",
+        "name": "Maintainer compensation",
+        "description": "This will compensate the effort of one maintainer working part-time on the projects.",
+        "amount": 30000,
+        "currency": "USD",
+        "frequency": "yearly",
+        "channels": ["opencollective", "github-sponsors"]
+      },
+      {
+        "guid": "hosting-monthly",
+        "status": "active",
+        "name": "Hosting support",
+        "description": "This will cover the monthly server hosting costs for the projects.",
+        "amount": 30,
+        "currency": "USD",
+        "frequency": "monthly",
+        "channels": ["opencollective", "github-sponsors"]
+      }
+    ],
+    "history": [
+      {
+        "year": 2024,
+        "income": 3,
+        "expenses": 0,
+        "taxes": 0,
+        "currency": "USD",
+        "description": ""
+      },
+      {
+        "year": 2023,
+        "income": 5,
+        "expenses": 0,
+        "taxes": 0,
+        "currency": "USD",
+        "description": ""
+      }
+    ]
+  }
+}
diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,6 @@
 .App {
   /* height: 500px; */
-  background-color: #0054B5;
+  background-color: #0a0a0a;
   text-align: center;
   display: flex;
   justify-content: center;
@@ -13,6 +13,23 @@
 }
 
 .App-header > h1 {
-  padding-top: 10%;
-  font-size: 2.5em;
+  /* padding-top: 6%; */
+  font-size: 5.1rem;
+  letter-spacing: -0.05em;
+  font-weight: 700;
 }
+
+.App-header > h1 span{
+  background: linear-gradient(to right, #60a5fa, #1d4ed8);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+@media (max-width: 700px) {
+  .App-header > h1 {
+    font-size: 3.1rem;
+    letter-spacing: -0.05em;
+    font-weight: 700;
+  }
+
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -11,7 +11,7 @@ const App = () => {
     <div className="App">
         <Navbar />
         <div className="App-header">
-            <h1>Make your first open source contribution in 5 minutes</h1>
+            <h1>Make your first <br/> open source <span>contribution</span> <br/> in 5 minutes</h1>
         </div>
         <ScrollUpButton />
         <LinkButton />

diff --git a/src/components/LinkButton/LinkButton.css b/src/components/LinkButton/LinkButton.css
@@ -1,15 +1,15 @@
 .LinkButton {
-  padding: 10px 15px;
+  padding: 16px 20px;
   text-decoration: none;
   margin: 20px auto;
 
   overflow: hidden;
 
   border-width: 0;
-  border-radius: 2px;
+  border-radius: 8px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 
-  background-color:  #0A680D;
+  background-color:  #2563eb;
   color: #fff;
 
   -webkit-transition: background-color 0.3s;
@@ -19,7 +19,7 @@
 }
 
 .LinkButton:hover {
-  background-color: #26a65b;
+  background-color: #3b82f6;
 }
 
 .LinkButton > span {

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -1,30 +1,40 @@
 .topnav {
-    background-color: #0054B5;
+    background-color: #1f293726;
     overflow: hidden;
     text-align: right;
+    backdrop-filter: blur(16px);
+    border: 1px solid #f9fafb1a;
+    padding: 1.1rem;
+    display: flex;
+    justify-content:flex-end;
+    gap: 16px;
 }
 @media (max-width: 700px) {
     .topnav {
         text-align: center;
+        overflow: auto;
+        justify-content: flex-start;
     }
 }
 
 .topnav a {
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    gap: 8px;
     color: #f2f2f2;
     text-align: center;
-    padding: 20px 15px;
+    padding: 0px 15px;
     text-decoration: none;
-    font-size: 20px;
+    border: 1px solid transparent;
+    /* font-size: 20px; */
 }
 
 .topnav a:hover {
-    background-color: #72B1E4;
+    background-color: #2c2e2fb3;
     color: #f2f2f2;
-    border-radius: 25px;
-    border: #72B1E4;
-    block-size: auto;
-    display: inline;
+    border-radius: 12px;
+    border:1px solid #b6b6b94a;
+    /* display: inline; */
 }
 
 .topnav a.active {
@@ -34,8 +44,8 @@
 
 .logo{
     margin-top: 10px;
-    width: 70px;
+    width: 52px;
     vertical-align:middle;
-    height: 50px;
+    height: 42px;
     display: inline-block;
 }
diff --git a/src/components/ProjectList/css/project-cards.css b/src/components/ProjectList/css/project-cards.css
@@ -7,11 +7,19 @@
   background: white;
   padding: 2%;
   line-height: 18px;
+  height: 140px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
 }
 .Project-Logo {
-  width: 45%;
+  width: 60px;
   height: auto;
   margin-top: 5%;
+  border-radius: 8px;
+  display: block;
+  max-height: 100px;
 }
 .Card-Body {
   position: relative;
@@ -22,11 +30,14 @@
   width: 16%;
   min-width: 225px;
   display: flex;
-  margin: 1.5vw;
-  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
-  -webkit-transition: box-shadow 0.1s ease-in-out;
+  margin: .5vw;
+  /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+  -webkit-transition: box-shadow 0.1s ease-in-out; */
   transition: box-shadow 0.1s ease-in-out;
   background-color: #fff;
+  border: 1px solid #1f293740;
+  border-radius: 8px;
+  padding: 8px;
 }
 @media (max-width: 700px) {
   .Card-Container {
@@ -38,7 +49,7 @@
 }
 
 .Card-Container:hover {
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px;
+  box-shadow: rgba(0, 0, 0, 0.053) 0px 3px 10px, rgba(0, 0, 0, 0.066) 0px 3px 10px;
 }
 .Card-Real-Link:hover {
   text-decoration: none;
@@ -62,6 +73,26 @@
 .Card-Description {
   position: relative;
   padding: 5%;
+  max-height: 180px;
+  overflow: auto;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.Card-Description::-webkit-scrollbar {
+  width: 6px; 
+}
+
+.Card-Description::-webkit-scrollbar-thumb {
+  background-color: #888; 
+  border-radius: 10px; 
+}
+
+.Card-Description::-webkit-scrollbar-thumb:hover {
+  background-color: #555; 
+}
+
+.Card-Description::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
 }
 .Card-Link {
   position: relative;
@@ -74,7 +105,8 @@
 }
 .Card-Link:hover {
   color: whitesmoke;
-  background: #0f3cef;
+  background: #3b82f6;
+  border-radius: 8px;
 }
 .Card-Title {
   margin-top: 6%;
@@ -85,12 +117,20 @@
   margin-left: 10%;
 }
 
+.Card-Tag{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
 .Card-Tag div {
   display: inline-block;
-  background-color: #c8e1f9;
-  padding: 5px;
-  border-radius: 12px;
-  margin: 10px 10px;
+  background-color: #0f3cef33;
+  padding: .3rem .65rem;
+  border-radius: 8px;
+  border: 1px solid #42404047;
   vertical-align: middle;
 }