-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from melissahuertadev/dev
portfolio v1.1.0
- Loading branch information
Showing
7 changed files
with
244 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| [ | ||
| { | ||
| "id": "proj001", | ||
| "projectName": "Prillare E-commerce", | ||
| "projectDescription": "<strong>Prillare</strong> is a local small business, with the creation of their e-commerce, we managed to get them to offer a better service and connect more with their customers. </br>You can watch the demo above or visit their site <a href='https://www.prillare.pe' target='_blank'>here</a>.", | ||
| "imgSrc": "img/project-prillare.png", | ||
| "modalType": "img", | ||
| "modalPath": "img/project-prillare.png", | ||
| "category": [ | ||
| { | ||
| "categoryClass": "badge-light", | ||
| "categoryName": "E-commerce" | ||
| }, | ||
| { | ||
| "categoryClass": "badge-info", | ||
| "categoryName": "React JS" | ||
| }, | ||
| { | ||
| "categoryClass": "badge-secondary", | ||
| "categoryName": "Node" | ||
| }, | ||
| { | ||
| "categoryClass": "badge-success", | ||
| "categoryName": "MongoDB" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "id": "proj002", | ||
| "projectName": "Warmi", | ||
| "projectDescription": "<strong>Warmi</strong> is a safe space for women, you can find more information or suscribe to the newsletter visiting this <a href='https://melissahuertadev.github.io/warmi-webapp/' target='_blank'>site</a> 😊</br>The current webpage was build with JS and Node, the mobile application is being developed with Flutter.", | ||
| "imgSrc": "img/project-warmi.png", | ||
| "modalType": "img", | ||
| "modalPath": "img/project-warmi.png", | ||
| "category": [ | ||
| { | ||
| "categoryClass": "badge-light", | ||
| "categoryName": "WebPage" | ||
| }, | ||
| { | ||
| "categoryClass": "badge-warning", | ||
| "categoryName": "JS" | ||
| }, | ||
| { | ||
| "categoryClass": "badge-secondary", | ||
| "categoryName": "Node" | ||
| }, | ||
| { | ||
| "categoryClass": "badge-info", | ||
| "categoryName": "Flutter" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "id": "proj003", | ||
| "projectName": "Dino Game - JS", | ||
| "projectDescription": "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/' target='_blank'>here</a>.", | ||
| "imgSrc": "img/project-dinogame.png", | ||
| "modalType": "mov", | ||
| "modalPath": "img/project-dinogame.mov", | ||
| "category": [ | ||
| { | ||
| "categoryClass": "badge-light", | ||
| "categoryName": "Game" | ||
| }, | ||
| { | ||
| "categoryClass": "badge-warning", | ||
| "categoryName": "JS" | ||
| } | ||
| ] | ||
| } | ||
| ] |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| $(function () { | ||
| //Getting projects info for Portfolio section | ||
| let projectGallery = $("#project-gallery"); | ||
|
|
||
| $.ajax({ | ||
| type: "GET", | ||
| url: "../data/projects.json", | ||
| dataType: "json", | ||
| }).done((data) => { | ||
| $.each(data, function (index, project) { | ||
| let projectCategories = ""; | ||
|
|
||
| for (let i = 0; i < project.category.length; i++) { | ||
| projectCategories += `<span class="badge ${project.category[i].categoryClass}">${project.category[i].categoryName}</span> `; | ||
| } | ||
|
|
||
| projectGallery.append( | ||
| `<div class="col-lg-5 col-md-8 project"> | ||
| <div class="card mb-4 box-shadow"> | ||
| <img class="card-img-top img-project" id="${project.id}" alt="${project.projectName}" style="height: 225px; width: 100%; display: block;" src="${project.imgSrc}" data-holder-rendered="true"> | ||
| <div class="card-body"> | ||
| <p class="card-text"> ${project.projectDescription}</p> | ||
| <div class="category"> | ||
| ${projectCategories} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div>` | ||
| ); | ||
|
|
||
| $(`#${project.id}`).on("click", function () { | ||
| let modal = ""; | ||
|
|
||
| if (project.modalType === "img") { | ||
| modal = | ||
| '<div class="modal" id="modal"> <img src="' + | ||
| project.modalPath + | ||
| '"><div class="btn-close" id="btnClose"><i class="fa fa-times" aria-hidden="true"></i></div></div>'; | ||
| } else if (project.modalType === "mov") { | ||
| modal = | ||
| '<div class="modal" id="modal"><video autoplay> <source src="' + | ||
| project.modalPath + | ||
| '" 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(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| //Getting medium articles for Blog section | ||
| let mediumPromise = new Promise(function (resolve) { | ||
| let $content = $("#mediumPosts"); | ||
| let data = { | ||
| rss: "https://medium.com/feed/@melissahuertadev", | ||
| }; | ||
| const rssJson = | ||
| "https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fmedium.com%2Ffeed%2F%40melissahuertadev"; | ||
|
|
||
| $.get(rssJson, data, function (res) { | ||
| if (res.status == "ok") { | ||
| let postCard = ""; | ||
| $.each(res.items, function (k, item) { | ||
| let src = item["thumbnail"]; | ||
|
|
||
| postCard += `<div class="postcard card mb-3 mx-auto mr-5 " style="width: 20rem;">`; | ||
| postCard += `<img src="${src}" class="card-img-top" alt="Cover image">`; | ||
| postCard += `<div class="card-body">`; | ||
| postCard += `<h5><a href="${item.link}" class="post-title">${item.title}</a></h5>`; | ||
| var postText = item.description.replace(/<img[^>]*>/g, ""); | ||
| postText = postText.replace("h4", "p"); | ||
| postText = postText.replace("h3", "p"); | ||
| postText = postText.replace("<em>", ""); | ||
| var maxLength = 100; | ||
| var trimmedString = postText.substr(0, maxLength); | ||
| trimmedString = trimmedString.substr( | ||
| 0, | ||
| Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")) | ||
| ); | ||
| postCard += `<p class="card-text">${trimmedString}...</p>`; | ||
|
|
||
| postCard += `<a href="${item.link}" target="_blank" class="btn btn-lilac" >Read More</a>`; | ||
| postCard += "</div></div>"; | ||
| return k < 10; | ||
| }); | ||
|
|
||
| resolve($content.html(postCard)); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| mediumPromise.then(function () { | ||
| pageSize = 3; | ||
|
|
||
| let pageCount = $(".postcard").length / pageSize; | ||
|
|
||
| for (let i = 0; i < pageCount; i++) { | ||
| $("#pagin").append( | ||
| `<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li> ` | ||
| ); | ||
| } | ||
|
|
||
| $("#pagin li:nth-child(1)").addClass("active"); | ||
| showPage = function (page) { | ||
| $(".postcard").hide(); | ||
| $(".postcard").each(function (n) { | ||
| if (n >= pageSize * (page - 1) && n < pageSize * page) { | ||
| $(this).show(); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| showPage(1); | ||
|
|
||
| $("#pagin li").click(function () { | ||
| $("#pagin li").removeClass("active"); | ||
| $(this).addClass("active"); | ||
|
|
||
| showPage(parseInt($(this).text())); | ||
| return false; | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters