diff --git a/content/index.org b/content/index.org
index c6b87bc..9a36cf9 100644
--- a/content/index.org
+++ b/content/index.org
@@ -1,24 +1,10 @@
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="css/normalize.css" />
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="css/main.css" />
+#+HTML_HEAD: <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
 #+HTML_HEAD: <link rel="preconnect" href="https://fonts.googleapis.com">
 #+HTML_HEAD: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 #+HTML_HEAD: <link href="https://fonts.googleapis.com/css2?family=Playfair:wght@300&display=swap" rel="stylesheet">
 #+HTML_DOCTYPE: html5
 #+HTML_CONTAINER: div
 
-#+BEGIN_EXPORT html
-<svg class="o-grad" xmlns='http://www.w3.org/2000/svg'>
-<filter id='noiseFilter'>
-    <feTurbulence
-    type='fractalNoise'
-    baseFrequency='6.29'
-    numOctaves='3'
-    stitchTiles='stitch'/>
-</filter>
-</svg>
-<div class="content-topbar" id="content-topbar-4"></div>
-#+END_EXPORT
-
 * Joseph Ferano
 -----
 ** About
diff --git a/images/resized/slide-01_resized.jpg b/images/resized/slide-01_resized.jpg
new file mode 100644
index 0000000..90f05bc
Binary files /dev/null and b/images/resized/slide-01_resized.jpg differ
diff --git a/images/resized/slide-02_resized.jpg b/images/resized/slide-02_resized.jpg
new file mode 100644
index 0000000..bcad499
Binary files /dev/null and b/images/resized/slide-02_resized.jpg differ
diff --git a/images/resized/slide-03_resized.jpg b/images/resized/slide-03_resized.jpg
new file mode 100644
index 0000000..d3b9255
Binary files /dev/null and b/images/resized/slide-03_resized.jpg differ
diff --git a/images/slide-01.jpeg b/images/slide-01.jpeg
new file mode 100644
index 0000000..3537465
Binary files /dev/null and b/images/slide-01.jpeg differ
diff --git a/images/slide-02.jpeg b/images/slide-02.jpeg
new file mode 100644
index 0000000..fab472a
Binary files /dev/null and b/images/slide-02.jpeg differ
diff --git a/images/slide-03.jpeg b/images/slide-03.jpeg
new file mode 100644
index 0000000..b22672f
Binary files /dev/null and b/images/slide-03.jpeg differ
diff --git a/index-new.html b/index-new.html
new file mode 100644
index 0000000..d2e57da
--- /dev/null
+++ b/index-new.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Joseph Ferano</title>
+    <link rel="stylesheet" href="new.css" type="text/css">
+    <script src="main.js" defer></script>
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <h1 class="site-title">JOSEPH FERANO</h1>
+        <nav>
+          <ul>
+            <li><a href="#about">ABOUT</a></li>
+            <li><a href="#work">WORK</a></li>
+            <li><a href="#resume">RESUME</a></li>
+            <li><a href="#experiments">EXPERIMENTS</a></li>
+            <li><a href="#thoughts">THOUGHTS</a></li>
+          </ul>
+        </nav>
+        <div class="divider"></div>
+      </header>
+
+      <section class="hero">
+        <div class="hero-image">
+          <div class="slideshow" id="heroSlideshow">
+            <img src="./images/resized/slide-01_resized.jpg" alt="Slideshow image 1">
+            <img src="./images/resized/slide-02_resized.jpg" alt="Slideshow image 2">
+            <img src="./images/resized/slide-03_resized.jpg" alt="Slideshow image 3">
+          </div>
+        </div>
+        <div class="hero-content">
+          <h2>Versatile Software Engineer &amp; Game Programmer</h2>
+          <p>Building engaging experiences and robust systems across gaming,
+            graphics, blockchain, and web technologies. Multilingual programmer
+            with a diverse technical toolkit for solving complex problems.</p>
+        </div>
+      </section>
+
+      <section id="work" class="portfolio-section">
+        <h2 class="section-title">SELECTED WORKS</h2>
+        <div class="projects-grid">
+          <div class="project-card">
+            <div class="thumbnail">Project Thumbnail</div>
+            <h3>Project One</h3>
+          </div>
+          <div class="project-card">
+            <div class="thumbnail">Project Thumbnail</div>
+            <h3>Project Two</h3>
+          </div>
+          <div class="project-card">
+            <div class="thumbnail">Project Thumbnail</div>
+            <h3>Experiment One</h3>
+          </div>
+          <div class="project-card">
+            <div class="thumbnail">Project Thumbnail</div>
+            <h3>Experiment Two</h3>
+          </div>
+        </div>
+      </section>
+
+      <footer>
+        <p>&copy; Joseph Ferano 2025</p>
+      </footer>
+    </div>
+
+  </body>
+</html>
diff --git a/index.html b/index.html
index b9c11c3..fb6ca8a 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,7 @@
         <p>I'm a game programmer, but I also enjoy writing software in general.
         I am still working on this site, but you can check out some of my work
         in the links below.</p>
+        <h2>Blog</h2>
         <h2>Games</h2>
         <ul>
           <li>
diff --git a/main.css b/main.css
deleted file mode 100644
index b38fe13..0000000
--- a/main.css
+++ /dev/null
@@ -1,141 +0,0 @@
-#topbar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: #594F4F;
-    width: 100%;
-    /* height: 12px; */
-}
-
-.content-topbar {
-    width: 100%;
-    height: 20px;
-    /* margin: -24px; */
-}
-
-#content-topbar-1 { background-color: hsla(84,91%,87%, 0.9); }
-#content-topbar-2 { background-color: hsla(134,52%,75%,0.9); }
-#content-topbar-3 { background-color: hsla(177,43%,47%,0.9); }
-#content-topbar-4 { background-color: hsla(190,21%,42%,0.9); }
-#content-topbar-5 { background-color: hsla(0,6%,33%,   0.9); }
-/* #E5FCC2, 5%) 0%, */
-/* #9DE0AD, 5%) 20%, */
-/* #45ADA8, 5%) 30%, */
-/* #547980, 5%) 40%, */
-/* #594F4F, 5%) 60%, */
-/* #594F4F, 5%) 100%) */
-
-body {
-  /* margin: 0; */
-}
-
-.o-grad {
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none; /* Allow clicks to reach underlying content */
-}
-body::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  filter: url(#noiseFilter);
-  opacity: 0.25; /* Adjust the opacity value as needed */
-  z-index: -1;
-  mix-blend-mode: difference;
-}
-
-body {
-  background: linear-gradient(
-    180deg,
-    hsla(84, 91%, 87%, 0.8) 0%,
-    hsla(134, 52%, 75%, 0.8) 20%,
-    hsla(177, 43%, 47%, 0.8) 30%,
-    hsla(190, 21%, 42%, 0.8) 40%,
-    hsla(0, 6%, 25%, 0.8) 60%,
-    hsla(0, 6%, 25%, 1) 100%
-  ) no-repeat;
-  background-color: hsla(0, 6%, 25%, 1);
-  margin: auto;
-  max-width: 600px;
-  line-height: 1.6;
-  font-size: 18px;
-  color: #4f5b66;
-  padding: 10px 20px;
-}
-
-p {
-    font-family: 'Playfair', serif;
-    /* margin: 0px 0px -30px 0px; */
-    /* padding: 0px; */
-}
-
-div.gallery {
-    float: left;
-    /* margin: -10px; */
-    width: 200px;
-}
-
-span {
-    font-family: 'Playfair', serif;
-}
-
-#content {
-    background-color: hsla(84, 20%, 99%, 1);
-    position: relative;
-    /* padding: 24px; */
-}
-
-#content-body {
-    padding: 24px;
-}
-
-hr {
-    color: hsla(0,6%,33%,   0.9);
-}
-h1 {
-    color: hsla(190, 21%, 36%, 1);
-    font-family: 'Playfair', serif;
-    /* margin-top: -5px; */
-}
-
-h2, h3 {
-    color: hsla(190, 21%, 36%, 1);
-    line-height: 1.2;
-    font-family: 'Playfair', serif;
-}
-
-a.svg-icon {
-    text-decoration: none;
-}
-
-a.svg-icon:hover {
-    text-decoration: none;
-}
-
-svg:hover {
-    fill: #000;
-}
-
-a {
-    color: #333;
-    text-decoration: none;
-    font-family: 'Playfair', sans-serif;
-    /* margin: 0px 0px 50px 0px; */
-}
-
-a:hover {
-    color: #1d3557;
-    text-decoration: underline;
-}
-
-a:active {
-    color: #55;
-}
-
-a:visited {
-    color: #666;
-}
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..85c568d
--- /dev/null
+++ b/main.js
@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const slideshow = document.getElementById('heroSlideshow');
+    const slides = slideshow.querySelectorAll('img');
+    let currentSlide = 0;
+    
+    slides.forEach((s) => s.style.opacity = '0');
+
+    setTimeout(() => {
+        slides[0].style.opacity = '1';
+    }, 100);
+    
+    function nextSlide() {
+        slides[currentSlide].style.opacity = 0;
+        setTimeout(() => {
+            currentSlide = (currentSlide + 1) % slides.length;
+            slides[currentSlide].style.opacity = 1;
+        }, 500);
+    }
+    
+    setInterval(nextSlide, 4000);
+
+    // Fade project cards
+    const cards = document.querySelectorAll('.project-card');
+    cards.forEach((card, index) => {
+        card.style.opacity = '0';
+        setTimeout(() => {
+            card.style.transition = 'opacity 0.5s ease';
+            card.style.opacity = '1';
+        }, 100 * index);
+    });
+});
diff --git a/new.css b/new.css
new file mode 100644
index 0000000..231ec53
--- /dev/null
+++ b/new.css
@@ -0,0 +1,219 @@
+/* Base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Helvetica', 'Arial', sans-serif;
+    background-color: #ffffff;
+    color: #333333;
+    line-height: 1.6;
+    text-align: center;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    position: relative;
+}
+
+/* Header styles */
+header {
+    padding: 40px 0 20px;
+}
+
+.site-title {
+    font-size: 28px;
+    font-weight: 300;
+    letter-spacing: 1px;
+    margin-bottom: 20px;
+}
+
+/* Navigation */
+nav {
+    margin-bottom: 20px;
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+}
+
+nav a {
+    text-decoration: none;
+    color: #555555;
+    font-size: 14px;
+    letter-spacing: 1px;
+    transition: color 0.3s ease;
+}
+
+nav a:hover {
+    color: #7b9ea8;
+}
+
+/* Divider */
+.divider {
+    width: 600px;
+    height: 1px;
+    background-color: #7b9ea8;
+    margin: 0 auto 10px;
+    opacity: 0.8;
+}
+
+/* Hero section */
+.hero {
+    padding: 20px 0 20px;
+    display: flex;
+    justify-content: space-between;
+    gap: 40px;
+}
+
+.hero-content {
+    flex: 1;
+}
+
+.hero h2 {
+    font-size: 24px;
+    font-weight: 400;
+    margin-bottom: 20px;
+}
+
+.hero p {
+    font-size: 16px;
+    color: #555555;
+    max-width: 700px;
+}
+
+.hero-image {
+    flex: 0 0 auto;
+    width: 800px;
+    /* height: 600px; */
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.slideshow {
+  position: relative;
+  border: 1px solid black;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+  background-color: #f7f7f7;
+  width: 500px;
+  height: 500px;
+  overflow: hidden;
+}
+
+.slideshow img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: opacity 0.5s ease;
+  opacity: 0;
+}
+
+@media (max-width: 768px) {
+    .hero {
+        flex-direction: column-reverse;
+        text-align: center;
+    }
+    
+    .hero-image {
+        margin-bottom: 20px;
+        width: 100%;
+    }
+}
+
+/* Portfolio section */
+.portfolio-section {
+    padding: 20px 0 60px;
+}
+
+.section-title {
+    font-size: 18px;
+    letter-spacing: 1px;
+    margin-bottom: 30px;
+}
+
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 40px;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+.project-card {
+    background-color: #f7f7f7;
+    border: 1px solid #e0e0e0;
+    padding: 20px;
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    cursor: pointer;
+}
+
+.project-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+}
+
+.project-card h3 {
+    font-size: 14px;
+    color: #555555;
+    font-weight: 400;
+}
+
+/* Project thumbnail placeholder - replace with your actual thumbnails */
+.thumbnail {
+    width: 100%;
+    height: 120px;
+    background-color: #e0e0e0;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: #777;
+}
+
+/* Footer */
+footer {
+    padding: 40px 0 20px;
+    color: #7b9ea8;
+    font-size: 12px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .projects-grid {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 20px;
+    }
+    
+    nav ul {
+        gap: 20px;
+    }
+}
+
+@media (max-width: 480px) {
+    .projects-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    nav ul {
+        flex-direction: column;
+        gap: 10px;
+    }
+}
+
