merging dev into main

melissahuertadev · Apr 13, 2022 · 4b6ff5e · 4b6ff5e
2 parents 257ecae + 58b32e0
commit 4b6ff5e
Show file tree

Hide file tree

Showing 24 changed files with 2,492 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "melissahuertadev",
+  "version": "1.0.2",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "nodemon server.js",
+    "start": "node server.js"
+  },
+  "keywords": [],
+  "author": "Melissa Huerta",
+  "license": "ISC",
+  "dependencies": {
+    "body-parser": "^1.20.0",
+    "cors": "^2.8.5",
+    "dotenv": "^16.0.0",
+    "express": "^4.17.3",
+    "express-validator": "^6.14.0",
+    "nodemailer": "^6.7.2"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.15"
+  }
+}
diff --git a/public/files/HuertaMelissa-DevResume-English.pdf b/public/files/HuertaMelissa-DevResume-English.pdf
diff --git a/public/icons/arrival.png b/public/icons/arrival.png
diff --git a/public/icons/astronaut.png b/public/icons/astronaut.png
diff --git a/public/icons/car.png b/public/icons/car.png
diff --git a/public/icons/coding-2.png b/public/icons/coding-2.png
diff --git a/public/icons/folder.png b/public/icons/folder.png
diff --git a/public/icons/happy.png b/public/icons/happy.png
diff --git a/public/icons/laptop.png b/public/icons/laptop.png
diff --git a/public/icons/shopping-bag.png b/public/icons/shopping-bag.png
diff --git a/public/img/dino-game.png b/public/img/dino-game.png
diff --git a/public/img/mhdev-about.png b/public/img/mhdev-about.png
diff --git a/public/img/mhdev-comp.png b/public/img/mhdev-comp.png
diff --git a/public/img/mhdev-smile.png b/public/img/mhdev-smile.png
diff --git a/public/img/mhdev.png b/public/img/mhdev.png
diff --git a/public/img/project-dinogame.mov b/public/img/project-dinogame.mov
diff --git a/public/img/project-dinogame.png b/public/img/project-dinogame.png
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,299 @@
+<!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.0">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+        integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
+    <!-- Google fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Anton&family=Arvo:wght@400;700&family=KoHo:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,600&display=swap"
+        rel="stylesheet">
+
+
+    <link rel="stylesheet" href="styles.css" />
+
+
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+        integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <title>Melissa Huerta Dev</title>
+</head>
+
+<body class="noselect">
+    <div class="btn-goback-up" id="btnGobackUp">
+        <a href="#" class="goback-up">
+            <i class="fa fa-arrow-up" aria-hidden="true"></i>
+        </a>
+    </div>
+
+    <section class="bg-purple" id="title">
+        <div class="container-fluid">
+            <nav class="navbar navbar-expand-lg navbar-dark">
+                <a class="navbar-brand goback-up" href="#">
+                    <img src="./img/mhdev.png" width="50px" alt="">
+                </a>
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav ml-auto">
+                        <li class="nav-item">
+                            <a class="nav-link scroll-about" href="#about">About me</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link scroll-soft" href="#services">Services</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link scroll-soft" href="#portfolio">Portfolio</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link scroll-soft" href="#contact">Let's work!</a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+            <!-- Title -->
+            <div class="row">
+                <div class="col-lg-6">
+                    <div class="col-title-image">
+                        <img class="title-image" src="img/mhdev-comp.png" alt="iphone-mockup">
+                    </div>
+                    <h1 class="big-heading">Melissa Huerta</h1>
+                    <h2 class="big-desc">Software Developer</h2>
+                    <p>Specialized in turning ideas into apps. 🚀</p>
+                    <div class="socials">
+                        <a target=”_blank” href="https://www.linkedin.com/in/melissahuertadev/">
+                            <i class="fa-brands fa-linkedin"></i>
+                        </a>
+                        <a target=”_blank” href="https://github.com/melissahuertadev">
+                            <i class="fa-brands fa-github"></i>
+                        </a>
+                        <a target=”_blank” href="https://www.youtube.com/c/codeafeliz">
+                            <i class="fa-brands fa-youtube"></i>
+                        </a>
+                        <a target=”_blank” href="https://medium.com/@melissahuertadev">
+                            <i class="fa-brands fa-medium"></i>
+                        </a>
+                    </div>
+                    <a href="#contact" class="scroll-soft btn btn-brown btn-lg download-button">
+                        Let's make an app!</a>
+
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="workflow container-fluid" id="workflow">
+        <h2 class="middle-heading">Workflow</h2>
+        <h6>Know more how I do things :]</h6>
+        <div class="row">
+            <div class="stage-box col-lg-4">
+                <img src="./icons/astronaut.png" width="60px">
+                <h3 class="stage-title">Aware</h3>
+                <p>Hellooo! The first step is to know you and your current situation, to be <span>aware</span>
+                    of your or your business's problems and needs, so together we can look for
+                    the best solution.</p>
+            </div>
+            <div class="stage-box col-lg-4">
+                <img src="./icons/happy.png" width="60px">
+                <h3 class="stage-title">Land</h3>
+                <p>Once we have defined the problem or need, I'll start brainstorming
+                    possible solutions and of course if you have already something in mind,
+                    that's beyond awesome!
+                    So we can finally <span>land the idea</span> that will
+                    be turned into app.</p>
+            </div>
+            <div class="stage-box col-lg-4">
+                <img src="./icons/laptop.png" width="60px">
+                <h3 class="stage-title">Prototype</h3>
+                <p>Great! Now we have our idea landed. I'll share with you some wireframes
+                    and after we choose the one that suits you best, it's time for me to show you <span>high fidelity
+                        prototype</span>
+                    of the app.</p>
+            </div>
+            <div class="stage-box col-lg-4">
+                <img src="./icons/coding-2.png" width="60px">
+                <h3 class="stage-title">Develop</h3>
+                <p>We are almost there! This step is the most fun for me, since I'll be
+                    <span>developing</span> your app and of course you are a huge part of it
+                    since I'll need your constant feedback.
+                </p>
+            </div>
+            <div class="stage-box col-lg-4">
+                <img src="./icons/car.png" width="60px">
+                <h3 class="stage-title">Launch</h3>
+                <p>We did it! <br> We make your app and in this final step, we will be <span>launching</span>
+                    the app to the woooorld! It's time for them to see it.</p>
+            </div>
+        </div>
+    </section>
+
+    <section id="about" class="container-fluid">
+        <h2 class="middle-heading">About me</h2>
+        <h6>Know more about me :]</h6>
+        <div class="row">
+            <div class="col-lg-7">
+                <p>Hello world! My name is Melissa Huerta, a professional Software Developer with 3+ years of experience in both
+                    <strong>web</strong> and <strong>mobile</strong> applications. I develop <span>websites</span> with JavaScript, React 
+                    and Node and <span>mobile apps </span>
+                    with Flutter (Dart) and Firebase.<br />
+                    Being an <strong>innovative, perserver</strong> and <strong>rigorous</strong> person has allowed me
+                    to deliver projects fulfilling the expectations.<br />
+                    Work with me if <span>teamwork</span> and <span>communication</span> throughout the 
+                    project are your priorities.<br />
+                    Currently, I’m focused on building landing pages, portfolios, websites for freelancers and small businesses.<br/>
+
+                </p>
+            </div>
+            <div class="col-lg-5">
+                <div class="about-image title-image">
+                    <img src="img/mhdev-about.png" alt="mhdev_photo">
+                </div>
+            </div>
+            <div class="about-btn col-lg-3">
+                <a class="btn btn-brown btn-lg download-button" href="./files/HuertaMelissa-DevResume-English.pdf"
+                    download="HuertaMelissa_Resume">
+                    Download CV <i class="fa fa-download" aria-hidden="true"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <section id="services" class="container-fluid">
+        <h2 class="middle-heading">Services</h2>
+        <h6>See which services is <span>ideal</span> for you :]</h6>
+
+        <div class="row">
+            <div class="pricing-column col-lg-4 col-md-6">
+                <div class="card">
+                    <div class="card-header">
+                        <img src="./icons/arrival.png">
+                        <h3 class="my-0 fw-normal">Landing Page</h3>
+                    </div>
+                    <div class="card-body">
+                        <h2 class="card-title pricing-card-title price-text">$50.00 <span>$80.00</span></h2>
+                        <p>1 single page</p>
+                        <p>Up to 5 sections</p>
+                        <p>Responsive and Cross-Browser</p>
+                        <p>Can include contact form</p>
+                        <p class="ideal">Ideal for a portfolio or a marketing campaign.</p>
+                        <a href="#contact" class="btn btn-lg btn-block btn-outline-dark" >I want this!</a>
+                    </div>
+                </div>
+            </div>
+    </section> 
+
+    <section id="portfolio" class="container-fluid">
+            <h2 class="middle-heading">The portfolio</h2>
+            <h6>Come on! Take a glance of the last projects I had worked on :]</h6>
+
+            <div class="row projects-gallery">
+                <div class="col-lg-5 col-md-8 project">
+                    <div class="card mb-4 box-shadow">
+                        <img class="card-img-top img-project" alt="Dino Game - JS"
+                            style="height: 225px; width: 100%; display: block;" src="img/project-dinogame.png"
+                            data-holder-rendered="true">
+                        <div class="card-body">
+                            <p class="card-text"> This game is 100% inspired on the Google's Chrome No Internet connection error 
+                                Dino T-Rex Runner game. This one of course, is <span>purple✨</span><br />
+                                You can watch the demo above 
+                                or play it <a href="https://melissahuertadev.github.io/dino-game/">here</a>.
+                            </p>
+                            <div class="category">
+                                <span class="badge badge-light">Game</span>
+                                <span class="badge badge-warning">JS</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+    </section>
+
+    <section id="contact" class="container-fluid">
+            <h2 class="middle-heading">Let's work</h2>
+            <div class="mb-4">
+                <div class="row">
+                    <div class="col-md-8 mb-md-0 mb-5">
+                        <form id="contact-form" name="contact-form" action="/sendmail" method="POST">
+                            <div class="form-row justify-content-center">
+                                <div class="col-md-4 mb-4">
+                                    <input type="text" class="form-control form-input" id="name" name="name"
+                                        placeholder="Full name" required>
+                                </div>
+                                <div class="col-md-6 mb-4 ">
+                                    <input type="email" id="email" name="email" class="form-control form-input"
+                                        placeholder="E-mail" required>
+                                </div>
+                            </div>
+                            <div class="form-row justify-content-center">
+                                <div class="col-md-10 mb-4">
+                                    <textarea type="text" id="message" name="message" rows="6" cols="30"
+                                        placeholder="Your message" class="form-control md-textarea form-input"
+                                        required></textarea>
+                                </div>
+                            </div>
+
+                            <input class="btn btn-brown col-md-6" type="submit" value="Send">
+
+                        </form>
+                    </div>
+
+                    <div class="col-md-4 text-center">
+                        <ul class="list-unstyled mb-0">
+                            <li class="contact-data"><i class="fas fa-envelope"></i>
+                                <p>[email protected]</p>
+                            </li>
+                            <li class="contact-data"><i class="fas fa-phone"></i>
+                                <p>+ 51 944 235 148</p>
+                            </li>
+                            <li class="contact-data"><i class="fas fa-map-marker-alt"></i>
+                                <p>Lima, 15012, Peru</p>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+    </section>
+
+    <!-- Footer -->
+    <footer id="footer" class="container-fluid">
+        <a target=”_blank” href="https://www.linkedin.com/in/melissahuertadev/">
+            <i class="fa-brands fa-linkedin"></i>
+        </a>
+        <a target=”_blank” href="https://github.com/melissahuertadev">
+            <i class="fa-brands fa-github"></i>
+        </a>
+        <a target=”_blank” href="https://www.youtube.com/c/codeafeliz">
+            <i class="fa-brands fa-youtube"></i>
+        </a>
+        <a target=”_blank” href="https://medium.com/@melissahuertadev">
+            <i class="fa-brands fa-medium"></i>
+        </a>
+        <p class="footer-copy">
+            © Copyright 2022 Melissa Huerta Dev <br>
+            Made with ❤️ in Perú
+        </p>
+        <a class="flaticon" href="https://www.flaticon.com/free-icons" title="icons">
+            Icons created by Freepik - Flaticon
+        </a>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
+        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
+        crossorigin="anonymous"></script>
+    <script src="js/jquery-3.6.0.min.js"></script>
+    <script src="js/app.js"></script>
+</body>
+
+</html>
diff --git a/public/js/app.js b/public/js/app.js
@@ -0,0 +1,70 @@
+$(document).ready(function () {
+  let btnGobackUp = $("#btnGobackUp");
+
+  window.addEventListener("pageshow", () => {
+    let contactForm = $("#contact-form");
+    contactForm[0].reset();
+  });
+
+  //Display and hide "goback up button"
+  $(window).on("scroll", function () {
+    let workflowOffset = $("#workflow").offset().top;
+    let windowScroll = $(window).scrollTop();
+
+    if (windowScroll >= workflowOffset) {
+      btnGobackUp.css("margin-right", 0);
+    } else if (windowScroll <= workflowOffset / 2) {
+      btnGobackUp.css("margin-right", "-60px");
+    }
+  });
+
+  //"Go up" soft scroll effect
+  $("a.goback-up").on("click", function (e) {
+    e.preventDefault();
+
+    if ($(window).scrollTop() != 0) {
+      $("html, body").stop().animate({ scrollTop: 0 }, 1000);
+    }
+  });
+
+  //Scroll soft effect
+  $("a.scroll-soft").on("click", function (e) {
+    e.preventDefault();
+
+    let sectionOffset = $($(this).attr("href")).offset().top;
+
+    $("html, body").stop().animate({ scrollTop: sectionOffset }, 1000);
+  });
+
+  //"Go up" soft scroll effect
+  $("a.scroll-about").on("click", function (e) {
+    e.preventDefault();
+
+    let sectionOffset = $($(this).attr("href")).offset().top - 95;
+
+    $("html, body").stop().animate({ scrollTop: sectionOffset }, 1000);
+  });
+
+  //Portfolio
+  $(".img-project").on("click", function () {
+    let videoPath = $(this).attr("src");
+    let videoSrc = videoPath.slice(0, -3) + "mov";
+
+    console.log(videoSrc);
+    let modal =
+      '<div class="modal" id="modal"><video autoplay> <source src="' +
+      videoSrc +
+      '" type="video/mp4"></video><div class="btn-close" id="btnClose"><i class="fa fa-times" aria-hidden="true"></i></div></div>';
+
+    $("#portfolio").after(modal);
+    $("#btnClose").on("click", function () {
+      $("#modal").remove();
+    });
+  });
+
+  $(document).on("keyup", function (e) {
+    if (e.which === 27) {
+      $("#modal").remove();
+    }
+  });
+});
diff --git a/public/js/jquery-3.6.0.min.js b/public/js/jquery-3.6.0.min.js