Merge pull request #31 from metakgp/vector-logo

Author: dipamsen

index.html

@@ -5,7 +5,8 @@
     <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 href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap" rel="stylesheet">
     <link rel="icon" type="image/webp" href="/favicon.webp">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

public/one-line.svg

@@ -3,30 +3,35 @@
     "screenshot_img": "projects/gyft.webp",
     "usage": "Using GYFT you can get your KGP time table directly in your calendar app such as Google Calendar or your calendar app. Either login with your ERP credentials or upload a screenshot of your timetable.",
     "name": "gyft",
+    "display_name": "GYFT",
     "homepage": "https://gyft.metakgp.org"
   },
   {
     "screenshot_img": "projects/travel.webp",
     "usage": "Finding travel companions for going home during the vacations? Travel Buddy helps you do exactly that! Enter your trip details to find others on the same journey!",
     "name": "travel-buddy",
+    "display_name": "Travel Buddy",
     "homepage": "https://travel.metakgp.org"
   },
   {
     "screenshot_img": "projects/naarad.webp",
     "usage": "Our Naarad serves news (notices) to the KGP community. It is a self-hosted ntfy.sh instance with custom configuration. It is protected by heimdall, allowing access only to KGPians.",
     "name": "naarad",
+    "display_name": "Naarad",
     "homepage": "https://naarad.metakgp.org"
   },
   {
     "screenshot_img": "projects/wiki.webp",
-    "usage": "The metakgp wiki is an open repository of community knowledge about IIT Kharagpur that anyone can edit. This is your first stop for information about KGP",
+    "usage": "The metaKGP Wiki is an open repository of community knowledge about IIT Kharagpur that anyone can edit. This is your first stop for information about KGP.",
     "name": "metakgp-wiki",
+    "display_name": "metaKGP Wiki",
     "homepage": "https://wiki.metakgp.org"
   },
   {
     "screenshot_img": "projects/iqps.webp",
-    "usage": "IQPS is a platform for searching and uploading previous year question papers for IIT Kharagpur students. Search for previous year papers here. Upload your question papers to help future batches",
+    "usage": "IQPS is a platform for searching and uploading previous year question papers for IIT Kharagpur students. Search for previous year papers here. Upload your question papers to help future batches.",
     "name": "iqps-go",
+    "display_name": "IQPS",
     "homepage": "https://qp.metakgp.org"
   }
 ]

src/data/featured_data.json

@@ -12,6 +12,7 @@ interface featured_json {
   screenshot_img: string;
   usage: string;
   name: string;
+  display_name: string;
 }
 
 const FeaturedSection = () => {
@@ -20,6 +21,7 @@ const FeaturedSection = () => {
   const featuredReposList: featured_json[] = FeaturedData as featured_json[];
   const featuredRepos: FEATURED_REPO[] = featuredReposList.map((featured_repo) => {
     return {
+      display_name: featured_repo.display_name,
       screenshot_img: featured_repo.screenshot_img,
       usage: featured_repo.usage,
       repo: Repos.find(repo => repo.name == featured_repo.name)!
@@ -51,7 +53,7 @@ const FeaturedSection = () => {
               </Link>
               <div className='featured-desc-container'>
                 <a href={`https://github.com/metakgp/${featuredRepo.repo.name}`} className="no-highlight featured-repo-title">
-                  <h2 className='section-header-left'>{featuredRepo.repo.name}</h2>
+                  <h2 className='section-header-left'>{featuredRepo.display_name}</h2>
                 </a>
                 <p className='description'>{featuredRepo.usage}</p>
                 <a href={featuredRepo.repo.homepage} className='featured-button no-highlight'>

src/sections/FeaturedDisplay.tsx

@@ -15,7 +15,7 @@ export const FooterSection = () => {
         <div className="icon-col footer-col">
           Made with ❤️ and
           &lt;/&gt;
-          by metaKGP
+          by <span className="bold">metaKGP</span>
           <div className="social-icons ">
             <a href="https://www.facebook.com/metakgp/">
               <i className="fa-brands fa-facebook"></i>

src/sections/Footer.tsx

@@ -14,8 +14,8 @@ export const HeaderSection = () => {
 
   return (
     <div className="header">
-      <Link to={"https://wiki.metakgp.org"} className="metakgp-logo-link">
-        <h1 className='metakgp-logo' data-set="metaKGP" ><span className='bold'>meta</span><span className='black'>KGP</span></h1>
+      <Link to={"/"} className="metakgp-logo-link">
+        <img src="one-line.svg" alt="metaKGP Logo" className="metakgp-logo" />
       </Link>
       <nav className="nav-bar">
         {pages.map((page) => (

src/sections/Header.tsx

@@ -30,6 +30,7 @@ export const HeroSection = () => {
           </div>
         </div>
         <div className="hero-image-container">
+          <img src="one-line.svg" alt="metaKGP Logo" className="hero-logo"/>
           <img className="hero-image" src={devFocus} alt="hero-image"/>
         </div>
       </div>

src/sections/Hero.tsx

@@ -46,7 +46,6 @@
 }
 
 .featured-desc-container h2 {
-  text-transform: uppercase;
   padding: 0;
   margin: 0;
 }

src/styles/components/FeaturedDisplay.css

@@ -50,7 +50,7 @@
 .card-description {
   font-size: 1rem;
   color: #f0f0f0;
-  font-family: "Space Mono", monospace;
+  font-family: var(--mono-primary);
   font-weight: 400;
   font-style: normal;
 }

src/styles/components/StatsCard.css

@@ -1,3 +1,7 @@
+:root {
+  --mono-primary: 'Inconsolata', monospace;
+}
+
 html,
 body,
 #root {
@@ -32,7 +36,7 @@ body,
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: "Source Code Pro", Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }