Adding project files

christinatruong · Jun 28, 2019 · c8cb481 · c8cb481
1 parent be5ad2c
commit c8cb481
Show file tree

Hide file tree

Showing 8 changed files with 343 additions and 0 deletions.
diff --git a/css-portfolio/css/styles.css b/css-portfolio/css/styles.css
@@ -0,0 +1,183 @@
+/*
+COLOR PALETTE
+https://coolors.co/f7fff7-343434-2f3061-ffe66d-a1c6d7
+#F7FFF7 - almost white
+#343434 - dark gray - almost black
+#2F3061 - blue dark
+#FFE66D - yellow
+#A1C6D7 - blue light
+*/
+
+
+/* Global styles
+------------------------------------*/
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  color: #343434;
+  margin: 0;
+  padding: 0;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 15px;
+  line-height: 1.5;
+}
+img {
+  width: 300px;
+}
+a {
+  color: #FFE66D;
+}
+a:hover {
+  text-decoration: none;
+}
+h1, h2 {
+  font-family: 'Caveat', cursive;
+  font-weight: 400;
+  margin: 0;
+}
+h1 {
+  font-size: 100px;
+  line-height: 1;
+}
+h2 {
+  font-size: 45px;
+}
+
+.content-wrap {
+  max-width: 800px;
+  width: 85%;
+  margin: 0 auto;
+  padding: 60px 0;
+}
+.item-details h3 {
+  margin-bottom: 0;
+}
+.item-details h3 + p {
+  font-style: italic;
+}
+.item-details h3 ~ p {
+  margin: 0;
+}
+.divider > section {
+  overflow: hidden;
+  border-bottom: 1px dashed #343434;
+  padding: 25px 0;
+}
+.divider > section:last-of-type {
+  border: none;
+}
+
+
+/* Profile
+------------------------------------*/
+header {
+  background: #2F3061;
+  color: #F7FFF7;
+}
+
+
+/* Projects
+------------------------------------*/
+.projects {
+  background: #F7FFF7;
+}
+.projects a {
+  color: #2F3061;
+}
+.projects .btn {
+  background: #2F3061;
+  color: #F7FFF7;
+  text-decoration: none;
+  padding: 8px;
+  border-radius: 4px;
+  display: inline-block;
+}
+.projects .btn:hover {
+  background: rgba(47,48,97,80%);
+}
+.project-item h3 {
+  margin-top: 0;
+}
+
+
+
+/* Work Experience
+------------------------------------*/
+.work-experience {
+  background: #A1C6D7;
+}
+
+
+
+/* Education
+------------------------------------*/
+.education {
+  background-image: url(../images/joanna-kosinska-unsplash.jpg);
+  background-position: top right;
+  background-size: cover;
+  padding-bottom: 100px;
+}
+.education p {
+  width: 60%;
+}
+
+
+/* Contact Info
+------------------------------------*/
+footer {
+  background: #343434;
+  color: #F7FFF7;
+}
+.contact-list {
+  list-style-type: none;
+  padding: 0;
+}
+.contact-list a {
+  padding: 5px;
+  display: inline-block;
+}
+
+
+/* Responsive
+------------------------------------*/
+@media screen and (min-width: 750px) {
+
+  header, footer {
+    text-align: center;
+  }
+
+  .project-item img {
+    float: left;
+    margin-right: 20px;
+  }
+
+  .job-item {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    column-gap: 20px;
+  }
+
+  .contact-list {
+    display: flex;
+    justify-content: center;
+  }
+  .contact-list a {
+    padding: 15px;
+  }
+}
+
+@media screen and (max-width: 749px) {
+  h1 {
+    font-size: 75px;
+    line-height: 0.9;
+    margin-bottom: 20px;
+  }
+  h2 {
+    line-height: 1;
+  }
+}
diff --git a/css-portfolio/images/annie-spratt-unsplash.jpg b/css-portfolio/images/annie-spratt-unsplash.jpg
diff --git a/css-portfolio/images/joanna-kosinska-unsplash.jpg b/css-portfolio/images/joanna-kosinska-unsplash.jpg
diff --git a/css-portfolio/images/project-courses.jpg b/css-portfolio/images/project-courses.jpg
diff --git a/css-portfolio/images/project-wire-ipsum.jpg b/css-portfolio/images/project-wire-ipsum.jpg
diff --git a/css-portfolio/images/project-women-tech.jpg b/css-portfolio/images/project-women-tech.jpg
diff --git a/css-portfolio/images/sharon-mccutcheon-unsplash.jpg b/css-portfolio/images/sharon-mccutcheon-unsplash.jpg
diff --git a/css-portfolio/index.html b/css-portfolio/index.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Christina Truong, Tech Educator + Front-end Developer</title>
+     <link href="https://fonts.googleapis.com/css?family=Caveat|Montserrat:400,600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/styles.css">
+  </head>
+  <body>
+    <main>
+      <!-- ***********************  ABOUT / PROFILE  *********************** -->
+      <header>
+        <div class="content-wrap">
+          <h1>Christina Truong</h1>
+          <h2>Tech Educator + Front-end Developer</h2>
+
+          <p>As a developer, I specialize in creating modular and scalable front-end architectures. As an educator, I focus on creating inclusive learning environments, instructor training and curriculum development.</p>
+          <p>I’m also exploring more creative pursuits designing tee shirts and accessories for <a href="http://teethang.com" target="_blank">Nuthin’ But a Tee Thang</a>, an online store I’m running with my husband.</p>
+        </div>
+      </header>
+
+      <!-- ********************  PROJECTS / PORTFOLIO  ********************* -->
+      <section class="projects">
+        <div class="content-wrap divider">
+          <h2>Featured Projects</h2>
+          <p>View selected projects below. More information can be found at <a href="http://christinatruong.com">christinatruong.com</a>.</p>
+
+          <!-- Project 1 -->
+          <section class="project-item">
+            <img src="images/project-courses.jpg" alt="course thumbnail">
+            <h3>Lynda / LinkedIn Learning Courses</h3>
+            <p>Developed content and instruction for various CSS and front-end focused web development courses including CSS Essential Training, Getting Your Website Online, Design Systems & Architectures and more.</p>
+            <a class="btn" href="https://www.linkedin.com/learning/instructors/christina-truong?u=2125562" target="_blank">LinkedIn Learning</a>
+            <a class="btn" href="https://www.lynda.com/Christina-Truong/7842227-1.html">Lynda.com</a>
+          </section>
+
+          <!-- Project 2 -->
+          <section class="project-item">
+            <img src="images/project-women-tech.jpg" alt="website thumbnail">
+            <h3>Women&&Tech</h3>
+            <p>Women&&Tech was launched in 2012 to feature interviews with different women working in the tech industry. I became familiar with them when I was invited to be one of the interviewees! A few years later, I joined the team and helped with the relaunch of the site as the front-end architect.</p>
+            <a class="btn" href="http://christinatruong.com/projects/women-and-tech-redesign.html" target="_blank">View the case study</a>
+          </section>
+
+          <!-- Project 3 -->
+          <section class="project-item">
+            <img src="images/project-wire-ipsum.jpg" alt="website thumbnail">
+            <h3>The Wire Ipsum</h3>
+            <p>After coming back from teaching a JavaScript workshop, I felt inspired to create something just for fun. I realized that of all the content/lorem ipsum generators available, there was nothing for HBO’s The Wire fans. I searched for <a href="http://thewireipsum.com" target="_blank">thewireipsum.com</a> domain and it was available! Generate some content for your projects today.</p>
+            <a class="btn" href="http://thewireipsum.com" target="_blank">View live site</a>
+          </section>
+        </div>
+      </section>
+
+      <!-- ***********************  WORK EXPERIENCE  *********************** -->
+      <section class="work-experience item-details">
+        <div class="content-wrap divider">
+          <h2>Work Experience</h2>
+          <p>See my complete work history on <a href="https://www.linkedin.com/in/christinatruong/">LinkedIn</a>.</p>
+
+          <!-- Job 1 -->
+          <section class="job-item">
+            <div class="job-details">
+              <h3>Front-end Developer & Educator</h3>
+              <p>Freelance</p>
+              <p>January 2012-Present</p>
+            </div>
+            <div class="job-summary">
+              <p>Provides various front-end related services ranging from development work, speaking engagements, instructor training, workshops, and curriculum development. See more at  <a href="http://christinatruong.com">christinatruong.com</a>.</p>
+            </div>
+          </section>
+
+          <!-- Job 2 -->
+          <section class="job-item">
+            <div class="job-details">
+              <h3>Director of Curriculum</h3>
+              <p>Ladies Learning Code</p>
+              <p>July 2014 - February 2016</p>
+            </div>
+            <div class="job-summary">
+              <p>Managed all curriculum for the adult programs. Created teaching materials and implemented instructor training across 20+ Canadian chapters.</p>
+              <p>Key contributions:</p>
+              <ul>
+                <li>Overhauled the curriculum and standardized the content and delivery.
+                  <ul>
+                    <li>Created 9 new workshops focusing on HTML, CSS, JavaScript, jQuery, Wordpress and Responsive Web Design.</li>
+                    <li>Created all Hackapalooza content (2 day conference style event) consisting of 2-4 hour workshop sessions.</li>
+                    <li>Created interactive slide deck template for consistent national workshop branding.</li>
+                    <li>Developed the Digital Skills part-time program curriculum.</li>
+                  </ul>
+                </li>
+                <li>Provided training for all instructors focusing on creating an inclusive and engaging learning environment.</li>
+                <li>Maintained the ladieslearningcode.com website.</li>
+                <li>Volunteer lead instructor from 2011-2014 for Toronto workshops and several chapter launches.</li>
+              </ul>
+            </div>
+          </section>
+
+          <!-- Job 3 -->
+          <section class="job-item">
+            <div class="job-details">
+              <h3>Lead Front-End Developer</h3>
+              <p>Field iD</p>
+              <p>March 2013 - February 2014</p>
+            </div>
+            <div class="job-details">
+              <p>Lead the front-end development for the in-house safety inspection software.</p>
+              <p>Key contributions:</p>
+              <ul>
+                <li>Responsible for setting code standards for the front-end development.</li>
+                <li>Created a fully customized front-end framework, including the UI/UX design.</li>
+                <li>Standardized the site architecture and design.</li>
+              </ul>
+            </div>
+          </section>
+        </div>
+      </section>
+
+      <!-- ******************  EDUCATION & CERTIFICATIONS ****************** -->
+      <section class="education item-details">
+        <div class="content-wrap">
+          <h2>Education</h2>
+
+          <section>
+            <h3>Seneca College - Toronto, ON</h3>
+            <p>Webmaster Content Site Design Certificate, 2006</p>
+            <p>14 week full-time program covering HTML, CSS, Flash, Photoshop, PHP and JavaScript.</p>
+          </section>
+
+          <section>
+            <h3>York University - Toronto, ON</h3>
+            <p>Bachelor of Arts with Honours, 2001-2005</p>
+            <p>Double Major in Communications & Psychology.</p>
+          </section>
+
+          <section>
+            <h3>San Jose State University - San Jose, CA</h3>
+            <p>General Studies, 2000</p>
+          </section>
+        </div>
+      </section>
+
+      <!-- *****************  CONTACT INFO / SOCIAL MEDIA  ***************** -->
+      <footer>
+        <div class="content-wrap">
+          <h2>Let's Keep in Touch!</h2>
+
+          <!-- Social media and contact links. Add or remove any networks. -->
+          <ul class="contact-list">
+            <li><a href="mailto:[email protected]">[email protected]</a></li>
+            <li><a href="http://christinatruong.com" target="_blank">christinatruong.com</a></li>
+            <li><a href="http://twitter.com/christinatruong" target="_blank">Twitter</a></li>
+            <li><a href="#" target="_blank">LinkedIn</a></li>
+          </ul>
+        </div>
+      </footer>
+    </main>
+  </body>
+</html>