Ada-C14 · beauttie · Oct 26, 2020 · Oct 26, 2020 · Oct 26, 2020 · Oct 26, 2020
diff --git a/content/about.html b/content/about.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>about Beauttie ✨</title>
+    <link href="../styles/style.css" rel="stylesheet"/>
+    <link href="../styles/about.css" rel="stylesheet"/>
+</head>
+<body>
+    <div class="container">
+        <header class="nav">
+            <span class="emoji-nav"><a href="index.html">🏠</a></span>
+            <span class="emoji-nav"><a href="portfolio.html">📁</a></span>
+            <span class="emoji-nav"><a href="code-journal.html">📖</a></span>
+        </header>
+
+        <section class="content">
+            <p>currently a student @ <a href="https://adadevelopersacademy.org/">Ada Developer's Academy</a></p>
+            <p>moved across the country from Portland, ME to Seattle, WA</p>
+            <div class="img-row"><img id="portland-me" src="../images/portland-head-light.jpg" alt="Portland Head Light"/>
+                <span class="emoji">🛫</span>
+                <img id="dashed-line" src="../images/dashed-line.png" alt="dashed line"/>
+                <span class="emoji">🛬</span>
+                <img id="seattle" src="../images/seattle.jpg" alt="Seattle"/></div>
+            <p>WOC aspiring to change the face of tech 👩‍💻</p>
+        </section>
+
+        <footer>&copy; 2020</footer>
+    </div>
+</body>
+</html>
diff --git a/content/code-journal.html b/content/code-journal.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>my secret diary</title>
+    <link href="../styles/style.css" rel="stylesheet"/>
+    <link href="../styles/code-journal.css" rel="stylesheet"/>
+</head>
+<body>
+    <div class="container">
+        <header class="nav">
+            <span class="emoji-nav"><a href="index.html">🏠</a></span>
+            <span class="emoji-nav"><a href="about.html">👩‍💻</a></span>
+            <span class="emoji-nav"><a href="portfolio.html">📁</a></span>
+        </header>
+
+        <article class="content">
+            <h2 class="headline">First (&amp; Last) Entry</h2>
+            <p class="byline">by Beauttie</p>
+            <p class="dateline">date posted: October 25th</p>
+
+            <p>Here are my thoughts: I dislike journaling of any form.</p>
+
+            <img id="obama-gif" src="../images/obama.gif" alt="I think we're done here."/>
+        </article>
+
+        <footer>&copy; 2020</footer>
+    </div>
+</body>
+</html>
diff --git a/content/index.html b/content/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>homepage</title>
+    <link href="../styles/style.css" rel="stylesheet"/>
+    <link href="../styles/index.css" rel="stylesheet"/>
+</head>
+<body>
+    <div class="container">
+        <header class="typewriter">Hello, World!</header>
+
+        <section class="content">
+            <h1>my name is Beauttie <a id="audio" href="https://ssl.gstatic.com/dictionary/static/pronunciation/2020-02-14/audio/be/beauty_en_us_1.mp3">🔊</a></h1>
+            <p>pronouns are she/her.</p>
+            <p>click <a href="about.html">here</a> to learn more about me.</p>
+        </section>
+
+        <footer>&copy; 2020</footer>
+    </div>
+</body>
+</html>
diff --git a/content/portfolio.html b/content/portfolio.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>my portfolio</title>
+    <link href="../styles/style.css" rel="stylesheet"/>
+    <link href="../styles/portfolio.css" rel="stylesheet"/>
+</head>
+<body>
+    <div class="container">
+        <header class="nav">
+            <span class="emoji-nav"><a href="index.html">🏠</a></span>
+            <span class="emoji-nav"><a href="about.html">👩‍💻</a></span>
+            <span class="emoji-nav"><a href="code-journal.html">📖</a></span>
+        </header>
+
+        <section class="content">
+            <h2>Completed Projects @ Ada</h2>
+            <ul>
+                <li>🌐 <a href="https://github.com/beauttie/personal-portfolio-site">this website</a></li>
+                <li>📚 <a href="https://github.com/beauttie/book-review-site">Book Review Site</a></li>
+                <li><img id="slack-logo" src="../images/slack-logo.png" alt="Slack logo"/> <a href="https://github.com/beauttie/slack-cli">Slack Command Line Interface</a></li>
+                <li>🛒 <a href="https://github.com/beauttie/grocery-store">Grocery Store</a></li>
+                <li>🚕 <a href="https://github.com/beauttie/oo-ride-share">Object-Oriented Ride Share</a></li>
+                <li>🪐 <a href="https://github.com/beauttie/solar-system">Solar System</a></li>
+                <li>🔠 <a href="https://github.com/beauttie/adagrams">Adagrams</a></li>
+            </ul>
+        </section>
+
+        <footer>please hire me.</footer>
+    </div>
+</body>
+</html>
diff --git a/images/dashed-line.png b/images/dashed-line.png
diff --git a/images/obama.gif b/images/obama.gif
diff --git a/images/portland-head-light.jpg b/images/portland-head-light.jpg
diff --git a/images/seattle.jpg b/images/seattle.jpg
diff --git a/images/slack-logo.png b/images/slack-logo.png
diff --git a/styles/about.css b/styles/about.css
@@ -0,0 +1,25 @@
+.emoji {
+    font-size: 400%;
+}
+
+.img-row {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+}
+
+#portland-me {
+    height: 20%;
+    width: 20%;
+}
+
+#dashed-line {
+    height: 12%;
+    width: 12%;
+}
+
+#seattle {
+    height: 25%;
+    width: 25%;
+}
diff --git a/styles/code-journal.css b/styles/code-journal.css
@@ -0,0 +1,22 @@
+body {
+    background: white;
+    color: black;
+}
+
+article {
+    border: .15em dashed black;
+    text-align: left;
+    margin: auto;
+    padding: 2em;
+    width: 75%;
+}
+
+.headline, .byline, .dateline {
+    margin: 0;
+    padding: 0;
+}
+
+#obama-gif {
+    height: 60%;
+    width: 60%;
+}
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,25 @@
+.typewriter {
+    overflow: hidden;
+    white-space: nowrap;
+    letter-spacing: .15em;
+    animation: typing 6s steps(20, end), blink .75s step-end infinite;
+    border-right: .15em solid lime;
+    margin: 0 auto;
+    width: auto;
+    display: inline-block;
+    font-size: 300%;
+}
+
+@keyframes typing {
+    from { max-width: 0 }
+    to { max-width: 100% }
+}
+
+@keyframes blink {
+    from, to { border-color: transparent }
+    25% { border-color: lime; }
+}
+
+#audio:hover {
+    font-size: 150%;
+}
diff --git a/styles/portfolio.css b/styles/portfolio.css
@@ -0,0 +1,14 @@
+ul {
+    list-style-type: none;
+    display: inline-block;
+    text-align: left;
+}
+
+ul li {
+    padding: .1em;
+}
+
+#slack-logo {
+    height: 1.25em;
+    width: 1.25em;
+}
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,57 @@
+body {
+    background: linear-gradient(0deg, #009fff, #ec2f4b) no-repeat;
+    color: white;
+    text-align: center;
+    font-family: Andale Mono, monospace;
+}
+
+.container {
+    height: 100vh;
+    width: 100vw;
+    display: grid;
+    grid-gap: 1%;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 15% auto 5%;
+    grid-template-areas:
+    ". h h ."
+    "c c c c"
+    ". f f .";
+}
+
+header {
+    grid-area: h;
+    align-self: center;
+}
+
+.content {
+    grid-area: c;
+    align-self: center;
+}
+
+footer {
+    grid-area: f;
+    align-self: flex-end;
+    font-size: 70%;
+}
+
+a {
+    color: white;
+}
+
+a:link {
+    text-decoration: none;
+}
+
+a:hover {
+    color: yellow;
+}
+
+.nav {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+}
+
+.emoji-nav {
+    font-size: 400%;
+}