Timothy Wong’s Work
These are just a few examples I have worked on in the previous years maintaining employer’s brand on webpages.
Travel Corporation – Insight Vacations
Prepare for brochure launch and redesign brand pages using new Sitecore template and components
The destination page project was to enhance the high traffic pages of the website which was the destination pages according to google analytics.
Brand pages are prepared for brochure launch, all images are edited in Figma or photoshop. Components are based off on designs in Figma.
Additional pages:
Key Skills Used – Components, HTML, CSS, Photoshop
Alongside the brand refresh, we had to code based off a design system that was made within Figma from scratch. Just the start and piece of a universal CSS so all digital marketing specialist could reuse.
Key Skills Used – Figma, CSS
/* Front-end grid*/
/* Section */
.iv_section {
clear: both;
margin: 0px;
padding: 0px;
}
/* Column */
.iv_grid {
display: block;
float: left;
margin: 1% 0 1% 2%;
}
.iv_section .iv_grid:first-child {
margin-left: 0 !important;
}
/* Row */
.iv_row:before,
.iv_row::after,
.iv_section::after {
content: "";
display: table;
clear: both;
}
.iv_row {
zoom: 1; /* For IE 6/7 */
}
/* Grid */
.iv_grid_1 {
width: 6.5%;
}
.iv_grid_2 {
width: 15%;
}
.iv_grid_3 {
width: 23.5%;
}
.iv_grid_4 {
width: 32%;
}
.iv_grid_5 {
width: 40.5%;
}
.iv_grid_6 {
width: 49%;
}
.iv_grid_7 {
width: 57.5%;
}
.iv_grid_8 {
width: 66%;
}
.iv_grid_9 {
width: 74.5%;
}
.iv_grid_10 {
width: 83%;
}
.iv_grid_11 {
width: 91.5%;
}
.iv_grid_12 {
width: 100%;
}
/** spacing **/
.ivlg_spacing--reset {
margin: 0;
padding: 0;
}
.ivlg_spacing_top--8 {
margin-top: 8px;
}
.ivlg_spacing_top--16 {
margin-top: 16px;
}
.ivlg_spacing_top--24 {
margin-top: 24px;
}
.ivlg_spacing_top--32 {
margin-top: 32px;
}
.ivlg_spacing_top--40 {
margin-top: 40px;
}
.ivlg_spacing_top--48,
.iv_spacing_top_48 {
margin-top: 48px;
}
.ivlg_spacing_bottom--8 {
margin-bottom: 8px;
}
.ivlg_spacing_bottom--16 {
margin-bottom: 16px;
}
.ivlg_spacing_bottom--24 {
margin-bottom: 24px;
}
.ivlg_spacing_bottom--32 {
margin-bottom: 32px;
}
.ivlg_spacing_bottom--40 {
margin-bottom: 40px;
}
.ivlg_spacing_bottom--48 {
margin-bottom: 48px;
}
.ivlg_flex--center {
display: flex;
align-items: center;
justify-content: center;
}
.ivlg_logo--8080 {
width: 80px;
height: 80px;
object-fit: cover;
margin-right: 16px;
}
.iv_center,
.ivlg_font--center {
text-align: center;
}
.iv_video {
max-width: 640px;
margin: 24px auto;
}
.iv_video--large {
max-width: 880px;
}
.iv_video_container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.iv_video_content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ivlg_box_content {
display: flex;
flex-direction: column;
text-align: left;
margin: 10px 0;
min-height: 380px;
}
.ivlg_box_content_link {
margin-top: auto;
font-size: 16px;
text-transform: uppercase;
}
/* Universal IV styling */
.iv_font--family-adobegaramond {
font-family: Adobe Garamond Pro;
}
.iv_font--family-effraregular {
font-family: effra-regular;
}
.iv_font--family-effrabold {
font-family: Effra-Bold;
}
.iv_font--colorLightBlue {
color: #a7d0ec;
}
.iv_font--colorMidBlue {
color: #114a9f;
}
.iv_font--colorBlack {
color: #000;
}
.iv_font--colorWhite {
color: #fff;
}
.iv_font--colorRed {
color: rgba(219, 51, 40, 1);
}
.ivlg_font--center {
text-align: center;
}
.ivlg_font--uppercase {
text-transform: uppercase;
}
.ivlg_font--italic {
font-style: italic;
}
.ivlg_font--bold {
font-weight: 600;
}
.iv_heading {
font-family: Effra-Bold;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}
.iv_heading--normal {
font-family: effra-regular;
font-weight: normal;
}
.iv_heading--one {
font-size: 68px;
line-height: 80px;
}
.iv_heading--two {
font-size: 48px;
line-height: 1em;
}
.iv_heading--three {
font-size: 32px;
line-height: 40px;
}
.iv_heading--four {
font-size: 24px;
line-height: 32px;
margin-bottom: 16px;
}
.iv_heading--five {
font-size: 20px;
line-height: 24px;
}
.iv_heading--six {
font-size: 18px;
line-height: 24px;
}
.iv_subtitle {
font-family: Adobe Garamond Pro;
font-style: italic;
font-weight: normal;
}
.iv_subtitle--one {
font-size: 36px;
line-height: 40px;
}
.iv_subtitle--two {
font-size: 24px;
line-height: 32px;
}
.iv_font--large {
font-size: 18px;
line-height: 32px;
color: #282828;
}
.iv_font--regular {
font-size: 16px;
line-height: 24px;
color: #282828;
}
.iv_font--small {
font-size: 14px;
line-height: 24px;
color: #282828;
}
.iv_button {
font-family: "effra-regular";
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 14px;
letter-spacing: 0.4px;
text-transform: uppercase;
min-width: 168px;
border-radius: 4px;
padding: 12px 24px;
margin: 8px 0;
}
.iv_caption--one {
font-family: "effra-regular";
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
}
.iv_caption--two {
font-family: "effra-regular";
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 16px;
}
/* Extra small devices (phones, 780px and down) */
@media only screen and (max-width: 780px) {
.ivlg_grid {
margin: 1% 0 1% 0 !important;
}
[class*="ivlg_grid_"] {
width: 100% !important;
}
[class*="ivlg_spacing_top--"] {
margin-top: 16px;
}
[class*="ivlg_spacing_bottom--"] {
margin-bottom: 16px;
}
}
Travel Corporation – Luxury Gold
Rebrand of partnered non-for-profit initiative pages and other brand pages
Another example of content updates and a unified design within a brand for styling.
Key Skills Used – Components, HTML, CSS, Photoshop
Morneau Shephell
Process a Web accessibility process and make site enhancements to the pages and user interface.
While working at Morneau Shephell, I learned about web design and got to learn about Design Systems and User Experience (personas, red routes, card sorting). Attempted to start initial builds of development of the design system.
Key Skills Used – Figma, Angular.js, HTML, SCSS, Kendo UI
Heart & Stroke Foundation
Content updates for their national and provincial events year over year
Launch national and provincial events by configuring and manipulating code in Luminate Online.
- My Own Fundraiser
- Jump Rope for Heart
Additional pages:
Key Skills Used – Luminate Online, HTML, CSS, JavaScript