Ada-C10 · krsmith7 · Sep 15, 2018 · Sep 16, 2018 · Sep 17, 2018 · Sep 17, 2018
diff --git a/about.html b/about.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>K.R. Smith About Me</title>
+  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
+  <link href="style/styles.css" rel="stylesheet" />
+</head>
+
+<body>
+  <nav class="nav-menu">
+    <ul class="nav-content">
+      <!-- <li class="nav-title">Menu</li> -->
+      <li class="nav-item"><a href="index.html">Main</a></li>
+      <li class="nav-item"><a href="hobby-blog.html">Art Chronicles</a></li>
+      <li class="nav-item"><a href="portfolio.html">Portfolio</a></li>
+    </ul>
+  </nav>
+
+  <header>
+    <h1>About Me</h1>
+  </header>
+
+  <main class="blurb">
+    <section>
+      <p>Hello there!</p>
+      <p>My name is Katricia. I am a midwestern transplant currently living in Seattle. I am enjoying finally being around others with penchants for black clothing and strange ice cream flavors. </p>
+      <p>I work as a Full Stack Developer full-time and an artist/writer in all other spare moments I can grab. I am also an aspiring polyglot. Bom dia!</p>
+    </section>
+  </main>
+  <footer>
+    <h6> All images and content are my sole property unless otherwise stated. </h6>
+  </footer>
+</body>
+</html>
diff --git a/hobby-blog.html b/hobby-blog.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>K.R. Smith - Art</title>
+    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
+    <link href="style/styles.css" rel="stylesheet" />
+    <link href="style/hobby-blog.css" rel="stylesheet" />
+  </head>
+  <body class="hobby">
+    <nav class="nav-menu">
+      <ul class="nav-content">
+        <!-- <li class="nav-title">Menu</li> -->
+        <li class="nav-item"><a href="index.html">Main</a></li>
+        <li class="nav-item"><a href="about.html">About Me</a></li>
+        <li class="nav-item"><a href="portfolio.html">Portfolio</a></li>
+      </ul>
+    </nav>
+
+    <header>
+      <h1> Forays into Art </h1>
+      <h4>My most recent art adventures have been taking tours of local art galleries and gaining inspiration from their works. Here are some of the most interesting and creative works I've found in my latest meanderings:
+    </header>
+
+
+      <section class= "amy-bio">
+        <h2>Work of Amy Sherard</h2>
+        <p>Amy Sherald received her MFA in Painting from Maryland Institute College of Art (2004) and BA in Painting from Clark-Atlanta University (1997), and was a Spelman College International Artist-in-Residence in Portobelo, Panama (1997). In 2016, Sherald was the first woman to win the Outwin Boochever Portrait Competition grand prize. She is most known for having painted Michelle Obama's official portrait.</p>
+      </section>
+
+      <section class="amy-art">
+        <img src="images/amy-1.jpg" alt="painting of girl with rag doll">
+        <img src="images/amysherard.jpeg" alt="portrait of woman turned to side">
+      </section>
+
+      <section class="manal-bio">
+        <h2>Work of Manal Deeb</h2>
+        <p>Manal Deeb is a Palestinian American visual artist born in Ramallah, Palestine who currently lives in Fairfax, VA. Deeb and her artwork have been featured in magazines, journals, radio interviews, TV interviews and newspapers throughout the world. Her mission and main subjects are: humanity, Palestine, the Palestinian people, global cultures, creating bridges between religions, Arab women, and identity. </p>
+      </section>
+      <section class="manal-art">
+        <img src="images/manal.deeb.jpeg" alt="manal deeb painting">
+        <img src="images/manal2.jpg" alt="manal deeb painting"
+      </section>
+
+
+    <footer>
+      <h6> All images and content are my sole property unless otherwise stated. </h6>
+    </footer>
+  </body>
+</html>
diff --git a/images/DeepMinny.jpg b/images/DeepMinny.jpg
diff --git a/images/amy-1.jpg b/images/amy-1.jpg
diff --git a/images/amysherard.jpeg b/images/amysherard.jpeg
diff --git a/images/black-and-gold-wallpaper.jpg b/images/black-and-gold-wallpaper.jpg
diff --git a/images/goldcircle.jpg b/images/goldcircle.jpg
diff --git a/images/goldswirls.jpg b/images/goldswirls.jpg
diff --git a/images/kehinde.wiley.jpeg b/images/kehinde.wiley.jpeg
diff --git a/images/manal.deeb.jpeg b/images/manal.deeb.jpeg
diff --git a/images/manal2.jpg b/images/manal2.jpg
diff --git a/images/photobooth.jpg b/images/photobooth.jpg
diff --git a/images/rideshare.jpeg b/images/rideshare.jpeg
diff --git a/images/startrly.jpeg b/images/startrly.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>K.R. Smith Portfolio</title>
+  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
+  <link href="style/styles.css" rel="stylesheet" />
+</head>
+<body>
+    <nav class="nav-menu">
+      <ul class="nav-content">
+        <!-- <li class="nav-title">Menu</li> -->
+        <li class="nav-item"><a href="about.html">About Me</a></li>
+        <li class="nav-item"><a href="hobby-blog.html">Art Chronicles</a></li>
+        <li class="nav-item"><a href="portfolio.html">Portfolio</a></li>
+      </ul>
+    </nav>
+
+  <header>
+    <h1>Katricia Smith</h1>
+    <h2>Software Designer  |   Artist |   Writer</h2>
+    <h4 class=top-quote>' To create is to live twice ' - Albert Camus</h4>
+    <span> </span>
+      <!-- <h4>Welcome to my personal page. Please meander as you please. All inquiries and insights welcome. </h4> -->
+  </header>
+
+    <!-- <section class = "contents"> -->
+  <div class="contents-list">
+    <div class="about-me">
+      <a href ="about.html">
+        <h3> About Me </h3>
+        <img src="images/photobooth.jpg" alt="image of KR Smith">
+      </a>
+    </div>
+    <div class="art">
+        <a href="hobby-blog.html">
+          <h3>Art Chronicles</h3>
+          <img src="images/amysherard.jpeg" alt="amy sherard painting">
+        </a>
+    </div>
+    <div class="portfolio">
+        <a href="portfolio.html">
+          <h3>Software Portfolio</h3>
+          <img src="https://images.sftcdn.net/images/t_optimized,f_auto/p/45fc2ff2-9a64-11e6-883d-00163ed833e7/1708020374/artweaver-screenshot.jpg" alt="art editing software">
+        </a>
+    </div>
+  </div>
+    <!-- </section> -->
+
+    <footer>
+      <h6> All images and content are my sole property unless otherwise stated. </h6>
+    </footer>
+  </body>
+  </html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>K.R. Smith - Art</title>
+    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
+    <link href="style/styles.css" rel="stylesheet" />
+    <link href="style/portfolio.css" rel="stylesheet" />
+  </head>
+  <body>
+    <nav class="nav-menu">
+      <ul class="nav-content">
+        <!-- <li class="nav-title">Menu</li> -->
+        <li class="nav-item"><a href="index.html">Main</a></li>
+        <li class="nav-item"><a href="about.html">About Me</a></li>
+        <li class="nav-item"><a href="hobby-blog.html">Art Chronicles</a></li>
+      </ul>
+    </nav>
+
+    <header>
+      <h1> Portfolio </h1>
+        <h4> Below are some of my most recent projects. Feel free to poke around.</h4>
+    </header>
+
+    <main class="portfolio-items">
+      <section>
+        <ul class ="portfolio-list">
+          <li>
+            <a href="https://github.com/krsmith7/startrly"><img src="images/startrly.jpeg" alt="website snippit"> <h4>Startrly: Chic Startup Site</h4>
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/krsmith7/grocery-store"><img src="http://www.grocerylisttemplate.net/wp-content/uploads/2017/02/grocery-list-app-with-calculator-androidgroceryapps-bring-QxBgcC.jpg" alt ="food items"> <h4>Grocery Store: Purchasing Simulator</h4>
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/krsmith7/ride-share"><img src="images/rideshare.jpeg"> <h4>Rideshare: Ride Managing Program</h4>
+            </a>
+          </li>
+        </ul>
+      </section>
+
+
+    </main>
+
+    <footer>
+      <h6> All images and content are my sole property unless otherwise stated. </h6>
+    </footer>
+  </body>
+</html>
diff --git a/style/hobby-blog.css b/style/hobby-blog.css
@@ -0,0 +1,46 @@
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+/* header {
+  grid-area: 2 / 1 / 2 / 5;
+} */
+
+/* .art-gallery { */
+.amy-bio {
+  /* grid-row-start: 3; */
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+p {
+  font-size: 1.5rem;
+}
+
+.amy-art {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.amy-art img {
+  width: 200px;
+  height: 200px;
+}
+
+.manal-art {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  margin: 1rem;
+}
+
+.manal-art img {
+  width: 300px;
+  height: 300px;
+  /* margin: 1rem; */
+}
diff --git a/style/portfolio.css b/style/portfolio.css
@@ -0,0 +1,22 @@
+.portfolio-items {
+  grid-area: 3 / 1 / 6 / 6;
+}
+
+.portfolio-list {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.portfolio-list li{
+  border: .2rem dotted gold;
+  padding: 1em;
+  margin: 1em;
+  list-style: none;
+}
+
+.portfolio-list img {
+  width: 150px;
+  length: 150px;
+}
diff --git a/style/styles.css b/style/styles.css
@@ -0,0 +1,111 @@
+body {
+  display: grid;
+   grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: .5fr 1fr 1fr 1fr 1fr;
+  background: url(http://hdblackwallpaper.com/wallpaper/2015/07/black-and-gold-wallpaper-iphone-22-background.jpg);
+  color: gold;
+}
+
+header {
+    /* padding: 3em; */
+    grid-column-start: 1;
+    grid-column-end: 6;
+    grid-row-start: 2;
+    grid-row-end: 3;
+    color: gold;
+    text-align: center;
+}
+
+header h1, h2, h3{
+  font-family: 'Permanent Marker', cursive;
+  /* font-family: 'Fredericka the Great', cursive; */
+}
+.nav-menu {
+    grid-row-start: 1;
+    grid-row-end: 2;
+    grid-column-start: 1;
+    grid-column-end: 4;
+}
+
+.nav-content {
+  list-style-type: none;
+  /* display: inline-block; */
+}
+
+.nav-item {
+  display: inline;
+  padding: 10px;
+}
+
+.nav-item a::after, .nav-item a::before {
+  display: inline-block;
+  color: gold;
+  content: ' - ';
+}
+
+.top-quote {
+  font-style: italic;
+  /* padding-bottom: 5em; */
+  /* border-bottom: .2em solid;*/
+}
+
+.contents-list {
+  /* display: grid; */
+  grid-row-start: 3;
+  grid-row-end: 5;
+  grid-column-start: 1;
+  grid-column-end: 6;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  border: dashed .1em #5a470b;
+}
+
+
+a {
+  text-decoration: none;
+}
+
+a:visited {
+  color: gold;
+}
+
+a:hover {
+  color:#593a90;
+}
+
+.contents-list div{
+  font-size: 1.5rem;
+  align-items: center;
+  /* border: 2rem solid gold; */
+}
+
+.contents-list img{
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  border: .7em ridge #593a90;
+  /* margin-left: 1em; */
+  /* border-image: url(../images/goldcircle.jpg); */
+}
+
+.contents-list img:hover {
+  border: 1em ridge #593a90;
+}
+
+.blurb {
+  font-size: 2em;
+  border: dashed .1em #5a470b;
+  grid-area: 3 / 2 / 5 / 6;
+  margin-top: -2em;
+  padding: 1em;
+}
+
+body, .contents-list, .blurb, .art-gallery, .portfolio-list li {
+  background-color: black;
+}
+
+footer {
+  grid-row-start: 7;
+  grid-column-start: 8;
+}