Welcome.


My name is Monique. I am a Web Designer & Front-end Developer located in San Diego, CA. I believe in breaking barriers with responsive design, clean code, and minimalist user- friendly interfaces. Check out some of my work below & feel free to get in touch! I would love to hear from you.
Portfolio
860-825-1135
Weather Application

Design & Development
Programming Languages:
HTML, CSS, jQuery, PHP, JSON

Summary

A weather application I built for an emerging tech class. I used HTML, CSS, jQuery, and PHP to design and develop it. This was also my first time using an API (Wunderground) and parsing through JSON. All of the data is dynamically displayed depending on what the user searches for. The user is able to check the weather by selecting “current location” or by typing in a location within the United States.

weather app
Gazelle Fitness

Design & Development
Programming Languages:
HTML, CSS, jQuery, PHP, JSON, SQL

Summary

A fitness and health website for a client still under development. I am using HTML, CSS, jQuery, JavaScript, PHP, and SQL to develop it. The website includes 7 landing pages, a contact form, a small custom content management system for administration purposes, and a Wordpress CMS blog. I am also using the Foundation Zurb framework making the site fully responsive. The design is simple and clean. Take a look at some of my progress.

gazelle site
West Coast IPA's

Design & Development
Programming Languages:
HTML, CSS, jQuery, PHP, JSON, SQL

Summary

This site was designed and developed in a computer based training course. The goal of the project was to teach the user about a subject and then test their knowledge. I used HTML, CSS, jQuery, and PHP and design and develop it. There are four pages of information with interactive elements and one quiz that I used to test the users knowledge. I used Skeleton as the responsive framework for mobile and tablet optimization.

west coast project
Code
Snippet
</>


(814) 881-4651

for (var i=0;i<5;i++) {
          
var hourly = parsed_json['hourly_forecast'][i]['FCTTIME']['civil'];

var hourlycon = parsed_json['hourly_forecast'][i]['condition'];

var hourlytmp = parsed_json['hourly_forecast'][i]['temp']['english'];            

$('#newsearch').html('');

$('#forecast').append($('
' + hourly + ' ' + hourlycon + ' ' + hourlytmp + '°' + '
' )); } $('#temp').html('
' +''+citystate+'' + '
' + ''+weather+'' + '
' + ''+temp_f + '°'+'' + 'Feels like ' + feelslike+ '°'+'' + '
' + '
'); $('#win').html(''+'Wind'+'' + '
' + wind + '
' ); $('#hum').html(''+'Humidity'+'' + '
' + ''+humidity+'' + '
' ); $('#border').html('
' + 'Hourly Forecast' + '
'); $('#bottom').html('
' + ''+update+'' + '
' ); }
Code
Snippet
</>



/*ICONS
====================================================================================
*/

div.icon, a.icon           { background-image: url(../img/s.png); }
/* icon mods */
div.icon.inline-block      { display: inline-block; }
div.icon.valign-middle     { vertical-align: middle; }
/* icon definitions */ 
div.icon.fb                { width:  7px; height:  14px; background-position: -27px -139px;  }
div.icon.twitter           { width:  14px; height:  10px; background-position: -58px -68px;  }
div.icon.logo              { width:  91px; height:  41px; background-position: -150px -36px;  }

div.icon.clipboardwhite    { width:  52px; height:  56px; background-position: -295px -21px;  }
div.icon.weightlosswhite   { width:  50px;  height: 57px; background-position: -389px -20px; }
div.icon.heartwhite        { width:  59px;  height: 51px; background-position: -483px -27px; }

div.icon.clipboardteal     { width:  52px; height:  56px; background-position: -594px -21px;  }
div.icon.weightlossteal    { width:  50px;  height: 57px; background-position: -687px -20px; }
div.icon.heartteal         { width:  59px;  height: 51px; background-position: -782px -27px; } 
        
Code
Snippet
</>




$(function () {
$(".beerpic").hover( /when you hover over a picture- all pictures have class "beerpic"
function () {
var $img = $(this); /var img is equal to "this" or whatever you are hovering over
console.log("img variable: " + $img);/prints out an object? what the... 
var divId = '#div-' + this.id.split('-')[1];/this sets a variable that is equal to 
/div id. Sets it to string '#div-' and then adds the img.id(from "this" or beer-1) and spits it at the - so that the outcome will be "#div-1" --- string handling 
console.log(divId);
$(divId).show();/this displays the div with the id #div-1 
/$(divId).css({ "background-color": "#ffe", "border-left": "5px solid #ccc" });
$(divId).css({ "min-height": "300px"});
},
function () {
var divId = '#div-' + this.id.split('-')[1];
$(divId).hide();
}
);
});
        
Let's talk!

Get in touch below or send me an email.

(I am currently seeking full-time, part-time, freelance, or contract work.)

Pssst! You can also find me here...