index.html

<!DOCTYPE html>
<html lang="en">
  <head>      
    <!-- HTML Meta Tags -->
    <title>Thomas Morton | Developer</title>
    <meta name="description" content="My personal website!">

    <!-- Facebook Meta Tags -->
    <meta property="og:url" content="https://faddy.dk/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Thomas Morton | Developer">
    <meta property="og:description" content="My personal website!">
    <meta property="og:image" content="https://faddy.dk/images/preview.png">

    <!-- Twitter/X Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta property="twitter:domain" content="faddy.dk">
    <meta property="twitter:url" content="https://faddy.dk/">
    <meta name="twitter:title" content="Thomas Morton | Developer">
    <meta name="twitter:description" content="My personal website!">
    <meta name="twitter:image" content="https://faddy.dk/images/preview.png">
        
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script 
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"
      integrity="sha512-ju6u+4bPX50JQmgU97YOGAXmRMrD9as4LE05PdC3qycsGQmjGlfm041azyB1VfCXpkpt1i9gqXCT6XuxhBJtKg=="
      crossorigin="anonymous" 
      referrerpolicy="no-referrer">
    </script>
    <script src="javascript/terminal.js"></script>
    <script src="javascript/affine.js"></script>
    <script src="javascript/vigenere.js"></script>
    <script src="javascript/gameoflife.js"></script>
    <script src="javascript/wordsearch.js"></script>

    <link rel="stylesheet" href="css/styles.css"/>
  </head>

  <body>
    <main>
      <audio id="ambience" loop>
        <source src="sounds/ambient-loop.mp3" type="audio/mp3">
        Your browser does not support the audio element!
      </audio>
      <audio id="music" loop>
        <source src="sounds/installation.mp3" type="audio/mp3">
        Your browser does not support the audio element!
      </audio>
      <p id="clock" class="display"></p>
      <p id="program" class="display"></p>
      <p hidden id="quit">SHUTTING DOWN -</p>
      <div id="files" class="folder">
        <div id="home">
          <table>
            <tr id="readmefile" tabindex="0">
              <td class="left">readme.txt</td>
              <td class="right">-&zwnj;-FILE-&zwnj;&gt;</td>
            </tr>

            <tr id="cowsayfile" tabindex="0">
              <td class="left">cowsay.txt</td>
              <td class="right">-&zwnj;-FILE-&zwnj;&gt;</td>
            </tr>

            <tr id="conwayfile" tabindex="0">
              <td class="left">conway.exe</td>
              <td class="right">-&zwnj;-FILE-&zwnj;&gt;</td>
            </tr>

            <tr id="wordsearchfile" tabindex="0">
              <td class="left">wrdsrch.exe</td>
              <td class="right">-&zwnj;-FILE-&zwnj;&gt;</td>
            </tr>

            <tr id="quitfile" tabindex="0">
              <td class="left">quit.exe</td>
              <td class="right">-&zwnj;-FILE-&zwnj;&gt;</td>
            </tr>
          </table>

          <hr>

          <table>
            <tr id="ciphersfolder" tabindex="0">
              <td class="left">CIPHERS</td>
              <td class="right">&zwnj;&gt;FOLDER&lt;</td>
            </tr>

            <tr id="settingsfolder" tabindex="0">
              <td class="left">SETTINGS</td>
              <td class="right">&zwnj;&gt;FOLDER&lt;</td>
            </tr>
          </table>
        </div>

        <!-- New Directory -->
        <div id="ciphers">
          <table>
            <tr id="cipherstohome" tabindex="0">
              <td class="left">/..</td>
              <td class="right">&lt;UP-FOL&zwnj;&gt;</td>
            </tr>

            <tr id="affinefile" tabindex="0">
              <td class="left">affine.exe</td>
              <td class="right">-&zwnj;-FILE-&zwnj;&gt;</td>
            </tr>

            <tr id="vigenerefile" tabindex="0">
              <td class="left">vigenere.exe</td>
              <td class="right">-&zwnj;-FILE-&zwnj;&gt;</td>
            </tr>
          </table>
        </div>

        <!-- New Directory -->
        <div id="settings">
          <table>
            <tr id="settingstohome" tabindex="0">
              <td class="left">/..</td>
              <td class="right">&lt;UP-FOL&zwnj;&gt;</td>
            </tr>

            <tr id="themefile" tabindex="0">
              <td class="left">theme.cfg</td>
              <td class="right">&zwnj;&gt;------&lt;</td>
            </tr>

            <tr id="soundfile" tabindex="0">
              <td class="left">sound.cfg</td>
              <td class="right">&zwnj;&gt;------&lt;</td>
            </tr>
          </table>
        </div>
      </div>

      <div class="content">
        <table id="iteminfo">
          <tr>
            <td id="name" class="left"></td>
            <td id="type" class="right"></td>
          </tr>
        </table>
        <article id="readmeui">
          <div class="filetop">readme.txt</div>
          <div class="marquee"><pre class="white">
╦ ╦╔═╗╦  ╔═╗╔═╗╔╦╗╔═╗  ╔╦╗╔═╗  ╔╦╗╦ ╦  ╔═╗╦╔╦╗╔═╗
║║║║╣ ║  ║  ║ ║║║║║╣    ║ ║ ║  ║║║╚╦╝  ╚═╗║ ║ ║╣ 
╚╩╝╚═╝╩═╝╚═╝╚═╝╩ ╩╚═╝   ╩ ╚═╝  ╩ ╩ ╩   ╚═╝╩ ╩ ╚═╝
          </pre></div>
          
          <div class="logos">
            <a id="linkedin" class="blue" href="https://uk.linkedin.com/in/tommy-morton">
              <p>LinkedIn</p>
              <pre>


:===.               
-++=:               
                 
-===:  ====.-=++=-. 
-+++:  +++++---=+++:
-+++:  ++++:   :+++=
-+++:  ++++.   .++++
-+++:  ++++.   .++++
-+++:  ++++.   .++++

              </pre>
            </a>

            <a id="email">
              <p class="mail-y">Email</p>
              <pre>



<span class="mail-dr">.+*+:</span>            <span class="mail-y">.:-:.</span>    
<span class="mail-dr">+####</span><span class="mail-r">*-.      .-+</span><span class="mail-y">====-</span>    
<span class="blue">-</span><span class="mail-dr">*###</span><span class="mail-r">***+:  :+***</span><span class="mail-y">====</span><span class="mail-g">-</span>    
<span class="blue">:-=</span><span class="mail-dr">+#</span><span class="mail-r">************</span><span class="mail-y">===</span><span class="mail-g">=-</span>    
<span class="blue">:----</span><span class="mail-r">:=********=:</span><span class="mail-y">=</span><span class="mail-g">===-</span>    
<span class="blue">:----</span><span class="mail-r">   :=**=:   </span><span class="mail-g">====-</span>    
<span class="blue">:----</span><span class="mail-r">            </span><span class="mail-g">====-</span>    
<span class="blue">:----</span><span class="mail-r">            </span><span class="mail-g">====-</span>    
            
              </pre>
            </a>

            <a id="github" class="white" href="https://github.com/FaddyManatee">
              <p>GitHub</p>
              <pre>


     :=+****+=:     
  .+############+.  
 =##=.-+====+-.=##= 
-###-          -###-
###+            +###
###*            *###
=##%=          =%##=
 +#==#*=    =*####+ 
  -#+:-.    =####-  
    :=*-    -*=:    
              </pre>
            </a>

            <a id="discord" class="indigo" href="https://discord.com/users/376325277208543232/">
              <p>Discord</p>
              <pre>



    .::-:....:-::.    
   -==============-   
  -================-  
 -====-:-====-:-====- 
 ====-   :==-   -==== 
.=====:.:====:.:=====.
.====-==========-====.
  :-==:  ....  :==-:  
              </pre>
            </a>
          </div>

          <p>
            Hello! My name is Thomas, and I am a BSc (Hons) Computer Science graduate from the 
            University of Leeds, having completed my degree in December 2025. I have also studied
            Computer Science at both GCSE and A-level.
          </p>

          <p>
            I am interested in applying AI to develop innovative solutions to
            non-intuitive, real-world problems. One example of this was my BSc dissertation, in 
            which I developed an evolutionary algorithm to generate realistic 3D models of biological
            trees, regulated by a fitness function to reward good structural, mechanical, and hierarchical
            qualities. My broader interests include cybersecurity, compilers, and operating systems.
          </p>

          <p>
            In software engineering, my focus is on back-end development, with the majority of my
            programming experience in C, C++, Java, and Python. Notable university projects include
            CLI tools for PGM image and GTOPO30 manipulation, a custom memory management library for
            the UNIX xv6 operating system, and a compiler for the JACK programming language.
          </p>

          <p>
            Here you can find a selection of projects I have written and chosen to showcase on this
            website, which was developed as part of a web development module. The design is inspired
            by the game SUPERHOT. Navigate the file system on the left to explore and interact with 
            them.
          </p>

          <p>
            I hope you enjoy :)
          </p>

          <p class="right">
            - Thomas
          </p>
        </article>

        <article id="cowsayui">
          <div class="filetop">cowsay.txt</div>
          <pre class="white">
  ________________________________________  
/ Did you ever hear the tragedy of Darth   \
| Plagueis The Wise? I thought not. It's   |
| not a story the Jedi would tell you.     |
| It's a Sith legend. Darth Plagueis was   |
| a Dark Lord of the Sith, so powerful and |
| so wise he could use the Force to        |
| influence the midichlorians to create    |
| life. He had such a knowledge of the     |
| dark side that he could even keep the    |
| ones he cared about from dying. The dark |
| side of the Force is a pathway to many   |
| abilities some consider to be unnatural. |
| He became so powerful, the only thing    |
| he was afraid of was losing his power,   |
| which eventually, of course, he did.     |
| Unfortunately, he taught his apprentice  |
| everything he knew, then his apprentice  |
| killed him in his sleep. Ironic. He      |
| could save others from death, but not    |
\ himself.                                 /
  ----------------------------------------  
         \   ^__^                           
          \  (oo)\_______                   
             (__)\       )\/\               
                 ||----w |                  
                 ||     ||                  
          </pre>
        </article>

        <div id="affineui" class="left">
          <div class="filetop">Press ESC to exit</div>
          <form autocomplete="off" spellcheck="false">
            <div class="formpair">
              <input type="text" id="affineinput">
              <label for="affineinput">Text</label>
            </div>
            
            <div class="formpair">
              <input type="text" id="affinekeyainput">
              <label for="affinekeyainput">A key</label>
            </div>

            <div class="formpair">
              <input type="text" id="affinekeybinput">
              <label for="affinekeybinput">B key</label>
            </div>
          </form>
          <button id="affineencrypt" type="button">Encrypt</button>
          <button id="affinedecrypt" type="button">Decrypt</button>

          <p class="error" id="affineerror"></p>
          <pre id="affineoutput" class="output"></pre>
        </div>

        <div id="vigenereui" class="left">
          <div class="filetop">Press ESC to exit</div>
          <form autocomplete="off" spellcheck="false">
            <div class="formpair">
              <input type="text" id="vigenereinput">
              <label for="vigenereinput">Text</label>
            </div>
            
            <div class="formpair">
              <input type="text" id="vigenerekeyinput">
              <label for="vigenerekeyinput">Key</label>
            </div>
          </form>
          <button id="vigenereencrypt" type="button">Encrypt</button>
          <button id="vigeneredecrypt" type="button">Decrypt</button>

          <p class="error" id="vigenereerror"></p>
          <pre id="vigenereoutput" class="output"></pre>
        </div>

        <div id="conwayui" class="left">
          <div class="filetop">Press ESC to exit</div>
          <form autocomplete="off" spellcheck="false">
            <div class="formpair">
              <input type="text" id="rowinputconway">
              <label for="rowinputconway">Rows</label>
            </div>

            <div class="formpair">
              <input type="text" id="columninputconway">
              <label for="columninputconway">Columns</label>
            </div>

            <div class="formpair">
              <input type="range" id="speedinput" min="0" max="6" value="3">
              <label for="speedinput">Speed</label>
            </div>
          </form>
          <button type="button" id="conwaymakegrid">GRID</button>
          <button type="button" id="startbutton">START</button>
          <button type="button" id="pausebutton">PAUSE</button>
          <p class="error" id="conwayerror"></p>
          <div id="conwaygrid" class="conway"></div>
        </div>

        <div id="wordsearchui" class="left">
          <div class="filetop">Press ESC to exit</div>
          <form autocomplete="off" spellcheck="false">
            <div class="formpair">
              <input type="text" id="rowinputsearch">
              <label for="rowinputsearch">Rows</label>
            </div>
            
            <div class="formpair">
              <input type="text" id="columninputsearch">
              <label for="columninputsearch">Columns</label>
            </div>

            <div class="formpair">
              <input type="text" id="searchinput">
              <label for="searchinput">Word</label>
            </div>
          </form>
          <button type="button" id="searchmakegrid">GRID</button>
          <button type="button" id="searchforword">SEARCH</button>
          <p class="error" id="wordsearcherror"></p>
          <div id="wordsearchgrid" class="wordsearch"></div>
        </div>
      </div>

      <footer>
        <table>
          <tr>
            <td id="directory" class="left">C:\</td>
            <td id="unsupported" class="right"></td>
          </tr>
        </table>
        <p class="display" id="osname">Omni-piOS-v2.1.01p</p>
      </footer>
    </main>
    <div id="birthday" hidden>
      <img src="images/confetti.gif"/>
    </div>
  </body>
</html>