Add Embedded Internet Radio page

src/App.js

@@ -16,6 +16,8 @@ import SwivForPi from './Pages/Software/Projects/SwivForPi';
 import WifiPrototype from './Pages/Software/Projects/WifiPrototype';
 import RaspberryJukebox from './Pages/Software/Projects/RaspberryJukebox';
 import AttachmentModule from './Pages/Software/Projects/AttachmentModule';
+import TeslaMaze from './Pages/Software/Projects/TeslaMaze';
+import EmbeddedInternetRadio from './Pages/Software/Projects/EmbeddedInternetRadio';
 
 import Radio from './Pages/Radio/Radio';
 import Components from './Pages/Radio/Components';
@@ -23,7 +25,6 @@ import Balkon from './Pages/Radio/Balkon';
 
 import Linux from './Pages/Linux/Linux';
 import Footer from './UI/Footer';
-import TeslaMaze from './Pages/Software/Projects/TeslaMaze';
 
 
 
@@ -44,6 +45,7 @@ function App() {
             <Route exact path='/pages/software/kanji-application' element={<KanjiApplication />}></Route>
             <Route exact path='/pages/software/attachment-module' element={<AttachmentModule />}></Route>
             <Route exact path='/pages/software/teslamaze' element={<TeslaMaze />}></Route>
+            <Route exact path='/pages/software/embedded-internet-radio' element={<EmbeddedInternetRadio />}></Route>
             <Route exact path='/pages/radio' element={<Radio />}></Route>
             <Route exact path='/pages/radio/components' element={<Components />}></Route>
             <Route exact path='/pages/radio/balcony' element={<Balkon />}></Route>

src/Pages/Software/Projects/EmbeddedInternetRadio.js

@@ -0,0 +1,56 @@
+import React from 'react';
+
+const EmbeddedInternetRadio = () => {
+    return (
+        <div className='row'>
+            <div className="sidebar col-3 position-fixed">
+                <div id="list-example" className="list-group">
+                    <a className="list-group-item list-group-item-action list-group-item-primary" href="#list-intro">Intro</a>
+                    <a className="list-group-item list-group-item-action list-group-item-primary" href="#list-development">Development</a>
+                    <a className="list-group-item list-group-item-action list-group-item-primary" href="#list-design">Design</a>
+                </div>
+            </div>
+
+            <div className="scrollspy-example col-6 offset-3" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" tabIndex="0">
+                <section id="list-intro" className="content-section">
+                    <h1 className="text-primary">Embedded Internet Radio</h1>
+                    <h4 className="text-secondary">Working with C</h4>
+
+                    <p>This project gave me the opportunity to work with the SIR120 internet radio made by the company StreamIT. The radio involved connecting to exiting internet streams and interfacing with the <a href="https://en.wikipedia.org/wiki/Liquid-crystal_display" target="_blank" rel="noopener noreferrer">LCD</a> and buttons on the device. The code was written in <a href="https://en.wikipedia.org/wiki/C_(programming_language)" target="_blank" rel="noopener noreferrer">C</a>.</p>                    
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/front-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/front-w480.webp`} />
+                        <source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/front.webp`} />
+                        <img alt="Stream I T front of radio" src={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/front.webp`}/>
+                    </picture>
+                </section>
+
+                <section id="list-development" className="content-section">
+                    <h2 className="text-primary">Development</h2>
+                    <p>The radio had an existing operating system called <a href="https://en.wikipedia.org/wiki/Ethernut" target="_blank" rel="noopener noreferrer">Nut/OS</a>, an open source OS. Nut/OS provided the TCP/IP stack we required to connect the device to the internet. The radio was able to play a select number of internet streams. The user could read the stream channel on the LCD and use the buttons to navigate between them.</p>
+                    <p>This project often had code overhauls because our code kept moving towards a more <a href="https://en.wikipedia.org/wiki/Object-oriented_programming" target="_blank" rel="noopener noreferrer">OOP</a> approach using structs rather than large chunks of produral code.</p>
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/inside-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/inside-w480.webp`} />
+                        <source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/inside.webp`} />
+                        <img alt="Stream I T inside of the radio" src={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/inside.webp`}/>
+                    </picture>
+                </section>
+
+                <section id="list-design" className="content-section">
+                    <h2 className="text-primary">Design</h2>
+                    <p>A simple flowchart was created to show how the user could navigate through the menu.</p>
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/flowchart-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/flowchart-w480.webp`} />
+                        <source media="(min-width: 1200px) and (max-width: 1799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/flowchart-w800.webp`} />
+                        <source media="(min-width: 1800px)" srcset={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/flowchart.webp`} />
+                        <img alt="Program flow chart" src={`${process.env.PUBLIC_URL}/images/projects/embedded-internet-radio/flowchart.webp`}/>
+                    </picture>
+                </section>
+            </div>
+        </div>
+    )
+}
+
+export default EmbeddedInternetRadio;

src/Pages/Software/Software.js

@@ -46,6 +46,7 @@ const Software = () => {
                         <li><Link reloadDocument to="/pages/software/raspberry-pi-jukebox">Raspberry Pi Jukebox</Link></li>
                         <li><Link reloadDocument to="/pages/software/attachment-module">Attachment Module</Link></li>
                         <li><Link reloadDocument to="/pages/software/teslamaze">TeslaMaze</Link></li>
+                        <li><Link reloadDocument to="/pages/software/embedded-internet-radio">Embedded Internet Radio</Link></li>
                     </ul>
                 </section>