changeset 8:4c64fea046f7

Redesign index.html
author Dennis C. M. <dennis@denniscm.com>
date Wed, 26 Mar 2025 14:12:19 +0000
parents 68f4d00bd3b7
children 19367e726aee
files src/index.html src/style.css
diffstat 2 files changed, 163 insertions(+), 82 deletions(-) [+]
line wrap: on
line diff
--- a/src/index.html	Mon Mar 17 10:13:34 2025 +0000
+++ b/src/index.html	Wed Mar 26 14:12:19 2025 +0000
@@ -11,75 +11,112 @@
 <body>
     <main>
         <h1>Dennis C. M.</h1>
-        <h2>Programmer</h2>
-        <h3>Active projects:</h3>
-        <ul>
-            <li>I'm building <a href="https://github.com/dennis-micros" target="_blank">Dennis Micro Computers</a>, a
-                platform dedicated to teaching programming for STM32 microcontrollers.</li>
-            <li>I have a <a href="https://www.youtube.com/@denniscm6" target="_blank">Youtube channel</a> where I
-                share my programming journey along with my hobbies.</li>
-            <li>I stream on <a href="https://www.twitch.tv/denniscmartin" target="_blank">Twitch</a> from Monday to
-                Thursday at 14:00
-                GMT. I mostly share the development of Dennis Micro Computers and sometimes play some games.</a>
-            </li>
-        </ul>
-        <h3>Projects:</h3>
-        <ul>
-            <li><a href="https://github.com/denniscmcom/EVB-A32QS1-RFRG" target="_blank">EVB-A32QS1-RFRG: </a> A GNSS
-                receiver development board based on a STM32
-                MCU.</li>
-            <li><a href="https://github.com/denniscmcom/EVB-A32M1-F" target="_blank">EVB-A32M1-F: </a> A small STM32F0
-                development board with the same dimensions
-                as the Raspberry Pi Pico.</li>
-            <li><a href="https://github.com/denniscmcom/EVB-A32S1-M" target="_blank">EVB-A32S1-M:</a> A electronic speed
-                controller based on a STM32 MCU.</li>
-            <li><a href="https://github.com/denniscmcom/logic-led" target="_blank">Logic LED:</a> My first Arduino
-                project. A simple circuit to interact with
-                logic gates.</li>
-            <li><a href="https://github.com/denniscmcom/hey" target="_blank">Hey!:</a> Hey! is a simple TCP streaming
-                app developed in C using POSIX
-                APIs. Both client and server are containerized using Docker.</li>
-            <li><a href="https://github.com/denniscmcom/algo-animator" target="_blank">Algo Animator:</a> An interactive
-                program to visualize sorting algorithms.
-                Developed in C using OpenGL, GLUT, and FreeType.</li>
-            <li><a href="https://github.com/denniscmcom/maze-solver" target="_blank">Maze Solver:</a> A maze solver
-                written in C.</li>
-            <li><a href="https://github.com/denniscmcom/geoquiz" target="_blank">Geoquiz:</a> A geography game for iOS
-                written in SwiftUI.</li>
-            <li><a href="https://github.com/denniscmcom/bitcaviar-plus" target="_blank">Bitcaviar Plus:</a> A Bitcoin
-                blockchain parser written in Python.</li>
-            <li><a href="https://github.com/denniscmcom/finance-parser" target="_blank">Finance Parser:</a> Serverless
-                parser to extract information from financial
-                reports using AWS Step Functions, AWS S3, AWS Api Gateway, AWS Textract, AWS DynamoDB and Eventbridge.
-            </li>
-            <li><a href="https://github.com/denniscmcom/tweet-analysis" target="_blank">Tweet Analysis:</a> Serverless
-                app to fetch & analyse tweets using AWS
-                Comprehend.</li>
-            <li><a href="https://github.com/denniscmcom/simoleon" target="_blank">Simoleon:</a> A currency converter app
-                for iOS written in SwiftUI.</li>
-            <li><a href="https://github.com/denniscmcom/python-black-scholes" target="_blank">Python Black Scholes:</a>
-                A command line utility to calculate the
-                theoretical call and put price of an European option using the black-scholes method.</li>
-            <li><a href="https://github.com/denniscmcom/stock-charts" target="_blank">Stock Charts:</a> A library to
-                display interactive charts in SwiftUI.</li>
-            <li><a href="https://github.com/denniscmcom/lazybear" target="_blank">Lazybear:</a> My first iOS app and
-                programming project.</li>
-        </ul>
-        <h3>Hobbies:</h3>
-        <ul>
-            <li>Programming.</li>
-            <li>Photography.</li>
-            <li>Boxing.</li>
-        </ul>
-        <h3>Links:</h3>
-        <ul>
-            <li><a href="https://www.twitch.tv/denniscmartin" target="_blank">Twitch.</a></li>
-            <li><a href="https://www.youtube.com/@denniscm6" target="_blank">Youtube.</a></li>
-            <li><a href="https://www.instagram.com/denniscmartin/" target="_blank">Instagram.</a></li>
-            <li><a href="https://www.tiktok.com/@denniscmcom/" target="_blank">Tiktok.</a></li>
-            <li><a href="https://github.com/denniscmcom" target="_blank">Github.</a></li>
-            <li><a href="#" target="_blank">dennis [at] denniscm [dot] com</a></li>
-        </ul>
+        <h2>Programmer.</h2>
+
+        <section>
+            <h2>Links</h2>
+            <ul>
+                <li><a class="button" href="https://www.youtube.com/@denniscm6" target="_blank">Youtube</a></li>
+                <li><a class="button" href="https://www.twitch.tv/denniscmartin" target="_blank">Twitch</a></li>
+                <li><a class="button" href="https://www.instagram.com/denniscmartin/" target="_blank">Instagram</a>
+                </li>
+                <li><a class="button" href="https://www.tiktok.com/@denniscmcom/" target="_blank">Tiktok</a></li>
+                <li><a class="button" href="https://github.com/denniscmcom" target="_blank">Github</a></li>
+            </ul>
+        </section>
+
+        <section>
+            <h2>Active Projects</h2>
+            <ul>
+                <li class="container">I'm building <a href="https://github.com/dennis-micros" target="_blank">Dennis
+                        Micro Computers</a>,
+                    a
+                    platform dedicated to teaching programming for STM32 microcontrollers.</li>
+                <li class="container">I have a <a href="https://www.youtube.com/@denniscm6" target="_blank">Youtube
+                        channel</a> where I
+                    share my programming journey along with my hobbies.</li>
+                <li class="container">I stream on <a href="https://www.twitch.tv/denniscmartin"
+                        target="_blank">Twitch</a> and <a href="https://www.youtube.com/@denniscm6"
+                        target="_blank">Youtube</a> from Monday to
+                    Thursday at 14:00
+                    GMT. I mostly share the development of Dennis Micro Computers and sometimes play some games.</a>
+                </li>
+            </ul>
+        </section>
+
+        <section>
+            <h2>Technical Projects</h2>
+            <ul>
+                <li class="container"><a href="https://github.com/denniscmcom/EVB-A32QS1-RFRG"
+                        target="_blank">EVB-A32QS1-RFRG: </a> A
+                    GNSS
+                    receiver development board based on a STM32
+                    MCU.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/EVB-A32M1-F" target="_blank">EVB-A32M1-F:
+                    </a> A small
+                    STM32F0
+                    development board with the same dimensions
+                    as the Raspberry Pi Pico.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/EVB-A32S1-M"
+                        target="_blank">EVB-A32S1-M:</a> A electronic
+                    speed
+                    controller based on a STM32 MCU.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/logic-led" target="_blank">Logic LED:</a>
+                    My first Arduino
+                    project. A simple circuit to interact with
+                    logic gates.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/hey" target="_blank">Hey!:</a> Hey! is a
+                    simple TCP
+                    streaming
+                    app developed in C using POSIX
+                    APIs. Both client and server are containerized using Docker.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/algo-animator" target="_blank">Algo
+                        Animator:</a> An
+                    interactive
+                    program to visualize sorting algorithms.
+                    Developed in C using OpenGL, GLUT, and FreeType.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/maze-solver" target="_blank">Maze
+                        Solver:</a> A maze solver
+                    written in C.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/geoquiz" target="_blank">Geoquiz:</a> A
+                    geography game for
+                    iOS
+                    written in SwiftUI.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/bitcaviar-plus" target="_blank">Bitcaviar
+                        Plus:</a> A
+                    Bitcoin
+                    blockchain parser written in Python.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/finance-parser" target="_blank">Finance
+                        Parser:</a>
+                    Serverless
+                    parser to extract information from financial
+                    reports using AWS Step Functions, AWS S3, AWS Api Gateway, AWS Textract, AWS DynamoDB and
+                    Eventbridge.
+                </li>
+                <li class="container"><a href="https://github.com/denniscmcom/tweet-analysis" target="_blank">Tweet
+                        Analysis:</a>
+                    Serverless
+                    app to fetch & analyse tweets using AWS
+                    Comprehend.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/simoleon" target="_blank">Simoleon:</a> A
+                    currency converter
+                    app
+                    for iOS written in SwiftUI.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/python-black-scholes"
+                        target="_blank">Python Black
+                        Scholes:</a>
+                    A command line utility to calculate the
+                    theoretical call and put price of an European option using the black-scholes method.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/stock-charts" target="_blank">Stock
+                        Charts:</a> A library to
+                    display interactive charts in SwiftUI.</li>
+                <li class="container"><a href="https://github.com/denniscmcom/lazybear" target="_blank">Lazybear:</a> My
+                    first iOS app and
+                    programming project.</li>
+            </ul>
+        </section>
+
+
     </main>
 </body>
 
--- a/src/style.css	Mon Mar 17 10:13:34 2025 +0000
+++ b/src/style.css	Wed Mar 26 14:12:19 2025 +0000
@@ -1,18 +1,62 @@
-body {
-    margin: 40px auto;
-    max-width: 650px;
-    line-height: 1.6;
-    font-size: 18px;
-    color: #444;
-    padding: 0 10px
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-h1,
-h2,
-h3 {
-    line-height: 1.2
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+    padding: 1rem;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+h1 {
+    font-size: 2rem;
+    margin: 1rem 0;
+    text-align: center;
 }
 
 h2 {
-    font-weight: normal;
-}
\ No newline at end of file
+    font-size: 1.25rem;
+    margin: 1.5rem 0 1rem;
+    text-align: center;
+}
+
+ul {
+    list-style: none;
+    display: block;
+}
+
+li {
+    margin: 0.5rem 0;
+}
+
+a {
+    color: #1471db;
+    text-decoration: none;
+    transition: opacity 0.2s;
+    font-weight: bold;
+}
+
+a:hover {
+    opacity: 0.6;
+    font-weight: bold;
+}
+
+.button {
+    display: block;
+    padding: 1rem;
+    text-align: center;
+    border: 3px solid #000000;
+    background-color: #c9c8bf;
+    font-weight: bold;
+    color: #000000;
+}
+
+.container {
+    padding: 1rem;
+    border: 3px solid #000000;
+    background-color: #f4f4f4;
+}