diff --git a/src/inc_css/demos.css b/src/inc_css/demos.css
index fc6afb2..8024695 100644
--- a/src/inc_css/demos.css
+++ b/src/inc_css/demos.css
@@ -2,7 +2,7 @@
     opacity: 0.3;
     transition: opacity 0.3s;
     max-width: 15vw;
-    display: inline;
+    display: inline-block;
 }
 
 .demoTile:hover {
diff --git a/src/inc_css/portfolio.css b/src/inc_css/portfolio.css
new file mode 100644
index 0000000..e6a862c
--- /dev/null
+++ b/src/inc_css/portfolio.css
@@ -0,0 +1,46 @@
+.demoTile {
+    opacity: 0.7;
+    transition: opacity 0.3s;
+    max-width: 15vw;
+    display: inline;
+}
+
+.demoTile:hover {
+    opacity: 1.0;
+}
+
+.demoTiles {
+    position: absolute;
+    background-color:white;
+    left:27.5%;
+    top: var(--title-height);
+    margin-top:40px;
+}
+
+.page.portfolio {
+    padding-top: 0;
+    width: 70%;
+    right: 0;
+    margin:0;
+    padding:0;
+    padding-top: 5vh;
+    transform: translate(-35%,0);
+}
+
+.wrapper {
+    width: 100%;
+    background-color: var(--background);
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+
+.wrapper img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+    transition: transform 0.1s ease-in;
+}
+
+.wrapper img:hover {
+    transform: scale(1.16);
+}
diff --git a/src/root/index.html b/src/root/index.html
index 5afedcf..8bb76b3 100644
--- a/src/root/index.html
+++ b/src/root/index.html
@@ -5,13 +5,14 @@
 
     <body>
         <title>ktyl ~ home</title>
+
+        <!-- actually a headline -->
         <div class="title">
             <h1 class="fsText">ktyl@website</h1>
         </div>
-
         #include sidebar.html
-
         <div class="page">
+
             <h1>cats stuff</h1>
 
             <p>hi, im cat and i do things and stuff. eventually i want to make this an actual, useful landing page for people interested in me and what i do. unfortunately, im very scatterbrained and not very organised! as a result, this is just one of myriad ongoing projects that i constantly try to chip away at, to varying degrees of success.</p>
diff --git a/src/root/portfolio.html b/src/root/portfolio.html
index 67d1060..d797c2e 100644
--- a/src/root/portfolio.html
+++ b/src/root/portfolio.html
@@ -10,11 +10,18 @@
 
 #include sidebar.html
 
-<div class="demoTiles">
-<img class="demoTile" src="oglc.png">
-<img class="demoTile" src="oglc.png">
-<img class="demoTile" src="oglc.png">
+<div class="page portfolio">
+
+<div class="wrapper">
+    <img src="cloudsteroid.png"></img>
+    <img src="oglc.png"></img>
+    <img src="ecollapse.png"></img>
 </div>
 
+</div>
+</div>
+
+#include planets.html
+
 </body>
 </html>
diff --git a/src/root/styles.css b/src/root/styles.css
index ff66856..7a13411 100644
--- a/src/root/styles.css
+++ b/src/root/styles.css
@@ -86,7 +86,7 @@ a.fsText:hover {
     top:var(--title-height);
     margin-top: 40px;
     padding: 10px 0 50px;
-    background-color: var(--foreground-inactive);
+    /*background-color: var(--foreground-inactive);*/
 
     transform: translate(-50%, 0);
 }
@@ -94,12 +94,12 @@ a.fsText:hover {
 .page p {
     margin: 0 40px;
     padding-top: 20px;
-    color: var(--background);
+    color: var(--foreground);
     opacity: 1.0;
 }
 
 .page h1 {
-    color: var(--background);
+    color: var(--foreground-inactive);
 
     padding-left: 60px;
     padding-top: 10px;
@@ -111,7 +111,7 @@ a.fsText:hover {
     position: absolute;
     left: 15px;
     width: max(11vmax, 180px);
-    top: max(var(--title-height), 25%);
+    top: max(var(--title-height), 15%);
     bottom:0;
 
     background-color: var(--background);
@@ -162,5 +162,5 @@ a.fsText:hover {
     transition: color 0.3s;
 }
 
-#include demos.css
+#include portfolio.css
 #include planets.css
