Ada-C9 · cmn53 · Mar 16, 2018 · Mar 19, 2018 · Mar 19, 2018 · Mar 19, 2018
diff --git a/images/cuyahoga_2.jpg b/images/cuyahoga_2.jpg
diff --git a/images/gate.jpg b/images/gate.jpg
diff --git a/images/lock_1.jpg b/images/lock_1.jpg
diff --git a/images/lock_2.jpg b/images/lock_2.jpg
diff --git a/images/lock_3.jpg b/images/lock_3.jpg
diff --git a/images/me.jpg b/images/me.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css?family=Muli:400,600|Ubuntu:700" rel="stylesheet">
+    <link rel="stylesheet" href="stylesheets/gen.css">
+    <link rel="stylesheet" href="stylesheets/index.css">
+    <title>Caroline Nardi</title>
+  </head>
+  <body>
+    <div class="container">
+
+      <div class="name">
+        caroline nardi
+      </div>
+
+      <nav class="nav">
+        <ul>
+          <li><a href="index.html">home</a></li>
+          <li><a href="pages/projects.html">projects</a></li>
+          <li><a href="pages/blog.html">blog</a></li>
+          <li><a href="pages/about.html">about</a></li>
+        </ul>
+      </nav>
+
+      <header class="header">
+        <img src="images/gate.jpg" alt="gate">
+      </header>
+
+      <section class="welcome">
+        <h1>welcome</h1>
+        <h2>to my hastily assembled portfolio</h2>
+      </section>
+
+      <section class="content">
+        <a href="pages/projects.html">
+          <div class="lock-2">
+            <h2>projects</h2>
+          </div>
+        </a>
+        <a href="pages/blog.html">
+          <div class="lock-1">
+            <h2>blog</h2>
+          </div>
+        </a>
+        <a href="pages/about.html">
+          <div class="lock-3">
+            <h2>about me</h2>
+          </div>
+        </a>
+      </section>
+
+      <footer class="footer">
+        <div>
+          <div class="orange"></div>
+          <div class="brown"></div>
+          <div class="green"></div>
+          <div class="light-green"></div>
+        </div>
+      </footer>
+
+    </div>
+  </body>
+</html>
diff --git a/pages/about.html b/pages/about.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css?family=Muli:400,600|Ubuntu:700" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="../stylesheets/gen.css">
+    <link rel="stylesheet" href="../stylesheets/about.css">
+    <title>Caroline Nardi</title>
+  </head>
+  <body>
+    <div class="container">
+
+      <div class="name">
+        caroline nardi
+      </div>
+
+      <nav class="nav">
+        <ul>
+          <li><a href="../index.html">home</a></li>
+          <li><a href="projects.html">projects</a></li>
+          <li><a href="blog.html">blog</a></li>
+          <li><a href="about.html">about</a></li>
+        </ul>
+      </nav>
+
+      <header class="header">
+        <img src="../images/cuyahoga_2.jpg" alt="cuyahoga river">
+      </header>
+
+      <aside class="about-me">
+        <h1>about me</h1>
+        <img src="../images/me.jpg" alt="portrait">
+      </aside>
+
+      <section class="description">
+        <h2>Hi, I'm Caroline.</h2>
+        <p>I am a proud Clevelander and product of the Industrial Midwest.</p>
+        <p>I am a former transit operations planner, enduring transit geek, and aspiring full-stack developer.</p>
+        <p>I am interested in the intersection between technology and urban design and the possibility for shared infrastructure to create better connected and more resilient communities.</p>
+      </section>
+
+      <section class="contact">
+        <a href="mailto:carolinenardi-at-gmail-dot-com"><i class="fa fa-envelope"></i></a>
+        <a href="https://www.linkedin.com/in/caroline-nardi-425978146/"><i class="fa fa-linkedin"></i></a>
+        <a href="https://twitter.com/medejoelbus"><i class="fa fa-twitter"></i></a>
+      </section>
+
+      <footer class="footer">
+        <div>
+          <div class="orange"></div>
+          <div class="brown"></div>
+          <div class="green"></div>
+          <div class="light-green"></div>
+        </div>
+      </footer>
+
+    </div>
+  </body>
+</html>
diff --git a/pages/blog.html b/pages/blog.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css?family=Muli:400,600|Ubuntu:700" rel="stylesheet">
+    <link rel="stylesheet" href="../stylesheets/gen.css">
+    <link rel="stylesheet" href="../stylesheets/blog.css">
+    <title>Caroline Nardi</title>
+  </head>
+  <body>
+    <div class="container">
+
+      <div class="name">
+        caroline nardi
+      </div>
+
+      <nav class="nav">
+        <ul>
+          <li><a href="../index.html">home</a></li>
+          <li><a href="projects.html">projects</a></li>
+          <li><a href="blog.html">blog</a></li>
+          <li><a href="about.html">about</a></li>
+        </ul>
+      </nav>
+
+      <header class="header">
+        <h1>blogging</h1>
+        <h2>like dubya is still in the white house</h2>
+      </header>
+
+      <main class="main">
+        <ul>
+          <li>
+            <h2>Post 1</h2>
+            <p>
+              Lorem ipsum dolor amet kinfolk put a bird on it pop-up direct trade seitan. Vexillologist occupy affogato truffaut mixtape coloring book, iPhone cred you probably haven't heard of them. Authentic letterpress YOLO, mustache pop-up forage cornhole mixtape fashion axe leggings cold-pressed... <a href=''>read more</a>
+            </p>
+          </li>
+          <li>
+            <h2>Post 2</h2>
+            <p>
+              Try-hard seitan beard cornhole wolf subway tile ramps live-edge paleo master cleanse venmo 3 wolf moon sriracha. Salvia waistcoat mumblecore chia, kombucha lomo skateboard. DIY microdosing shabby chic tumblr yuccie fingerstache. Listicle normcore biodiesel vinyl austin, farm-to-table scenester tousled... <a href=''>read more</a>
+            </p>
+          </li>
+          <li>
+            <h2>Post 3</h2>
+            <p>
+              Intelligentsia shoreditch single-origin coffee seitan venmo meh. Subway tile distillery glossier, microdosing offal selvage man braid aesthetic pour-over craft beer. Microdosing mustache fixie shabby chic, hot chicken vexillologist aesthetic palo santo fingerstache YOLO cornhole synth tilde butcher keffiyeh... <a href=''>read more</a>
+            </p>
+          </li>
+          <li>
+            <h2>Post 4</h2>
+            <p>
+              Taiyaki ennui pok pok typewriter semiotics irony artisan fanny pack. Aesthetic heirloom organic put a bird on it, hashtag bushwick tumeric cardigan pinterest PBR&B sartorial... <a href=''>read more</a>
+            <p>
+          </li>
+          <li>
+            <h2>Post 5</h2>
+            <p>
+              Letterpress deep v gochujang, mustache disrupt franzen narwhal activated charcoal selvage affogato aesthetic heirloom tumeric. Gastropub drinking vinegar XOXO tbh small batch kinfolk, artisan la croix hoodie echo park 90's swag vice cred heirloom... <a href=''>read more</a>
+            </p>
+          </li>
+          <li>
+            <h2>Post 6</h2>
+            <p>
+              Pabst meggings butcher banh mi XOXO cronut four dollar toast bespoke organic succulents yuccie direct trade wayfarers. Swag godard art party, single-origin coffee mlkshk jianbing yuccie... <a href=''>read more</a>
+            </p>
+          </li>
+          <li>
+            <h2>Post 7</h2>
+            <p>
+              Art party yuccie whatever fashion axe keytar before they sold out, narwhal blog street art freegan. Swag jianbing keffiyeh wayfarers polaroid, 8-bit enamel pin whatever. Sustainable franzen everyday carry church-key. YOLO fixie 90's messenger bag four loko mlkshk food truck tacos meh. Farm-to-table four dollar toast kickstarter, truffaut asymmetrical austin poutine hexagon... <a href=''>read more</a>
+            </p>
+          </li>
+          <li>
+            <h2>Post 8</h2>
+            <p>
+              Fam echo park sustainable YOLO knausgaard umami af. Mixtape cronut pinterest kogi prism kitsch poutine mlkshk literally chia iceland subway tile cornhole. Vaporware keffiyeh sriracha kombucha fashion axe PBR&B glossier unicorn dreamcatcher chia cliche banjo austin. Post affogato man bun tote bag heirloom selfies brooklyn biodiesel bushwick distillery +1... <a href=''>read more</a>
+            </p>
+          </li>
+          <li>
+            <h2>Post 9</h2>
+            <p>
+              Skateboard neutra truffaut aliqua leggings gluten-free tumeric. Truffaut sartorial taxidermy YOLO. Kinfolk chicharrones esse lorem. Selfies truffaut green juice, knausgaard deep v typewriter culpa coloring book slow-carb man bun hella echo park pour-over DIY kogi. Asymmetrical ad est blog... <a href=''>read more</a>
+            </p>
+        </ul>
+      </main>
+
+      <footer class="footer">
+        <div>
+          <div class="orange"></div>
+          <div class="brown"></div>
+          <div class="green"></div>
+          <div class="light-green"></div>
+        </div>
+      </footer>
+
+    </div>
+  </body>
+</html>
diff --git a/pages/projects.html b/pages/projects.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css?family=Muli:400,600|Ubuntu:700" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="../stylesheets/gen.css">
+    <link rel="stylesheet" href="../stylesheets/projects.css">
+    <title>Caroline Nardi</title>
+  </head>
+  <body>
+    <div class="container">
+
+      <div class="name">
+        caroline nardi
+      </div>
+
+      <nav class="nav">
+        <ul>
+          <li><a href="../index.html">home</a></li>
+          <li><a href="projects.html">projects</a></li>
+          <li><a href="blog.html">blog</a></li>
+          <li><a href="about.html">about</a></li>
+        </ul>
+      </nav>
+
+      <header class="header">
+        <h1>projects</h1>
+        <h2>a sample of my student work at ada</h2>
+      </header>
+
+      <aside class="description">
+        <p>I am currently a student at Ada Developers Academy, a full-stack training program for women and gender diverse people in Seattle.</p>
+        <p>This is a sample of some of the things we've worked on so far in class.</p>
+      </aside>
+
+      <main class="main">
+        <ul>
+          <li>
+            <h2>Startrly</h2>
+            <p>Some text here about the goals of the project and the amazing job I did on it.</p>
+            <a class= "button" href="https://github.com/cmn53/Startrly"><i class="fa fa-github"></i></a>
+          </li>
+          <li>
+            <h2>Hotel</h2>
+            <p>Some text here about the goals of the project and the amazing job I did on it.</p>
+            <a class= "button" href="https://github.com/cmn53/hotel"><i class="fa fa-github"></i></a>
+          </li>
+          <li>
+            <h2>Rideshare</h2>
+            <p>Some text here about the goals of the project and the amazing job I did on it.</p>
+            <a class= "button" href="https://github.com/cmn53/oo-ride-share"><i class="fa fa-github"></i></a>
+          </li>
+          <li>
+            <h2>Scrabble</h2>
+            <p>Some text here about the goals of the project and the amazing job I did on it.</p>
+            <a class= "button" href="https://github.com/cmn53/Scrabble"><i class="fa fa-github"></i></a>
+          </li>
+          <li>
+            <h2>Grocery Store</h2>
+            <p>Some text here about the goals of the project and the amazing job I did on it.</p>
+            <a class= "button" href="https://github.com/cmn53/grocery-store"><i class="fa fa-github"></i></a>
+          </li>
+          <li>
+            <h2>Calculator</h2>
+            <p>Some text here about the goals of the project and the amazing job I did on it.</p>
+            <a class= "button" href="https://github.com/cmn53/Calculator"><i class="fa fa-github"></i></a>
+          </li>
+        </ul>
+      </main>
+
+      <footer class="footer">
+        <div>
+          <div class="orange"></div>
+          <div class="brown"></div>
+          <div class="green"></div>
+          <div class="light-green"></div>
+        </div>
+      </footer>
+
+    </div>
+  </body>
+</html>
diff --git a/stylesheets/about.css b/stylesheets/about.css
@@ -0,0 +1,46 @@
+.container {
+  height: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: auto auto auto auto 20px;
+  grid-template-areas:
+    "n n n n n . v v v v v v"
+    "h h h h h h h h h h h h"
+    "a a a a a a d d d d d d"
+    "a a a a a a . c c c c ."
+    "f f f f f f f f f f f f"
+}
+
+.header {
+  grid-area: h;
+}
+
+.header > img {
+  width: 100%;
+  min-width: 1200px;
+}
+
+.about-me {
+  grid-area: a;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 20px;
+}
+
+.about-me > img {
+  border-radius: 50px;
+}
+
+.description {
+  grid-area: d;
+  margin: 20px 20px 0 20px;
+}
+
+.contact {
+  grid-area: c;
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 20px;
+}