Merge pull request #189 from Bitshala/about

About Page

src/components/common/AboutUs.astro

@@ -0,0 +1,42 @@
+<div class="lg:p-8">
+  <h1
+    class="mb-8 mt-28 text-center font-header text-3xl font-bold md:text-6xl lg:text-8xl"
+    id="about_us"
+  >
+    About
+  </h1>
+
+  <p class="m-4 text-base md:text-lg lg:text-2xl">
+    Bitshala is a <span class="font-bold text-orange"
+      >grass-root education initiative</span
+    > led by Indian Bitcoiners, focused on strengthening the
+    Bitcoin ecosystem by <span class="font-bold text-orange"
+      >nurturing and supporting Bitcoin FOSS (Free and Open
+      Source Software) Devs.</span
+    > Our mission is to equip people with the skills and
+    knowledge needed to contribute to Bitcoin FOSS projects.
+  </p>
+  <p class="m-4 my-8 text-base md:text-lg lg:text-2xl">
+    While a lot of Blockchain courses exist out there to
+    provide surface-level API lessons on EVM like "smart
+    contracts", the technical knowledge requirements for
+    Bitcoin Development are much wider and nuanced. Bitcoin
+    is a multidisciplinary subject covering Software
+    Engineering, System Engineering, Networking Protocol
+    Design, Game Theory, Cryptography, Economics, and Social
+    Dynamics of Complex Systems like the Market. Thus,
+    creating a comprehensive bitcoin course is probably
+    impossible in its entirety, and nothing in the existing
+    academia and programming boot camps satisfies such
+    requirements. New people trying to enter into Bitcoin
+    development thus have to scour through a big set of
+    parallel subject domains, not well organized and spread
+    across the internet.
+  </p>
+  <p class="m-4 text-base md:text-lg lg:text-2xl">
+    Thus Bitshala aims to provide the ground for ideating,
+    producing, and publishing different categories of
+    content in Open Source to satisfy the varied learning
+    need of an aspiring Bitcoin Developer.
+  </p>
+</div>

src/components/common/list.js

@@ -22,26 +22,36 @@ export const ta = [
   //   github: "https://github.com/stratospher",
   // },
   {
-    name: "Emjshrx",
-    desc: "Joined Bitshala to run Bitcoin Core on his Dive Computer. Didn’t work, but he’ll keep trying.",
-    image: "emil",
-    bgColor: "bg-orange",
-    textColor: "text-black",
-    headingColor: "text-black",
-    twitter: "https://twitter.com/emjshrx",
-    github: "https://github.com/emjshrx",
+    name: "Sovrav",
+    desc: "PM juggling Bitcoin FOSS projects and ventures like a circus performer.",
+    image: "sourav",
+    bgColor: "bg-black",
+    textColor: "text-white",
+    headingColor: "text-orange",
+    twitter: "https://twitter.com/SetuSaurabh",
+    github: "https://github.com/setusaurabh",
   },
 
   {
     name: "Anmol Sharma",
     desc: "When he is not talking about Bitcoin,he is busy writing code. But let's be honest, he is usually busy talking about Bitcoin.",
     image: "anmol",
-    bgColor: "bg-black",
-    textColor: "text-white",
-    headingColor: "text-orange",
+    bgColor: "bg-orange",
+    textColor: "text-black",
+    headingColor: "text-black",
     twitter: "https://twitter.com/theanmolsharma_",
     github: "https://github.com/theanmolsharma",
   },
+  {
+    name: "Emjshrx",
+    desc: "Joined Bitshala to run Bitcoin Core on his Dive Computer. Didn’t work, but he’ll keep trying.",
+    image: "emil",
+    bgColor: "bg-orange",
+    textColor: "text-black",
+    headingColor: "text-black",
+    twitter: "https://twitter.com/emjshrx",
+    github: "https://github.com/emjshrx",
+  },
 ];
 
 export const ta2 = [
@@ -124,14 +134,13 @@ export const ta2 = [
 
 export const dev = [
   {
-    name: "Paperpsych",
-    desc: "A design ninja with a lot of good questions. Too many actually. So we hired him instead of answering.",
-    image: "paperpsych",
-    bgColor: "bg-orange",
-    textColor: "text-black",
-    headingColor: "text-black",
-    twitter: "https://twitter.com/_paperpsych",
-    github: "https://github.com/paperpsych",
+    name: "Faisal",
+    desc: "Joined as a learner, now leading like a pro... while making sure that the club activities are fun and running like a well-oiled machine.",
+    image: "Faisal",
+    bgColor: "bg-black",
+    textColor: "text-white",
+    headingColor: "text-orange",
+    twitter: "https://x.com/faisal_qrs",
   },
   {
     name: "Keraliss",
@@ -144,14 +153,14 @@ export const dev = [
     github: "https://github.com/keraliss",
   },
   {
-    name: "Sovrav",
-    desc: "PM juggling Bitcoin FOSS projects and ventures like a circus performer.",
-    image: "sourav",
+    name: "Paperpsych",
+    desc: "If he’s not designing, he’s writing copy or tweeting, if he’s not doing that, he’s planning events. If not that... he’s watching Mad Men!",
+    image: "paperpsych",
     bgColor: "bg-orange",
     textColor: "text-black",
     headingColor: "text-black",
-    twitter: "https://twitter.com/SetuSaurabh",
-    github: "https://github.com/setusaurabh",
+    twitter: "https://twitter.com/_paperpsych",
+    github: "https://github.com/paperpsych",
   },
 ];
 
@@ -160,9 +169,9 @@ export const advisors = [
     name: "Adam Jonas",
     desc: "An invisible force in Bitcoin. Nobody knows what he does. So we’ve stopped asking.",
     image: "adam",
-    bgColor: "bg-orange",
-    textColor: "text-black",
-    headingColor: "text-black",
+    bgColor: "bg-black",
+    textColor: "text-white",
+    headingColor: "text-orange",
     twitter: "https://twitter.com/adamcjonas",
   },
   {

src/components/home/People.astro

@@ -3,28 +3,28 @@ import { ta, dev, advisors } from "../common/list.js";
 ---
 
 <div
-  class="my-8 text-center text-3xl font-bold md:text-6xl lg:text-9xl"
+  class="my-24 mb-24 text-center font-header text-3xl font-bold md:text-6xl lg:text-8xl"
   id="our_people"
 >
-  Our People
+  Our Team
 </div>
-<div class="my-5 text-left text-3xl">Team</div>
+
 <div
   class="mt-2 grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-x-12 lg:gap-y-6"
 >
   {
     ta.map((member) => (
       <div
-        class={`flex w-full items-center rounded-xl ${member.bgColor} ${member.textColor}}`}
+        class={`flex w-full items-center rounded-3xl ${member.bgColor} ${member.textColor}}`}
       >
         <img
           src={`/people/${member.image}.png`}
-          class="h-28 items-center p-3 lg:h-40"
+          class="h-28 items-center rounded-3xl p-2 pl-2 lg:h-40 lg:p-5"
         />
         <div class="flex w-full flex-col">
-          <div class="flex w-full justify-between px-5 py-3">
+          <div class="flex w-full justify-between px-1 py-3">
             <p
-              class={`font-header text-xl font-bold ${member.headingColor} lg:text-5xl`}
+              class={`font-header text-xl font-bold ${member.headingColor} lg:text-4xl`}
             >
               {member.name}
             </p>
@@ -36,7 +36,7 @@ import { ta, dev, advisors } from "../common/list.js";
               >
                 <img
                   src="/people/github.png"
-                  class="m-1 h-6 rounded bg-peach group-hover:bg-white lg:h-10"
+                  class="m-1 h-6 rounded-lg bg-peach group-hover:bg-white lg:h-7"
                 />
               </a>
               <a
@@ -46,13 +46,13 @@ import { ta, dev, advisors } from "../common/list.js";
               >
                 <img
                   src="/people/twitter.png"
-                  class="m-1 h-6 rounded bg-peach group-hover:bg-white lg:h-10"
+                  class="m-1 mr-3 h-6 rounded-lg bg-peach group-hover:bg-white lg:h-7"
                 />
               </a>
             </div>
           </div>
           <p
-            class={`lg:p3 px-1 ${member.textColor} text-sm lg:text-xl`}
+            class={`lg:p3 px-1 ${member.textColor} min-h-[90px] pr-3 text-sm lg:pr-8 lg:text-xl`}
           >
             {member.desc}
           </p>
@@ -63,16 +63,16 @@ import { ta, dev, advisors } from "../common/list.js";
   {
     dev.map((member) => (
       <div
-        class={`flex w-full items-center rounded-xl ${member.bgColor} ${member.textColor}}`}
+        class={`flex w-full items-center rounded-3xl ${member.bgColor} ${member.textColor}}`}
       >
         <img
           src={`/people/${member.image}.png`}
-          class="h-28 items-center p-3 lg:h-40"
+          class="h-28 items-center rounded-3xl p-2 pl-2 lg:h-40 lg:p-5"
         />
         <div class="flex w-full flex-col">
-          <div class="flex w-full justify-between px-5 py-3">
+          <div class="flex w-full justify-between px-1 py-3">
             <p
-              class={`font-header text-xl font-extrabold ${member.headingColor} lg:text-5xl`}
+              class={`font-header text-xl font-extrabold ${member.headingColor} lg:text-4xl`}
             >
               {member.name}
             </p>
@@ -84,7 +84,7 @@ import { ta, dev, advisors } from "../common/list.js";
               >
                 <img
                   src="/people/github.png"
-                  class="m-1 h-6 rounded bg-peach group-hover:bg-white lg:h-10"
+                  class="m-1 h-6 rounded-lg bg-peach group-hover:bg-white lg:h-7"
                 />
               </a>
               <a
@@ -94,13 +94,13 @@ import { ta, dev, advisors } from "../common/list.js";
               >
                 <img
                   src="/people/twitter.png"
-                  class="m-1 h-6 rounded bg-peach group-hover:bg-white lg:h-10"
+                  class="m-1 mr-3 h-6 rounded-lg bg-peach group-hover:bg-white lg:h-7"
                 />
               </a>
             </div>
           </div>
           <p
-            class={`lg:p3 px-1 ${member.textColor} text-sm lg:text-xl`}
+            class={`lg:p3 px-1 ${member.textColor} min-h-[90px] pb-3 pr-3 text-sm lg:pr-8 lg:text-xl`}
           >
             {member.desc}
           </p>
@@ -110,23 +110,27 @@ import { ta, dev, advisors } from "../common/list.js";
   }
 </div>
 
-<div class="my-5 text-left text-3xl">Advisors</div>
 <div
-  class="mt-2 grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-x-12 lg:gap-y-6"
+  class="my-24 text-center font-header text-2xl lg:text-5xl"
+>
+  Our Advisors
+</div>
+<div
+  class="mb-5 grid grid-cols-1 gap-2 lg:mb-24 lg:grid-cols-2 lg:gap-x-12 lg:gap-y-6"
 >
   {
     advisors.map((member) => (
       <div
-        class={`flex w-full items-center rounded-xl ${member.bgColor} ${member.textColor}}`}
+        class={`flex w-full items-center rounded-3xl lg:pr-5  ${member.bgColor} ${member.textColor}}`}
       >
         <img
           src={`/people/${member.image}.png`}
-          class="h-28 items-center p-3 lg:h-40"
+          class="h-28 items-center rounded-3xl p-2 pl-2 lg:h-40 lg:p-5"
         />
         <div class="flex w-full flex-col">
-          <div class="flex w-full justify-between px-5 py-3">
+          <div class="flex w-full justify-between px-1 py-3">
             <p
-              class={`font-header text-xl font-extrabold ${member.headingColor} lg:text-5xl`}
+              class={`font-header text-xl font-extrabold ${member.headingColor} lg:text-4xl`}
             >
               {member.name}
             </p>
@@ -138,13 +142,13 @@ import { ta, dev, advisors } from "../common/list.js";
               >
                 <img
                   src="/people/twitter.png"
-                  class="m-1 h-8 rounded bg-peach group-hover:bg-white lg:h-10 "
+                  class="m-1 mr-3 h-6 rounded-lg bg-peach group-hover:bg-white lg:h-7 "
                 />
               </a>
             </div>
           </div>
           <p
-            class={`lg:p3 px-1 py-1 ${member.textColor} text-sm lg:text-xl`}
+            class={`lg:p3 px-1 ${member.textColor} min-h-[90px] pr-3 text-sm lg:pr-8 lg:text-xl`}
           >
             {member.desc}
           </p>

src/layouts/Layout.astro

@@ -122,7 +122,9 @@ const { title, headerProps, isVisible } = Astro.props;
       )
     }
 
-    <div class="m-auto max-w-screen-xl p-4 lg:p-0">
+    <div
+      class="m-auto max-w-screen-xl p-4 text-justify lg:p-0"
+    >
       <div class="isolate z-0"><slot /></div>
     </div>
     <Footer />

src/pages/about.astro

@@ -0,0 +1,19 @@
+---
+import AboutUs from "../components/common/AboutUs.astro";
+import People from "../components/home/People.astro";
+import Layout from "../layouts/Layout.astro";
+
+const isVisible = true;
+const headerProps = {
+  removeHeader: true,
+};
+---
+
+<Layout
+  title="About Us"
+  headerProps={headerProps}
+  isVisible={isVisible}
+>
+  <AboutUs />
+  <People />
+</Layout>