diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro
index 181da7d28d..2dae9ac046 100644
--- a/examples/portfolio/src/components/MainHead.astro
+++ b/examples/portfolio/src/components/MainHead.astro
@@ -1,9 +1,16 @@
 ---
-const { title = 'Jeanine White: Personal Site' } = Astro.props;
----
+export interface Props {
+    title: string;
+    description?: string[];
+}
 
+export function __state({props}: {props: Props}) {
+    return {description: props.description || 'This is the default site descrition.'};
+}
+---
 <meta charset="UTF-8">
-<title>{title}</title>
+<title>{$props.title}</title>
+<meta name="description" content={$state.description}>
 <link rel="stylesheet" type="text/css" href="/global.css">
 <link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet">
\ No newline at end of file
diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro
index 4ebfed8e11..233bdc6371 100644
--- a/examples/portfolio/src/layouts/project.astro
+++ b/examples/portfolio/src/layouts/project.astro
@@ -3,12 +3,10 @@ import MainHead from '../components/MainHead.astro';
 import Button from '../components/Button/index.jsx';
 import Footer from '../components/Footer/index.jsx';
 import Nav from '../components/Nav/index.jsx';
-
-const { content } = Astro.props;
 ---
 <html>
   <head>
-    <MainHead title={content.title} />
+    <MainHead title={$props.content.title} />
     <style lang="scss">
       .hero {
         padding: 8rem;
diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro
index d6b10e6632..3bcff2505f 100644
--- a/examples/portfolio/src/pages/index.astro
+++ b/examples/portfolio/src/pages/index.astro
@@ -1,245 +1,12 @@
 ---
 // Component Imports
 import MainHead from '../components/MainHead.astro';
-import Button from '../components/Button/index.jsx';
-import Nav from '../components/Nav/index.jsx';
-import Footer from '../components/Footer/index.jsx';
-import PorfolioPreview from '../components/PortfolioPreview/index.jsx';
-
-// Data Fetching: List all Markdown posts in the repo.
-const projects = await Astro.fetchContent(import.meta.glob('./project/**/*.md'));
-const featuredProject = projects[0];
-
-// Full Astro Component Syntax:
-// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md
 ---
 <html>
   <head>
     <MainHead title="Jeanine White: Personal Site" />
-    <style lang="scss">
-      $w-s: 750px;
-
-      .hero {
-        position: relative;
-        overflow: hidden;
-
-        @media (min-width: $w-s) {
-          height: 45vw;
-        }
-      }
-
-      .img {
-        display: block;
-        width: 100%;
-        height: auto;
-      }
-
-      .gradient,
-      .gradient2 {
-        background-image: url('/assets/mesh-gradient.jpg');
-        pointer-events: none;
-        mix-blend-mode: screen;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 2;
-      }
-
-      .gradient2 {
-        mix-blend-mode: multiply;
-      }
-
-      .overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 10;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-        padding-left: 2rem;
-
-        @media (min-width: $w-s) {
-          padding-left: 4rem;
-        }
-      }
-
-      .title {
-        font-weight: 900;
-        font-size: var(--f-u8);
-        margin-bottom: 0.5rem;
-        margin-top: 0;
-
-        @media (min-width: $w-s) {
-          font-size: var(--f-u12);
-        }
-      }
-
-      .grid {
-        display: grid;
-        grid-gap: 2rem;
-
-        @media (min-width: 1200px) {
-          grid-template-columns: 2fr 1fr;
-        }
-      }
-
-      .sectionTitle {
-        font-weight: 700;
-        font-size: var(--f-u8);
-        margin-top: 4rem;
-        margin-bottom: 2rem;
-      }
-
-      .role {
-        position: relative;
-        display: inline-block;
-        font-weight: 900;
-        color: var(--t-bg);
-        background-color: var(--t-fg);
-        padding: 0.25em 0.5em;
-        z-index: 2;
-
-        @media (min-width: $w-s) {
-          font-size: var(--f-u3);
-        }
-
-        + .role {
-          margin-left: 1em;
-        }
-
-        &:nth-of-type(1) {
-          .invert {
-            background-color: var(--c-pink);
-          }
-        }
-
-        &:nth-of-type(2) {
-          .invert {
-            background-color: var(--c-blue);
-          }
-        }
-
-        &:nth-of-type(3) {
-          .invert {
-            background-color: var(--c-green);
-          }
-        }
-
-        &:hover {
-          .invert {
-            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-          }
-        }
-      }
-
-      .invert {
-        position: absolute;
-        color: var(--t-fg);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        pointer-events: none;
-        clip-path: polygon(0% 100%, 100% 100%, 100% 200%, 0% 200%);
-        transition: clip-path cubic-bezier(0.4, 0, 0.5, 1) 150ms;
-      }
-
-      .desc {
-        font-size: var(--f-u2);
-        margin-top: 1.5rem;
-        margin-bottom: 0;
-      }
-
-      .subtitle {
-        display: block;
-        font-weight: 400;
-        font-size: var(--f-d6);
-        letter-spacing: -0.0625em;
-      }
-
-      .bio {
-        line-height: 2;
-        margin-bottom: 2rem;
-
-        > span:first-of-type {
-          line-height: 1;
-          margin-bottom: 0.5em;
-          display: block;
-          font-weight: 700;
-          font-size: var(--f-u4);
-        }
-      }
-    </style>
   </head>
   <body>
-    <Nav />
-    <header class="hero">
-      <img
-        width="1600"
-        height="1131"
-        class="img"
-        src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75"
-        srcSet="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w,
-        https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 1200w,
-        https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1600&q=75 1600w,
-        https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=75 2400w,"
-        sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px"
-      />
-      <div class="gradient" />
-      <div class="gradient2" />
-      <div class="overlay">
-        <h1 class="title">
-          <small class="subtitle">The personal site of </small>Jeanine White
-        </h1>
-        <div>
-          <span class="role">
-            👩‍💻 Developer <span class="invert">👩‍💻 Developer</span>
-          </span>&nbsp;
-          <span class="role">
-            🎤 Speaker <span class="invert">🎤 Speaker</span>
-          </span>&nbsp;
-          <span class="role">
-            ✏️ Writer <span class="invert">✏️ Writer</span>
-          </span>
-        </div>
-        <p class="desc">Lover of dogs, roadtrips, and poetry.</p>
-      </div>
-    </header>
-    <main class="wrapper mt4 mb4">
-      <div class="grid">
-        <div class="section">
-          <h3 class="sectionTitle">Selected Work</h3>
-          <PorfolioPreview project={featuredProject} />
-          <div class="tac mt4">
-            <a href="/projects">
-              <Button>View All</Button>
-            </a>
-          </div>
-        </div>
-        <div class="section">
-          <h3 class="sectionTitle">About me</h3>
-          <p class="bio">
-            <span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '}
-            <a href="https://github.com/snowpackjs/astro" target="_blank" rel="nofollow">
-              Astro
-            </a>
-            , a new way to build static sites. This is just an example template for you to modify.
-          </p>
-          <p>
-            <a href="/about">Read more</a>
-          </p>
-        </div>
-      </div>
-    </main>
-    <Footer />
+    Test
   </body>
 </html>
diff --git a/packages/astro/src/compiler/index.ts b/packages/astro/src/compiler/index.ts
index 671c3f57cd..5a02d031e8 100644
--- a/packages/astro/src/compiler/index.ts
+++ b/packages/astro/src/compiler/index.ts
@@ -124,8 +124,11 @@ const Astro = {
 };
 const __Astro = Astro;
 
-// <script astro></script>
+
+// Frontmatter Script
 ${result.imports.join('\n')}
+${result.script}
+
 ${
   result.hasCustomElements
     ? `
@@ -141,16 +144,18 @@ const __astro_element_registry = new AstroElementRegistry({
 // \`__render()\`: Render the contents of the Astro module.
 import { h, Fragment } from 'astro/dist/internal/h.js';
 const __astroInternal = Symbol('astro.internal');
-async function __render(props, ...children) {
+async function __render($props, ...children) {
   const Astro = {
     ...__Astro,
-    props,
-    css: props[__astroInternal]?.css || [],
-    request: props[__astroInternal]?.request || {},
-    isPage: props[__astroInternal]?.isPage || false,
+    // props,
+    css: $props[__astroInternal]?.css || [],
+    request: $props[__astroInternal]?.request || {},
+    isPage: $props[__astroInternal]?.isPage || false,
   };
 
-  ${result.script}
+  const $state = typeof __state !== 'undefined' ? __state({props: $props}) : {};
+  console.log('$state', $state);
+
   return h(Fragment, null, ${result.html});
 }
 export default { 
@@ -194,10 +199,9 @@ export async function __renderPage({request, children, props, css}) {
   return childBodyResult;
 };
 
-${result.exports.join('\n')}
-
 `;
 
+console.log(moduleJavaScript);
   return {
     result,
     contents: moduleJavaScript,
