Skip to content

Commit

Permalink
More fixes and 'Why Brillo-8?' section on home page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@nthnn
nthnn committed Sep 20, 2023
1 parent 2ff3f4b commit 408f595
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 16 deletions.
98 changes: 84 additions & 14 deletions docs/src/scripts/pages/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,25 @@ export default class Home extends React.Component {
<div className="row">
<div className="col-lg-6">
<div className="desktop-only">
<br/><br/><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 className="row">
<div className="col-md-2"></div>

<div className="col-md-9">
<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>

<a className="btn btn-outline-info rounded-0 learn-more" href="#main-section">
Learn More
<ArrowRightIcon className="icon-24 pl-2" />
</a>
</div>
</div>

<div className="col-md-1"></div>
</div>

<br className="desktop-only" /><br/>
Expand All @@ -62,13 +71,23 @@ export default class Home extends React.Component {

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

<br/><br/><br/><br/><br/>
<br id="main-section" /><br/><br/><br/><br/>
<div className="desktop-only"><br/></div>

<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 className="row">
<div className="col-sm-2"></div>

<div className="col-sm-8">
<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>

<div className="col-sm-2"></div>
</div>
</div>
<br/><br/><br/><br/><br/><br/>

Expand Down Expand Up @@ -125,6 +144,57 @@ export default class Home extends React.Component {
<br/><br/><br/><br/>
</div>
<br/><br/>

<div className="bg-light text-dark">
<div className="container">
<br className="desktop-only" />
<br/><br/>

<h1>Why Brillo-8?</h1>
<br/>

<div className="row">
<div className="col-lg-1" align="center">
<h1>1</h1>
</div>

<div className="col-lg-11">
<div className="container">
<p>Brillo-8 stands as an excellent educational resource, making it easy for individuals of all skill levels to grasp the inner workings of microcontrollers, EEPROMs (memory chips), and virtual machines. With its user-friendly interface, featuring DIP switches and straightforward buttons, Brillo-8 is accessible even for beginners. It provides an opportunity to explore fundamental programming concepts, memory management, and hardware integration in a compact and hands-on manner.</p>
</div>
</div>
</div>
<br/>

<div className="row">
<div className="col-lg-1" align="center">
<h1>2</h1>
</div>

<div className="col-lg-11">
<div className="container">
<p>For those eager to get hands-on experience with electronics, Brillo-8 offers a practical playground. Assembling the hardware components, including the PCB (circuit board) and various switches, provides a deeper understanding of electronic design and soldering techniques. This tangible aspect of Brillo-8 enriches the learning process and hones valuable skills for electronics enthusiasts.</p>
</div>
</div>
</div>
<br/>

<div className="row">
<div className="col-lg-1" align="center">
<h1>3</h1>
</div>

<div className="col-lg-11">
<div className="container">
<p>Brillo-8 is an excellent platform for rapid prototyping and experimentation. It serves as a perfect testing ground for developing and testing new algorithms, code snippets, or entire programs. By using Brillo-8, you can quickly try out different ideas, observe their effects, and refine your solutions before implementing them in more extensive projects.</p>
</div>
</div>
</div>
</div>

<br className="desktop-only" />
<br/><br/>
</div>
</>
);
}
Expand Down
10 changes: 8 additions & 2 deletions docs/src/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,9 @@
}

.brillo-8 {
margin-left: -8%;
margin-left: -2%;
margin-top: 6%;
transform: rotate(-7deg);
}

.glass-01 {
Expand All @@ -66,7 +67,7 @@

.glass-02 {
z-index: -1;
left: 40%;
left: 46%;
bottom: 6%;
width: 18%;
}
Expand All @@ -84,9 +85,14 @@
width: 100%;
margin-top: 0px;
margin-left: 0px;
transform: none;
}

.glass-03 {
width: 40%;
}

.learn-more {
width: 100%;
}
}

0 comments on commit 408f595

Please sign in to comment.