Ada-C6 · guineveresaenger · Sep 16, 2016 · Sep 16, 2016 · Sep 16, 2016 · Sep 16, 2016
diff --git a/about.html b/about.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="styles/styles.css">
+    <title>Guin's Static Page</title>
+  </head>
+  <body>
+    <header>
+      <h1>Guinevere Saenger</h1>
+      <h4>Coding in Cloud City</h4>
+      <nav>
+        <a href="index.html">Home</a>
+        <a href="portfolio.html">Portfolio</a>
+        <a href="code-journal.html">Journal</a>
+        <a href="about.html">Contact</a>
+      </nav>
+    </header>
+
+    <section>
+      <article class="bio">
+        <p>
+          I am currently in the process of becoming a software engineer by attending <a href="http://www.adadevelopersacademy.org">Ada Developers Academy</a>, a full-time software development school in Seattle for female-identified people. Ada aims to change the gender dynamics of the industry by offering its students a career change into the tech field, and I am very excited about this opportunity.
+        </p>
+        <p>
+          In my previous career, I was a classical pianist, so coding is something very new and different. I am looking forward to entering the industry when I have completed my program in July 2017.
+        </p>
+        <p>
+          When I'm not busy studying, I spend time reading, going to concerts and the opera, playing piano for fun, dancing, walking through nature, and cooking and baking with my family.
+        </p>
+      </article>
+      <p id="talk-to-me">
+        Talk to me!
+      </p>
+      <ul class="contact-links">
+        <li>
+          <a href="mailto:guineveresaenger@gmail.com">
+            <img src="images/mail.png" alt="Email icon" />
+          </a>
+        </li>
+        <li>
+
+          <a href="https://github.com/guineveresaenger">
+            <img src="images/github.png" alt="GitHub icon" />
+          </a>
+        </li>
+        <li>
+          <a href="https://twitter.com/guincodes">
+            <img src="images/twitter.png" alt="Twitter icon" />
+          </a>
+        </li>
+      </ul>
+    </section>
+    <footer>
+      <h4>&copy; 2016</h4>
+      <p>
+        by Guinevere Saenger
+      </p>
+    </footer>
+
+  </body>
+</html>
diff --git a/code-journal.html b/code-journal.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="styles/styles.css" >
+    <link rel="stylesheet" href="styles/journal.css" >
+    <title>Code Journal</title>
+  </head>
+  <body>
+    <header>
+      <h1>Guinevere Saenger</h1>
+      <h4>Coding in Cloud City</h4>
+      <nav>
+        <a href="index.html">Home</a>
+        <a href="portfolio.html">Portfolio</a>
+        <a href="code-journal.html">Journal</a>
+        <a href="about.html">Contact</a>
+      </nav>
+    </header>
+
+    <section id="articles">
+      <h3>Priority Management while at Ada</h3>
+      <p class="author-info">
+        by Guinevere, Sept.19 2016
+      </p>
+      <article class="blog-post">
+        <p>
+          Being in a coding boot camp is hard. Ada is by all accounts a far more supportive boot camp than many others, and I love being here. But in order to be successful, I have to make sure I have all my priorities in order. My current priorities are:
+          <ul>
+            <li>Sleep</li>
+            <li>My kid</li>
+            <li>Ada</li>
+            <li>Partner and family</li>
+          </ul>
+          This is pretty much the current established order, although the ordering is not quite as neatly linear as it might seem at first glance.<br>
+          For instance, sleep affects everything. It affects my ability to study; it affects my ability to function at daily tasks, and it affects my mood when my kid requires patience, or when my boyfriend is having a bad day. It affects my physical capabilities as well - being able to run around the playground, or go exercise. I have struggled with stress-induced insomnia for years, and I am finally getting a handle on it. If it is between finishing a project and sleep, I will most definitely sleep first and worry about the project later. If it is between caring for my kid and sleep, things become fuzzier - I will of course calm him through a nightmare, or be there when he is sick, and make sure he knows I am there for him. But we have ongoing age appropriate conversations about being quiet on weekend mornings so Mama can sleep in, about asking for water, story, song, and night light before the official good night, and similar things. But I can say with confidence that taking care of my sleep positively affects all other areas of my life.<br>
+          My kid is more important than Ada. If something happened to him, I'd drop everything and be there. That's just a fact of life. However, I am also at Ada because I want to be able to provide for him, because I want to be in a job wth flexible hours and reliable pay and benefits, so, again, the priorities get fuzzy. It's a balancing act in the evening: do I play with him, or do I send him to play by himself so I do my homework? Often, I choose the former. There's time for homework after bedtime. And I attend events on evenings he is with his father.<br>
+          Partner, friends and family: again, it gets fuzzy. If there were a major change in circumstances affecting the health of my parents, my sister, or my boyfriend: That would be very hard, and I would have to see how I adjust my priorities. But as it stands currently, none of those people get any input about my current life choices regarding Ada, and I expect them to not only respect my homework responsibilities, but also help me succeed in significant ways. My boyfriend takes care of my kid post-school, my friends babysit him when I attend evening events, and I reciprocate whenever my schedule allows.<br>
+          We have a classroom policy at Ada: you have responsibility toward yourself, toward your classmates (I extend this towards my family), and toward the community as a whole. It's tricky, but remembering how everything is interconnected and affects everything else really helps make good choices. It is not "sleep or Ada"; it is "sleep so that Ada".
+        </p>
+
+      </article>
+
+      <h3>Article Title</h3>
+      <p class="author-info">
+        by Guinevere, on Friday afternoon 2016
+      </p>
+      <article class="blog-post">
+        <p>
+          Reef sails Jack Tar scuttle fluke salmagundi measured fer yer chains bilge rat Gold Road capstan draft. Bilge water careen Yellow Jack mizzenmast swab wherry Nelsons folly Letter of Marque starboard jack. Coffer gibbet brigantine reef gunwalls run a shot across the bow red ensign topmast snow hail-shot.
+          Belay topsail walk the plank Jack Tar splice the main brace heave to grog Buccaneer bucko prow. Code of conduct stern heave to long boat no prey, no pay Arr clipper Brethren of the Coast poop deck rum. Snow main sheet stern chandler bowsprit Admiral of the Black draft cutlass quarterdeck strike colors.
+        </p>
+
+      </article>
+
+    </section>
+
+    <footer>
+      <h4>&copy; 2016</h4>
+      <p>
+        by Guinevere Saenger
+      </p>
+    </footer>
+
+  </body>
+</html>
diff --git a/images/capy.jpeg b/images/capy.jpeg
diff --git a/images/capycat.jpeg b/images/capycat.jpeg
diff --git a/images/github.png b/images/github.png
diff --git a/images/guin_portrait.png b/images/guin_portrait.png
diff --git a/images/mail.png b/images/mail.png
diff --git a/images/twitter.png b/images/twitter.png
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="styles/styles.css" >
+    <title>Guin's Static Page</title>
+  </head>
+  <body>
+    <header>
+      <h1>Guinevere Saenger</h1>
+      <h4>Coding in Cloud City</h4>
+      <nav>
+        <a href="index.html">Home</a>
+        <a href="portfolio.html">Portfolio</a>
+        <a href="code-journal.html">Journal</a>
+        <a href="about.html">Contact</a>
+      </nav>
+    </header>
+    <section>
+
+      <img src="images/guin_portrait.png" alt="My Picture" id="portrait"/>
+      <h2>Welcome to my site!</h2>
+      <p>
+        This website is part of a beginning CSS learning experience at <a href= "http://www.adadevelopersacademy.org">Ada Developers Academy</a>, where I am currently a student in Cohort 6. Please explore this site and send me feedback if you like. <br>
+        I have included some of my current projects in the portfolio section of this site, and I plan on writing at least a few journal entries about Things That Happen At Ada.<br>
+        This is going to be my "sandbox" website for a while, changing and updating as I get better at making web sites. Studying at Ada is an honor and a privilege, but it is also really, really hard and time-consuming, so we will see how much attention I can give this site.
+      </p>
+
+
+    </section>
+
+    <footer>
+      <h4>&copy; 2016</h4>
+      <p>
+        by Guinevere Saenger
+      </p>
+    </footer>
+
+  </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="styles/styles.css" >
+    <link rel="stylesheet" href="styles/portfolio.css" >
+    <title>Portfolio</title>
+  </head>
+  <body>
+    <header>
+      <h1>Guinevere Saenger</h1>
+      <h4>Coding in Cloud City</h4>
+      <nav>
+        <a href="index.html">Home</a>
+        <a href="portfolio.html">Portfolio</a>
+        <a href="code-journal.html">Journal</a>
+        <a href="about.html">Contact</a>
+      </nav>
+    </header>
+
+    <section id="project-links">
+      <ul>
+        <li>
+          <a href="https://github.com/guineveresaenger/Word-Guess">Word-Guess</a>
+          <p>
+            A game application written in Ruby that will allow the user to guess a word and get ASCII-art as feedback on their guesses.
+          </p>
+          <h5>Objectives:</h5>
+          <p>
+            Create a complex program from start to finish, practicing classes, methods, and instance variables.
+          </p>
+        </li>
+        <li class="image-containing">
+
+
+          <a href="https://github.com/guineveresaenger/FarMar">FarMar</a>
+          <img src="images/capycat.jpeg" alt="Capybara snuggling cat" />
+          <p>
+            A Ruby application for managing farmers market data - market, vendor, and product lookup, sales calculations, and more.
+          </p>
+          <h5>Objectives:</h5>
+          <p>
+            Handling CSV data input, practicing writing classes, class methods, and instance methods, as well as practicing enumerables.
+          </p>
+          <p>
+            The capybara and kitty are best friends, and they like to go visit farmers markets together, especially on Saturdays. I put them here for cuteness purposes.
+          </p>
+
+        </li>
+        <li>
+          <a href="#">Some Other Link. Aren't you curious?</a>
+          <p>
+            Bowsprit swab capstan Blimey Jack Ketch quarterdeck long clothes no prey, no pay gabion doubloon. Grog blossom lookout Sea Legs piracy to go on account spike Corsair skysail plunder chase. Gold Road mizzen dance the hempen jig belay Sail ho lateen sail cable careen broadside Pirate Round.
+          </p>
+        </li>
+        <li class="image-containing">
+          <a href="#">I guess this link doubles as a title.</a>
+          <img src="images/capy.jpeg" alt="Capybara looking wistful" />
+          <p>
+            Puppy kitty ipsum dolor sit good dog good boy kitten park toy small animals aquatic scratcher. Canary purr ferret toy good boy Spike carrier lick wet nose vaccine. Bird Food good boy scratcher bedding groom collar wagging walk fur slobber head aquarium Buddy finch toys paws. Litter Box purr tuxedo fish tabby slobber purr kibble Mittens cage water kitten lol catz cat cage teeth crate catch bed fleas. Turtle brush chow pet supplies wagging wag tail biscuit twine lazy cat chirp foot.
+          </p>
+        </li>
+      </ul>
+    </section>
+    <footer>
+      <h4>&copy; 2016</h4>
+      <p>
+        by Guinevere Saenger
+      </p>
+    </footer>
+  </body>
+</html>
diff --git a/styles/journal.css b/styles/journal.css
@@ -0,0 +1,18 @@
+.author-info {
+  font-style: italic;
+  margin-top: 10px;
+}
+
+#articles {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+p {
+  margin-left: 0px;
+}
+
+section h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
diff --git a/styles/portfolio.css b/styles/portfolio.css
@@ -0,0 +1,37 @@
+section {
+  padding-bottom: 15px;
+}
+
+p {
+  margin-left: 0px;
+}
+
+section img {
+  width: 15%;
+  float:left;
+  margin-top: 16px;
+  margin-right: 10px;
+}
+
+ul {
+  list-style-type: none;
+  padding-right: 15px;
+}
+
+li {
+  padding: 10px;
+}
+
+li a{
+  font-weight:bold;
+  color: teal;
+  display:block;
+  clear:both;
+  margin-top: 20px;
+  text-align: center;
+  font-size: 1.2em;
+}
+
+.image-containing {
+  padding-bottom: 20px;
+}
diff --git a/styles/styles.css b/styles/styles.css
@@ -0,0 +1,83 @@
+body {
+  background-color: beige;
+}
+
+header, nav a {
+  background-color: teal;
+  text-align: center;
+}
+
+header, nav a, section, footer {
+  border: 1px solid blue;
+  border-radius: 25px;
+}
+
+header h1 {
+  font-family: "Montserrat", sans-serif;
+  font-size: 4em;
+  margin-bottom: 30px;
+}
+header h4 {
+  font-style: italic;
+  font-size: 1.5em;
+  margin: 20px;
+}
+
+nav a {
+  display:inline-block;
+  margin: 20px;
+  text-decoration: none;
+  color: purple;
+  padding: 5px;
+  font-size: 1.5em;
+  font-family: "Montserrat", sans-serif;
+}
+
+section {
+  margin-top: 25px;
+  margin-bottom: 25px;
+  overflow: hidden;
+}
+
+p {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+#portrait {
+  width: 25%;
+  float:left;
+  margin-right: 10px;
+}
+
+#talk-to-me {
+  text-align: center;
+  font-style: italic;
+  margin-top:20px;
+}
+
+ul.contact-links {
+  list-style-type: none;
+  text-align: center;
+}
+
+ul.contact-links li {
+  display: inline-block;
+  padding-left:30px;
+  padding-right: 30px;
+
+}
+
+footer {
+  clear:both;
+}
+
+footer h4, footer p{
+  display: inline;
+  padding: 15px;
+}
+
+footer p {
+  font-size: .5em;
+  vertical-align: middle;
+}