diff --git a/css-portfolio/css/styles.css b/css-portfolio/css/styles.css new file mode 100644 index 0000000..ccd4f64 --- /dev/null +++ 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 new file mode 100644 index 0000000..696d456 Binary files /dev/null and b/css-portfolio/images/annie-spratt-unsplash.jpg differ diff --git a/css-portfolio/images/joanna-kosinska-unsplash.jpg b/css-portfolio/images/joanna-kosinska-unsplash.jpg new file mode 100644 index 0000000..c7d92ed Binary files /dev/null and b/css-portfolio/images/joanna-kosinska-unsplash.jpg differ diff --git a/css-portfolio/images/project-courses.jpg b/css-portfolio/images/project-courses.jpg new file mode 100644 index 0000000..109beb4 Binary files /dev/null and b/css-portfolio/images/project-courses.jpg differ diff --git a/css-portfolio/images/project-wire-ipsum.jpg b/css-portfolio/images/project-wire-ipsum.jpg new file mode 100644 index 0000000..ab3e464 Binary files /dev/null and b/css-portfolio/images/project-wire-ipsum.jpg differ diff --git a/css-portfolio/images/project-women-tech.jpg b/css-portfolio/images/project-women-tech.jpg new file mode 100644 index 0000000..4d1f34e Binary files /dev/null and b/css-portfolio/images/project-women-tech.jpg differ diff --git a/css-portfolio/images/sharon-mccutcheon-unsplash.jpg b/css-portfolio/images/sharon-mccutcheon-unsplash.jpg new file mode 100644 index 0000000..af2928f Binary files /dev/null and b/css-portfolio/images/sharon-mccutcheon-unsplash.jpg differ diff --git a/css-portfolio/index.html b/css-portfolio/index.html new file mode 100644 index 0000000..3642846 --- /dev/null +++ b/css-portfolio/index.html @@ -0,0 +1,160 @@ + + + + + + Christina Truong, Tech Educator + Front-end Developer + + + + +
+ +
+
+

Christina Truong

+

Tech Educator + Front-end Developer

+ +

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.

+

I’m also exploring more creative pursuits designing tee shirts and accessories for Nuthin’ But a Tee Thang, an online store I’m running with my husband.

+
+
+ + +
+
+

Featured Projects

+

View selected projects below. More information can be found at christinatruong.com.

+ + +
+ course thumbnail +

Lynda / LinkedIn Learning Courses

+

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.

+ LinkedIn Learning + Lynda.com +
+ + +
+ website thumbnail +

Women&&Tech

+

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.

+ View the case study +
+ + +
+ website thumbnail +

The Wire Ipsum

+

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 thewireipsum.com domain and it was available! Generate some content for your projects today.

+ View live site +
+
+
+ + +
+
+

Work Experience

+

See my complete work history on LinkedIn.

+ + +
+
+

Front-end Developer & Educator

+

Freelance

+

January 2012-Present

+
+
+

Provides various front-end related services ranging from development work, speaking engagements, instructor training, workshops, and curriculum development. See more at christinatruong.com.

+
+
+ + +
+
+

Director of Curriculum

+

Ladies Learning Code

+

July 2014 - February 2016

+
+
+

Managed all curriculum for the adult programs. Created teaching materials and implemented instructor training across 20+ Canadian chapters.

+

Key contributions:

+
    +
  • Overhauled the curriculum and standardized the content and delivery. +
      +
    • Created 9 new workshops focusing on HTML, CSS, JavaScript, jQuery, Wordpress and Responsive Web Design.
      • +
    • Created all Hackapalooza content (2 day conference style event) consisting of 2-4 hour workshop sessions.
      • +
    • Created interactive slide deck template for consistent national workshop branding.
      • +
    • Developed the Digital Skills part-time program curriculum.
      • +
    +
    • +
  • Provided training for all instructors focusing on creating an inclusive and engaging learning environment.
    • +
  • Maintained the ladieslearningcode.com website.
    • +
  • Volunteer lead instructor from 2011-2014 for Toronto workshops and several chapter launches.
    • +
+
+
+ + +
+
+

Lead Front-End Developer

+

Field iD

+

March 2013 - February 2014

+
+
+

Lead the front-end development for the in-house safety inspection software.

+

Key contributions:

+
    +
  • Responsible for setting code standards for the front-end development.
    • +
  • Created a fully customized front-end framework, including the UI/UX design.
    • +
  • Standardized the site architecture and design.
    • +
+
+
+
+
+ + +
+
+

Education

+ +
+

Seneca College - Toronto, ON

+

Webmaster Content Site Design Certificate, 2006

+

14 week full-time program covering HTML, CSS, Flash, Photoshop, PHP and JavaScript.

+
+ +
+

York University - Toronto, ON

+

Bachelor of Arts with Honours, 2001-2005

+

Double Major in Communications & Psychology.

+
+ +
+

San Jose State University - San Jose, CA

+

General Studies, 2000

+
+
+
+ + + +
+ +