Skip to content

Commit

Permalink
Improved home page of documentation.
Browse files Browse the repository at this point in the history
  • Loading branch information
@nthnn
nthnn committed Sep 20, 2023
1 parent 4fd0662 commit 2ff3f4b
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 52 deletions.
66 changes: 34 additions & 32 deletions docs/src/scripts/components/navigationbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,39 +12,41 @@ export default class NavigationBar extends React.Component<{
}, {}> {
render() {
return (
<nav className="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div className="container-fluid">
<a className="navbar-brand" href="#">
<CpuChipIcon className="icon-32"/>
Brillo-8
</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-bar" aria-controls="nav-bar" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse justify-content-end" id="nav-bar">
<ul className="navbar-nav">
<li className="nav-item">
<a href="#" className={(this.props.currentPage == "home" ? "active ": "") + "nav-link"} onClick={()=> this.props.currentPage !== "home" ? this.props.onPageout() : ()=> {}}>
<HomeModernIcon className="icon-24"/>
Home
</a>
</li>
<li className="nav-item">
<a href="#" className={(this.props.currentPage == "docs" ? "active ": "") + "nav-link"} onClick={()=> this.props.currentPage !== "docs" ? this.props.onPageout() : ()=> {}}>
<DocumentIcon className="icon-24"/>
Documentations
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://github.com/nthnn/Brillo-8" target="_blank">
<CodeBracketIcon className="icon-24"/>
GitHub
</a>
</li>
</ul>
<header className="header sticky-top">
<nav className="navbar navbar-expand-lg shadow-lg bg-dark" data-bs-theme="dark">
<div className="container-fluid">
<a className="navbar-brand" href="#">
<CpuChipIcon className="icon-32"/>
Brillo-8
</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-bar" aria-controls="nav-bar" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse justify-content-end" id="nav-bar">
<ul className="navbar-nav">
<li className="nav-item">
<a href="#" className={(this.props.currentPage == "home" ? "active ": "") + "nav-link"} onClick={()=> this.props.currentPage !== "home" ? this.props.onPageout() : ()=> {}}>
<HomeModernIcon className="icon-24"/>
Home
</a>
</li>
<li className="nav-item">
<a href="#" className={(this.props.currentPage == "docs" ? "active ": "") + "nav-link"} onClick={()=> this.props.currentPage !== "docs" ? this.props.onPageout() : ()=> {}}>
<DocumentIcon className="icon-24"/>
Documentations
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://github.com/nthnn/Brillo-8" target="_blank">
<CodeBracketIcon className="icon-24"/>
GitHub
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</nav>
</header>
);
}
}
120 changes: 100 additions & 20 deletions docs/src/scripts/pages/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,16 @@ import React from "react";
import NavigationBar from "../components/navigationbar";
import {
ArrowRightIcon,
ArrowDownIcon
ArrowDownIcon,
CodeBracketSquareIcon,
CursorArrowRaysIcon,
RectangleGroupIcon
} from "@heroicons/react/24/outline";

import Brillo8Top from "../../../../assets/brillo-8_v0.1_top.svg";
import Glass_Prism0006 from "../../assets/Glass_Prism0006.png";
import Glass_Prism0007 from "../../assets/Glass_Prism0007.png";
import Glass_Prism0097 from "../../assets/Glass_Prism0097.png";

export default class Home extends React.Component {
onPageout(): void {
Expand All @@ -14,37 +20,111 @@ export default class Home extends React.Component {
render() {
return (
<>
<div className="desktop-only"><br/><br/><br/></div>
<div className="row m-4">
<div className="col-lg-6 pt-5">
<div className="desktop-only"><br/></div>
<h1>Brillo-8: Programmable Pocket Computer</h1>
<p>A programmable pocket computer packed neatly on a small 80cm x 50mm circuit board. Small but powerful virtual machine, residing within the trusted ATMega328P microcontroller, offers a compelling platform for several compelling reasons.</p>
<button className="btn btn-outline-info rounded-0">
Learn More
<ArrowRightIcon className="icon-24 pl-2" />
</button>
<br/><br/>
</div>
<div className="desktop-only"><br/></div>
<br/>

<div className="m-4">
<div className="row">
<div className="col-lg-6">
<div className="desktop-only">
<br/><br/><br/><br/>
</div>

<div className="container">
<h1>Brillo-8: Programmable Pocket Computer</h1>
<p>A programmable pocket computer packed neatly on a small 80cm x 50mm circuit board. Small but powerful virtual machine, residing within the trusted ATMega328P microcontroller, offers a compelling platform for several compelling reasons.</p>
<button className="btn btn-outline-info rounded-0">
Learn More
<ArrowRightIcon className="icon-24 pl-2" />
</button>
</div>

<div className="col-lg-6">
<img src={Brillo8Top} className="w-100 h-100 brillo-8" />
<br className="desktop-only" /><br/>
</div>

<div className="col-lg-6">
<div className="d-flex">
<img src={Brillo8Top} className="w-100 h-100 brillo-8" />
<img src={Glass_Prism0006} className="glass-01" />
<img src={Glass_Prism0007} className="glass-02" />
</div>
</div>
</div>
</div>

<div className="desktop-only">
<br/><br/><br/>

<center>
<ArrowDownIcon className="icon-32" />
</center>

<center><ArrowDownIcon className="icon-32" /></center>
</div>

<div className="desktop-only"><br/></div>
<br/>

<NavigationBar currentPage="home" onPageout={this.onPageout} />

<br/><br/><br/><br/><br/>
<div className="container">
<center>
<h1>What is Brillo-8?</h1>
<p>Brillo-8 is a compact and versatile pocket programmable computer powered by an ATMega328P microcontroller. This innovative device allows you to create and execute custom instructions using a simple hardware interface. With Brillo-8, you can engage in a wide range of programming and learning activities on a small but powerful platform.</p>
<img src={Glass_Prism0097} className="glass-03" />
</center>
</div>
<br/><br/><br/><br/><br/><br/>

<div className="container">
<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" />

<center>
<br/>

<h3>Compact PCB Design</h3>
<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>
</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" />

<center>
<br/>

<h3>User-Friendly Interface</h3>
<p>Intuitive switches and button for pushing instructions, flashing firmware, and resetting the device.</p>

<br/>
</center>
</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" />

<center>
<br/>

<h3>Open-Source Firmware</h3>
<p>Update and upgrade the Brillo-8's embedded system to modify or enhance and suit your needs.</p>

<br/>
</center>
</div>
</div>
</div>
</div>

<div className="desktop-only">
<br/><br/><br/><br/>
</div>
<br/><br/>
</>
);
}
Expand Down

0 comments on commit 2ff3f4b

Please sign in to comment.