Add MyKanji page

src/App.js

@@ -11,6 +11,7 @@ import Home from './Pages/Home';
 import Software from './Pages/Software/Software';
 import DXPDevelopment from './Pages/Software/Projects/DXPDevelopment';
 import ConfigAutomation from './Pages/Software/Projects/ConfigAutomation';
+import KanjiApplication from './Pages/Software/Projects/KanjiApplication';
 import SwivForPi from './Pages/Software/Projects/SwivForPi';
 import WifiPrototype from './Pages/Software/Projects/WifiPrototype';
 
@@ -36,6 +37,7 @@ function App() {
             <Route exact path='/pages/software/configuration-automation' element={<ConfigAutomation />}></Route>
             <Route exact path='/pages/software/wifi-prototype' element={<WifiPrototype />}></Route>
             <Route exact path='/pages/software/embedded-game' element={<SwivForPi />}></Route>
+            <Route exact path='/pages/software/kanji-application' element={<KanjiApplication />}></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/KanjiApplication.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+const KanjiApplication = () => {
+    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-settings">settings</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">Kanji flashcard Android application</h1>
+                    <h4 className="text-secondary">Personalized Japanese learning</h4>
+                    <p>In my free time I like to learn Japanese. I am married with someone from Japan, so being able talk with her parents in their own language is nice! You also pick up much of the culture through learning the language.</p>
+                    <p>I wanted a personalized way to learn <a href="https://en.wikipedia.org/wiki/Kanji" target="_blank" rel="noopener noreferrer">Kanji</a>. I keep track of the words I want to learn in a small <a href="https://sqlite.org/" target="_blank" rel="noopener noreferrer">SQLite</a> database. If I come across a Japanese word, I can enter it in the database myself, because many language learning applications give you a preset of words, usually of the <a href="https://en.wikipedia.org/wiki/J%C5%8Dy%C5%8D_kanji" target="_blank" rel="noopener noreferrer">joyo Kanji</a>. The database can also be exported and imported to a file from the application.</p>
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/mykanji/logo-w240.webp`} />
+                        <source media="(min-width: 800px)" srcset={`${process.env.PUBLIC_URL}/images/projects/mykanji/logo.webp`} />                        
+                        <img alt="MyKanji application logo" src={`${process.env.PUBLIC_URL}/images/projects/mykanji/logo.webp`}/>
+                    </picture>
+
+                    <h4 className="text-secondary">Tools</h4>
+                    <p><a href="https://www.java.com" target="_blank" rel="noopener noreferrer">Java</a> and <a href="https://en.wikipedia.org/wiki/Android_Studio" target="_blank" rel="noopener noreferrer">Android studio</a> were used to create this application.</p>
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/mykanji/screenshot-1-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/mykanji/screenshot-1-w480.webp`} />
+                        <source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/mykanji/screenshot-1.webp`} />
+                        <img alt="Breadboard with components top view" src={`${process.env.PUBLIC_URL}/images/projects/mykanji/screenshot-1.webp`}/>
+                    </picture>
+                </section>
+
+                <section id="list-settings" className="content-section">
+                    <h2 className="text-primary">Settings</h2>
+                    <p>By user input, the difficulty of a Kanji is determined. A Kanji that is often guessed wrong will increase in difficulty and can be asked more frequently. Questioning can be done based on time and certain aspects of the Kanji can be shown or hidden. Finally, a dark and light mode offers some more customizability, along with the sizes of the characters.</p>
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/mykanji/screenshot-2-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/mykanji/screenshot-2-w480.webp`} />
+                        <source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/mykanji/screenshot-2.webp`} />
+                        <img alt="Breadboard with components top view" src={`${process.env.PUBLIC_URL}/images/projects/mykanji/screenshot-2.webp`}/>
+                    </picture>
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/mykanji/screenshot-3-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/mykanji/screenshot-3-w480.webp`} />
+                        <source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/mykanji/screenshot-3.webp`} />
+                        <img alt="Breadboard with components top view" src={`${process.env.PUBLIC_URL}/images/projects/mykanji/screenshot-3.webp`}/>
+                    </picture>
+                </section>
+            </div>
+        </div>
+    )
+}
+
+export default KanjiApplication;

src/Pages/Software/Software.js

@@ -42,6 +42,7 @@ const Software = () => {
                         <li><Link reloadDocument to="/pages/software/configuration-automation">Configuration automation</Link></li>
                         <li><Link reloadDocument to="/pages/software/wifi-prototype">Wi-Fi prototype</Link></li>
                         <li><Link reloadDocument to="/pages/software/embedded-game">Embedded Game</Link></li>
+                        <li><Link reloadDocument to="/pages/software/kanji-application">Kanji flashcard Android application</Link></li>
                     </ul>
                 </section>