Added location and changed styles

diff --git a/web/templates/index.html b/web/templates/index.html
index 1bdab09a5f36dc23094e83b209341dd24536b8d6..e72107b84a0b8e25e2a1e56eff37c6e406250440 100644 (file)
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -1,10 +1,6 @@
 {% extends "base.html" %}
 
-{% import "nav.html" as nav %}
 {% import "projects.html" as projects %}
-{% block navbar %}
-{{ nav::bar(active="home") }}
-{% endblock %}
 
 {% block title %}
 <title>prime8.dev</title>
@@ -12,19 +8,27 @@
 
 {% block content %}
 <div id="logo">
-  <div>
-    <pre id="firstname">
+       <div>
+               <pre id="firstname">
      _                 _
     | |               (_)
   __| | __ _ _ __ ___  _  __ _ _ __
  / _` |/ _` | '_ ` _ \| |/ _` | '_ \
 | (_| | (_| | | | | | | | (_| | | | |
  \__,_|\__,_|_| |_| |_|_|\__,_|_| |_|
-    </pre>
-    <a href="mailto:damian@prime8.dev">damian@prime8.dev</a>
-  </div>
+               </pre>
+               <div style="display: table; width: 100%">
+                       <div class="d-table-cell">
+                               <a href="mailto:damian@prime8.dev">damian@prime8.dev</a>
+                       </div>
+                       <div style="display: table-cell; text-align: right">
+                               <pre class="hidden-phone">chicago,</pre>
+                               <a class="visible-phone" href="https://www.linkedin.com/in/damian-myrda/">linkedin</a></pre>
+                       </div>
+               </div>
+       </div>
   <pre id="middle" class="hidden-phone"></pre>
-  <pre id="lastname" class="hidden-phone">
+       <pre id="lastname" class="hidden-phone">
                          _
                         | |
  _ __ ___  _   _ _ __ __| | __ _
@@ -32,7 +36,7 @@
 | | | | | | |_| | | | (_| | (_| |
 |_| |_| |_|\__, |_|  \__,_|\__,_|
             __/ |
-           |___/</pre>
+illinois   |___/        <a class="align-right" href="https://www.linkedin.com/in/damian-myrda/">linkedin</a></pre>
   <script>
     const heights = [
       document.getElementById("firstname").textContent.split("\n").length,
@@ -60,58 +64,55 @@
     }
   </style>
 </div>
-<p class="lead" style="text-align: center">
-  Terminal enthusiast, learning from Curious George (the curious part, not the
-  monkey business). Systems and backend programming are my focus. Striving to
-  turn spaghetti code into well-structured algorithms and make every line
-  count with efficiency and creativity.
-</p>
-<div>
-<div style="display: table; width: 100%">
-  <div style="display: table-cell; white-space: nowrap">
-    <h3>works with:</h3>
-    <ul>
-      <li style="color: #ffc40d">zig</li>
-      <li style="color: #9d261d">rust</li>
-      <li style="color: #bdb7af">c</li>
-      <li style="color: #049cdb">c++</li>
-      <li style="color: #ffc40d">python</li>
-    </ul>
-    <h3>learning more about:</h3>
-    <ul>
-      <li style="color: #049cdb">go</li>
-      <li style="color: #ffc40d">java</li>
-    </ul>
-    <div class="visible-phone">
-      <h3>activity:</h3>
-      <pre class="activity">Loading activity...</pre>
-    </div>
-  </div>
-  <div style="display: table-cell; vertical-align: middle">
-    <div style="display: flex; justify-content: center">
-      <div class="hidden-phone">
-        <h3>activity:</h3>
-        <pre class="activity">Loading activity...</pre>
-      </div>
-    </div>
-  </div>
-</div>
-<div>
-       {{ projects::list() }}
+<div id="content">
+       <p class="lead" style="text-align: center">
+               Terminal enthusiast, learning from Curious George (the curious part, not the
+               monkey business). Systems and backend programming are my focus. Striving to
+               turn spaghetti code into well-structured algorithms and make every line
+               count with efficiency and creativity.
+       </p>
+       <div style="display: table; width: 100%">
+               <div class="d-table-cell">
+                       <h3>techonologies:</h3>
+                       <ul>
+                                       <li style="color: #fff">languages: <span style="color: #fefe54">zig</span>, <span style="color: #ff5555">rust</span>, <span style="color: #55ffff">go</span>, <span style="color: #bbb">c</span>, <span style="color: #00aaaa">c++</span>, <span style="color: #fefe54">python</span></li>
+                                       <li style="color: #fff">frameworks: <span style="color: #ff5555">tokio</span>, <span style="color: #55ff55">fastapi<span>, <span style="color: #bbb">flask</span></li>
+                                       <li style="color: #fff">libraries: <span style="color: #ff5555">torch</span>, <span style="color: #fe54fe">kafka</span>
+                                       <li style="color: #fff">tools: <span style="color: #bbb">git</span>, <span style="color: #55ff55">bash</span>, <span style="color: #aa5500">make</span>, <span style="color: #bbb">gdb</span>, <span style="color: #00aaaa">docker</span></li>
+                       </ul>
+                       <h3>learning:</h3>
+                       <ul>
+                               <li style="color: #00aaaa">typescript</li>
+                               <li style="color: #a85400">java</li>
+                       </ul>
+                       <div class="visible-phone">
+                               <h3>activity:</h3>
+                               <pre class="activity" style="color: #bbb !important">Loading activity...</pre>
+                       </div>
+               </div>
+               <div style="display: table-cell; vertical-align: middle">
+                       <div style="display: flex; justify-content: center">
+                               <div class="hidden-phone">
+                                       <h3>activity:</h3>
+                                       <pre class="activity" style="color: #bbb !important">Loading activity...</pre>
+                               </div>
+                       </div>
+               </div>
+       </div
+       <div>
+               {{ projects::list() }}
+       </div>
 </div>
 <script src="js/wakatime.js"></script>
 <style>
   #content {
     max-width: 800px !important;
-    margin: auto !important;
+    margin: 1rem auto 0 auto !important;
+               padding: 0 !important;
   }
 
-  @media (min-width: 1200px) {
-    #content {
-      margin-top: 1rem !important;
-      padding: 0 !important;
-      width: 800px !important;
-    }
-  }
+       h3 {
+               text-align: center;
+       }
 </style>
 {% endblock %}

diff --git a/web/templates/projects.html b/web/templates/projects.html
index 37b34c846333a37b0f25ac603e707cb7b3836d9b..e38a04361cacdb23cb6c62f27f0d6834c58b4f39 100644 (file)
--- a/web/templates/projects.html
+++ b/web/templates/projects.html
@@ -1,5 +1,5 @@
 {% macro list() %}
-<pre>
+<pre style="color: #fff !important">
                  _           _
                 (_)         | |
  _ __  _ __ ___  _  ___  ___| |_ ___
@@ -12,7 +12,7 @@
 </pre>
 <div class="row-fluid">
   <div class="span4 w-100">
-    <h3 class="text-center">MOS</h3>
+    <h3>MOS</h3>
     <p>
       In my free time, I work on MOS, my minimal operating system. This project
       has deepened my understanding of OS internals, and I'm planning to rewrite
@@ -23,7 +23,7 @@
     <a href="https://git.prime8.dev/?p=mos.git" class="btn">src</a>
   </div>
   <div class="span4 w-100">
-    <h3 class="text-center">Janitor</h3>
+    <h3>Janitor</h3>
     <p>
       During my summer internship at Amplifier Health, I developed a service
       that sorts audio files into three categories: speech, music, and noise. I
@@ -34,7 +34,7 @@
     <a href="https://git.prime8.dev/?p=janitor.git" class="btn">src</a>
   </div>
   <div class="span4 w-100">
-    <h3 class="text-center">Summarizer</h3>
+    <h3>Summarizer</h3>
     <p>
       An experiment using a microservice architecture that transcribes and
       summarizes audio into text using OpenAI's API. Each service has its own
@@ -47,7 +47,7 @@
 </div>
 <div class="row-fluid">
   <div class="span4 w-100">
-    <h3 class="text-center">Tutor Connect</h3>
+    <h3>Tutor Connect</h3>
     <p>
       For HSHacks 2024, my friends and I developed a website to help students
       find tutors. Recognizing that not every school has a dedicated portal for
@@ -58,7 +58,7 @@
     <a href="https://d214tutorconnect.prime8.dev" class="btn">src</a>
   </div>
   <div class="span4 w-100">
-    <h3 class="text-center">CSC Website</h3>
+    <h3>CSC Website</h3>
     <p>
       I built a website for the Computer Science Club (CSC) at Prospect High
       School during a mini-hackathon. The site displays important information it