Ada-C9 · arrriiii · Mar 16, 2018 · Mar 18, 2018 · Mar 18, 2018 · Mar 19, 2018
diff --git a/html/about.html b/html/about.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>About Page</title>
+  <link rel="stylesheet" href="../styles/normalize.css">
+  <link rel="stylesheet" href="../styles/about.css">
+  <link rel="stylesheet" href="../styles/styles.css">
+</head>
+<body>
+  <nav class="header">
+    <ul>
+      <li>
+        <a href="../index.html">Ari.</a>
+      </li>
+      <li>
+        <a href="../html/portfolio.html">Portfolio.</a>
+      </li>
+      <li>
+        <a href="../html/journal.html">Street Art.</a>
+      </li>
+    </ul>
+  </nav>
+
+  <section class="content-title">
+    <strong>About.</strong>
+
+    <article class="content">
+      <p>
+        I love dessert powder sugar plum pudding apple pie cheesecake gingerbread candy canes. I love sugar plum biscuit marshmallow. Sesame snaps cotton candy jujubes. Marzipan chocolate cake tiramisu cake chupa chups cheesecake fruitcake candy canes. Soufflé cheesecake cupcake I love jelly-o I love sugar plum sesame snaps I love. Lemon drops candy canes danish pie.
+      </p>
+      <p>
+        Soufflé halvah I love halvah tootsie roll candy I love. Sugar plum biscuit brownie jelly bear claw caramels chupa chups soufflé pie. Dragée chocolate bar apple pie bear claw cotton candy jujubes jelly beans gingerbread. Cupcake candy sugar plum biscuit ice cream sesame snaps jelly dragée jujubes.
+      </p>
+      <p>
+        Toffee chupa chups gummi bears croissant I love powder tart I love marshmallow. Gingerbread icing croissant topping chocolate lemon drops I love I love candy. I love I love marzipan I love gummi bears. Halvah gummi bears jujubes candy canes carrot cake cupcake dragée. Lollipop cotton candy topping sugar plum. Dessert muffin biscuit apple pie cupcake bonbon. Powder jujubes oat cake danish.
+      </p>
+    </article>
+  </section>
+
+</body>
+</html>
diff --git a/html/journal.html b/html/journal.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Journal</title>
+    <link rel="stylesheet" href="../styles/normalize.css">
+    <link rel="stylesheet" href="../styles/journal.css">
+    <link rel="stylesheet" href="../styles/styles.css">
+  </head>
+  <body>
+    <nav class="header">
+      <ul>
+        <li>
+          <a href="../index.html">Ari.</a>
+        </li>
+        <li>
+          <a href="../html/about.html">About.</a>
+        </li>
+        <li>
+          <a href="../html/portfolio.html">Portfolio.</a>
+        </li>
+      </ul>
+    </nav>
+
+    <section class="journal-title">
+      <strong>Street Art.</strong>
+      <p>
+        I love to follow graffiti and local street artists and taggers. My son (last photo) loves to follow Beso the bear around seattle. Check out some of the artist I follow below:
+      </p>
+      <p></p>
+    </section>
+    <section id="slides">
+      <a>
+        <img src="../images/first.jpg" alt="Zulu206 Battle">
+        <span>The Zulu206 Battle</span>
+      </a>
+      <a>
+        <img src="../images/rise-and-unite2.jpg" alt="Rise and Unite">
+        <span>Rise and Unite</span>
+      </a>
+      <a>
+      <img src="../images/num-lugs.jpg" alt="artists num and lugs">
+      <span>Artists: Num and Lugs</span>
+      </a>
+      <a>
+        <img src="../images/putrid.jpeg" alt="putrid">
+        <span>Putrid</span>
+      </a>
+      <a>
+        <img src="../images/second.jpg" alt="Zulu206 Battle 2">
+        <span>The Zulu206 Battle (second place)</span>
+      </a>
+      <a>
+        <img src="../images/sleep.jpeg" alt="Sleep is Famous">
+        <span>Sleep is Famous</span>
+      </a>
+      <a>
+        <img src="../images/lekat-sev-unitethepeople.jpeg" alt="lekat, Sev, Unite the People">
+        <span>Artists: Lekat, Sev, Unite the People</span>
+      </a>
+      <a>
+        <img src="../images/blink.jpeg" alt="blink">
+        <span>Blink/Blinker</span>
+      </a>
+      <a>
+        <img src="../images/fro.jpeg" alt="fro">
+        <span>Fro</span>
+      </a>
+      <a>
+        <img src="../images/againstdagrains.jpeg" alt="AgainstdaGrains and Versuz">
+        <span>Artists: Against da Grains and Versuz</span>
+      </a>
+      <a>
+        <img src="../images/Beso1.jpeg" alt="Beso and Kainin">
+        <span>Beso..and a really cute kid</span>
+      </a>
+
+    </section>
+  </body>
+</html>
diff --git a/html/portfolio.html b/html/portfolio.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Portfolio</title>
+  <link rel="stylesheet" href="../styles/normalize.css">
+  <link rel="stylesheet" href="../styles/styles.css">
+  <link rel="stylesheet" href="../styles/portfolio.css">
+</head>
+<body>
+  <nav class="header">
+    <ul>
+      <li>
+        <a href="../html/about.html">About.</a>
+      </li>
+      <li>
+        <a href="../index.html">Ari.</a>
+      </li>
+      <li>
+        <a href="../html/journal.html">Street Art.</a>
+      </li>
+    </ul>
+  </nav>
+
+  <section class="project-title">
+    <strong>Projects.</strong>
+    <p>
+      A sample of my projects thus far at <a href="https://www.adadevelopersacademy.org/">Ada Developers Academy</a>.
+    </p>
+  </section>
+
+  <article id="container">
+    <img src="../images/rideshare.jpg" alt="Rideshare">
+    <section>
+      <a href="https://github.com/Ari-1/oo-ride-share">RideShare Program</a>
+      <p>
+        In this project, we created a system to track ride share data from a CSV file while using our knowledge of classes, methods and attributes to implement object-oriented design.
+      </p>
+      <strong>Learning Goals:</strong>
+      <ul>
+        <li>Creating and instantiation classes with attributes</li>
+        <li>Creating class methods and instance methods</li>
+        <li>Practice writing pseudocode</li>
+        <li>Create tests to drive the creation of our code</li>
+      </ul>
+    </section>
+
+    <section>
+      <a href="https://github.com/Ari-1/Scrabble">Scrabble Game</a>
+      <p>
+        Scrabble was our second pair-programming project, where we used test driven development to write tests and code in parallel. Project completed with Brandy Austin.</p>
+        <strong>Learning Goals:</strong>
+        <ul>
+          <li>Utilize TDD (Test Driven Development)</li>
+          <li>Create class methods according to requirements</li>
+          <li>Utilize Single Responsibility Principle to reduce code dependencies</li>
+          <li>Utilize composition between classes</li>
+        </ul>
+      </section>
+      <img src="../images/scrabblewall.jpg" alt="Scrabble">
+
+      <img src="../images/solar-system.jpg" alt="Solar-System">
+      <section>
+        <a href="https://github.com/Ari-1/Solar-System">Solar System</a>
+        <p>Solar System, am individual-stage 1 project, uses classes instead of hard-coded data. The user can learn about any planet within the solar system and create new ones.</p>
+
+        <strong>Learning Goals:</strong>
+        <ul>
+          <li>Practice creating custom classes</li>
+          <li>Use a hash to initialize an object</li>
+          <li>Create an object which contains a collection of other objects</li>
+          <li>Practice creating instance methods</li>
+        </ul>
+      </section>
+      <section>
+        <a href="https://github.com/Ari-1/Calculator">Calculator</a>
+        <p>Calculator project was one of our first projects at Ada. An individual-stage 1 project, the program prompts the user for an operation and two numbers.</p>
+        <strong>Learning Goals:</strong>
+        <ul>
+          <li>Practice writing code that has a user interface</li>
+          <li>Utilize conditionals and regular expressions</li>
+          <li>Testing code for incorrect input</li>
+        </ul>
+      </section>
+      <img src="../images/calculator.jpeg" alt="Calculate">
+
+    </article>
+
+  </body>
+  </html>
diff --git a/images/Beso1.jpeg b/images/Beso1.jpeg
diff --git a/images/Beso2.jpeg b/images/Beso2.jpeg
diff --git a/images/againstdagrains.jpeg b/images/againstdagrains.jpeg
diff --git a/images/blink.jpeg b/images/blink.jpeg
diff --git a/images/calculator.jpeg b/images/calculator.jpeg
diff --git a/images/first.jpg b/images/first.jpg
diff --git a/images/fro.jpeg b/images/fro.jpeg
diff --git a/images/greenwoodexplosion.jpeg b/images/greenwoodexplosion.jpeg
diff --git a/images/lekat-sev-unitethepeople.jpeg b/images/lekat-sev-unitethepeople.jpeg
diff --git a/images/lovewall.jpg b/images/lovewall.jpg
diff --git a/images/num-lugs.jpg b/images/num-lugs.jpg
diff --git a/images/phone.jpg b/images/phone.jpg
diff --git a/images/putrid.jpeg b/images/putrid.jpeg
diff --git a/images/rideshare.jpg b/images/rideshare.jpg
diff --git a/images/rise-and-unite2.jpg b/images/rise-and-unite2.jpg
diff --git a/images/scrabblewall.jpg b/images/scrabblewall.jpg
diff --git a/images/second.jpg b/images/second.jpg
diff --git a/images/sleep.jpeg b/images/sleep.jpeg
diff --git a/images/solar-system.jpg b/images/solar-system.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Ari's Personal Profile</title>
+  <link rel="stylesheet" href="../styles/normalize.css">
+  <link rel="stylesheet" href="styles/styles.css">
+  <link href="https://fonts.googleapis.com/css?family=Cutive+Mono" rel="stylesheet">
+</head>
+<body>
+  <nav class="header">
+      <ul>
+        <li>
+          <a href="html/about.html">About.</a>
+        </li>
+        <li>
+          <a href="html/portfolio.html">Portfolio.</a>
+        </li>
+        <li>
+          <a href="html/journal.html">Street Art.</a>
+        </li>
+      </ul>
+  </nav>
+
+  <article class="base">
+    <img src="images/lovewall.jpg" alt="lovewall">
+    <section id="title">
+      <p>Hi. My name is Ari.</p>
+    </section>
+
+    <section class="splash-content">
+      <ul>
+        <li>pronouns: she/her</li>
+        <li>developer-in-training</li>
+        <li>mother</li>
+        <li>tagger</li>
+      </ul>
+    </section>
+
+  </article>
+</body>
+</html>
diff --git a/styles/about.css b/styles/about.css
@@ -0,0 +1,22 @@
+
+.content-title {
+  display: inline-block;
+  font-size: 2em;
+  margin: 100px auto;
+  text-align: left;
+}
+
+
+.content-title article > p {
+  text-align: justify;
+  height: 100%;
+  color: #333;
+  font-family: sans-serif;
+  height: 100%;
+  white-space: normal;
+  position: relative;
+  font-size: 13px;
+  line-height: 21px;
+  max-width: 520px;
+  margin-right: 200px;
+}
diff --git a/styles/journal.css b/styles/journal.css
@@ -0,0 +1,36 @@
+
+.journal-title {
+  margin: 100px auto;
+  font-size: 2em;
+}
+
+.journal-title p {
+  font-family: sans-serif;
+  font-size: 15px;
+}
+
+.slides {
+  display: grid;
+  grid-template: repeat(4, 1fr)/ repeat(3, 1fr);
+  justify-content: center;
+}
+
+a span {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 10px;
+  background: rgba(255,255,255,.8);
+  text-align: center;
+}
+
+a:hover span {
+  display: block;
+}
+
+#slides a > img {
+  width: 30%;
+  height: auto;
+  align-items: center;
+}