";margin-left:.25rem;opacity:0;transform:var(--tw-transform)}#menu nav>ul>li li a:after{content:"\2000\266F";margin-left:.25rem}#menu nav>ul>li>a.active:after,#menu nav>ul>li>a.active:before,#menu nav>ul>li>a:hover:after,#menu nav>ul>li>a:hover:before{--tw-translate-x:0px;opacity:1;transform:var(--tw-transform)}@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url(/static/ibm-plex-mono-v6-latin-regular-c708fd4f02694c48059ff599eaab6a33.woff2) format("woff2")}@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:italic;font-weight:400;src:url(/static/ibm-plex-mono-v6-latin-italic-1c4b3c62369a45fdc78f4146f9b16417.woff2) format("woff2")}@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:500;src:url(/static/ibm-plex-mono-v6-latin-500-1eeaa99b03ad926d0cd60abcc4ffb901.woff2) format("woff2")}@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:italic;font-weight:500;src:url(/static/ibm-plex-mono-v6-latin-500italic-2f3ff4c87e1d23f6a7be79e61607dbc7.woff2) format("woff2")}@font-face{font-display:swap;font-family:"IBM Plex Serif";font-style:normal;font-weight:400;src:url(/static/ibm-plex-serif-v9-latin-regular-36d1794d9b478119b1b23f3314b20fc5.woff2) format("woff2")}@font-face{font-display:swap;font-family:"IBM Plex Serif";font-style:italic;font-weight:400;src:url(/static/ibm-plex-serif-v9-latin-italic-1736b2738313516b472e52013d0421bf.woff2) format("woff2")}@font-face{font-display:swap;font-family:"IBM Plex Serif";font-style:normal;font-weight:500;src:url(/static/ibm-plex-serif-v9-latin-500-a3db2c3279ad389f04960680d4d7ace4.woff2) format("woff2")}@font-face{font-display:swap;font-family:"IBM Plex Serif";font-style:italic;font-weight:500;src:url(/static/ibm-plex-serif-v9-latin-500italic-dfe083aeb3676418aeef628322e91a06.woff2) format("woff2")}@font-face{font-display:swap;font-family:"IBM Plex Serif";font-style:normal;font-weight:700;src:url(/static/ibm-plex-serif-v9-latin-700-455f367c7984c7d84297d04183e73a85.woff2) format("woff2")}@font-face{font-display:swap;font-family:"IBM Plex Serif";font-style:italic;font-weight:700;src:url(/static/ibm-plex-serif-v9-latin-700italic-0526086c877f65395725c48335ed63db.woff2) format("woff2")}.link,.link-primary{display:inline-block;font-weight:500}.link{cursor:pointer;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:from-font}.link-primary,.link:hover{color:var(--primary)}.link-primary{cursor:pointer}.link-primary:hover{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:from-font}.overflow-grad{background:linear-gradient(90deg,transparent 0,var(--secondary) 70%);bottom:0;display:block;position:absolute;right:0;width:15%}.icon{fill:currentColor;display:inline-block;font-style:normal;font-weight:400;text-transform:none}.icon,.icon~*{vertical-align:middle}.icon-spinner{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}.icon-spinner>circle{fill:none;stroke:currentColor;stroke-width:5;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.btn{--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);background-color:var(--accent);border-color:var(--accent);border-radius:.25rem;border-width:2px;box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);color:var(--typo-dim);cursor:pointer;display:inline-block;font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1rem;font-style:italic;font-weight:500;line-height:1.5rem;padding:.5rem 1.5rem;position:relative;text-shadow:none;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{outline:2px solid transparent;outline-offset:2px}.btn.btn-mono,.btn.btn-tiny{--tw-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);font-style:normal}.btn.btn-tiny{border-width:1px;font-size:.75rem;line-height:1rem;padding:0 .375rem}.btn.btn-mono,.btn.btn-tiny{font-family:"IBM Plex Serif",ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.btn.btn-mono{line-height:1;padding:.5rem}.btn.btn-disabled{cursor:auto}.btn.btn-active:not(.btn-disabled),.btn:hover:not(.btn-disabled){background-color:var(--typo-dim);border-color:var(--typo-dim);color:var(--accent)}.btn.btn-outline{background-color:initial;color:var(--accent)}.btn.btn-outline.btn-active:not(.btn-disabled),.btn.btn-outline:hover:not(.btn-disabled){background-color:var(--accent);border-color:var(--accent);color:var(--typo-dim)}.btn.btn-alt{background-color:var(--typo-dim);border-color:var(--typo-dim);color:var(--accent)}.btn.btn-alt.btn-active:not(.btn-disabled),.btn.btn-alt:hover:not(.btn-disabled){background-color:var(--accent);border-color:var(--accent);color:var(--typo-dim)}.btn.btn-alt.btn-outline{background-color:initial;color:var(--typo-dim)}.btn.btn-alt.btn-outline.btn-active:not(.btn-disabled),.btn.btn-alt.btn-outline:hover:not(.btn-disabled){background-color:var(--typo-dim);border-color:var(--typo-dim);color:var(--accent)}.btn.btn-primary{background-color:var(--primary);border-color:var(--primary);color:var(--accent)}.btn.btn-primary.btn-active:not(.btn-disabled),.btn.btn-primary:hover:not(.btn-disabled){background-color:var(--typo-dim);border-color:var(--typo-dim);color:var(--accent)}.btn.btn-primary.btn-outline{background-color:initial;color:var(--primary)}.btn.btn-primary.btn-outline.btn-active:not(.btn-disabled),.btn.btn-primary.btn-outline:hover:not(.btn-disabled){background-color:var(--primary);border-color:var(--primary);color:var(--accent)}.btn-group>.btn:not(:last-child){margin-right:1rem}.btn-group>.btn:not(:last-child).btn-tiny{margin-right:.5rem}.btn-group.btn-group-glue>.btn:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0;margin-right:0}.btn-group.btn-group-glue>.btn:not(:last-child).btn-outline{border-right-width:0}.btn-group.btn-group-glue>.btn:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.typewriter .typewriter-cursor{-webkit-animation:blink .8s infinite;animation:blink .8s infinite}@-webkit-keyframes blink{0%{opacity:1}to{opacity:0}}@keyframes blink{0%{opacity:1}to{opacity:0}}.sep{background-color:var(--primary);border-width:0;width:100%}.sep.sep-gradient{background:linear-gradient(90deg,var(--primary) 0,transparent 85%)}.sep{height:1px}.sep.sep-2{height:2px}.typography{font-size:1.125rem;line-height:1.75rem}.typography>:first-child{margin-top:0}.typography>:last-child{margin-bottom:0}.typography p{margin-bottom:1.3em;margin-top:1.3em}.typography a{color:var(--primary);font-weight:500}.typography a:hover{text-decoration:underline}.typography strong{color:var(--typo-dim);font-weight:600}.typography blockquote{border-left-color:var(--primary);border-left-width:.25rem;color:var(--primary);font-style:italic;font-weight:500;margin-bottom:1.6em;margin-top:1.6em;padding-left:1em;quotes:"\201C" "\201D" "\2018" "\2019"}.typography blockquote p:first-of-type:before{content:open-quote}.typography blockquote p:last-of-type:after{content:close-quote}.typography h1{font-size:2.5em;line-height:1}.typography h1,.typography h2{color:var(--typo);font-style:italic;margin-bottom:1em}.typography h2{font-size:1.6em;line-height:1.3;margin-top:2em}.typography h3{color:var(--primary);font-size:1.3em;line-height:1.6;margin-bottom:.6em;margin-top:1.6em}.typography h4{color:var(--primary);font-size:1.15em;line-height:1.5;margin-bottom:.4em;margin-top:1.7em}.typography ul>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.typography ul{list-style-type:"❖";padding-left:1.5rem}.typography ul>li{padding-left:.5rem}.typography img{margin-bottom:1.8em;margin-top:1.8em}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.-bottom-4{bottom:-1rem}.right-4{right:1rem}.-top-4{top:-1rem}.left-4{left:1rem}.z-20{z-index:20}.float-right{float:right}.my-4{margin-bottom:1rem;margin-top:1rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-6{margin-bottom:1.5rem}.mb-12{margin-bottom:3rem}.mt-4{margin-top:1rem}.mb-10{margin-bottom:2.5rem}.mt-8{margin-top:2rem}.mb-4{margin-bottom:1rem}.mt-12{margin-top:3rem}.mr-1{margin-right:.25rem}.mr-4{margin-right:1rem}.ml-2{margin-left:.5rem}.mt-3{margin-top:.75rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.-mb-8{margin-bottom:-2rem}.mb-8{margin-bottom:2rem}.ml-3{margin-left:.75rem}.mt-10{margin-top:2.5rem}.-mr-8{margin-right:-2rem}.-mr-6{margin-right:-1.5rem}.mr-6{margin-right:1.5rem}.-mr-56{margin-right:-14rem}.mt-16{margin-top:4rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-8{height:2rem}.h-6{height:1.5rem}.h-16{height:4rem}.h-screen{height:100vh}.h-full{height:100%}.h-1\/2{height:50%}.max-h-12{max-height:3rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-6{width:1.5rem}.w-16{width:4rem}.w-12{width:3rem}.w-9{width:2.25rem}.w-56{width:14rem}.w-0{width:0}.w-14{width:3.5rem}.max-w-3xl{max-width:48rem}.max-w-lg{max-width:32rem}.max-w-\[8\.5in\]{max-width:8.5in}.max-w-\[430px\]{max-width:430px}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.resize{resize:both}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{grid-gap:.5rem;gap:.5rem}.gap-8{grid-gap:2rem;gap:2rem}.gap-x-4{grid-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.gap-y-8{grid-row-gap:2rem;row-gap:2rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.border-\[\.35rem\]{border-width:.35rem}.border-2{border-width:2px}.border-r-2{border-right-width:2px}.border-primary{border-color:var(--primary)}.\!border-primary{border-color:var(--primary)!important}.bg-accent{background-color:var(--accent)}.bg-typo{background-color:var(--typo)}.bg-secondary{background-color:var(--secondary)}.bg-cover{background-size:cover}.bg-center{background-position:50%}.px-10{padding-left:2.5rem;padding-right:2.5rem}.py-10{padding-bottom:2.5rem}.pt-10,.py-10{padding-top:2.5rem}.text-center{text-align:center}.text-right{text-align:right}.font-display{font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-body{font-family:"IBM Plex Serif",ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-xl{font-size:1.25rem}.text-lg,.text-xl{line-height:1.75rem}.text-lg{font-size:1.125rem}.text-base{font-size:1rem;line-height:1.5rem}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}.leading-6{line-height:1.5rem}.text-typo{color:var(--typo)}.text-typo-dim{color:var(--typo-dim)}.text-primary{color:var(--primary)}.opacity-90{opacity:.9}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}.shadow-2xl,.shadow-lg{box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.filter{filter:var(--tw-filter)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-box{transition-duration:.15s;transition-property:height,width,margin,padding;transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-shadow{text-shadow:1px 1px 0 hsla(0,0%,100%,.25)}.dark .text-shadow{text-shadow:1px 1px 0 rgba(0,0,0,.5)}.cursor-zoom{cursor:zoom-in}.page-break{page-break-before:always}.page-break-avoid{-moz-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid}.columns-2{grid-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem;-moz-columns:2;column-count:2}.columns-2>*{display:inline-block}.list-style-diamond{list-style-type:"❖";padding-left:.65rem}.list-style-diamond>li{padding-left:.25rem}.ct-default{--primary:#b28e59;--secondary:#234e52;--accent:#222;--typo:#f7f3e3;--typo-dim:#9a937c}.ct-breeze{--primary:#ba6a6a;--secondary:#233e52;--accent:#222;--typo:#f7f3e3;--typo-dim:#7c8d9a}.ct-eclipse{--primary:#f98376;--secondary:#fff;--accent:#f7f6f3;--typo:#3d3d3d;--typo-dim:#928763}.ct-moonlight{--primary:#75a1fa;--secondary:#fff;--accent:#f3f5f7;--typo:#3d3d3d;--typo-dim:#73819d}.ct-trajan{--primary:#667a8d;--secondary:#f8f1e9;--accent:#e8e4e0;--typo:#342d26;--typo-dim:#969089}html[data-layout=print]{--primary:#bd3147;--secondary:#fff;--accent:#e7ebee;--typo:#304145;--typo-dim:#4f6b72}html[data-layout=print] .text-shadow{text-shadow:none}.et-xl .rounded-full{border-radius:1rem}.et-md .rounded-full{border-radius:.375rem}.et-md .rounded-md,.et-sm .rounded-full{border-radius:.125rem}.et-sm .rounded-md{border-radius:0}.after\:px-1:after{content:"";padding-left:.25rem;padding-right:.25rem}.after\:content-\[\"\|\"\]:after{content:"|"}.last\:after\:content-\[\"\"\]:last-child:after{content:""}.hover\:text-primary:hover{color:var(--primary)}.hover\:text-typo:hover{color:var(--typo)}@media print{.print\:hidden{display:none}.print\:shadow-none{--tw-shadow:0 0 transparent;box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}}@media (min-width:410px){.xs\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xs\:gap-x-1{grid-column-gap:.25rem;-moz-column-gap:.25rem;column-gap:.25rem}}@media (min-width:640px){.sm\:mb-6{margin-bottom:1.5rem}}@media (min-width:768px){.md\:mb-14{margin-bottom:3.5rem}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:gap-x-4{grid-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.md\:py-14{padding-bottom:3.5rem;padding-top:3.5rem}}@media (min-width:1024px){.lg\:mb-20{margin-bottom:5rem}.lg\:-mr-16{margin-right:-4rem}.lg\:inline{display:inline}.lg\:h-32{height:8rem}.lg\:w-32{width:8rem}.lg\:w-\[4\.375rem\]{width:4.375rem}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:border-r-4{border-right-width:4px}.lg\:px-14{padding-left:3.5rem;padding-right:3.5rem}.lg\:py-20{padding-bottom:5rem;padding-top:5rem}}@media (min-width:1280px){.xl\:-mr-0{margin-right:0}.xl\:hidden{display:none}.xl\:w-56{width:14rem}.xl\:w-auto{width:auto}.xl\:max-w-3xl{max-width:48rem}.xl\:max-w-4xl{max-width:56rem}.xl\:columns-2{grid-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem;-moz-columns:2;column-count:2}.xl\:columns-2>*{display:inline-block}}@media (min-width:1536px){.\32xl\:mt-24{margin-top:6rem}}@media (min-width:1680px){.\33xl\:w-64{width:16rem}.\33xl\:px-16{padding-left:4rem;padding-right:4rem}}@media (min-width:1920px){.\34xl\:px-20{padding-left:5rem;padding-right:5rem}}
<Project id="caa-contest" />
Project Name CAA Eco-Driving Contest
“Mohamed is a talented developer that always takes the extra step to provide insightful suggestions to make any project that we work on together more efficient. He is easy going and a pleasure to work with.”
Susheila Li Project Manager, Dimentians Ltd.
About the client The Canadian Automobile Association (CAA) is one of the largest consumer-based organizations in Canada. They help provide freedom
and peace of mind to 6 million Members through 9 automobile Clubs and over 140 offices located across the country.
Project Description The purpose of the Teen Eco Drive Video contest is to encourage teens to share their Eco Driving Pledge in a creative way, utilizing
the mini video platforms, Instagram and Vine. Participation in the contest is done by creating a mini video on Instagram or Vine
then sharing it using the contest hashtag (eg. #CAAEcoDrive).
I was the lead developer of the project responsible for the development of the contest system backend as well as the
frontend. The backend was built using Symfony framework, Instagram, Vine and Twitter REST APIs. The frontend was built
using HTML5, CSS3 and jQuery based on the design mockups I received from our web designer.
The contest system consisted of different microservices, one of them is the video collection microservice which continuously searches the mentioned video platforms for videos matching the
contest hashtag and stores them from further processing and approval. Once a video is approved, it is displayed on the contest homepage
and the author is notified via an auto-generated comment on his video post.
Once the contest is over, the admin selects 3 winning videos based on different factors, amongst them is the number of user votes per video.