Project cards

xezno · Apr 18, 2024 · 1adacc6 · 1adacc6
1 parent 63b1cdc
commit 1adacc6
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -21,15 +21,12 @@
 
 <body>
   <nav>
-    <p>Alex Guthrie // Programmer from the UK</p>
+    <p>Alex Guthrie - Programmer from the UK</p>
     <span class="fill"></span>
     <span>
-      <a href="https://blog.gu3.me/">Blog</a>
-      <span class="divider">//</span>
-      <a href="https://github.com/xezno">Github</a>
-      <a href="https://twitter.com/realxezno">X (Twitter)</a>
+      <a href="https://github.com/xezno">GitHub</a>
+      <a href="https://twitter.com/realxezno">Twitter</a>
       <a href="https://www.twitch.tv/realxezno">Twitch</a>
-      <a href="https://open.spotify.com/user/alexguthrie">Spotify</a>
     </span>
   </nav>
 
@@ -48,10 +45,6 @@ <h2>About</h2>
     <section>
       <h2>Skills</h2>
 
-      <b>Languages / Frameworks</b>
-      <p>Unity, Unreal, C#, C++, TypeScript, JavaScript, SCSS, Vue, Docker, PostgreSQL, Python, Rust</p>
-
-      <b>Domains</b>
       <ul>
         <li><b>2D and 3D game development</b>: Experienced in writing C# code for use in game engines (such as S&box and Unity) and as desktop applications</li>
         <li><b>Desktop applications in C++ and C#</b>: Experienced in writing efficient native code for desktop applications in C++ and C#</li>
@@ -65,27 +58,58 @@ <h2>Skills</h2>
     <section>
       <h2>Projects</h2>
 
-      <b>Work</b>
+      <div class="projects">
 
-      <ul>
-        <li><a href="https://sbox.facepunch.com/">s&box</a> - A game platform by Facepunch Studios, and the spiritual successor to Garry's Mod.</li>
-      </ul>
+        <div class="project-card">
+          <img src="/public/img/projects/sbox.jpg" />
 
-      <b>Personal</b>
+          <span>
+            <b>s&box</b>
+            <p>A game platform by Facepunch Studios, and the spiritual successor to Garry's Mod.</p>
+            <a href="https://sbox.game/">Website</a>
+          </span>
+        </div>
+
+        <div class="project-card">
+          <img src="/public/img/projects/opentpw.png" />
+
+          <span>
+            <b>OpenTPW</b>
+            <p>An open source reimplementation of the game Sim Theme Park / Theme Park World.</p>
+            <a href="https://github.com/themeparkworld/opentpw">GitHub</a>
+          </span>
+        </div>
+
+        <div class="project-card">
+          <img src="/public/img/projects/mocha.png" />
+
+          <span>
+            <b>Mocha</b>
+            <p>A simple game engine written in C++ with C# interop.</p>
+            <a href="https://github.com/mocha-engine/mocha">GitHub</a>
+          </span>
+        </div>
+
+        <div class="project-card">
+          <img src="/public/img/projects/tin.png" />
+
+          <span>
+            <b>Tin</b>
+            <p>A programming language written in C, targeting RISC-V.</p>
+            <a href="https://github.com/The-Tin-Foil-Hat-Society/tin">GitHub</a>
+          </span>
+        </div>
+
+      </div>
 
-      <ul>
-        <li><a href="https://github.com/themeparkworld/opentpw">OpenTPW</a> - An open source reimplementation of the game Sim Theme Park / Theme Park World</li>
-        <li><a href="https://github.com/mocha-engine/mocha">Mocha</a> - A game engine written in C++ with C# interop</li>
-        <li><a href="https://github.com/The-Tin-Foil-Hat-Society/tin">Tin</a> - A programming language written in C, targeting RISC-V</li>
-      </ul>
     </section>
 
     <hr />
 
     <section>
       <h2>Contact Me</h2>
 
-      <p>You can <a href="mailto:[email protected]">email me</a> or find me on <a href="https://twitter.com/realxezno">X (Twitter)</a>.</p>
+      <p>You can <a href="mailto:[email protected]">email me</a> or find me on <a href="https://twitter.com/realxezno">Twitter</a>.</p>
     </section>
   </main>
 </body>

diff --git a/public/img/projects/mocha.png b/public/img/projects/mocha.png
diff --git a/public/img/projects/opentpw.png b/public/img/projects/opentpw.png
diff --git a/public/img/projects/sbox.jpg b/public/img/projects/sbox.jpg
diff --git a/public/img/projects/tin.png b/public/img/projects/tin.png
diff --git a/styles.css b/styles.css
@@ -8,7 +8,7 @@ body {
   margin: 0 auto;
   color: #333;
 
-  line-height: 1.5;
+  line-height: 2;
   padding: min(5%, 20px) min(10%, 100px);
 
   text-rendering: optimizeLegibility;
@@ -24,14 +24,14 @@ a {
 }
 
 nav {
-  padding: 1rem 0;
+  padding: 0.5rem 0;
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
 
 nav span {
-  gap: 1rem;
+  gap: 0.5rem;
   display: flex;
 }
 
@@ -40,7 +40,7 @@ nav p {
 }
 
 nav span.fill {
-  margin: 0 1rem;
+  margin: 0 0.5rem;
   flex-grow: 1;
 }
 
@@ -57,8 +57,8 @@ ul li:before {
 
 hr {
   border: 0;
-  border-top: 1px dashed currentColor;
-  margin: 2rem 0;
+  border-top: 1px dotted currentColor;
+  margin: 1.5rem 0;
   opacity: 0.2;
 }
 
@@ -72,6 +72,39 @@ h2 {
   text-transform: uppercase;
 }
 
+.projects {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  flex-direction: column;
+}
+
+.project-card {
+  flex-basis: 45%;
+  flex-shrink: 1;
+  flex-grow: 1;
+  display: flex;
+  border: 1px solid color-mix( in srgb, currentColor 20%, transparent );
+  flex-direction: row;
+  padding: 1rem;
+  gap: 1rem;
+  align-items: center;
+
+  border-radius: 1rem;
+}
+
+.project-card b {
+  font-size: 1.25rem;
+}
+
+.project-card > img {
+  border-radius: 0.5rem;
+
+  aspect-ratio: 1;
+  height: 10rem;
+  width: 10rem;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     background-color: #111;