Front-End
Design Engineer
  • Hi, I'm Julien Roy, a design engineer specializing in user experience, user interface and development with an eye for detail and optimization. Check out Gt Metrix or Pingdom. Below are example of projects I've completed.

  • Blizzard

    Intranet Application

    The Training History app provides Blizzard Entertainment a solution to track its employees training progress. Allowing all employees to view their and their direct reports' profile completed, enrolled, pending and declined courses.

  • STCSS

    JavaScript Application

    Style The Cascading Style Sheets is a Javascript app that allows users to paste HTML or write HTML rendering live indented CSS according to their DOM structure. It also has the capability to detect ID duplicates.

  • GEEKWiZ

    Price comparison website

    GEEKWiZ provides coupons and deals for electronic products. It offers price comparison throughout multiple stores with reviews and ratings.

  • Fishbook

    Social Website

    Fishbook is a mirror of Facebook as of 2012 made with simpler code and tricking users into thinking they are on Facebook.

  • Colorface

    Mobile Application

    ColorFace is a phone application that offers web designers and graphic artists the color palettes of popular websites.

  • Cosmos

    Experimental Website

    Cosmos is an experimental website designed to recreate a solar systems gravity, motion, light and shadows. The idea is to create art out of code, sit back and enjoy it like a moving painting.

  • AQL

    E-Commerce Website

    Affordable Quality Lighting is an e-commerce website based on Big-commerce that provides outdoor and indoor lighting for consumers.

  • ITS.SWISS

    Designer Website

    ITS.SWISS is a website designed to demonstrate the core principles of the 1950s Swiss movement, inform about the International Typographic Style and provide information about its pioneers.

  • EDUVG

    Educational Website

    EDUVG is a website that encourages parents have their children play educational video games and educates them about the benefits of gaming and why it is important to developing their children’s aptitudes.

  • Starshards

    Adobe Illustration

    Starshards is an illustration portrait of a character from World of Warcraft, an MMORPG game I’ve been playing since 2004.

  • Dark Voyage

    Photoshop Matte Painting

    Dark Voyage is a self portrait matte painting made in Photoshop.

Blizzard Entertainment

  • Concept
  • |
  • Design
  • |
  • UX/UI
  • |
  • Front-End
  • |
  • Back-End
  • |
  • App
  • |
  • Taught
Blizzard training history app
"You knocked this app out of the park. I'm proud of you and what you were able to accomplish." - Nate Shapiro

Training History

The Training History app provides Blizzard Entertainment with an easy solution to track its employees training progress. It allows managers, supervisors and team members to view their profile as well as their direct reports' completed, enrolled, pending and declined courses.

Blizzard training history tool

Who are you?

The Training History app is an intra-net application that works with Windows and Active Directory making it automatic for employees to access their security level.

Blizzard training history tool

Worldwide

Blizzard has around 5,000 employees worldwide amongst which some regional managers have over 500+ employees in their direct reports. The Training History app has an auto-complete search as well as an aside recursive employee structure.

Blizzard training history tool

Data made simple

The Training History works with Blizzard Academy's API to give the user all the information he/she needs to know about an employee such as which courses were taken in which categories and when, how many hours were completed, total, year to date, and per course, which courses is the user enrolled in, pending, declined and completed.

Blizzard training history tool

Team player

Each team has to reach goals. The Training History app shows each team leader his teams total completed courses, total number of hours and year to date. Team leaders can also edit and add certifications.

Blizzard training history tool

Teaching

After completing the Training History app, I was in charge of creating web fundamentals courses and teach them to Blizzard Employees. Courses covered wire-framing, UX/UI, and learning HTML and CSS at an intermediate level. By the end of the course, students were required to have a working one page website from Blizzard, like Starcraft   / Diablo 3.

Technologies Used

Platforms

  • ASP.NET
  • MVC4
  • Razor-Engine
  • Windows-Server
  • IIS7
  • Active-Directory

Languages

  • HTML5
  • CSS3
  • LESS
  • JavaScript
  • jQuery/UI
  • AJAX
  • JSON
  • C#
  • mySQL
  • Directives

Features

  • Direct-Reports
  • Auto-Complete
  • Caching
  • User-Detection
  • Tabulation
  • Certification
  • Expansion
  • Minification

Stcss

  • Concept
  • |
  • Design
  • |
  • Development
stcss javascript app
Launch Site

What is STCSS?

STCSS, or Style The Cascading Style Sheets, is a javascript application that allows users to paste HTML or write HTML rendering live indented CSS according to their DOM structure.

html5, css3, js, stcss logos

Time matters

STCSS was designed for the sole purpose to save coders time. Copy your inner HTML, load STCSS, paste your HTML and Voila!. CSS renders live.

save time

Valid code

As a web developer, it is important to code properly. With one page scrolls being a popular trend, HTML pages can get quite long. Remembering which ID you've already used can be a hassle when having over 1000 lines. STCSS will detect duplicates and warn you.

code screen

Technologies Used

  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • AJAX
  • CodeMirror
  • Minification

GEEKWiZ

  • Concept
  • |
  • Design
  • |
  • UX/UI
  • |
  • Front-End
  • |
  • Back-End
  • |
  • SEO
geekwiz.com on mac air
Launch Site

"A geek wizard!"

GEEKWiZ is a price comparison and coupon website for all technological products. It differs from other websites of its category because it was designed for streamers. Streamers need viewers, and viewers want free stuff, GEEKWiZ is the answer.

geekwiz.com

Magical concept

The first development stage of GEEKWiZ is nearly complete. The next step is incorporating streamers. GEEKWiZ will give streamers free loot, like Razer keyboards, which they will giveaway to their viewers increasing their viewer count. In exchange, streamers will promote GEEKWiZ and have a direct link on their stream.

geekwiz.com

Social marketing

GEEKWiZ users will have the ability to share the discounts they have received throughout their entire social networking life. These users will receive a commission on all purchases made by their friends, making their original purchase cheaper until paid for.

geekwiz.com

Choice matters

GEEKWiZ has over 30 partners so far such as Best Buy, Dell, GameFly, MacMall and Newegg, and plans to have more than 100 partners by the end of 2014.

geekwiz.com

User first

GEEKWiZ already offers over 1 million products throughout more than 30 stores. A caching system has been implemented to create a fast auto-complete and filter system.

geekwiz.com search system

Knowledge is power

GEEKWiZ is dedicated to offer its users with detailed information about each product. It uses many API's like BBYOPEN, CJ, Rakuten and Google, allowing its products to have user ratings and reviews.

geekwiz.com

Well crafted

GEEKWiZ has a lot under the hood. Features like infinite scrolling and transitional responsiveness make it a great experience for all users on all devices.

geekwiz.com

Sweet SEO

GEEKWiZ has a back-end system that allows admins to control the SEO of every part of the website. Users can target whole sections, brands, stores, coupons, deals, categories, sub-categories, and product pages individually for perfecting the SEO. It also allows future employees to rewrite all content for each product making it unique.

geekwiz.com

Technologies Used

Platforms

  • CakePHP
  • Linux Server
  • Plesk
  • Google API
  • CJ API
  • Rakuten API
  • BBYOPENS API

Languages

  • HTML5
  • CSS3
  • JavaScript
  • jQuery/UI
  • AJAX
  • JSON
  • Isotopes
  • PHP5
  • mySQL
  • Directives

Features

  • Admin Section
  • SEO Software
  • Schema.org
  • Caching
  • Infinite Scroll
  • Auto-Complete
  • Filters
  • Ratings
  • Customer Reviews
  • Price Comparison
  • Minification

Fishbook

  • UX/UI
  • |
  • Design
  • |
  • Development
Fishbook application
Launch Site

Fishbook me!

Fishbook is a website with the exact same design as Facebook. Its purpose was to create an exact copy using simpler and more efficient code as well as fooling people into thinking this website is actually Facebook.com, this technique is called phishing and is used for hacking users account.

fishbook screen

Fish for real

Fishbook has the core setup for a social networking website. It has an account creation, login and profile system. It was coded from scratch with a self made PHP MVC framework, and modular HTML5 and CSS3.

fishbook screen

Perfection exists!

Fishbook made a design and pixel perfect copy of Facebook as of 2012. It has the same responsive layout, interaction, placement, location, image size and fonts than Facebook.com.

fishbook screen

Technologies Used

  • Personal PHP5 MVC
  • Linux Server
  • Plesk
  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • AJAX
  • PHP5
  • mySQL
  • Facebook Like
  • Minification

Colorface

  • Concept
  • |
  • Branding
  • |
  • UI/UX
  • |
  • Development
  • |
  • App
colorface app

What is Colorface?

ColorFace is a phone application that offers web designers and graphic artists color palettes of popular websites by category or color choice.

colorface app

Popularity knows color

Each category offers a select variety of famous websites known for their colors, layouts, and design.

colorface app

Simplicity is key

Whether you use Illustrator, InDesign, Photoshop, or CSS to make your mock-ups, Colorface makes it easy and provides you with each color in RGB, HEX and HSL.

colorface app

How it works?

Colorface uses data dash and JavaScript to interpret HEX values and converts them into RGB and HSL. Colors render upon data request and removed upon exit to minimize load. It also checks the luminosity of each color to change its font color for optimal readability.

colorface app

Technologies Used

  • HTML5
  • CSS3
  • JavaScript
  • jQuery

Cosmos

  • Concept
  • |
  • Art
  • |
  • Development
cosmos website
Launch Site

Technologies Used

  • HTML5
  • CSS3
  • JavaScript
  • jQuery

AQL

  • UX/UI
  • |
  • Design
  • |
  • Development
  • |
  • SEO
  • |
  • Manage
AQL website
Launch Site

What is AQL?

Affordable Quality Lighting is now an e-commerce website that provides outdoor and indoor lighting to consumers. The company is based in Canoga Park and has been in business for over 40 years.

aql screen

Experience matters

My goal was to increase sales, redesign their website, and improve their ad-words and overture campaigns. After a couple weeks the shopping cart dropouts went from 50% to 10%. I increased their sales by studying user flow and achieved a 30% increase in sales after a month in 2008.

aql screen

Trending rules

In August 2013, I was asked to come in and save the day as their website kept decreasing in sales. Here is what the site looked like: June 2013 and here is what it is today 2014, these changes drastically affected the direction they were heading towards.

aql screen

A vision

AQL needed a vision, I developed a course of action for the next few years as well as the team they need in order to stand out. The web team now has 4 new members and is performing well.

aql screen

Technologies Used

  • Big-Commerce
  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • AJAX

ITS.SWISS

  • Concept
  • |
  • Art
  • |
  • UX/UI
  • |
  • Front-End
ITS.SWISS website
Launch Site

ITS.SWISS

The International Typographic Style movement of the 1950s came to life with the purpose of achieving visual unity of design and a set of graphic design techniques to improve readability and function. This movement was created to present textual information in a clean and highly legible manner.

ITS.SWISS website

Technologies Used

  • HTML5
  • CSS3
  • JavaScript
  • jQuery

EDUVG

  • Concept
  • |
  • Art
  • |
  • UX/UI
  • |
  • Front-End
EDUVG website
Launch Site

E.D.U.V.G.

Education using video games, a brighter future with brighter children. The concept revolves around using different methods that interact with different parts of the brain to teach subjects.

EDUVG website

Technologies Used

  • HTML4
  • CSS2.1
  • JavaScript

Starshards

  • Wireframe
  • |
  • Design
  • |
  • Art
starshards illustration

Technologies Used

  • Adobe Illustrator

Dark Voyage

  • Concept
  • |
  • Art
  • |
  • Matte-painting
Dark voyage matte painting

Technologies Used

  • Adobe Photoshop

I like the beauty of complex simplicity


Julien Roy

Hi, My name is Julien Roy
A hybrid developer specializing in Front-End, design, user-interface, user-experience and development.


I think it is essential to always push yourself to your limits
create more than applications or websites
Create memorable experiences.


The most recognizable achievements I've accomplished are
creating my first startup, Zsquare, in 2006
working for Blizzard Entertainment in 2012
creating GEEKWiZ in 2013.


310.883.4200

Julien Roy

310.883.4200

Work Experience

Lead Web Designer, Design Engineer: Learn.ist
Redesigned & recoded entire websites HTML & SASS
Conceptualized & developed medium like curation system
Created and released Aiur: SASS framework
Analyzed & lead teams developing data driven features
Managed & lead multiple projects
2014 - April 2015
Languages: HTML5, CSS3, JavaScript, Jquery, AngularJS, JSON
Founder, Lead Developer: Geekwiz
Conceptualized, Designed and Developed Web project
Both Front End & Back End development
Over 5 API’s and emerging technologies used.
2013 - Current
Languages: HTML5, CSS3, JavaScript, jQuery/UI, AJAX, JSON, Isotopes, PHP5, SSH, XML, CJ API, BBYOPEN API, Google API, Rakuten API, CakePHP
Front-End Developer: Blizzard Entertainment
Conceptualized, Designed and Developed Internal web application for all offices globally
Based on 5 Databases and Active Directory
Developped &taught web courses to over 100 employees
2012
Languages: HTML5, CSS3, LESS, JavaScript, jQuery, AJAX, JSON, MVC4, C#, RazorEngine
Web Project Manager: 1800Pay Inc.
Managed programmers, server administrators
Review and debug finance php coding techniques
UI / UX / SEO research and development
2008 - 2011
Languages: HTML, CSS, JavaScript, AJAX, PHP, SSH, XML
Web Master: AQL Inc.
Redesigned website from scratch, graphics, layout, UI / UX
Website traffic and SEO optimization
Improved website performing from 50% to 10% dropout
Defined & Directed SEO, Adwords / Overture campaigns
2007 - 2008 | Mid 2013 - Current
Languages: HTML, CSS, JavaScript, PHP, SSH, ActionScript, Bigcommerce API, Amazon API, Google API
Project Manager / Founder: Zsquare Inc.
Designed new website from concept to production
Created all website graphics and internet ad campaigns
Designed and developed back-end database, members area and shopping cart system.
Defined & Directed SEO, Adwords / Overture campaigns
2005 - 2007
Languages: HTML, CSS, JavaScript, PHP, SSH
Front-end Web Developer: TradesInvest LLC.
Coded websites for clients
Photographed subject matter for websites
Conceptualized the UI and database for websites
Work with a team of programmers on different projects
Designed car advertising graphics & other types of ads
2002 - 2004
Languages: HTML, CSS, JavaScript

Languages & technical Skills

Languages: English, French (Native)
Front-End: HTML5, XML, CSS3, LESS
Scripting: JavaScript, jQuery/UI , AJAX, JSON, ActionScript
Back-end: MVC4, C#, PHP, VB
API's: Google, Rakuten, BigCommerce, BBYOPENS, CJ, Amazon

Softwares

Coding: Xcode, Visual Studio, Dreamweaver, Flash
Design: Photoshop, InDesign, Illustrator
Video: Premiere, After Effects, Final Cut Pro
Audio: Audition
Modeling: 3D Studio Max
Additional: Wordpress, Plesk, Cpanel, Windows, MacOs