TechStacks on homepage.

docs/package.json

@@ -35,7 +35,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.1",
-    "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2",
     "vercel": "^32.2.5"
   }

docs/src/scripts/components/stackicon.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export default class StackIcon extends React.Component<{
+    logo: string,
+    url: string
+}, {}> {
+    render() {
+        return (
+            <a href={this.props.url} target="_blank">
+                <img className="tech-stack" src={this.props.logo} />
+            </a>
+        );
+    }
+}

docs/src/scripts/pages/home.tsx

@@ -8,10 +8,23 @@ import {
     RectangleGroupIcon
 } from "@heroicons/react/24/outline";
 
+import ArduinoLogo from "../../assets/arduino-logo.png";
+import BootstrapLogo from "../../assets/bootstrap-logo.svg";
+import BootswatchLogo from "../../assets/bootswatch-logo.svg";
 import Brillo8Top from "../../../../assets/brillo-8_v0.1_top.svg";
+import EasyEDALogo from "../../assets/easyeda-logo.png";
 import Glass_Prism0006 from "../../assets/Glass_Prism0006.png";
 import Glass_Prism0007 from "../../assets/Glass_Prism0007.png";
 import Glass_Prism0097 from "../../assets/Glass_Prism0097.png";
+import NodeJSLogo from "../../assets/nodejs-logo.png";
+import NPMLogo from "../../assets/npm-logo.png";
+import ParcelLogo from "../../assets/parcel-logo.png";
+import PlatformIOLogo from "../../assets/platformio-labs-logo.png";
+import ReactLogo from "../../assets/react-logo.png";
+import TypeScriptLogo from "../../assets/typescript-logo.png";
+import VercelLogo from "../../assets/vercel-logo.png";
+import VSCodeLogo from "../../assets/vscode-logo.png";
+import StackIcon from "../components/stackicon";
 
 export default class Home extends React.Component {
     onPageout(): void {
@@ -95,53 +108,83 @@ export default class Home extends React.Component {
                     <div className="row">
                         <div className="col-lg-4">
                             <div className="card card-body border-light bg-transparent rounded-0">
-                                <RectangleGroupIcon className="icon-48 justify-self-center align-self-center" />
+                                <RectangleGroupIcon className="icon-48 justify-self-center align-self-center desktop-only" />
 
                                 <center>
-                                    <br/>
+                                    <div className="mobile-only">
+                                        <br/>
+                                        <RectangleGroupIcon className="icon-mob-48" />
+                                    </div>
 
+                                    <br/>
                                     <h3>Compact PCB Design</h3>
+                                    <br/>
                                     <p>Brillo-8 is housed on a 80cm x 50mm PCB, making it highly portable and easy to carry in your pocket.</p>
 
                                     <br/>
                                 </center>
+
+                                <a href="#" className="btn btn-outline-info rounded-0 learn-more">
+                                    See PCB Files
+                                    <ArrowRightIcon className="icon-24 pl-2" />
+                                </a>
                             </div>
                         </div>
 
                         <div className="col-lg-4">
                             <div className="card card-body border-light bg-transparent rounded-0">
-                                <CursorArrowRaysIcon className="icon-48 justify-self-center align-self-center" />
+                                <CursorArrowRaysIcon className="icon-48 justify-self-center align-self-center desktop-only" />
 
                                 <center>
-                                    <br/>
+                                    <div className="mobile-only">
+                                        <br/>
+                                        <CursorArrowRaysIcon className="icon-mob-48" />
+                                    </div>
 
+                                    <br/>
                                     <h3>User-Friendly Interface</h3>
+                                    <br/>
                                     <p>Intuitive switches and button for pushing instructions, flashing firmware, and resetting the device.</p>
 
                                     <br/>
                                 </center>
+
+                                <a href="#" className="btn btn-outline-info rounded-0 learn-more">
+                                    Hardware Interface
+                                    <ArrowRightIcon className="icon-24 pl-2" />
+                                </a>
                             </div>
                         </div>
 
                         <div className="col-lg-4">
                             <div className="card card-body border-light bg-transparent rounded-0">
-                                <CodeBracketSquareIcon className="icon-48 justify-self-center align-self-center" />
+                                <CodeBracketSquareIcon className="icon-48 justify-self-center align-self-center desktop-only" />
 
                                 <center>
-                                    <br/>
+                                    <div className="mobile-only">
+                                        <br/>
+                                        <CodeBracketSquareIcon className="icon-mob-48" />
+                                    </div>
 
+                                    <br/>
                                     <h3>Open-Source Firmware</h3>
+                                    <br/>
                                     <p>Update and upgrade the Brillo-8's embedded system to modify or enhance and suit your needs.</p>
 
                                     <br/>
                                 </center>
+
+                                <a href="https://github.com/nthnn/Brillo-8" className="btn btn-outline-info rounded-0 learn-more">
+                                    GitHub Repository
+                                    <ArrowRightIcon className="icon-24 pl-2" />
+                                </a>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <div className="desktop-only">
-                    <br/><br/><br/><br/>
+                    <br/><br/><br/>
                 </div>
                 <br/><br/>
 
@@ -195,6 +238,39 @@ export default class Home extends React.Component {
                     <div className="desktop-only"><br/><br/></div>
                     <br/>
                 </div>
+
+                <div className="container">
+                    <div className="desktop-only">
+                        <br/><br/><br/>
+                    </div>
+                    <br/><br/>
+
+                    <center>
+                        <h1>Techstack</h1>
+                        <p>Special thanks to all the technologies, frameworks, softwares, languages, and libraries below.<br/>Brillo-8 would be impossible without you.</p>
+                        <br/><br className="desktop-only" />
+
+                        <StackIcon logo={VSCodeLogo} url="https://code.visualstudio.com/" />
+                        <StackIcon logo={ArduinoLogo} url="https://www.arduino.cc/" />
+                        <StackIcon logo={PlatformIOLogo} url="https://platformio.org/" />
+                        <StackIcon logo={EasyEDALogo} url="https://easyeda.com/" />
+                        <StackIcon logo={VercelLogo} url="https://vercel.com/" />
+                        <StackIcon logo={NodeJSLogo} url="https://nodejs.org/" />
+                        <br/>
+
+                        <StackIcon logo={NPMLogo} url="https://www.npmjs.com/" />
+                        <StackIcon logo={TypeScriptLogo} url="https://www.typescriptlang.org/" />
+                        <StackIcon logo={BootstrapLogo} url="https://getbootstrap.com/" />
+                        <StackIcon logo={BootswatchLogo} url="https://bootswatch.com/" />
+                        <StackIcon logo={ReactLogo} url="https://react.dev/" />
+                        <StackIcon logo={ParcelLogo} url="https://github.com/parcel-bundler/parcel" />
+                    </center>
+
+                    <div className="desktop-only">
+                        <br/><br/><br/><br/>
+                    </div>
+                    <br/>
+                </div>
             </>
         );
     }

docs/src/styles/index.css

@@ -21,6 +21,10 @@
     display: block;
 }
 
+.mobile-only {
+    display: none;
+}
+
 .icon-32, .icon-24 {
     margin-top: -4px;
     padding-right: 4px;
@@ -37,6 +41,11 @@
     height: 24px;
 }
 
+.icon-mob-48 {
+    width: 48px;
+    height: 48px;
+}
+
 .icon-48 {
     margin-top: -48px;
     margin-bottom: 10px;
@@ -76,11 +85,23 @@
     width: 25%;
 }
 
+.tech-stack {
+    width: 80px;
+    height: 80px;
+    object-fit: contain;
+    filter: grayscale(100%);
+    margin: 8px;
+}
+
 @media only screen and (max-width: 600px) {
     .desktop-only, .glass-01, .glass-02 {
         display: none;
     }
 
+    .mobile-only {
+        display: block;
+    }
+
     .brillo-8 {
         width: 100%;
         margin-top: 0px;