DiBattista Portfoliocodedog.design/pdfFiles/dibattistaPortfolioDesign.pdf · Caroline M DiBattista...

Caroline M DiBattista

Front-End Developer / Designer

DiBattista PortfolioDesign File

I am passionate about programming and design

and the challenge of turning user-centric

designs into real-life applications.

http://www.codedog.designCaroline M DiBattista 503 330 [email protected]

1.0 Introduction

This document is designed to provide a summary of the development process, design decisions, languages / frameworks and plugins used to create my portfolio web site.

The web site contains several key pages/areas of content:

• Portfolio

• About

• Resume

• Contact


2.0 Technical Direction

• HTML5

• CSS3

• JavaScript

• jQuery

• foundation

• typeit

• colorbox

• magicAnimation

• waypoints

• slick

• flip

• timeline

3rd party CSS and plugins were incorporated to add visual effects:

2.1 WordPress vs. HTML Framework

Initially my portfolio web site was built in WordPress using the Meteor theme. See http://www.dibattista.design. WordPress provides a powerful way to rapidly create a fully-fledged web site.

I found WordPress did not provide enough control within a responsive environment. For example, when displaying a row with three columns of text, an iPad Pro rendered the display as though it was being viewed on a mobile device (single column with one column stacked on top of the other. When using HTML and a responsive framework (such as Bootstrap or Foundation), the iPad Pro rendered the row with three columns side by side.

My portfolio web site was redesigned and rebuilt using the Foundation framework and the following web languages:


2.2 Being Responsive

With so many different platforms available these days, it is no longer a case of 1-size-fits-all. My portfolio web site was built using the Foundation framework to ensure it is responsive across all platforms.

<head>

<meta charset=”utf-8”>

<meta http-equiv=”x-ua-compatible” content=”ie=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Caroline M DiBattista - Resume</title>

<link rel=”stylesheet” href=”css/foundation.css”>

<link rel=”stylesheet” href=”css/foundation-icons.css”>

<link rel=”stylesheet” href=”css/resume.css”>

</head>

Importing Foundation Framework

[email protected]

Mobile: 503 330 0557

Copyright 2017 Caroline M DiBattista

All Rights Reserved

[email protected]: 503 330 0557

Copyright 2017 Caroline M DiBattistaAll Rights Reserved


Push & Pull

When viewed on a tablet or desktop, the Footer section displays three columns of data versus one column of data on a mobile device.

To change the order of the displayed components such that my logo is displayed as the first component on a tablet and desktop and the last component on a mobile device, the push and pull classes (provided by Foundation) were used.

<footer id=”footerSection”>

<div class=”row”>

<div class=”small-12 medium-2 medium-push-9 columns sectionSpacerSm”>

<p><a href=”http://www.linkedin.com/in/carolinedibattista” target=”new”>

<i class=”fontIcons noPadding fi-social-linkedin”></i>



</a>

<a href=”https://www.flickr.com/photos/140374865@N08/” target=”new”>

<i class=”fontIcons noPadding fi-social-flickr”></i>

</a></p>

</div>

<div class=”small-12 medium-6 medium-offset-1 columns”>

<div class=”sectionSpacerMed hide-for-small-only”></div>

<div class=”sectionSpacerSm show-for-small-only”></div>

<p>[email protected]<br>

Mobile: 503 330 0557</p>

<p class=”text-center sectionSpacerMed”><a href=”pdfFiles/dibattistaResume.pdf” target=”_new”><img

src=”images/footer/resumeWhite.png” title=”DiBattista Resume” alt=”DiBattista Resume”></a>

<a href=”pdfFiles/dibattistaResumeDesignFile.pdf” target=”_new”><img src=”images/footer/caseStudyWhite.png”

title=”DiBattista Resume Design Brief” alt=”DiBattista Resume Design Brief”></a></p>

<p class=”copyright sectionSpacerMed”>Copyright 2017 Caroline M. DiBattista<br>All Rights Reserved</p>

</div>

<div class=”small-12 show-for-small-only columns”>

<p class=”text-center”><img class=”sectionSpacerSm” src=”images/logoSm.png” alt=”DiBattista Logo”

title=”DiBattista Logo”></p>

</div>

<div class=”medium-3 medium-pull-9 hide-for-small-only columns”>

<p class=”text-center”><img class=”sectionSpacerLg” src=”images/logoMed.png” alt=”DiBattista Logo”

title=”DiBattista Logo”></p>

</div>

</div>

</footer>


Font Styles

Pogged aims to capture the British dining

experience, extraordinary in its simplicity,

impeccable in execution. It invites families

and friends to enjoy the British ambiance,

whilst they take care of the rest.

Hide/Show Components

It was often necessary to hide and show different

components based on the viewing platform. Using built

in Foundation classes of “hide-for-” and “show-for-”, this

was easily achieved.

On the Portfolio for Pogged, under the section “Font

Styles”, the platform (width size) controls which images

are displayed.

On a desktop, three images are displayed horizontally,

whereas on a tablet (in portrait mode), only two images

are displayed. Mobile devices only display one image.

Font Styles

Pogged aims to capture the British dining experience, extraordinary in its simplicity,

impeccable in execution. It invites families and friends to enjoy the British ambiance,

whilst they take care of the rest.


2.3 Contact Form

Send Message

Name

Email

Subject

Comment

Enter contact name

Enter email address

Enter subject line

Enter message

Please contact me with any questions or comments.

Email:

Mobile:

[email protected]

503 330 0557

Contact

The contact form uses jQuery and .php to process and send the message to my email account.

The form provides feedback to the user upon success (or failure) of the email submission.

Note... The contact form is only displayed when javascript is enabled.

In the HTML code, my email address is encrypted using base64 encoding.

https://www.base64encode.org


<form id=”js-contact-form” method=”post” action=”php/contactForm.php” class=”hideOnLoad”>

<div class=”message”></div>

<div>

<label for=”contactName”>Name</label>

<input id=”contactName” type=”text” name=”contactName” value=”” placeholder=”Enter contact name”>

</div>

<div>

<label for=”contactEmail”>Email</label>

<input id=”contactEmail” type=”email” name=”contactEmail” value=”” placeholder=”Enter email address”>

</div>

<div>

<label for=”contactEmail”>Subject</label>

<input id=”contactSubject” type=”text” name=”contactSubject” value=”” placeholder=”Enter subject line”>

</div>

<div>

<label for=”contactComment”>Comment</label>

<textarea id=”contactComment” name=”contactComment” rows=”4” placeholder=”Enter message”></textarea>

</div>

<div>

<button type=”submit” class=”button btnCallToAction”>Send Message</button>

</div>

<input type=”hidden” name=”yourEmail” value=”Y2Fyb2xpbmUuZGliYXR0aXN0YUBnbWFpbC5jb20=”>

</form>


2.4 Styling with CSS and plugins

Timeline & Flip

On a desktop and tablet, there is enough room to display the company name and dates to the left of the timeline with the position title and achievements to the right. Due to space limitations on a mobile device, the original CSS (downloaded from www.codepen.io) was modified so that (on mobile devices) all data displays to the right of the timeline.

Positioning the Timeline Bar (CSS)

.timeLine:before /* Vertical timeline bar */

{

content: '';

position: absolute;

top: 0px;

bottom: 0px;

width: 2px;

background: #ddd;

left: 17px;

}

@media (min-width: 40em) /* iPad */

{

.timeLine:before

{

left: calc(33% + 22px);

}

}

@media (min-width: 70em) /* Desktop */

{

.timeLine:before

{

left: calc(33% + 21px);

}

}

Sotera Wireless2009 - 2016

AkeLex2007 - 2009

Daverci LLC2006 - 2007

Oregon Steel Mills2005

Principal Apps Designer, Sr. Apps Designer

Applications Designer

Product Support & Deployment Manager

Contractor

• Designed/developed interactive telemetry unit prototype

• Principal designer for the ViSi Mobile Monitoring System

• Designed an iPhone application for diabetics

• Created an interactive web demo for the Sales team

• Streamlined the software upgrades process; created new scripts

• Created standards for formal documentation and procedures

• Developed/modified features using PL/SQL

• Provided system admin support to the IT manager

On the Resume page, the work timeline effect is created using CSS3 only.


Creating a Responsive Timeline

Sotera Wireless2009 - 2016

AkeLex2007 - 2009

Daverci LLC2006 - 2007

Oregon Steel Mills2005

Principal Apps Designer, Sr. Apps Designer

Applications Designer

Product Support & Deployment Manager

Contractor

• Designed/developed interactive telemetry unit prototype• Principal designer for the ViSi Mobile Monitoring System

• Designed an iPhone application for diabetics• Created an interactive web demo for the Sales team

• Streamlined the software upgrades process; created new scripts• Created standards for formal documentation and procedures

• Developed/modified features using PL/SQL• Provided system admin support to the IT manager



<div class=”workSection”>

<div class=”workGroup”>

<h3 class=”hide-for-small-only”>Sotera Wireless</h3>

<h3 class=”hide-for-small-only”>2009 - 2016</h3>

</div>

<div class=”workSummary”>

<h3 class=”show-for-small-only”>Sotera Wireless</h3>

<h3 class=”show-for-small-only”>2009 - 2106</h3>

<h4>Principal Apps Designer, Sr. Apps Designer</h4>

<ul>

<li>Designed/developed interactive telemetry unit prototype</li>

<li>Principal designer for the ViSi Mobile Monitoring System</li>

</ul>

</div>

</div>


https://codepen.io/ksantangelo/pen/ZBOpoJ

Work History Timeline

http://nnattawat.github.io/flip/

flip

<div class=”row”>

<div id=”card”>

<div class=”front cursorPointer sectionBackground”>

<div class=”timeLine”>

</div> 

</div> 

<div class=”back cursorPointer sectionBackground”>

<div class=”timeLine”>

</div> 

</div> 

</div> 

</div> 

Implementing the flip

The flip plugin was applied to the work history timeline to make the visible area shorter and provide a cleaner, more readable user experience.

When the timeline is clicked on/touched, the display will flip vertically to display the other half of my work history.

Menlo Wordwide Logistics

2004 - 2005

Oracle Corporation

1994 - 2003

Cedardata

1992 - 1994

Paradigm (UK) Limited1991 - 1992

Senior Systems Analyst

Dev Manager, Sr. Programmer

Analyst/Programmer

Software Engineer

• Developed/modified features in PL/SQL• Key player in designing/implementing

document standards

• Created a web site for Oracle Volunteers’ Volunteer Day activities.

• Developed a web portal for Business Intel-ligence reports.

• Implemented features using Oracle tools suite and C.

• Liaised with customers to explain func-tionality of features.

• Implemented/modified features using Oracle tools suite.

• Maintained product’s Entity-Relationship diagrams.


Slick Slider

On each portfolio page, the Slick Slider plugin is used to display the images carousel.

On desktops, the user will traverse the images by clicking on each of the dots (directly below the carousel) or dragging the images to the left or right.

On media devices where finger swiping is the norm, the user will traverse the carousel by using the standard UI of finger swiping.

http://kenwheeler.github.io/slick/

Slick

Walk for Animals

San Diego Humane Society

Caroline M DiBattistaFront End Developer/Designer

Portfolio About Resume Contact


Animations & Waypoints

magicAnimation CSS enables animation effects such as fade-in or movement around the page. Animation effects are used throughout the Portfolio web site to provide a more fun and engaging experience.

Examples of magicAnimation CSS can be viewed within the following sections:

• The numerics associated with the “Years of Experience” fade in.

• The hobby icons slide in from above and below.

• The San Diego Humane Society’s Walk For Animals poster slides in from the left hand side.

Key Achievements

• Expanded Sotera Wireless’ sales and marketing position from “General Care”

units to “Telemetry” units by designing/developing a fully interactive telemetry

prototype, including arrhythmia displays.

• Developed a web-based training tool for Sotera’s customer base to enable

existing and new clinicians to further their understanding and skills with Sotera’s

ViSi Mobile Monitor.

• Developed a web-based prototype for the configuration setups for each customer

installation.

• Developed a new web site that enabled the Oracle Volunteers’ Team to measure

the success of their yearly Volunteer Day activities.

• Removed the burden of software upgrades from the Technical Support team

by creating a detailed step-by-step upgrade document and scripts that enabled

non0technical employees to help perform the over-night upgrades

10+Applications Design

(Years)

20+Programming

(Years)


magicAnimation & Waypoints

magicAnimation and jQuery animations are executed immediately the web page is loaded. If the user is not viewing that section at the time, the animation will occur off-screen and the user will not see it. A waypoint is added to each animated section to delay the animation and only show when the section is visible to the user.

Waypoints are markers within the HTML code that when scrolled to, trigger an event. Each magicAnimation is triggered on scrolling down to its associated waypoint marker.

var hobbiesDisplay = $(‘#waypointHobbiesAnimation’).waypoint(function(direction)

{

if (direction === ‘down’)

{

$(‘.hobbyTravelling’).show();

$(‘.hobbyArtist’).show();

$(‘.hobbyKarate’).show();

$(‘.hobbyPhotography’).show();

$(‘.hobbyCycling’).show();

$(‘.hobbyBowling’).show();

$(‘.hobbyTravelling’).addClass(‘magictime slideUpReturn’);

$(‘.hobbyArtist’).addClass(‘magictime slideUpReturn’);

$(‘.hobbyPhotography’).addClass(‘magictime slideDownReturn’);

$(‘.hobbyKarate’).addClass(‘magictime slideDownReturn’);

$(‘.hobbyCycling’).addClass(‘magictime slideUpReturn’);

$(‘.hobbyBowling’).addClass(‘magictime slideUpReturn’);

}

});


The width of the fill bar is set to 1 pixel (for each skill) and then grows in length to show the skill level. At the same time, the green dot is set to position 1 and then moved x pixels.

var skillSetAnimation = $(‘#waypointSkillSetAnimation’).waypoint(function(direction)

{

$(‘#skillHTML .sliderFillBar’).animate({width: ‘1’}, 0);

$(‘#skillHTML .sliderDot’).animate({ left:’0’}, 0);

$(‘#skillHTML .sliderFillBar’).animate({width: ‘165’}, 1000);

$(‘#skillHTML .sliderDot’).animate({ left:’+=165’}, 1000);

$(‘#skillLeadership .sliderFillBar’).animate({width: ‘1’}, 0);

$(‘#skillLeadership .sliderDot’).animate({ left:’0’}, 0);

$(‘#skillLeadership .sliderFillBar’).animate({width: ‘210’}, 1000);

$(‘#skillLeadership .sliderDot’).animate({ left:’+=210’}, 1000);

});

Skill Set

The jQuery animate command (in conjunction with waypoints, see below) was used to create the animation effect for the skill lines.

Professional Skills

HTML5

CSS3

JavaScript

jQuery

Bootstrap

Foundation

Personal Skills

Analytical

Creative

Committed

Detail Oriented

Communication Skills

Leadership/Management

Additional Skills

Adobe Design Tools

UI/UX

Usability Testing

Photography

Digital Publishing

Technical Writing

Skill Set


3.1 Wireframes

To ensure optimal, responsive designs for each platform and reduced the need to significantly redesign key components during the mockup and/or development phases, wireframes were created for each of the main platforms.

Creating optimal, responsive designs promotes a high-quality user experience irrespective of the user’s platform.

3.0 Web Design

Mobile Desktop

In My Spare Time

Ehebendet C. Ahace es viverterfese cupim cula modie me iamenimium effrestrat esulaber ublissuam tuid cum firi sessult uamena, estum, abultus nor ia ac rei fortamendam consulvid consus sulla rei cit, patuid serehem es poernit.

Videliena, nostiae diurniquid nularevitia ne pretea stis nota. Uncer uterum in Etrunum, Ti. Grato hostrae etordiem obusque facte cus, sedo, unistractod fatienatis sit, furnunte, PalBonenterorus adhus, Cast vitratque obsedet aucto Cateri inatus, condien telintesimus este et?

In My Spare Time

Ucipsund estrum expliqui aceperoTea ne es tus virma-num itrum noculturs bondi-umunum inclares, sente ce-natus, derimplii perecrudem



About



I am passionate about programming and design and the challenge of turning user-centric designs into real-life applications.

If tea can’t fix it, it’s a serious problem!- Anonymous

From the UK to the US

Em opotandam pestrebatus or atum con de tam.

Fec movivis quasdac inti-musBus a quam mus hil co-nis hors los faciis opores int?

Quidem o abem cluturnium facepse nes hostem cre ne cut ad renarbissa ant. Ips, consi porterum incultorbit?

Viverum, sidem sperfec tatqui temultortes es, Ti.

Sum inem quod me periae quit? quis, numPata, sum a es, quo pris. Sentiliis se co ina, P.

Dam st peributem postas-tuus coneribustra pone ne prartebat, diem nos fuemus consid pervid faciont.

We make a living by what we get, but we make a life by what we give.- Winston Churchill

Mistakes are always forgivable, if one has the courage to admit them.- Bruce Lee


3.2 Mockups

Once the wireframes are complete, wireframe placeholders were replaced with images and text. Designs were tweaked to accommodate the selected image sizes and text descriptions.

Designing with a responsive grid ensures breakpoints are appropriate and which pieces of information should be included on the different media types.

DesktopMobile

In My Spare Time

I’m petrified of flying, but love to travel and explore new places. I love to hike through rain forests and jungles (but watch out for snakes)! I also enjoy swimming with the native fish!

In September 2016 I decided to get back into karate and signed up at West Coast Martial Arts Academy. I am currently a purple belt, working hard towards my blue belt.

I got hooked into cycling after I was persuaded to take part in the ride from Birmingham to Oxford by my friends at 3i. I’ve completed several long distance rides now, including the Tour de Poway!

In My Spare Time

I’m petrified of flying, but love to travel and explore new places. I love to hike through rain forests and jungles (but watch out for snakes)! I also enjoy swimming with the native fish!

In September 2016 I decided to get back into karate and signed up at West Coast Martial Arts Academy. I am currently a purple belt and working hard towards my blue belt. I got hooked on cycling after

I was persuaded to take part in the ride from Birmingham to Oxford by my friends and 3i. I’ve completed several long distance rides now, including the Tour de Poway.

About



I am passionate about programming and design and the challenge of turning user-centric designs into real-life applications.

If tea can’t fix it, it’s a serious problem!- Anonymous

From the UK to the US

Whilst working at Oracle Corporation in the UK, I was selected to work on a short-term project at the company’s headquarters (in the Bay Area).

It did not take long for me to fall in love with the Californian lifestyle so when an opportu-nity arose to move to the US on a permanent basis, I was all over it!

I do manage to sneak back to the UK on a regular basis to see my family. My parents have always been really sup-portive and a big inspiration to me.

Of course, whilst I’m in the UK, I also have to stock up on life’s essentials: Batchelor’s Cup A Soup, Cadbury’s Dairy Milk chocolate and Midget Gems!

We make a living by what we get, but we make a life by what we give.- Winston Churchill

Mistakes are always forgivable, if one has the courage to admit them.- Bruce Lee


4.0 Design Elements

4.1 Colour Scheme

The primary colour palette contains the following colours:

• Black• Green• Blue/Purple

Black0, 0, 0

#000000

Blue/Purple67, 25, 255

#4319FF

Green0, 255, 0#00FF00

Green was chosen because of it’s strong contrast against a black background.

Blue/purple was chosen as it is one of the colours in the triad colour wheel for green.

4.3 Tone and Voice

The site contains different, easy to read sections for each component. The tone and voice of the web site is intended to highlight the quality of my work and educational experiences.

4.2 Fonts

Main Heading: Merriweather Bold

Body Copy: Noto Sans


2.3 Imagery

Selected images are designed to show the depth of my portfolio within the digital publishing space. Selected images try to look beyond the straightforward to create effective and interesting communications.

The colorbox jQuery plugin has been added to the Walk for Animals poster (on the Resume page). When clicked on, a larger image showing the poster in a real-life scenario is displayed.

Digital Publishing

“A picture says a thousand words”

<a class=”thumbnailWalkForAnimalsSm” href=”images/walkForAnimals/walkForAnimalsPosterSmEmbedded.

jpg” title=”Walk For Animals” alt=”Walk For Animals”>

<img src=”images/walkForAnimals/walkForAnimalsPosterSm.jpg” alt=”Walk For Animals” title=”Walk For

Animals”>

</a>

https://plugins.jquery.com/colorbox/

colorbox

// -----------------------------------------------------------------------------

// Colorbox for thumbnail images

// -----------------------------------------------------------------------------

$(“.thumbnailWalkForAnimals”).colorbox({rel:’thumbnailWalkForAnimals’, transition:”fade”});

$(“.thumbnailWalkForAnimalsSm”).colorbox({rel:’thumbnailWalkForAnimalsSm’, transition:”fade”});

$(“.thumbnailWalkForAnimalsMobile”).colorbox({rel:’thumbnailWalkForAnimalsMobile’, transition:”fade”});

Due to the different platform sizes, a cropped image is displayed on mobile devices.

HTML Code

jQuery Code

Hobby icons are flat images, primarily using black outlines with green accents (from the primary colour palette).

The icons are a combination of icons from The Noun Project and hand-created.

Iconology

The Noun Project:http://thenounproject.com

Caroline M [email protected]

503 330 0557

Date post:	23-May-2020
Category:	Documents
Upload:	others
View:	2 times
Download:	0 times

DiBattista Portfoliocodedog.design/pdfFiles/dibattistaPortfolioDesign.pdf · Caroline M DiBattista...

Documents