diff --git a/main.py b/main.py
index efde0c7..2de15da 100644
--- a/main.py
+++ b/main.py
@@ -221,4 +221,4 @@ def model(model):
     return render_template("model.html", model=model)
 
 if __name__ == "__main__":
-    app.run(host="0.0.0.0", debug=False, port=80)
\ No newline at end of file
+    app.run(host="0.0.0.0", debug=False, port=8034)
\ No newline at end of file
diff --git a/templates/main.html b/templates/main.html
index f083c4f..77222a4 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -1,26 +1,369 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <title>Redzuzu's Site</title>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <meta name="msapplication-TileColor" content="#2cbb00" />
+    <meta name="theme-color" content="#2cbb00" />
+    <title>Ethan Pisani - Resume Portfolio</title>
+
+    <!-- Google Font -->
     <link
       href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}" />
-    <meta name="msapplication-TileColor" content="#000000" />
-    <meta name="theme-color" content="#000000" />
-    <link rel="icon" href="{{ url_for('static',filename='img/favicon.ico') }}" />
-    <meta name="robots" content="index,follow" />
+
+    <!-- Custom Styles -->
+    <style>
+      body {
+        margin: 0;
+        margin-top: 10vh;
+        font-family: "Roboto", sans-serif;
+        color: #e0e0e0;
+        background-color: #232627;
+      }
+
+      .content {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+
+      h1 {
+        text-align: center;
+        font-size: 5em;
+        color: #37e401;
+        margin-top: 50px;
+      }
+
+      h2 {
+        color: #2cbb00;
+        margin-top: 40px;
+        font-size: 2em;
+        text-transform: uppercase;
+        border-bottom: 2px solid #2cbb00;
+        display: inline-block;
+      }
+
+      p, li {
+        font-size: 1.2em;
+        line-height: 1.6em;
+      }
+
+      ul {
+        list-style-type: none;
+        padding: 0;
+      }
+
+      .section {
+        margin-top: 20px;
+      }
+
+      a {
+        /* color: #2cbb00; */
+        color: #e0e0e0;
+        text-decoration: underline;
+        text-decoration-color: #2cbb00;
+        text-decoration-thickness: .2rem;
+      }
+
+      a:hover {
+        color: #2cbb00;
+        text-decoration: underline;
+        text-decoration-color: #35e001;
+        text-decoration-thickness: .2rem;
+      }
+
+      .skills-list {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .skills-list li {
+        background-color: #434444;
+        margin: 5px;
+        padding: 10px;
+        border-radius: 5px;
+      }
+      /* .project-date {
+        float: right;
+        text-align: right;
+        margin-left:  100px;
+        padding-left:  100px;
+      } */
+
+      /* Particles.js styles */
+      #particles-js {
+        /* scroll with the page */
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: -1;
+      }
+
+
+    /* ----------------------------------------------
+    * Generated by Animista on 2020-12-31 16:52:43
+    * Licensed under FreeBSD License.
+    * See http://animista.net/license for more info. 
+    * w: http://animista.net, t: @cssanimista
+    * ---------------------------------------------- */
+
+    /**
+    * ----------------------------------------
+    * animation text-pop-up-top
+    * ----------------------------------------
+    */
+    @-webkit-keyframes text-pop-up-top {
+      0% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+        -webkit-transform-origin: 50% 50%;
+        transform-origin: 50% 50%;
+        text-shadow: none;
+      }
+      100% {
+        -webkit-transform: translateY(-50px);
+        transform: translateY(-50px);
+        -webkit-transform-origin: 50% 50%;
+        transform-origin: 50% 50%;
+        text-shadow: 0 1px 0 #2cbb00, 0 2px 0 #2cbb00, 0 3px 0 #2cbb00,
+          0 4px 0 #2cbb00, 0 5px 0 #2cbb00, 0 6px 0 #2cbb00, 0 7px 0 #2cbb00,
+          0 8px 0 #2cbb00, 0 9px 0 #2cbb00, 0 50px 30px rgba(0, 0, 0, 0.3);
+      }
+    }
+    @keyframes text-pop-up-top {
+      0% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+        -webkit-transform-origin: 50% 50%;
+        transform-origin: 50% 50%;
+        text-shadow: none;
+      }
+      100% {
+        -webkit-transform: translateY(-50px);
+        transform: translateY(-50px);
+        -webkit-transform-origin: 50% 50%;
+        transform-origin: 50% 50%;
+        text-shadow: 0 1px 0 #2cbb00, 0 2px 0 #2cbb00, 0 3px 0 #2cbb00,
+          0 4px 0 #2cbb00, 0 5px 0 #2cbb00, 0 6px 0 #2cbb00, 0 7px 0 #2cbb00,
+          0 8px 0 #2cbb00, 0 9px 0 #2cbb00, 0 50px 30px rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    .text-pop-up-top {
+      -webkit-animation: text-pop-up-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+        both;
+      animation: text-pop-up-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    }
+
+    </style>
+
+    <!-- Particles.js Library -->
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
   </head>
+
   <body>
+    <div id="particles-js"></div>
+
     <div class="content">
       <h1 class="text-pop-up-top">Ethan Pisani.</h1>
-      <a href="/chem12cpt/">Chemistry 12 CPT</a>
 
+  
+      <p>
+        <a href="https://www.linkedin.com" target="_blank">LinkedIn</a> ⋄
+        <a href="https://www.ethanpisani.com" target="_blank">Website</a> ⋄
+        <a href="https://www.github.com/EthanPisani" target="_blank">GitHub</a>
+      </p>
+
+      <div class="section">
+        <h2>Projects</h2>
+        
+        <ul class="projects-list">
+          <!-- Projects: Project Lambda, Portfolio Website, Homelab, Tails of Ailurus, LTC Bus AI/ML, SMPLY-Navigate, Gan website, Project ASH --->
+          <div name="Homelab">
+            <p><strong>Homelab</strong> <span class=project-date">2019 — Present</span></p>
+            <ul>
+              <li>A collection of computers and servers <span class=project-date">both local and cloud-based</span> running various software such as Debian, Proxmox, TrueNAS, and OPNsense.</li>
+              <li>Experience self-hosting apps like Gitea, Jellyfin, Docker apps, reverse proxy config, and more.</li>
+            </ul>
+          </div>
+          <div name="Tails of Ailurus">
+            <p><strong>Tails of Ailurus</strong> <span class=project-date">2021 — Present</span></p>
+            <ul>
+              <li>Developed a 2D platformer game using Unity, C#, and Blender.</li>
+              <li>Designed levels, characters, and animations, and implemented game mechanics.</li>
+            </ul>
+          </div>
+          <div name="LTC Bus AI/ML">
+            <p><strong>LTC Bus AI/ML</strong> <span class=project-date">2024 — Present</span></p>
+            <ul>
+              <li>Developed tools for real-time bus movement visualization using AI/ML techniques.</li>
+              <li>Utilized SQL and Multiple Linear Regression to store and analyze bus location data.</li>
+            </ul>
+          </div>
+          <div name="SMPLY-Navigate">
+            <p><strong>SMPLY-Navigate</strong> <span class=project-date">2023 — Present</span></p>
+            <ul>
+              <li>Developed a web app to help students navigate the Western campus.</li>
+              <li>Utilized Google Maps API, JavaScript, and HTML/CSS to create a user-friendly interface.</li>
+            </ul>
+          </div>
+          <div name="Gan website">
+            <p><strong>Gan website</strong> <span class=project-date">2022 — Present</span></p>
+            <ul>
+              <li>Developed a website for a local business using WordPress, HTML, and CSS.</li>
+              <li>Designed a user-friendly interface and implemented SEO best practices.</li>
+            </ul>
+          </div>
+          <div name="Project ASH">
+            <p><strong>Project ASH</strong> <span class=project-date">2021 — Present</span></p>
+            <ul>
+              <li>Developed a web app to help students navigate the Western campus.</li>
+              <li>Utilized Google Maps API, JavaScript, and HTML/CSS to create a user-friendly interface.</li>
+            </ul>
+          </div>
+          <div name="chemistry Study Guide">
+            <p> <strong> <a href="/chem12cpt" >Chemistry Study Guide </a> </strong> <span class=project-date">2021 — Present</span></p>
+            <ul>
+              <li>Developed a website for a local business using WordPress, HTML, and CSS.</li>
+              <li>Designed a user-friendly interface and implemented SEO best practices.</li>
+            </ul>
+
+
+          
+
+
+        </ul>
+      
+      </div>
+
+      <div class="section">
+        <h2>Skills</h2>
+        <ul class="skills-list">
+          <li>Python</li>
+          <li>Java</li>
+          <li>COBOL</li>
+          <li>C</li>
+          <li>C++</li>
+          <li>JCL</li>
+          <li>Bash</li>
+          <li>Rust</li>
+          <li>SQL</li>
+          <li>R</li>
+          <li>Numpy</li>
+          <li>TensorFlow</li>
+          <li>Docker</li>
+          <li>Jira</li>
+        </ul>
+      </div>
+
+      <div class="section">
+        <h2>Experience</h2>
+        <p><strong>Junior Software Developer</strong> | Canada Revenue Agency<br />
+        May 2024 — September 2024</p>
+        <ul>
+          <li>Trained on Batch/Online COBOL, JCL, Mainframe ISPF. Debugged programs in Xpediter, Topaz Workbench.</li>
+          <li>Performed daily QA testing of regressions, enhancing team efficiency.</li>
+          <li>Gained experience in agile development, using Jira, code reviews, impact analysis, and Endevor.</li>
+        </ul>
+        
+        <p><strong>Junior Communications Officer</strong> | DFO Government of Canada<br />
+        May 2022 — August 2022</p>
+        <ul>
+          <li>Updated team intranet site using Drupal, managed email inboxes, and documented user stories.</li>
+          <li>Improved team efficiency by assisting with tasks and stakeholder communications for a large software project.</li>
+        </ul>
+      </div>
+
+
+      <div class="section">
+        <h2>Extra-Curricular Activities</h2>
+        <p><strong>Western Developer Society</strong> | LTC Bus AI/ML Team Lead<br />
+        September 2024 — Present</p>
+        <ul>
+          <li>Partnered with Dr. Yili Tang to develop tools for real-time bus movement visualization using AI/ML techniques.</li>
+          <li>Utilized SQL and Multiple Linear Regression to store and analyze bus location data.</li>
+        </ul>
+
+        <p><strong>Western AI</strong> | Developer<br />
+        October 2021 — April 2024</p>
+        <ul>
+          <li>Created a Virtual Personality with open-source AI models, using techniques like LLM, TTS, STT, and text analysis.</li>
+          <li>Developed machine learning agents for object detection in games, achieving 87% accuracy.</li>
+          <li>Designed a custom ANN for image classification of yoga poses.</li>
+        </ul>
+      </div>
+
+      <div class="section">
+        <h2>Education</h2>
+        <p>
+          <strong>Bachelor of Computer Science</strong>, University of Western Ontario<br />
+          Honors Specialization in Computer Science (2021 - 2025)
+        </p>
+      </div>
+
+
+     
     </div>
 
-
-
-
+    <script>
+      particlesJS("particles-js", {
+        particles: {
+          number: { value: 100, density: { enable: true, value_area: 800 } },
+          color: { value: "#2cbb00" },
+          shape: {
+            type: "circle",
+            stroke: { width: 0, color: "#000000" },
+            polygon: { nb_sides: 5 },
+          },
+          opacity: {
+            value: 0.5,
+            random: false,
+            anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false },
+          },
+          size: {
+            value: 3,
+            random: true,
+            anim: { enable: false, speed: 40, size_min: 0.1, sync: false },
+          },
+          line_linked: {
+            enable: true,
+            distance: 150,
+            color: "#2cbb00",
+            opacity: 0.4,
+            width: 1,
+          },
+          move: {
+            enable: true,
+            speed: 6,
+            direction: "none",
+            random: false,
+            straight: false,
+            out_mode: "out",
+            bounce: false,
+            attract: { enable: false, rotateX: 600, rotateY: 1200 },
+          },
+        },
+        interactivity: {
+          detect_on: "canvas",
+          events: {
+            onhover: { enable: true, mode: "repulse" },
+            onclick: { enable: true, mode: "push" },
+            resize: true,
+          },
+          modes: {
+            repulse: { distance: 100, duration: 0.4 },
+            push: { particles_nb: 4 },
+          },
+        },
+        retina_detect: true,
+      });
+    </script>
   </body>
 </html>
