<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Hi there! I'm Melissa, a senior at New York University who loves fun colors and making beautiful
    things with code. I'm pursuing my BA in Computer Science, with minors in Math and Digital Art + Design. I'm an experienced student
    leader with a demonstrated history of working in diverse teams.">
    <meta name="author" content="Melissa Lopez">
    <meta name="keywords" content="Melissa Lopez, new york, nyc, melello, programmer, nyu, portfolio, melissa lopez portfolio, Software Engineer, Student Leadership, Melissa NYU,
    New York University, Designer, Programmer, Melissa Lopez nyc", "code", "coder">

    <title>Melissa Lopez</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Custom Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">

    <!-- Font Awesome -->
    <script src="https://use.fontawesome.com/56811deb68.js"></script>

    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

    <!-- Favicon -->
    <link rel="icon" type="image/ico" href="favicon.ico"/>

    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Parallax Hero CSS -->
    <link href="css/hero.css" rel="stylesheet">

</head>

<body>

    <div id='hero'>
        <div class='layer-bg layer' data-depth='0.05' data-type='parallax'></div>
        <div class='layer-1 layer' data-depth='0.15' data-type='parallax'></div>
        <div class='layer-2 layer' data-depth='0.55' data-type='parallax'></div>
        <div class='layer-3 layer' data-depth='0.65' data-type='parallax'></div>
        <div class='layer-4 layer' data-depth='0.75' data-type='parallax'></div>
        <div class='layer-5 layer' data-depth='0.85' data-type='parallax'></div>
        <!-- <div class='layer-overlay layer' data-depth='0.85' data-type='parallax'></div> -->
        <div class='layer-6 layer' data-depth='.9' data-type='parallax'></div>
        <img class="title animated rollIn" src="img/melissa.png" id="melissa">
        <img class="title animated rotateIn" src="img/lopez.png" id="lopez">
    </div>
    <div id='hero-mobile'>
        <img class="title animated rollIn" src="img/melissa.png" id="melissa">
        <img class="title animated rotateIn" src="img/lopez.png" id="lopez">
    </div>

    <section id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="row">
                        <div class="col-md-4">
                            <img src="img/melissa-lopez-square.jpg" class="about">
                        </div>
                        <div class="col-md-8">
                            <h1>software engineer in nyc</h1>
                            <p>
                                Hi there! I'm Melissa, an engineer who loves
                                fun colors and making <strong class="gradient">beautiful</strong> <strong class="gradient">things</strong> <strong class="gradient">with</strong> <strong class="gradient">code</strong>.
                                I currently work at <a href="https://careers.google.com/locations/new-york/">Google NYC</a>.
                            </p>

                            <p>
                                I've worked with <a href="https://girlswhocode.com/">Girls Who Code</a> as a Summer Immersion Program Teaching Assistant, to
                                assist in their mission of closing the gender gap in technology.
                            </p>

                            <p>
                                Here are some of my favorite projects, ranging from lots of code to easier-on-the-eye design projects.
                            </p>
                        </div>
                    </div> <!--row -->
                </div>
                <!-- /.col-lg-10 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

    <a href="./pdf/lopez_melissa_resume.pdf" class="resume">
    <section id="resume">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="row text-center">
                        check out my résumé
                    </div>
                </div>
                <!-- /.col-lg-10 -->
            </div>
            <!-- /.row -->
        </div>
    </section>
    </a>

    <section id="tools">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="row">
                        <!-- <div class="col-md-2">
                            <h1>my tools of choice</h1>
                        </div> -->
                        <h3 class="tools">my tools of choice</h3>
                        <div class="col-md-4">
                            <p>
                                <div class="skill-pill"><h4 class="pill">JAVA</h4></div>
                                <div class="skill-pill"><h4 class="pill">PYTHON</h4></div>
                                <div class="skill-pill"><h4 class="pill">C</h4></div>
                                <div class="skill-pill"><h4 class="pill">HTML</h4></div>
                                <div class="skill-pill"><h4 class="pill">CSS/SASS</h4></div>
                                <div class="skill-pill"><h4 class="pill">JS/JQUERY</h4></div>

                            </p>
                        </div>
                        <div class="col-md-4">
                            <p>
                                <div class="skill-pill"><h4 class="pill">GIT</h4></div>
                                <div class="skill-pill"><h4 class="pill">BOOTSTRAP</h4></div>
                                <div class="skill-pill"><h4 class="pill">NODE.JS</h4></div>
                                <div class="skill-pill"><h4 class="pill">EXPRESS.JS</h4></div>
                                <div class="skill-pill"><h4 class="pill">HANDLEBARS.JS</h4></div>
                            </p>
                        </div>
                        <div class="col-md-4">
                            <p>
                                <div class="skill-pill"><h4 class="pill">ILLUSTRATOR</h4></div>
                                <div class="skill-pill"><h4 class="pill">PHOTOSHOP</h4></div>
                                <div class="skill-pill"><h4 class="pill">INDESIGN</h4></div>
                            </p>
                        </div>
                    </div> <!--row -->

                </div>
                <!-- /.col-lg-10 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

    <section class="highlight">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="row">
                        <div class="col-md-4">
                            <a href="https://cas-cohort-cup-tracker.herokuapp.com/rankings" target="_blank"><img src="img/cc.png" class="port-image"></a>
                        </div>

                        <div class="col-md-8">
                            <h1 class = "proj-title">cohort cup tracker</h1>
                            <h2>express.js | node.js | handlebars.js | passport-local-mongoose | chart.js | bootstrap</h2>
                            <p>
                                A web app made for automating the point tallying process of NYU's College of Arts
                                and Science 2016 Cohort Cup. With this application, I was able to manage the overwhelming traffic of the competition,
                                automating the process of scanning through an average of 100 comments for each of our 22 challenge posts on Facebook.
                            </p>

                            <a href="https://github.com/melissaelopez/cas-cohort-cup" target="_blank"><div class="h-btn github"><i class="fa fa-code" aria-hidden="true"></i> view source</div></a>

                            <a href="https://cas-cohort-cup-tracker.herokuapp.com/rankings" target="_blank"><div class="h-btn demo">go to website</div></a>


                        </div>
                    </div><!--row -->
                </div><!-- /.col-lg-10 -->
            </div> <!-- /.row -->
        </div><!-- /.container -->
    </section>

    <section class="highlight">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="row">
                        <div class="col-md-4">
                            <a href="https://docs.google.com/document/d/1tpMt9Y3Lrr-PV2c4mxY-jFkynrNUYMFw7sQ6FoPOoaU/edit?usp=sharing" target="_blank"><img src="img/robot.png" class="port-image"></a>
                        </div>

                        <div class="col-md-8">
                            <h1 class="proj-title">disc robot path planning</h1>
                            <h2>matlab | object-oriented programming | robotics | soft subdivision search algorithm</h2>
                            <p>
                                For a given environment, this MatLab project finds a safe path for a disc robot to travel between point A and
                                point B. This program tests two versions of a Soft Subdivision Search algorithm.
                            </p>

                            <a href="https://github.com/eaesh/robot-path-planning" target="_blank"><div class="h-btn github"><i class="fa fa-code" aria-hidden="true"></i> view source</div></a>
                            <a href="https://docs.google.com/document/d/1tpMt9Y3Lrr-PV2c4mxY-jFkynrNUYMFw7sQ6FoPOoaU/edit?usp=sharing" target="_blank"><div class="h-btn demo">go to research paper</div></a>

                        </div>
                    </div><!--row -->
                </div><!-- /.col-lg-10 -->
            </div> <!-- /.row -->
        </div><!-- /.container -->
    </section>

    <section class="highlight">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="row">
                        <div class="col-md-4">
                            <a href="http://melello.com/graphics/hw-final/" target="_blank"><img src="img/doodler.png" class="port-image"></a>
                        </div>

                        <div class="col-md-8">
                            <h1 class="proj-title">the doodler</h1>
                            <h2>html 2d canvas | matrix manipulation | computer graphics</h2>
                            <p>
                                An interactive b-spline editor! This was made for my computer graphics course in the spring of 2017.
                            </p>
                            <a href="https://github.com/melissaelopez/melissaelopez.github.io/tree/master/graphics/hw-final" target="_blank"><div class="h-btn github"><i class="fa fa-code" aria-hidden="true"></i> view source</div></a>
                            <a href="http://melello.com/graphics/hw-final/" target="_blank"><div class="h-btn demo">start doodling</div></a>

                        </div>
                    </div><!--row -->
                </div><!-- /.col-lg-10 -->
            </div> <!-- /.row -->
        </div><!-- /.container -->
    </section>

    <section class="highlight">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="row">
                        <div class="col-md-4">
                            <a href="https://github.com/melissaelopez/OS-linker" target="_blank"><img src="img/linker.png" class="port-image"></a>
                        </div>

                        <div class="col-md-8">
                            <h1 class="proj-title">linker</h1>
                            <h2>java | operating systems</h2>
                            <p>
                                An operations systems simulation of a two-pass linker based on file input with definitions, uses, and memory addresses (relative, absolute, immediate, external), with error detection.
                            </p>

                            <a href="https://github.com/melissaelopez/OS-linker" target="_blank"><div class="h-btn github"><i class="fa fa-code" aria-hidden="true"></i> view source</div></a>
                            <!-- <a href="https://docs.google.com/document/d/1tpMt9Y3Lrr-PV2c4mxY-jFkynrNUYMFw7sQ6FoPOoaU/edit?usp=sharing"><div class="h-btn demo">go to </div></a> -->

                        </div>
                    </div><!--row -->
                </div><!-- /.col-lg-10 -->
            </div> <!-- /.row -->
        </div><!-- /.container -->
    </section>

    <section class="highlight">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="row">
                        <div class="col-md-4">
                            <a href="./presentations/bite" target="_blank"><img src="img/bite-slide.png" class="port-image"></a>
                        </div>

                        <div class="col-md-8">
                            <h1 class="proj-title">bite</h1>
                            <h2>ux design | user research / testing | personas | MVP | journey maps | lo-fi prototype | annotated wireframes</h2>
                            <p>
                                A pitch deck for a mobile app concept to streamline how users organize their feeds across multiple social media platforms.
                            </p>

                            <a href="./presentations/bite" target="_blank"><div class="h-btn github"><i class="fa fa-eye" aria-hidden="true"></i> view presentation</div></a>
                            <!-- <a href="https://docs.google.com/document/d/1tpMt9Y3Lrr-PV2c4mxY-jFkynrNUYMFw7sQ6FoPOoaU/edit?usp=sharing"><div class="h-btn demo">go to </div></a> -->

                        </div>
                    </div><!--row -->
                </div><!-- /.col-lg-10 -->
            </div> <!-- /.row -->
        </div><!-- /.container -->
    </section>




    <!-- Portfolio -->
    <section id="portfolio">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <h3 class="tools">more projects</h3>
                    <div class="row">
                        <div class="col-md-4" id="colorrrs">
                            <a href="./colors" target="_blank"><img src="img/colorrrs.png"></a>
                        </div>

                        <div class="col-md-4">
                            <a href="https://dribbble.com/shots/3412118-Hello-Dribbble" target="_blank"><img src="img/hello_dribbble.png" class="port-image"></a>
                        </div>

                        <div class="col-md-4">
                            <a href="https://dribbble.com/shots/3434709-56-Leonard" target="_blank"><img src="img/baby_leonard.png" class="port-image"></a>
                        </div>

                    </div> <!--row -->

                    <div class="row">


                        <div class="col-md-4">
                            <a href="https://marvelapp.com/gjgdie/screen/12174102" target="_blank"><img src="img/edyou-proto.png" class="port-image"></a>
                        </div>

                        <div class="col-md-4">
                            <a href="https://dribbble.com/shots/3697398-Heart-Doodle" target="_blank"><img src="img/heart-color.png" class="port-image"></a>
                        </div>

                        <div class="col-md-4">
                            <a href="./pdf/show-spark-portfolio.pdf" target="_blank"><img src="img/showspark.png" class="port-image"></a>
                        </div>
                    </div> <!--row -->


                </div>
                <!-- /.col-lg-10 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>


    <!-- <section id="care">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-lg-offset-0">
                    <div class="row">
                        <h3>what i care about</h3>
                        <div class="col-lg-1">
                            <h3>diversity + inclusion in tech</h3>
                        </div>
                        <div class="col-lg-5">
                            <h3>
                                As a woman, a Latina, and a first-gen college student, I take advocacy for these communities very seriously.
                                In the summer of 2017, I worked as a Teaching Assistant for Girls Who Code to play my part in closing
                                the tech gender gap for the next generation of computer scientists.
                            </h3>
                        </div>
                        <div class="col-lg-1">
                            <h3>human-centered design</h3>
                        </div>
                        <div class="col-lg-5">
                            <h3>
                                I firmly believe that the human perspective needs to be involved in each step of the design process of a product.
                                Humans are not robots. Our technologies should not take for granted the goals and needs of the users.
                            </h3>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-1">
                            <h3>experience design</h3>
                        </div>
                        <div class="col-lg-5">
                            <h3>
                                [insert]
                            </h3>
                        </div>
                        <div class="col-lg-1">
                            <h3>celebrating creativity</h3>
                        </div>
                        <div class="col-lg-5">
                            <h3>
                                Sometimes you just have to let yourself and your creatvity flow. I believe creativity is bravery,
                                and ought to be celebrated.
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> -->


    <footer id="footer" class="footer">
        <h1 id="footer-title">stay in touch</h1>
        <a href="mailto:melissa.lopez@nyu.edu"><div class="f-btn mail"><i class="fa fa-envelope" aria-hidden="true"></i> email melissa.lopez@nyu.edu</div></a>
        <a href="https://github.com/melissaelopez"><div class="f-btn github"><i class="fa fa-github" aria-hidden="true"></i> github</div></a>
        <a href="https://www.linkedin.com/in/melissa-lopez/"><div class="f-btn linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i> linkedin</div></a>
        <a href="https://dribbble.com/melello"><div class="f-btn dribbble"><i class="fa fa-dribbble" aria-hidden="true"></i> dribbble</div></a>
    </footer>

    <!-- jQuery library, Bootstrap, Typed.js, Melissa-Site.js-->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.4/typed.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
    <script src="js/melissa-site.js"></script>
    <script src="js/pace.js"></script>
</body>

</html>
