__Women Who Code CONNECT Recharge, May 2022__

I built and rebuilt my portfolio site over a dozen times! Why? Because I didn’t know what to avoid when creating one! If you’re in job hunting mode a well-crafted portfolio could help you stand out. In this talk, I’ll show all the mistakes I made and how you can avoid them.

- [Viedo](https://youtu.be/rKZRpOWHYOQ)
- [Slides](https://docs.google.com/presentation/d/1gEx5sapWNe9y38AXp9wrcHncm-McqyYGX9qw6mul2sQ/edit?usp=sharing)
- [Resources](https://github.com/christylaguardia/tech-talks/blob/main/portfolio/about.md)

Pitfalls to Avoid When Creating Your Portfolio Site

![ICSA](//images.ctfassets.net/zhoi05y1tg91/3sIFByVweQZXt2KV1WQoZ1/147e4cf7cd6bc8a8d27811af3452521f/ICSA_Logo.jpeg)

Founded in 1979, the International Cultic Studies Association (ICSA) is a global network of people and psychologists concerned about psychological manipulation and abuse in cultic and other high-control environments.

__Context:__
The non-profit has reached a critical point in its growth and evolution. The organizers had some technical concerns regarding the scalability and design of the website, and how it can help them reach their current goals.

__How I Helped:__
With this in mind, I performed a basic technical audit and a simple content audit. From there I created documents outlining and educating the team on technical and cost considerations when building out their marketing strategy and creating a new website. This consulting was well received and helped guide the organizers on how to take on their massive website redesign project.

[Support the non-profit.](https://www.icsahome.com/membership)

Website audit and recommendations for the non-profit.

Logo for the International Cultic Studies Association (ICSA)

ICSA

International Cultic Studies Association (ICSA)

__Alchemy Code Lab, November 2021__

One of the biggest challenges I faced as a new engineer was learning how to pause before coding, plan my work and collaborate with my co-workers. Since there aren't any hard-set industry standards for designing software, nor could there be, a common practice is to create a Technical Design Document (TDD) explaining your how you plan to tackle your project.

Writing a TDD is a skill, and it takes practice to master. It's my belief that starting early in your career will help you learn, grow and advance.

In this workshop, I'll go over the basics. I'll show you how know when you need a TDD and how to think through your design. I'll share with you some examples and templates for all levels of complexity and difficulty.

- [Presentation Slides](https://github.com/christylaguardia/tech-talks/blob/main/tdd-workshop/presentation.md)
- [Resources and Templates](https://github.com/christylaguardia/tech-talks/blob/main/tdd-workshop/about.md)

Laptop Working

How to write a Technical Design Document

__Problem:__
For years, ClassPass has relied on manual testing to signal the quality of our releases. The growth of the product has outpaced the human resources, leaving many gaps in testing coverage. Engineers have had to carry the burden of a lack of specialized quality engineers.

__Solution:__
I complied detailed technical documents on the current state of testing across our stacks, as well as test coverage by our Quality Assurance team, with a proposed plan on how to reach our ideal state of continuous testing through the software development life cycle.

I also selected and implemented a no-code platform to usher in the next phase of testing that enabled our Quality Assurance team to create and maintain own automated tests.

Laying the foundation for future Quality Engineers.

Engineering Test Vision

![HitchCon '21](//images.ctfassets.net/zhoi05y1tg91/6fI6hk4C6q27aLQYJf2im7/27da5b9c2faf0ae70e6d3ddc4d618f12/HitchCon_22.jpeg)

__Context:__
The newly formed HitchCon organization was in over its head for hosting its first-ever remote international convention.

__How I Helped:__
I stepped in and helped with web design and development, administrative tasks, project planning, and producing the live event - which was a hit!

[Get tickets to HitchCon '22!](https://www.hitchcon.org/)

A conference exploring the quest for love in the films of Alfred Hitchcock.

HitchCon '21

__Problem:__
Content tagging is a manual effort, leaving a small team to handle hundreds of thousands of tags a month. The tags themselves are not always accurate and has negatively affected the customer search experience.

__Solution:__
I built a new interface for applying content tags that would send model feedback to our machine learning engine to train it. This work also included migrating legacy code over to a newer, more modern, tech stack.

Internal tooling for training a machine learning model.

ML Content Tagging Admin

![Path to Partnership](//images.ctfassets.net/zhoi05y1tg91/3FMySzQgX5JUHwiCYhoie1/ed095076e5d1305d36c40ee5cf0cc7b5/frame_safari_light.png)

__Problem:__
The rapid growth of ClassPass exposed some inefficient and unscalable processes for adding new fitness partners to the platform. 	"My team first focused on quickly releasing the capability to onboard Livestream partners, which enabled fitness instructors impacted by the COVID-19 pandemic around the world to begin rebuilding their business and operating safely from home.

__Solution:__
My team first focused on quickly releasing the capability to onboard Livestream partners, which enabled fitness instructors impacted by the COVID-19 pandemic around the world to begin rebuilding their business and operating safely from home.

The next phase of the project included building out new public-facing web pages that could be configured for all the different signup flows and handle the flow of data. Once signed up, the new partner needed to be guided on how to finish their profile, set up their account, and add their classes and schedules, so we added a new user interface to the partner's dashboard to enable them to fully launch their business on ClassPass.

These new product features virtually eliminated the need for live customer support and collapsed the time-to-go-live from 22 days to just a few minutes.

[Start the path to partnership.](https://studios.classpass.com/path-to-partnership)

Enabling self-service to quickly scale partner acquisition.

Path to Partnership

Partner Sign Up and Onboarding

![Claimable Venue Page](//images.ctfassets.net/zhoi05y1tg91/6LHRq40cFJmqP30zJjSZfx/7d2c35afd58e1ecda57b83294a043575/frame_chrome_mac_light__1_.png)

__Problem__: 
The ClassPass sales team had complied a huge database of leads but the data was just sitting unused.

__Solution__:
I worked on the front end, adding new content elements and styling to classpass.com, in order to allow a prospective partners to initiate the ""claim"" process and start their path to partnership.

This product work helped scale partner signups by inbound discovery and organic traffic as well as providing a persuasive selling tool to boost sales pitches."	React, CSS, Cloudinary

[Claim the venue.](https://classpass.com/studios/5th-street-powerhouse-temple)

Leveraging lead generation to inbound boost sales.

Source: https://classpass.com/studios/5th-street-powerhouse-temple

Claimable Venue Page

Claimable Venue Pages

__Problem:__
The business had ambitious goals to add more "pins on the map," that is partner venues, but the current internal tooling was clunky and dispersed over multiple UIs and services.

__Solution:__
My team and I did a deep dive into the existing processes and consolidated them into one seamless and streamline UI. I was responsible for building out the web pages, while working closely with backend engineers on the database design. The result was reducing time to build a venue page from 20 minutes to just 5 minutes.

An internal tool for quickly creating venue pages for classpass.com.

Venue Page Builder

![Booq Screenshot](//images.ctfassets.net/zhoi05y1tg91/5gsXX29KjxsEsJs9NZCk28/eb3901d49490d032c015544058c70d43/booq_resourcing.png)

__Problem__: Gigs in the entertainment industry need to be resourced quickly. With so many balls in the air, resources resort to a logistical nightmare of spreadsheets and sticky notes.

__Solution__: I led building architecture of the full-stack app and led a team of two other engineers in rapidly iterating on UI features and user flows after each experiment, while advising the client on technical solutions.

[Read the case study](https://www.modop.com/case-study/booq/)

Mobile app for project managers to secure and book talent

booq

BOOQ

![Meguiar's Product Advisor](//images.ctfassets.net/zhoi05y1tg91/507kiSeFreAEYAJRwUIxVB/a9d30da53fdb552ad59564aebf802afb/Screen_Shot_2021-02-19_at_12.14.41_AM.png)

__Problem__: Meguiar knows their car care products. They wanted to provide a way for customers to quickly decide which of the tried and tested products is right for their vehicle.

__Solution__: A simple react app did just the job. I bootstrapped the app and architected the way for the products to be paired with a configurable decision tree.

[Try the app](https://www.meguiars.com/product-advisor)


meguiars

Meguiar's Product Advisor

![HPP](//images.ctfassets.net/zhoi05y1tg91/152p03aqxPlkkxqjJpChY0/9dccee3c9efba6c0aab4629bc6f1d64a/Screen_Shot_2019-09-07_at_3.47.58_PM.png)

[View the app](http://www.hudsonpacificproperties.com/)

__Problem__: Their look-and-feel had become outdated; further, the site was difficult to navigate and finding properties to lease or buy could be difficult.

__Solution__: I responded to the re-brand team’s demands to build the front-end architecture of the rebuilt web app, and implement SEO optimized server side rendering. I also innovated an intuitive property search feature that integrated with a customized Google map.

New web experience for a major, publicly-traded real estate firm.

Hudson Pacific Properties

![Bulma CodePens](//images.ctfassets.net/zhoi05y1tg91/6yQCVRNUvC40Mm1lekve0p/33bbd22b37158f940ccb0fd4c3e68254/Screen_Shot_2021-02-19_at_12.05.30_AM.png)

Bulma is a free, open-source CSS framework based on Flexbox. While using the framework, I found that there wasn’t documentation on how to create common user interfaces layouts, so I created CodePens to share with the React+Bulma community.

[View my pens](https://codepen.io/christylaguardia/pens/tags/?selected_tag=bulma)

Bulma

Bulma Layouts: Chat Messeger, Modal and Stacked Buttons

![Rock Paper Scissors Lizard Spock](//images.ctfassets.net/zhoi05y1tg91/2lXBodB2Rb1IiJvS16XEOa/65597db526cd61c2471c7ac46de08e2d/Rock_Paper_Scissors_Lizard_Spock_frame_chrome_mac_dark.png)

A simple game, expanded on the typical game Rock, Paper, Scissors. As seen on TV.

[Play the game](https://rpslp.herokuapp.com/)

Rock Paper Scissors Lizard Spock

![NikeConnect](//images.ctfassets.net/zhoi05y1tg91/5P1I04GA6wGgOmB7WpVfny/0dc30be995cb75bcbf362e3977b859b2/nike.png)

[Get the app](https://apps.apple.com/us/app/nikeconnect/id1267635264)

__Problem__: Everyone wants free merch, but only a select few will be lucky enough to win.

__Solution__: I worked on a front-end feature that allowed users from all over the world to enter a drawing for product prizes and find out if they won (or lost).

Mobile app connecting NBA fans to exclusive content.

NikeConnect

![JDRE iPad](//images.ctfassets.net/zhoi05y1tg91/1f9KaxnlCjnw09BIFwUc9E/2fcaf26e6b7c37c79d314da8a6ca121d/ipad.png)

[Download the iOS app](https://apps.apple.com/us/app/id1425161294)

__Problem__: Historically, real estate industry technology has been limited, clunky and expensive. Entrepreneur Jimmy Dorsey had a dream of disrupting the industry with a modern business plan —and the tech to support it.

__Solution__: I created the app, including implementation of the Stripe Payment API on both client and server and developing business tools to help manage subscribers.

The world’s first subscription-based realty service app.

Jimmy Dorsey Real Estate

![Secure Page](//images.ctfassets.net/zhoi05y1tg91/Np3R7pPjA76MR1nwYLg8Z/b3f47d6b81510e0f7470689f6638f15f/secrure_app_frame_chrome_mac_dark.png)

Our project is an authentication security solution that is intended for publication as an npm package. It suspends user accounts based on failed login attempts and captures IP address, geolocation and other related metadata.

It also leverages the [Sqreen REST API](https://doc.sqreen.io/reference) to identify IP addresses and email addresses that are known to be malicious and prevents user sign-up or sign-in. Malicious IP and email addresses are added to internal blacklists that can be exported and shared with IT security teams. Developers can install our security package for use in their new and existing apps that require enhanced login security.

[View the source code](https://github.com/ACL-CMS-P1/carret/)

Hacker screening API to be used as part of server-side authentication.

Secure App

Secure Page

![Varcity Network](//images.ctfassets.net/zhoi05y1tg91/4fDyPiU0TO3IAcZ8keSNta/dd1a910d146c43183fd0fa45f27cead4/varcity.jpg)

[Read about the power of community](https://www.alchemycodelab.com/blog/the-power-of-community-technology)

__Problem__: Black entrepreneurs in Portland have been hit the hardest by recent small business lending drops.

__Solution__: I connected with a local entrepreneur at a pitch event and offered to volunteer to design and build his prototype app. Due, in part, to the strength of this application, he was accepted into the Portland Incubator Experiment (P.I.E.) incubator program and invited to present at Web Summit. Further, this development has inspired my code school to partner with startups on an ongoing basis to provide students with real-world practice.

An educational social network for underprivileged student-athletes.

Varcity Network

![Dragon's Lair](//images.ctfassets.net/zhoi05y1tg91/5Sw95w8EobJ9pY9C60yDST/1286d96def3338f138276a2b93ec9052/icon-dragons-lair-logo-512x512.png)

[View the source code](https://github.com/christylaguardia/adventure-game)

A modern recreation of the infamous 1980 laserdisc game Dragon's Lair.

Dragon's Lair

Dragons Lair

![Garage Fellows](//images.ctfassets.net/zhoi05y1tg91/1etYnyZYUVLgA3e8W2CDI0/b3137066b65f2909d6d48801dfa97795/screencapture-garagefellows-herokuapp-shop-2021-02-19-01_23_18.png)

For the final project for Code Fellow's bootcamp class, my team and I created an online swap meet for automotive hobbyists to buy the parts they need—and sell the ones they don’t.

We build a Node web server with ExpressJS and built the UI using the MVC pattern and jQuery. We also seeded the PostgreSQL database by creating a script to generate sample data. 

[View the app](https://garagefellows.herokuapp.com/)
[View the source code](https://github.com/christylaguardia/garage-fellows)

Garage Fellows

__Problem:__ 90% of the phone calls for request a quote for a walk-in cooler or freezer equipment replacement for a restaurant or convenience store are simple enough to quote over the phone. So why not empower the guys at the store counter to quote with the right tool? 

__Solution:__ Working closely with refrigeration engineers and experts, I helped design the UI for this tool. I also created the process to take raw refrigeration data and perform nonlinear regression analysis and curve fitting, which outputted the secret sauce necessary for the web app to create quotes and drive sales.

Internal web app to calculate, select and quote commercial refrigeration walk-in coolers.

Refrigeration Sizing Tool

Johnstone Supply's cross-reference database is one of their biggest competitive advantages. This database contains over 4.5 million parts, 2 million cross-references, and 300,000 equipment models for over 1,500 brands relevant to the HVAC-R industry. For the guys at the counter, this is their go-to search to provide their customers with quick and accurate service.

__Problem:__ The database and search UI was outdated and wasn't fully utilizing all that it had to offer. Also, the platform to manage the data itself clunky and required lots of manual SQL processing.

__Solution:__ After much research on how to best serve our stores, my team and I worked on the first big initiative, a face-lift with added search features. I also led the migration of millions of records to our internal product inventory management software, which improved work processes and unlocked integration the cross-reference with our product database.

Modernizing an essential tool for 400 stores nationwide.

Christy La Guardia

Talks

Consulting

ClassPass

Client

Personal

Student