diff --git a/Desktop/Projects/TPcode/.gitignore b/.gitignore
similarity index 100%
rename from Desktop/Projects/TPcode/.gitignore
rename to .gitignore
diff --git a/CNAME b/CNAME
new file mode 100644
index 0000000..213b6d9
--- /dev/null
+++ b/CNAME
@@ -0,0 +1 @@
+nashua.codes
\ No newline at end of file
diff --git a/Desktop/Projects/TPcode/img/nashuaBG.jpg b/Desktop/Projects/TPcode/img/nashuaBG.jpg
deleted file mode 100644
index cbd90cb..0000000
Binary files a/Desktop/Projects/TPcode/img/nashuaBG.jpg and /dev/null differ
diff --git a/Desktop/Projects/TPcode/img/tommyAvatar2.jpg b/Desktop/Projects/TPcode/img/tommyAvatar2.jpg
deleted file mode 100644
index 81a09a8..0000000
Binary files a/Desktop/Projects/TPcode/img/tommyAvatar2.jpg and /dev/null differ
diff --git a/Desktop/Projects/TPcode/main.scss b/Desktop/Projects/TPcode/main.scss
deleted file mode 100644
index 1a52f18..0000000
--- a/Desktop/Projects/TPcode/main.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-$fontColor: (
-    primaryFont: white,
-    secondaryFont: black, 
-); 
-
-$backgroundColor: (
-    intro: white,
-    upComingEvent: white,
-    theTeam: white,
-);
-
-@function backgroundColor($color-name) {
-    @return map-get($backgroundColor , $color-name)
-}
-
-@function fontColor($color-name) {
-    @return map-get($fontColor, $color-name)
-}
-
-body, html {
-    height: 100%;
-}
-
-body {
-    margin: 0%;
-    font-family: 'Helvetica';
-}
-
-
-.bgimg {
-    position: relative;
-    height: 100vh;
-    width: 100vw;
-    z-index: -1;
-}
-
-.headerCard {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-image: url('/img/nashuaBG.jpg');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-}
-
-header {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
-        h1 {
-            font-size: 3rem;
-            color: fontColor(primaryFont);
-            font-weight: normal;
-            margin: 0rem;
-        }
-
-        p {
-            font-size: 1rem;
-            color: fontColor(primaryFont);
-            margin-bottom: 1rem;
-        }
-
-        .arrowDown {
-            color: fontColor(primaryFont)
-        }
-}
-
-.main {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.intro {
-    flex-basis: 33%;
-    background-color: backgroundColor(intro);
-
-    h2 {
-        margin-top: .5rem;
-        margin-bottom: 0;
-        color: fontColor(secondaryFont);
-        align-self: center;
-    }
-    p {
-        margin-left: .8rem;
-        margin-right: .8rem;
-        align-self: center;
-    }
-}
-
-.eventCard {
-    flex-basis: 33%;
-    background-color: backgroundColor(upComingEvent);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    h2 {
-        margin: 0;
-    }
-
-    ul {
-        list-style: none;
-        padding: 0;
-
-        li {
-            margin-bottom: .4rem;
-
-            .eventLink {
-                text-decoration: none;
-                color: fontColor(secondaryFont);
-            }
-        }
-    }
-}
-
-.teamCard {
-    flex-basis: 33%;
-    background-color: backgroundColor(theTeam);
-
-    h2 {
-        margin: 0;
-    }
-
-    p {
-        margin-left: .8rem;
-        margin-right: .8rem;
-    }
-    .tommyAvatar {
-        border-radius: 50%;
-    }
-}
-
diff --git a/img/callout.jpg b/img/callout.jpg
new file mode 100644
index 0000000..0bf795d
Binary files /dev/null and b/img/callout.jpg differ
diff --git a/img/nashuaBG.jpg b/img/nashuaBG.jpg
new file mode 100644
index 0000000..285198e
Binary files /dev/null and b/img/nashuaBG.jpg differ
diff --git a/img/tommyAvatar2.jpg b/img/tommyAvatar2.jpg
new file mode 100644
index 0000000..035be37
Binary files /dev/null and b/img/tommyAvatar2.jpg differ
diff --git a/Desktop/Projects/TPcode/index.html b/index.html
similarity index 64%
rename from Desktop/Projects/TPcode/index.html
rename to index.html
index 3ab9d7b..5be9735 100644
--- a/Desktop/Projects/TPcode/index.html
+++ b/index.html
@@ -12,55 +12,52 @@
 </head>
 
 <body>
-
-    <!-- <img class="bgimg" src="/img/bgimg.jpeg" alt="computer on a white desk" /> -->
     <div class="headerCard">
         <header class="header">
             <h1>Nashua Codes</h1>
             <p>Free Programming Classes</p>
-            <span class="arrowDown"><i class="fas fa-chevron-circle-down fa-2x"></i></span>
+            <a class="arrowDown" onclick="scrollDown();"><i class="fas fa-chevron-circle-down fa-2x"></i></a>
         </header>
-        
+
     </div>
 
-    <main class="main">
+    <main class="main" id="mainLoc">
         <section class="intro">
             <h2>
                 Intro
             </h2>
             <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis eros vel libero bibendum
-                    vulputate. Sed vel enim porttitor, mattis eros sit amet, tempor enim. Morbi in tincidunt neque.
-                    Maecenas vitae bibendum justo. Praesent pharetra mollis ante quis sodales. Nulla in vestibulum
-                    augue, at varius augue. Quisque finibus urna eu elit porta, ac rhoncus metus imperdiet. Donec
-                    auctor ipsum nisi, eu pulvinar turpis egestas sit amet. 
-                </p>
+                Nashua codes! is a group of talented engineers trying to improve the computer science education in
+                Southern New Hampshire, and Northern Mass. Our workshops are free to the public.
+            </p>
         </section>
 
         <section class="eventCard">
             <h2>
                 Upcoming Events
             </h2>
-            <ul>
+            <span>Coming soon!</span>
+            <!-- <ul>
                 <li>
                         <i class="far fa-calendar-alt"></i> <a class="eventLink" href="#"> Novmeber 1st- Intro to JS</a>
                 </li>
                 <li>
                         <i class="far fa-calendar-alt"></i> <a class="eventLink" href="#">November 21st- Intro to html</a>
                 </li>
-            </ul>
+            </ul> -->
         </section>
         <section class="teamCard">
             <h2>
                 The Team
             </h2>
-            <img class="tommyAvatar" src="/img/tommyAvatar2.jpg"/>
+            <img class="tommyAvatar" src="/img/tommyAvatar2.jpg" />
             <p>
-                Insert Bio Here.....
+                Tommy “TerribleDev” Parnell is a Senior Software Engineer at Cargurus. Tommy loves all things web and
+                mobile!
             </p>
         </section>
     </main>
-
+    <script src="main.js" type="text/javascript" />
 </body>
 
 </html>
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..1449a73
--- /dev/null
+++ b/main.js
@@ -0,0 +1,5 @@
+"use strict";
+
+function scrollDown(){
+    document.getElementById('mainLoc').scrollIntoView({block: 'start', behavior: 'smooth'});
+}
\ No newline at end of file
diff --git a/main.scss b/main.scss
new file mode 100644
index 0000000..18f2938
--- /dev/null
+++ b/main.scss
@@ -0,0 +1,139 @@
+$darkBg: #373837;
+$lightBg: white;
+
+$darkFont: black;
+$lightFont: white;
+
+
+
+ %dark {
+    background-color: $darkBg;
+    color: $lightFont
+}
+
+%light {
+    background-color: $lightBg;
+    $color: $darkFont
+}
+
+@mixin textShadow(){
+    text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
+    border: 10px;
+}
+
+
+body {
+    margin: 0%;
+    font-family: 'Helvetica';
+}
+
+
+.bgimg {
+    position: relative;
+    height: 100vh;
+    width: 100vw;
+    z-index: -1;
+}
+
+.headerCard {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: url('/img/callout.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    @media only screen and (max-width: 768px) {
+        background-image: url('/img/callout.jpg');
+        background-repeat: no-repeat;
+        background-size: auto;
+        background-position-x: 22%;
+        background-position-y: bottom;
+    }
+}
+
+header {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+        h1 {
+            font-size: 3rem;
+            color: $lightFont;
+            font-weight: normal;
+            margin: 0rem;
+            @include textShadow();
+            
+        }
+
+        p {
+            font-size: 1rem;
+            color: $lightFont;
+            margin-bottom: 1rem;
+            @include textShadow();
+        }
+
+        .arrowDown {
+            color: $lightFont;
+            @include textShadow();
+            cursor: pointer;
+        }
+}
+
+.main {
+    min-height: 100vh;
+    min-width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    & > section:nth-child(odd) {
+        @extend %dark;
+    }
+    & > section {
+        min-height: 33vh; // atleast as tall as 33% of the view port
+        width: 100%; // 100% of the parent which is full width of viewport
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        p {
+            padding-left: .8rem;
+            padding-right: .8rem;
+        }
+    }
+}
+
+.intro {
+        h2 {
+            margin-top: .5rem;
+            margin-bottom: 0;
+        }
+}
+
+.eventCard {
+    h2 {
+        margin: 0;
+    }
+
+    ul {
+        list-style: none;
+        padding: 0;
+
+        li {
+            margin-bottom: .4rem;
+
+            a {
+                text-decoration: underline;
+                color: $darkFont;
+            }
+        }
+    }
+}
+
+.teamCard {
+    .tommyAvatar {
+        border-radius: 50%;
+    }
+}
+