diff --git a/pages/about.html b/pages/about.html
index b4ae215c4..36818f615 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -1,12 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="../styles/style.css" rel="stylesheet">
   <title>Document</title>
 </head>
-<body>
-  
+
+<body class = "container">
+
+  <header id="top" >
+    <h1>About Me</h1>
+  </header>
+
+    <section id="introduction">
+      <p>
+      Hi! My name is Sujin, and I'm a full stack developer with a combined interest in transportation planning. I'm passionate about making cities more equitable places to live for everyone. Outside of work I love to dance, do yoga, swim, bike, cook, and longboard around NYC. 
+      </p>
+    </section>
+
+  <footer id="last">
+    <!-- <h4>Lets create something together!</h4>
+    <p>
+      I'm avalaible for freelance projects and employment opportunities. Take a look at my resume and feel free to reach out!
+    </p> -->
+    <nav id="website_nav">
+        <ul>
+          <li><a href="file:///Users/susan_sujin/ada/temp/personal-portfolio-site/pages/index.html#">Home</a></li>
+          <li><a href="file:///Users/susan_sujin/ada/temp/personal-portfolio-site/pages/portfolio.html#">Portfolio</a></li>
+        </ul>
+    </nav>
+  </footer>
+  <!-- <a href="file:///Users/susan_sujin/ada/temp/personal-portfolio-site/pages/index.html#">Home</a> -->
 </body>
 </html>
\ No newline at end of file
diff --git a/pages/index.html b/pages/index.html
index b4ae215c4..032829d28 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -1,12 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>Sujin Shin Personal Portfolio Site</title>
+  <link href="../styles/style.css" rel="stylesheet">
 </head>
+
 <body>
-  
+
+  <header id="index_title">
+    <h1>Sujin Shin</h1>
+  </header>
+
+  <footer>
+    <nav>
+        <ul>
+          <li><a href="file:///Users/susan_sujin/ada/temp/personal-portfolio-site/pages/about.html#">About Me</a></li>
+          <li><a href="file:///Users/susan_sujin/ada/temp/personal-portfolio-site/pages/portfolio.html#">Portfolio</a></li>
+        </ul>
+    </nav>
+  </footer>
+
+<!-- 
+  - Has the following tags: `<header>`, `<footer>`, and `<nav>`
+- Inside of the `<nav>`, there are links to all of the other pages 
+  -->
+
+<!-- connect with me on linkedin -->
+<!-- email -->
+<!-- resume -->
+<!-- git hub link -->
+
+
 </body>
 </html>
\ No newline at end of file
diff --git a/pages/portfolio.html b/pages/portfolio.html
index b4ae215c4..193f79a4b 100644
--- a/pages/portfolio.html
+++ b/pages/portfolio.html
@@ -4,9 +4,34 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="../styles/style.css" rel="stylesheet">
   <title>Document</title>
 </head>
-<body>
-  
+
+<body class="portfolio_container">
+
+  <header id="portfolio_title">
+    <h1>Portfolio</h1> 
+  </header>
+
+  <section id="portfolio_links">
+    <h2>Links to GitHub Projects</h2>
+    <ul>
+      <li><a href="https://github.com/sujinshin8/my-hello-books-api">Hello Books API</a></li>
+      <li><a href="https://github.com/sujinshin8/ada_viewing_party">Viewing Party</a></li>
+    </ul>
+  </section>
+
+  <footer id="website_nav">
+    <h3>Website Navigator</h3>
+    <nav>
+        <ul>
+          <li><a href="file:///Users/susan_sujin/ada/temp/personal-portfolio-site/pages/index.html#">Home</a></li>
+          <li><a href="file:///Users/susan_sujin/ada/temp/personal-portfolio-site/pages/about.html#">About Me</a></li>
+        </ul>
+    </nav>
+  </footer>
+
 </body>
+
 </html>
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 000000000..84ffe76ae
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,86 @@
+h1 {
+    color: white;
+    font-family: sans-serif;
+    font-weight: 600;
+    font-size: 3em;
+}
+
+body {
+    background-color: lightblue;
+}
+
+nav {
+    font-family: sans-serif;
+}
+
+p {
+    font-family: sans-serif;
+    color: white;
+    background-color: lightseagreen;
+}
+
+footer h4 {
+    font-family: sans-serif;
+    color: lightseagreen;
+    font-size: 2em;
+    font-weight: 400;
+}
+
+/* li {
+    list-style: none;
+} */
+
+.container {
+    width: 100vw;
+    height: 100vh;
+  
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+}
+
+#top {
+    background-color: lightcoral;
+    grid-column: 1 / 5;
+    grid-row: 1 / 1;
+    border: white 1px solid;
+}
+
+#introduction {
+    grid-row: 2 / 2;
+    grid-column: 1 / 3;
+}
+  
+#last {
+    grid-column: 1 / 5;
+    grid-row: 3 / 3;
+}
+
+/* * {
+    border: black 1px solid;
+} */
+
+#portfolio_title {
+    border: white 1px solid;
+}
+
+#index_title {
+    border: white 1px solid;
+}
+
+#portfolio_links {
+    font-family: sans-serif;
+    color: white;
+    background-color: lightcoral;
+}
+
+#website_nav {
+    font-family: sans-serif;
+    color: white;
+}
+
+.portfolio_container {
+    display: flex;
+    flex-direction: column;
+    
+}
\ No newline at end of file
