feat: change about layout and other style choices

Author: Majestic9169

.github/workflows/build-ci-test.yaml

@@ -1,5 +1,7 @@
 name: Integration Test (Build)
 
+# TODO: add linter
+
 on:
   pull_request:
     types:

index.html

@@ -5,9 +5,7 @@
     <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=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">  
-    <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=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap" rel="stylesheet">
     <link rel="icon" type="image/png" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

src/assets/metakgp_group_picture.jpeg

@@ -14,12 +14,12 @@ const Carousel = (props: { children: React.ReactNode[], ref: any, asNavFor: any
   };
   return (
     <Slider {...settings} className="carousel-container" asNavFor={props.asNavFor} responsive={[{
-      breakpoint: 480,
+      breakpoint: 990,
       settings: {
         slidesToShow: 1,
       }
     }, {
-      breakpoint: 918,
+      breakpoint: 1480,
       settings: {
         slidesToShow: 2,
       }

src/assets/metasprint.jpeg

@@ -16,42 +16,50 @@ function About() {
       <section className="topic-section">
         <h2 className="section-header-left">About Us</h2>
 
-        {/* you can see how bad i am at class names*/}
-        <p className='vikrant-quote'>
-          <strong><em>
-            "The biggest resource we have is the quality of people who choose to participate. That is what must be maximised at all times. Smart people don’t like drudgery, and are generally driven enough to find another way to do something they really want to do, if we get in their way."
-          </em></strong>
-          <br />
-          <br />
-          - <a href='https://github.com/amrav'>Vikrant Varma</a>, MetaKGP co-founder
-        </p>
+        <div className='about-top-container'>
 
-        <p className="description">
-          Metakgp is an <strong>open, student-driven</strong> community at IIT Kharagpur dedicated to improving campus life by sharing knowledge and creating innovative projects. Students from all walks of life come together to <strong>document experiences, build tools, and create resources</strong> that benefit everyone at MetaKGP.
-        </p>
+          <div className='about-top-left'>
+            {/* you can see how bad i am at class names*/}
+            <p className='vikrant-quote'>
+              <strong><em>
+                "The biggest resource we have is the quality of people who choose to participate. That is what must be maximised at all times. Smart people don’t like drudgery, and are generally driven enough to find another way to do something they really want to do, if we get in their way."
+              </em></strong>
+              <br />
+              <br />
+              - <a href='https://github.com/amrav'>Vikrant Varma</a>, MetaKGP co-founder
+            </p>
 
-        <div className='image-container'>
-          <img src={GroupPicture} className='metakgp-image' alt='metakgp group picture' />
-          <figcaption>
-            A group picture of some active metakgp maintainers <br />
-            From left to right: Rohan Barsagade, Arpit Bhardwaj, Harsh Khandeparkar, Chirag Ghosh, Shikhar Soni, and Rajiv Harlalka
-          </figcaption>
+            <p className="description">
+              Metakgp is an <strong>open, student-driven</strong> community at IIT Kharagpur dedicated to improving campus life by sharing knowledge and creating innovative projects. Students from all walks of life come together to <strong>document experiences, build tools, and create resources</strong> that benefit everyone at MetaKGP.
+            </p>
+          </div>
+
+          <div className='image-container'>
+            <img src={GroupPicture} className='metakgp-image' alt='metakgp group picture' />
+            <figcaption>
+              A group picture of some active metakgp maintainers
+            </figcaption>
+          </div>
         </div>
 
-        <p className='description'>
-          Metakgp hosts <strong>Metasprints</strong> — focused, collaborative sessions where members come together to brainstorm, develop, and enhance projects. These events are a great way for anyone, regardless of experience, to get involved and make a real impact.
-        </p>
+        <div className='about-bottom-container'>
+          <div className='about-bottom-right'>
+            <p className='description'>
+              Metakgp hosts <strong>Metasprints</strong> — focused, collaborative sessions where members come together to brainstorm, develop, and enhance projects. These events are a great way for anyone, regardless of experience, to get involved and make a real impact.
+            </p>
+            <p className='description'>
+              If you’re passionate about contributing, learning, or simply making campus life better, join Metakgp and help shape a more open and supportive IIT Kharagpur community!
+            </p>
+          </div>
 
-        <div className='image-container'>
-          <img src={MetaSpringImage} className='metakgp-image' alt='metasprint' />
-          <figcaption>
-            A metasprint in progress
-          </figcaption>
+          <div className='image-container'>
+            <img src={MetaSpringImage} className='metakgp-image' alt='metasprint' />
+            <figcaption>
+              A metasprint in progress
+            </figcaption>
+          </div>
         </div>
 
-        <p className='description'>
-          If you’re passionate about contributing, learning, or simply making campus life better, join Metakgp and help shape a more open and supportive IIT Kharagpur community!
-        </p>
 
         <p className='description'>
           Get to know more about us and our history
@@ -63,7 +71,7 @@ function About() {
               <a href='https://wiki.metakgp.org/w/User:Hargup/Why_metakgp%3F'>Why MetaKGP: by Harsh Gupta</a>
             </li>
             <li>
-              <a href='https://wiki.metakgp.org/w/User:Amrav/Why_metakgp%3F'>Why MetaKGP: by Vikrant</a>
+              <a href='https://wiki.metakgp.org/w/User:Amrav/Why_metakgp%3F'>Why MetaKGP: by Vikrant Varma</a>
             </li>
           </ul>
         </p>

src/components/Carousel.tsx

@@ -7,50 +7,50 @@ import SortDropdown from "../components/SortDropdown";
 const Projects = () => {
   const repoList: REPO_DATA_TYPE[] = RepoData as REPO_DATA_TYPE[]
   const [sortField, setSortField] = useState("activity");
-  const [sortType,setSortType]=useState("desc")
+  const [sortType, setSortType] = useState("desc")
   const languages = [...new Set(repoList.map(repo => repo.language))];
   const [selectedLanguage, setSelectedLanguage] = useState<string[]>([]);
   const [FilteredRepos, setFilteredRepos] = useState<REPO_DATA_TYPE[]>(repoList);
- 
- 
+
+
   //sorting based on STARS ,FORKS , NAME
   // and Also filtered by Language 
-  useEffect ( () => {
-      let result = repoList.filter((repo) =>
+  useEffect(() => {
+    let result = repoList.filter((repo) =>
       selectedLanguage.length === 0 || selectedLanguage.includes(repo.language)
-      );
-   
+    );
+
     if (sortField === "name") {
-    
-     result.sort((a, b) => {
-  const cmp = a.name.toLowerCase().localeCompare(b.name.toLowerCase());
-  return sortType === "asc" ? cmp : -cmp;
-});
-     
-    } 
+
+      result.sort((a, b) => {
+        const cmp = a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+        return sortType === "asc" ? cmp : -cmp;
+      });
+
+    }
     else if (sortField === "stars") {
-          result.sort((a, b) => {
-  const cmp = a.stars-b.stars;
-  return sortType === "asc" ? cmp : -cmp;
-});
-        }
+      result.sort((a, b) => {
+        const cmp = a.stars - b.stars;
+        return sortType === "asc" ? cmp : -cmp;
+      });
+    }
     else if (sortField === "forks") {
-       result.sort((a, b) => {
-  const cmp = a.forks-b.forks;
-  return sortType === "asc" ? cmp : -cmp;
-});
-      
+      result.sort((a, b) => {
+        const cmp = a.forks - b.forks;
+        return sortType === "asc" ? cmp : -cmp;
+      });
+
     }
     else if (sortField === "activity") {
       if (sortType === "asc") {
         result = result.reverse();
       }
-      
 
-}    
-setFilteredRepos(result)
 
-},[selectedLanguage,sortField,sortType])
+    }
+    setFilteredRepos(result)
+
+  }, [selectedLanguage, sortField, sortType])
 
 
 
@@ -66,7 +66,7 @@ setFilteredRepos(result)
     });
   };
 
-
+  // TODO: Add pagination :sob:
 
   return (
     <div className="page-container">
@@ -76,28 +76,28 @@ setFilteredRepos(result)
           Explore our repositories for projects that may help you, feel free to contribute to which ever ones suit you!
         </p>
       </section>
-     <div className="filter-container">
-      <div className="language-filter">
-        {languages.map(lang => (
-          <button
-            key={lang}
-            className={`filter-button ${selectedLanguage.includes(lang) ? "active" : ""}`}
-            onClick={() => toggleLanguage(lang)}
-          >
-            {lang}
-          </button>
-        ))}
-          
-      </div>
-      
+      <div className="filter-container">
+        <div className="language-filter">
+          {languages.map(lang => (
+            <button
+              key={lang}
+              className={`filter-button ${selectedLanguage.includes(lang) ? "active" : ""}`}
+              onClick={() => toggleLanguage(lang)}
+            >
+              {lang}
+            </button>
+          ))}
+
+        </div>
+
         <SortDropdown
-  setSortField={setSortField}
+          setSortField={setSortField}
           setSortType={setSortType}
           sortField={sortField}
           sortType={sortType}
-/>
-    
-      
+        />
+
+
       </div>
       <CardGrid repos={FilteredRepos} displayMode="all" />
     </div>

src/pages/About.tsx

@@ -69,4 +69,10 @@
   font-weight: 700;
   text-decoration: none;
   text-align: center;
+  transition: background 300ms, color 300ms;
+}
+
+.featured-button:hover {
+  color: #2f2f2f;
+  background-color: #fff;
 }

src/pages/Projects.tsx

@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-color: #2f2f2fbf;
+  background-color: #2f2f2f;
   border: 1px solid #222;
   border-radius: 0.375rem;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);

src/styles/components/FeaturedDisplay.css

@@ -6,7 +6,7 @@ body,
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-  /* background: #191919; */
+  /* background: #2f2f2f69; */
   background: linear-gradient(90deg, #28313b, #485461);
   /* background: linear-gradient(90deg, #2c3e50, #000000); */
   animation: gradient_anim 23s ease infinte;
@@ -38,15 +38,15 @@ code {
 
 
 a:not(.nav-element):not(.active-nav-element):not(.slack-link):not(.metakgp-logo-link):not(.no-highlight) {
-  color: #00FFFF;
+  color: #93aff1;
   text-decoration: none;
 }
 
 a:hover:not(.nav-element):not(.active-nav-element):not(.slack-link):not(.metakgp-logo-link):not(.no-highlight) {
-  color: #00BFFF;
+  color: #5fb49c;
   text-decoration: underline;
 }
 
 a:visited:not(.nav-element):not(.active-nav-element):not(.slack-link):not(.metakgp-logo-link):not(.no-highlight) {
-  color: #FF00FF;
+  color: #e75a7c;
 }