Ada-C14 · SoCodeDo · Oct 14, 2020 · Oct 16, 2020 · Oct 18, 2020 · Oct 18, 2020
diff --git a/about.html b/about.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <title>Sophia's Portfolio</title>
+        <link rel="stylesheet" href="style.css">
+    </head>  
+
+    <main class="container">
+        <header>
+            <nav class="menu">
+                <a class="active" href="index.html" style="text-decoration: none">Home  |  </a></li>
+                <a href="about.html" style="text-decoration: none">About  |  </a></li>
+                <a href="portfolio.html" style="text-decoration: none">Portfolio  |  </a></li>
+                <a href="code-journal.html" style="text-decoration: none">Blog</a></li>
+            </nav>
+            <div class="social" > 
+                <a href="https://twitter.com/SoDoCodes" target="_blank">
+                    <img class="twitter" src="images/twitter_icon.png" width=3% height=3% alt="twitter"></a>
+                <a href="https://github.com/SoCodeDo" target="_blank">
+                    <img class="github" src="images/github_button.png" width=3% height=3% alt="github"></a>
+                <a href="https://www.linkedin.com/in/sophiadonan/" target="_blank">
+                    <img class="linkedin" src="images/LinkedIn_button.png" width=3% height=3% alt="linkedin"></a>   
+            </div>
+            <div class="clearfix"></div>
+            <h1 class="name">sophia donan</h1>
+            <h2 class="title">Fullstack Developer @ Ada Developers Academy | Cohort 14</h2>
+        </header>
+
+        <section>
+
+            <article class="tech_stack">
+                <body>
+                    <h2>tech stack</h2>
+                    <p><strong>Proficient: </strong>HTML/CSS</p>
+                    <p><strong>Familiar: </strong>Ruby</p>
+                    <h2>code for this site:</h2>
+                    <a href="https://github.com/SoCodeDo/personal-portfolio-site" target="_blank">view my repository</a>
+                </body>
+            </article>    
+            <article class="bio">
+                <body>
+                    <h2>Hi, I'm Sophia!</h2>
+                    <p>I have dedicated the past two years to changing careers and creating a solid foundation to join the Seattle Tech Industry.</p>
+                    <p>In August 2020, I became a member of Ada (Cohort 14). 
+                        During this time I have completed weekly projects and assignments that have built and strengthened my skillset in fullstack development. </p>
+                    <p>In my time away from studying, I love volunteering with youth in my community, spending time outdoors, traveling,
+                        immersing myself in all things programming, and most of all–spending time with my furry friends.</p>
+                </body>
+            </article>
+        </section>
+
+        <footer class="footer">
+            <p>Copyright 2020. Sophia Donan.</p>
+        </footer>
+    </main>
+</html>
+
diff --git a/code-journal.html b/code-journal.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <title>Sophia's Portfolio</title>
+        <link rel="stylesheet" href="style.css">
+    </head>  
+
+    <main class="container">
+        <header>
+            <nav class="menu">
+                <a class="active" href="index.html" style="text-decoration: none">Home  |  </a></li>
+                <a href="about.html" style="text-decoration: none">About  |  </a></li>
+                <a href="portfolio.html" style="text-decoration: none">Portfolio  |  </a></li>
+                <a href="code-journal.html" style="text-decoration: none">Blog</a></li>
+            </nav>
+            <div class="social" > 
+                <a href="https://twitter.com/SoDoCodes" target="_blank">
+                    <img class="twitter" src="images/twitter_icon.png" width=3% height=3% alt="twitter"></a>
+                <a href="https://github.com/SoCodeDo" target="_blank">
+                    <img class="github" src="images/github_button.png" width=3% height=3% alt="github"></a>
+                <a href="https://www.linkedin.com/in/sophiadonan/" target="_blank">
+                    <img class="linkedin" src="images/LinkedIn_button.png" width=3% height=3% alt="linkedin"></a>   
+            </div>
+            <div class="clearfix"></div>
+            <h1 class="name">sophia donan</h1>
+            <h2 class="title">Fullstack Developer @ Ada Developers Academy | Cohort 14</h2>
+        </header>
+
+        <section>
+            <article class="blog_list">
+                <body>
+                    <h2>blog navigation</h2>
+                    <p>blog navigation will be here</p>
+                </body>
+            </article>    
+            <article class="blog_post">
+                  <div class="card">
+                    <h2>Hello, World</h2>
+                    <h4>My first blog post, January 9, 2020</h4>
+                    <img src="images/blog_image.png" alt="blog_image" style="width:200px;height:200px;">
+                    <h4>Who am I?</h4>
+                        <p>
+                        As someone who spent much of her college career studying writing; I still find it most challenging of all to write about the subject I know the most about: myself. But as I am creating a public portfolio and blog it seems only appropriate I take a moment to introduce myself, my background, and what brought me to this page.
+                        </p>
+                        <p>
+                        My name is Sophia and I am proudly a first-generation American with Filipino and Pacific Islander heritage. Growing up with an immigrant father who was also active-duty military, gave me the incredible gift of seeing others around the world through a lens that cultivated the importance of kindness and inclusivity. Always give more than you take: its the phrase I use to model all I do for my community and within it.
+                        </p>
+                    <h4>Social Justice + My Community</h4>
+                        <p>
+                        I started community service work at the ripe age of 14, volunteering with my local Boys and Girls club. It was how I spent my afternoons and weekends, and I loved how it made me feel, serving others and making their day a little brighter.
+                        </p>
+                        <p>
+                        In college, this passion for service transformed into social justice. I was inspired by the women at my university who shined with resiliency and a passion to make this world a better place for the next generation. I became an active participant and leader in on-campus social justice efforts such as Take Back the Night. I worked as an orientation leader and summer Resident Assistant, undertaking trainings such as LQBTQIA+ safe place and unconscious bias.
+                        </p>
+                        <p>
+                        Today, I’ve created a social justice focus that put youth front and center. I started volunteering at the local middle school, YWCA, and various community events.
+                        </p>
+                    <h4>Programming my Future</h4>
+                        <p>
+                        Programming was never presented to me as a career option. It wasn’t until I left college and started teaching myself HTML as a hobby that I began looking into career paths. I realized the industry had changed a lot, and the need for a CS degree was no longer an industry standard. I kept studying, casually, trying different tutorials and watching programming videos on youtube.
+                        </p>
+                        <p>
+                        Self-learning isn’t easy. It takes a lot of grit and even more self-accountability. But now, having a goal, I was focused. I knew what I had to accomplish. I created deadlines, exams, and even homework. I got frustrated when code wouldn’t run, and even more excited when I fixed that same bug. I coded on my phone during lunch breaks and I watched the same tutorials over and over again until a concept clicked.
+                        </p>
+                        <p>
+                        I am enjoying the journey (as cliche as it sounds). I’ve found something that makes me excited to open my computer. I’ve fallen in love with the process of learning, of failing, of getting back up again until something once foreign is now familiar.
+                        </p>
+                        <p>
+                        I love that you’re here. I hope you stay. Follow this blog, my twitter, and let’s learn to code together.
+                        </p>
+                  </div>
+            </article>
+        </section>
+
+        <footer class="footer">
+            <p>Copyright 2020. Sophia Donan.</p>
+        </footer>
+    </main>
+</html>
+
diff --git a/images/LinkedIn_button.png b/images/LinkedIn_button.png
diff --git a/images/about_icon.png b/images/about_icon.png
diff --git a/images/blog_image.png b/images/blog_image.png
diff --git a/images/blog_logo.png b/images/blog_logo.png
diff --git a/images/github_button.png b/images/github_button.png
diff --git a/images/home_icon.png b/images/home_icon.png
diff --git a/images/portfolio_logo.png b/images/portfolio_logo.png
diff --git a/images/sophia_illustration.png b/images/sophia_illustration.png
diff --git a/images/twitter_icon.png b/images/twitter_icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <title>Sophia's Portfolio</title>
+        <link rel="stylesheet" href="style.css">
+    </head>  
+
+    <main class="container">
+
+        <header>
+            <nav class="menu">
+                <a class="active" href="index.html" style="text-decoration: none">Home  |  </a></li>
+                <a href="about.html" style="text-decoration: none">About  |  </a></li>
+                <a href="portfolio.html" style="text-decoration: none">Portfolio  |  </a></li>
+                <a href="code-journal.html" style="text-decoration: none">Blog</a></li>
+            </nav>
+            <div class="social" > 
+                <a href="https://twitter.com/SoDoCodes" target="_blank">
+                    <img class="twitter" src="images/twitter_icon.png" width=3% height=3% alt="twitter"></a>
+                <a href="https://github.com/SoCodeDo" target="_blank">
+                    <img class="github" src="images/github_button.png" width=3% height=3% alt="github"></a>
+                <a href="https://www.linkedin.com/in/sophiadonan/" target="_blank">
+                    <img class="linkedin" src="images/LinkedIn_button.png" width=3% height=3% alt="linkedin"></a>   
+            </div>
+            <div class="clearfix"></div>
+            <h1 class="name">sophia donan</h1>
+            <h2 class="title">Fullstack Developer @ Ada Developers Academy | Cohort 14</h2>
+            <img src="images/sophia_illustration.png" alt="sophia_illustration" style="width:320px;height:300px;">
+        </header>
+
+        <footer class="footer">
+            <p>Copyright 2020. Sophia Donan.</p>
+        </footer>
+    </main>
+</html>
+
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <title>Sophia's Portfolio</title>
+        <link rel="stylesheet" href="style.css">
+    </head>  
+
+    <main class="container">
+        <header>
+            <nav class="menu">
+                <a class="active" href="index.html" style="text-decoration: none">Home  |  </a></li>
+                <a href="about.html" style="text-decoration: none">About  |  </a></li>
+                <a href="portfolio.html" style="text-decoration: none">Portfolio  |  </a></li>
+                <a href="code-journal.html" style="text-decoration: none">Blog</a></li>
+            </nav>
+            <div class="social" > 
+                <a href="https://twitter.com/SoDoCodes" target="_blank">
+                    <img class="twitter" src="images/twitter_icon.png" width=3% height=3% alt="twitter"></a>
+                <a href="https://github.com/SoCodeDo" target="_blank">
+                    <img class="github" src="images/github_button.png" width=3% height=3% alt="github"></a>
+                <a href="https://www.linkedin.com/in/sophiadonan/" target="_blank">
+                    <img class="linkedin" src="images/LinkedIn_button.png" width=3% height=3% alt="linkedin"></a>   
+            </div>
+            <div class="clearfix"></div>
+            <h1 class="name">sophia donan</h1>
+            <h2 class="title">Fullstack Developer @ Ada Developers Academy | Cohort 14</h2>
+        </header>
+
+        <section>
+            <article>
+                <body>
+                    <h2>Certificates</h2>
+                    <ul>
+                        <li>Udemy, Learn to code with Ruby</li>
+                        <li>FreeCodeCamp, HTML/CSS</li>
+                        <li>Harvard, CS 050 (in progress)</li>
+                        <li>Brilliant, Computer Science Fundementals (in progress)</li>
+                    </ul>
+                    <h2>Events/Conferences</h2>
+                    <ul>
+                        <li>Add Conferences, Hackathons, Seminars here as they are completed</li>
+                    </ul>
+                </body>
+            </article>
+            <article class="portfolio">
+                <body>
+                    <h2>Resumé (updated March 2020)</h2>
+                    <ul>
+                       <li><a href="resources/Sophia's Ada C14 resume.pdf" target="_blank">View PDF</a> </li>
+                    </ul>
+
+                    <h2>Recent Projects</h2>
+                    <ul>
+                        <li><a href="https://github.com/SoCodeDo" target="_blank">View Github Profile</a></li>
+                    </ul>
+                </body>
+            </article>
+        </section>
+
+        <footer class="footer">
+            <p>Copyright 2020. Sophia Donan.</p>
+        </footer>
+    </main>
+</html>
+
diff --git a/resources/Sophia's Ada C14 resume.pdf b/resources/Sophia's Ada C14 resume.pdf
diff --git a/style.css b/style.css
@@ -0,0 +1,140 @@
+* {
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: sans-serif
+  }
+
+  /* header */
+  header {
+    background-color: #F5CEC7;
+    padding: 10px;
+    text-align: center;
+    border-radius: 10px;
+  }
+  /* social media buttons */
+  .social {
+    background-color: #F5CEC7;
+    width:42%;
+    float: right;
+  }
+
+  .menu {
+    background-color: #F5CEC7;
+    width:55%;
+    margin-right:2%;
+    float: left;
+  }
+
+  .clearfix {
+    clear:both
+  }
+
+  /* create rainbow name block text */
+  h1.name {
+    margin-top: 0px;
+    margin-bottom: 50px;
+    text-align: center;
+    font-family: sans-serif;
+    font-size: 5rem;
+    letter-spacing: 0.20rem;
+    text-transform: uppercase;
+    color: black;
+    text-shadow: 4px 4px #f09b93,
+                 8px 8px #ebd6d7,
+                 12px 12px #f9ebd9,
+                 16px 16px #e9dd8a,
+                 20px 20px #439093,
+                 24px 24px #f09b93,
+                 28px 28px #ebd6d7,
+                 32px 32px #f9ebd9,
+                 36px 36px #e9dd8a;
+  }
+
+  h2 {
+    text-align: center;
+    color: #439093;
+    margin-top: 0px;
+    margin-bottom: 20px;
+
+  }
+
+  h2.title {
+    color: black;
+    font-family: 'Courier New', Courier, monospace;
+  }
+
+  h4 {
+    text-align: center;
+    color: #439093;
+    margin-top: 0px;
+    margin-bottom: 20px;
+
+  }
+  /* set background color of site */
+  body {
+    background-color: #F5CEC7;
+  }
+
+  /* Container for flexboxes */
+  section {
+    display: -webkit-flex;
+    display: flex;
+  }
+
+  /* Style the list inside the menu */
+  nav ul {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  /* content */
+  article {
+    -webkit-flex: 3;
+    -ms-flex: 3;
+    flex: 3;
+    background-color: #f9ebd9;
+    padding: 3px;
+    padding-block-end: 10px;
+    border-radius: 30px;
+    border-style: solid;
+    border-color: #F5CEC7;
+    border-width: 10px;
+  }
+  /* style tech stack box */
+  article.tech_stack {
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    text-align: center;
+  }
+
+  /* style tech stack box */
+  article.blog_list {
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    text-align: center;
+  }
+
+  /* style blog posts */
+  article.blog_post {
+    background-color: white;
+    text-align: center;
+  }
+  /* footer */
+  footer {
+    background-color: #F5CEC7;
+    padding: 5px;
+    text-align: center;
+    color: black;
+  }
+
+  /* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
+  @media (max-width: 600px) {
+    section {
+      -webkit-flex-direction: column;
+      flex-direction: column;
+    }
+  }