Migrate to typescript

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+max_line_length = 120
+insert_final_newline = true
+
+[*.ts]
+indent_style = space
+indent_size = 2

.github/workflows/html-validation.yml

@@ -0,0 +1,18 @@
+name: HTML Validation
+
+on:
+  pull_request:
+    branches: [ '*' ]
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Validate HTML
+        uses: Cyb3r-Jak3/html5validator-action@v7.2.0
+        with:
+          root: .
+          blacklist: .git,.github,node_modules

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+node_modules/

css/styles.css

@@ -57,8 +57,8 @@ body {
     transition: filter ease 0.7s;
 }
 
-.icon-container i:hover, .icon-container svg:hover, .icon-container i.hover,
-.icon-container svg.hover {
+.icon-container i:hover, .icon-container svg:hover,
+.icon-container i.hover, .icon-container svg.hover {
     filter: contrast(1);
     filter: brightness(1);
     transition: filter 0.7s;
@@ -160,29 +160,14 @@ body.light-mode-body {
     }
 
     header {
-        height: 6rem;
-    }
-
-    header nav ul {
-        display: flex;
-        width: 100%;
-        float: none !important;
-        justify-content: center;
-        align-items: center;
-        padding: 1rem 0 0 0;
+        height: 4rem;
     }
 }
 
 @media only screen and (max-width: 610px) {
     body {
         margin: 1rem 1rem;
     }
-
-    header nav ul {
-        justify-content: space-around;
-        align-items: flex-end;
-    }
-
 }
 
 /* de-emphasize underlines */
@@ -195,4 +180,4 @@ ol.proj-list li a:hover {
 }
 ol.proj-list li {
     margin: 5px 0;
-}
+}

index.html

@@ -77,8 +77,8 @@ <h2>Contact</h2>
             <span class="blob"></span>
         </label>
     </div>
-    <script src="./js/age.js"></script>
-    <script src="./js/invert.js"></script>
-    <script src="./js/proj-highlighter.js"></script>
+    <script type="module" src="./ts/dist/age.js"></script>
+    <script type="module" src="./ts/dist/invert.js"></script>
+    <script type="module" src="./ts/dist/proj_highlighter.js"></script>
 </body>
 </html>

ts/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+build

ts/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5",
+  "printWidth": 72,
+  "tabWidth": 2
+}

ts/dist/age.js

@@ -0,0 +1,20 @@
+function calculateAge(birthday) {
+    const today = new Date();
+    const yearsSinceBirth = today.getUTCFullYear() - birthday.getUTCFullYear();
+    const birthMonth = birthday.getUTCMonth();
+    const currMonth = today.getUTCMonth();
+    const todayDate = today.getUTCDate();
+    const birthDate = birthday.getUTCDate();
+    if (currMonth < birthMonth ||
+        (currMonth === birthMonth && todayDate < birthDate)) {
+        return yearsSinceBirth - 1;
+    }
+    return yearsSinceBirth;
+}
+const MY_BIRTHDAY = new Date(Date.UTC(2002, 4, 24));
+const MY_AGE = calculateAge(MY_BIRTHDAY);
+const aboutParagraph = document.querySelector('#about > p');
+if (aboutParagraph) {
+    aboutParagraph.textContent += ` I am ${MY_AGE} years old.`;
+}
+export {};

ts/dist/constants/projects.js

@@ -0,0 +1,11 @@
+export const PROJECTS = {
+    REVERSI: 'reversi',
+    MAZE_RUNNER_PAGE_READER: 'maze-runner-page-reader',
+    SUDOKU_SOLVER: 'sudoku-solver',
+    CRUD_APP: 'crud-app',
+    RB_TREE: 'rbTree',
+    GAUSS: 'gauss',
+    DICE_ROLLER: 'diceRoller',
+    PORTFOLIO: 'portfolio',
+    WEB_STUDIO: 'web-studio',
+};

ts/dist/constants/tools.js

@@ -0,0 +1,14 @@
+export const TOOLS = {
+    JAVA: 'java',
+    JAVASCRIPT: 'javascript',
+    TYPESCRIPT: 'typescript',
+    PYTHON: 'python',
+    CSS3: 'css3',
+    HTML5: 'html5',
+    GIT: 'git',
+    C_SHARP: 'csharp',
+    GITLAB: 'gitlab',
+    GITHUB: 'github',
+    CPP: 'cpp',
+    PHP: 'php',
+};

ts/dist/invert.js

@@ -0,0 +1,20 @@
+const DARK_MODE_CHECKBOX = document.querySelector('#dark-mode-checkbox');
+const body = document.body;
+const DARK_MODE = 'dark-mode-body', LIGHT_MODE = 'light-mode-body';
+if (DARK_MODE_CHECKBOX) {
+    DARK_MODE_CHECKBOX.addEventListener('change', () => {
+        body.classList.toggle(DARK_MODE);
+        body.classList.toggle(LIGHT_MODE);
+    });
+    if (window.matchMedia &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        DARK_MODE_CHECKBOX.checked = true;
+        body.classList.toggle(DARK_MODE);
+    }
+    if (window.matchMedia &&
+        window.matchMedia('(prefers-color-scheme: light)').matches) {
+        DARK_MODE_CHECKBOX.checked = false;
+        body.classList.toggle(LIGHT_MODE);
+    }
+}
+export {};

ts/dist/proj_highlighter.js

@@ -0,0 +1,54 @@
+import { TOOLS } from './constants/tools';
+import { PROJECTS } from './constants/projects';
+const PROJ_NODES = document.querySelectorAll('ol.proj-list > li > a');
+const PROJ_STACK = {
+    [PROJECTS.REVERSI]: [TOOLS.JAVA, TOOLS.GITHUB],
+    [PROJECTS.MAZE_RUNNER_PAGE_READER]: [TOOLS.PYTHON],
+    [PROJECTS.SUDOKU_SOLVER]: [TOOLS.CPP, TOOLS.GIT, TOOLS.GITLAB],
+    [PROJECTS.CRUD_APP]: [
+        TOOLS.PHP,
+        TOOLS.JAVASCRIPT,
+        TOOLS.CSS3,
+        TOOLS.HTML5,
+        TOOLS.GIT,
+    ],
+    [PROJECTS.RB_TREE]: [TOOLS.C_SHARP, TOOLS.GIT, TOOLS.GITLAB],
+    [PROJECTS.GAUSS]: [TOOLS.PYTHON, TOOLS.GITLAB],
+    [PROJECTS.DICE_ROLLER]: [TOOLS.CPP, TOOLS.GITLAB],
+    [PROJECTS.PORTFOLIO]: [
+        TOOLS.JAVASCRIPT,
+        TOOLS.HTML5,
+        TOOLS.CSS3,
+        TOOLS.GIT,
+        TOOLS.GITHUB,
+    ],
+    [PROJECTS.WEB_STUDIO]: [
+        TOOLS.JAVASCRIPT,
+        TOOLS.HTML5,
+        TOOLS.CSS3,
+        TOOLS.GIT,
+        TOOLS.GITHUB,
+    ],
+};
+Object.keys(PROJ_STACK).forEach((project) => {
+    const projElement = document.getElementById(project);
+    console.assert(projElement !== undefined, `${project} is not present in html`);
+});
+PROJ_NODES.forEach((proj) => {
+    proj.addEventListener('mouseover', () => {
+        for (let tech of PROJ_STACK[proj.id]) {
+            const techElement = document.getElementById(tech);
+            if (techElement !== null) {
+                techElement.classList.add('hover');
+            }
+        }
+    });
+    proj.addEventListener('mouseout', () => {
+        for (let tech of PROJ_STACK[proj.id]) {
+            const techElement = document.getElementById(tech);
+            if (techElement !== null) {
+                techElement.classList.remove('hover');
+            }
+        }
+    });
+});

ts/eslint.config.mts

@@ -0,0 +1,9 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  { files: ["**/*.{js,mjs,cjs,ts,mts,cts}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: globals.browser } },
+  tseslint.configs.recommended,
+]);