├── assets ├── intro.png ├── sql.png ├── Resume.pdf ├── example.gif ├── skills.png ├── about-me.png ├── project1.jpg ├── projects.png ├── html5.svg ├── css3.svg ├── js.svg ├── python.svg ├── react.svg ├── java.svg └── node.svg ├── style ├── footer.css ├── skills.css ├── effects.css ├── top.css ├── about.css └── projects.css ├── LICENSE ├── README.md ├── data └── data.js ├── index.html └── js └── renderTemplate.js /assets/intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thalytabdn/Portfolio/HEAD/assets/intro.png -------------------------------------------------------------------------------- /assets/sql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thalytabdn/Portfolio/HEAD/assets/sql.png -------------------------------------------------------------------------------- /assets/Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thalytabdn/Portfolio/HEAD/assets/Resume.pdf -------------------------------------------------------------------------------- /assets/example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thalytabdn/Portfolio/HEAD/assets/example.gif -------------------------------------------------------------------------------- /assets/skills.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thalytabdn/Portfolio/HEAD/assets/skills.png -------------------------------------------------------------------------------- /assets/about-me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thalytabdn/Portfolio/HEAD/assets/about-me.png -------------------------------------------------------------------------------- /assets/project1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thalytabdn/Portfolio/HEAD/assets/project1.jpg -------------------------------------------------------------------------------- /assets/projects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thalytabdn/Portfolio/HEAD/assets/projects.png -------------------------------------------------------------------------------- /style/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 10px 0; 3 | margin-top: 100px; 4 | 5 | } 6 | 7 | .footer .love{ 8 | color: red; 9 | } 10 | 11 | .footer a { 12 | text-decoration: none; 13 | } 14 | 15 | .footer hr{ 16 | margin-left: 15%; 17 | margin-right: 15%; 18 | } -------------------------------------------------------------------------------- /assets/html5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/css3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /style/skills.css: -------------------------------------------------------------------------------- 1 | .skills { 2 | background-color: rgb(243, 241, 241); 3 | } 4 | 5 | .cards-main{ 6 | display: grid; 7 | grid-template-columns: repeat(auto-fit,minmax(350px,1fr)); 8 | grid-column-gap: 10px; 9 | grid-row-gap: 1em; 10 | padding: 20px 10px; 11 | } 12 | 13 | .card{ 14 | background-color: #fff; 15 | padding: 2rem; 16 | cursor: pointer; 17 | border-radius: 10px; 18 | transform: scale(.98); 19 | } 20 | 21 | .card:hover { 22 | transform: scale(1.02); 23 | } 24 | 25 | .img-card{ 26 | height: 144px; 27 | width: 144px; 28 | } -------------------------------------------------------------------------------- /assets/js.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/python.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Thalyta Barbosa 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /style/effects.css: -------------------------------------------------------------------------------- 1 | html { 2 | scroll-behavior: smooth; 3 | } 4 | 5 | .fadeIn { 6 | -webkit-animation: fadeIn 3s ease-in-out; 7 | -moz-animation: fadeIn 3s ease-in-out; 8 | -o-animation: fadeIn 3s ease-in-out; 9 | animation: fadeIn 3s ease-in-out; 10 | } 11 | 12 | .gradient { 13 | background: -webkit-linear-gradient(135deg, #8929ad, #436aac, #43b7b8); 14 | -webkit-background-clip: text; 15 | -webkit-text-fill-color: transparent; 16 | } 17 | 18 | .gradient-btn { 19 | background-image: linear-gradient(135deg, #8929ad, #436aac, #43b7b8); 20 | border-color: linear-gradient(135deg, #8929ad, #436aac, #43b7b8); 21 | border: none; 22 | } 23 | .gradient:hover{ 24 | color: #ffa62b; 25 | } 26 | .fade:hover { 27 | opacity: 0.5; 28 | } 29 | .fade { 30 | opacity: 1; 31 | } 32 | 33 | @keyframes bounce { 34 | 40% { 35 | transform: translateY(-20px); 36 | opacity: 0.4; 37 | } 38 | 60% { 39 | transform: translateY(-10px); 40 | opacity: 0.6; 41 | } 42 | } 43 | 44 | .bounce { 45 | animation: bounce 1.7s infinite; 46 | -webkit-animation: bounce 1.7s infinite; 47 | } 48 | 49 | .shadow { 50 | box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.2); 51 | } 52 | 53 | .shadow:hover { 54 | box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.6); 55 | } 56 | 57 | .load-hidden { 58 | visibility: hidden; 59 | } 60 | -------------------------------------------------------------------------------- /style/top.css: -------------------------------------------------------------------------------- 1 | html, body{ 2 | margin:0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | #top { 8 | background-color: #fff; 9 | font-family: 'Roboto Mono', monospace; 10 | display: flex; 11 | vertical-align: bottom; 12 | width: 100%; 13 | min-height: 100vh; 14 | background-size: cover; 15 | background-attachment: fixed; 16 | } 17 | 18 | .header { 19 | text-align: center; 20 | color: #272341; 21 | position: absolute; 22 | top: 50%; 23 | left: 50%; 24 | transform: translate(-50%,-50%); 25 | } 26 | 27 | h1 { 28 | font-size: 40px; 29 | margin: 0; 30 | } 31 | 32 | .nav { 33 | font-size: 20px; 34 | font-weight: 700; 35 | margin-top: 40px; 36 | } 37 | 38 | .btn{ 39 | color: #272341; 40 | line-height: 1.6rem; 41 | cursor: pointer; 42 | text-decoration: none; 43 | margin: 1rem; 44 | border-radius: 5px; 45 | } 46 | 47 | .header-icons { 48 | text-align: center; 49 | margin-top: 20px; 50 | z-index: 4; 51 | } 52 | 53 | .icon{ 54 | font-size: 25px; 55 | padding: 10px; 56 | margin: 0 auto; 57 | text-rendering: optimizeLegibility; 58 | } 59 | 60 | #down { 61 | font-size: 40px !important; 62 | margin-top: 90vh; 63 | z-index: 5; 64 | } 65 | 66 | #top-button{ 67 | position: fixed; 68 | bottom: 20px; 69 | right: 30px; 70 | cursor: pointer; 71 | z-index: 10; 72 | } 73 | .gradient:hover{ 74 | color: #16697a; 75 | } 76 | -------------------------------------------------------------------------------- /assets/java.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /style/about.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 100%; 3 | text-align: center; 4 | margin-left: auto; 5 | position: relative; 6 | } 7 | 8 | h1,h2,h3,p{ 9 | font-family: 'Roboto Mono', monospace; 10 | } 11 | 12 | .section-style{ 13 | background-image: -webkit-linear-gradient(135deg, #43B7B8, #436AAC, #8929AD); 14 | padding-right: 15px; 15 | padding-left: 15px; 16 | padding-bottom:10px; 17 | border-top: 0; 18 | color: #fff; 19 | } 20 | 21 | .section-title{ 22 | font-size: 30px; 23 | padding-top: 40px; 24 | margin-bottom: 10px; 25 | } 26 | 27 | .description{ 28 | font-size: 20px; 29 | padding-bottom: 15px; 30 | margin-right: 15%; 31 | margin-left: 15%; 32 | } 33 | 34 | /* 35 | =================== 36 | View CV Button 37 | =================== 38 | */ 39 | 40 | * { 41 | box-sizing: inherit; 42 | transition-property: all; 43 | transition-duration: .6s; 44 | transition-timing-function: ease; 45 | } 46 | 47 | 48 | .buttons { 49 | display: flex; 50 | flex-direction: column; 51 | height: 100%; 52 | justify-content: center; 53 | text-align: center; 54 | width: 100%; 55 | } 56 | 57 | .container-btn { 58 | align-items: center; 59 | display: flex; 60 | flex-direction: column; 61 | justify-content: center; 62 | padding: 1em; 63 | text-align: center; 64 | } 65 | 66 | .btn-cv { 67 | color: #fff; 68 | cursor: pointer; 69 | display: block; 70 | font-size:16px; 71 | font-weight: 400; 72 | line-height: 45px; 73 | margin: 0 0 2em; 74 | max-width: 160px; 75 | position: relative; 76 | text-decoration: none; 77 | text-transform: uppercase; 78 | width: 100%; 79 | } 80 | .btn-cv:hover { 81 | text-decoration: none; 82 | } 83 | 84 | .btn-1 { 85 | background: darken(#000, 1.5%); 86 | font-weight: 100; 87 | } 88 | 89 | .btn-1 svg{ 90 | height: 45px; 91 | left: 0; 92 | position: absolute; 93 | top: 0; 94 | width: 100%; 95 | } 96 | 97 | .btn-1 rect { 98 | fill: none; 99 | stroke: #fff; 100 | stroke-width: 2; 101 | stroke-dasharray: 422, 0; 102 | transition: all 0.35s linear; 103 | } 104 | 105 | .btn-1:hover { 106 | background: rgba(0, 0, 0, 0); 107 | font-weight: 900; 108 | letter-spacing: 1px; 109 | } 110 | 111 | .btn-1:hover rect { 112 | stroke-width: 5; 113 | stroke-dasharray: 15, 310; 114 | stroke-dashoffset: 48; 115 | transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); 116 | } 117 | -------------------------------------------------------------------------------- /style/projects.css: -------------------------------------------------------------------------------- 1 | .project { 2 | display: grid; 3 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 4 | padding-left: 10%; 5 | padding-right: 10%; 6 | padding-top: 5%; 7 | grid-gap: 3%; 8 | } 9 | 10 | .project-informations { 11 | text-align: left; 12 | } 13 | 14 | .project-button { 15 | display: inline-block; 16 | padding: 0.3em 1.2em; 17 | margin: 0 0.3em 0.3em 0; 18 | border-radius: 2em; 19 | box-sizing: border-box; 20 | font-weight: 300; 21 | text-align: center; 22 | color: #fff; 23 | font-size: 1rem; 24 | outline: none; 25 | cursor: pointer; 26 | } 27 | 28 | @media all and (max-width: 30em) { 29 | .project-button { 30 | display: block; 31 | margin: 0.2em auto; 32 | } 33 | } 34 | 35 | .project-img { 36 | margin-bottom: 20px; 37 | } 38 | 39 | .project-img img { 40 | max-width: 100%; 41 | height: auto; 42 | cursor: pointer; 43 | } 44 | 45 | .project:nth-of-type(2n) .project-informations { 46 | order: 2; 47 | } 48 | 49 | .project-informations h3 { 50 | margin: 0 0; 51 | font-size: 20px; 52 | padding-top: 10px; 53 | text-transform: uppercase; 54 | } 55 | 56 | .project-informations p { 57 | font-size: 20px; 58 | } 59 | 60 | 61 | /* 62 | ============================= 63 | View Project Button 64 | ============================= 65 | */ 66 | .wrapper{ 67 | margin-bottom: 100px; 68 | position: absolute; 69 | } 70 | 71 | .link_wrapper a{ 72 | display: block; 73 | width: 200px; 74 | height: 40px; 75 | line-height: 40px; 76 | font-weight: bold; 77 | text-decoration: none; 78 | background: #fff; 79 | text-align: center; 80 | color: #444; 81 | text-transform: uppercase; 82 | letter-spacing: 1px; 83 | border: 1px solid #555; 84 | transition: all .35s; 85 | } 86 | 87 | .project-icon{ 88 | width: 40px; 89 | height: 40px; 90 | border: 3px solid transparent; 91 | position: absolute; 92 | transform: rotate(45deg); 93 | right: 0; 94 | top: 0; 95 | z-index: -1; 96 | transition: all .35s; 97 | } 98 | 99 | .project-icon svg{ 100 | width: 30px; 101 | position: absolute; 102 | top: calc(50% - 15px); 103 | left: calc(50% - 15px); 104 | transform: rotate(-45deg); 105 | fill: #333; 106 | transition: all .35s; 107 | } 108 | 109 | .link_wrapper a:hover{ 110 | width: 200px; 111 | border: 3px solid #333; 112 | background: transparent; 113 | color: #333; 114 | } 115 | 116 | .link_wrapper a:hover + .project-icon{ 117 | border: 3px solid #333; 118 | right: -18%; 119 | } 120 | 121 | @media(max-width: 960px) { 122 | .project-img { 123 | margin-top: 40px; 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /assets/node.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Portfolio :sparkles: 3 | 4 | To view a demo example, **[click here](https://thalytabdn.github.io/Portfolio/)** 5 | 6 | 7 | 8 | ## 📝 About 9 | 10 | A simple and responsive portfolio template. 11 | You need to open the data.js file and change or add object properties for each session on the page: Introduction, About Me, Skills and Project. 12 | You can follow the guide below. 13 | 14 | skills 15 | 16 | * This adaptation helps to reduce the repetition of HTML lines. 17 | * Insertion and addition of elements in a clean and practical way through JS. 18 | 19 | > Following the logic of data.js and renderTemplate.js files, modifications are possible. 20 | > The construction of rendering and inserting data using object is based on: Source 21 | 22 | ### Introduction 23 | Intro 24 | [Go to code] (https://github.com/DIGOARTHUR/Portfolio/blob/7d31ed9ba6adeeaa4105ca38d15f82dadf98fc5b/data/data.js#L8) 25 | 26 | #### `Look here` 27 | 28 | 29 | 30 | 31 | ### About me 32 | About me 33 | [Go to code] (https://github.com/DIGOARTHUR/Portfolio/blob/7d31ed9ba6adeeaa4105ca38d15f82dadf98fc5b/data/data.js#L55) 34 | 35 | #### `Look here` 36 | 37 | 38 | 39 | 40 | Upload your Resume under asset folder as Resume.pdf : 41 | 42 | [Go to code] (https://github.com/thalytabdn/Portfolio/blob/master/assets/Resume.pdf) 43 | 44 | ### Skills 45 | Skills 46 | [Go to code] (https://github.com/DIGOARTHUR/Portfolio/blob/7d31ed9ba6adeeaa4105ca38d15f82dadf98fc5b/data/data.js#L68) 47 | 48 | #### `Look here` 49 | 50 | 51 | 52 | ### Projects 53 | Projects 54 | [Go to code] (https://github.com/DIGOARTHUR/Portfolio/blob/7d31ed9ba6adeeaa4105ca38d15f82dadf98fc5b/data/data.js#L92) 55 | 56 | 57 | #### `Look here` 58 | 59 | 60 | 61 | 62 | 63 | ## :rocket: Used Technologies 64 | 65 | This project was developed using the following technologies 66 | 67 | - HTML 68 | - CSS 69 | - JS 70 | 71 | 72 | 73 | ## :rocket: How to use 74 | 75 | 1. Make a clone : 76 | 77 | ```sh 78 | $ git clone https://github.com/thalytabdn/Portfolio 79 | ``` 80 | 81 | 2. Add your information in the data.js file 82 | 83 | ## ✨ Contributing 84 | 85 | 1. Fork this repository 86 | 2. Improve current code by: 87 | - improving the style 88 | - adding new feature 89 | - improving the documentation 90 | 3. Push your work and create a Pull Request 91 | 92 | ## License 📄 93 | 94 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details 95 | 96 | --- 97 |

98 | Build with 💓 by Thalyta Barbosa 99 |

100 | -------------------------------------------------------------------------------- /data/data.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 4 | // HERE ALL THE DATA FROM THE WEB PAGE WILL BE INSERTED 5 | // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 6 | 7 | 8 | //========================================= 9 | // INTRODUCTION 10 | //========================================= 11 | export const introductionData = { 12 | // Hi, my name is.... 13 | yourName: "Your Name", // Insert your name 14 | socialNetwork: [ 15 | { 16 | icon: "fa fa-envelope-o", // find other icon in https://fontawesome.com/v4.7/icons/ 17 | nameSocialNetwork: "Email", // label name 18 | url: "#" // url of the Social Network 19 | }, 20 | { 21 | icon: "fa fa-linkedin-square", // find other icon in https://fontawesome.com/v4.7/icons/ 22 | nameSocialNetwork: "Linkedin", 23 | url: "#" 24 | }, 25 | { 26 | icon: "fa fa-github-alt", // find other icon in https://fontawesome.com/v4.7/icons/ 27 | nameSocialNetwork: "Github", 28 | url: "#" 29 | } 30 | 31 | 32 | ], 33 | 34 | // Page session direction 35 | nav: [ 36 | { 37 | optionNav: "About me", 38 | idSection: "about" // If it changes, check the session id in ; 39 | }, 40 | { 41 | optionNav: "Skills", 42 | idSection: "skills" // If it changes, check the session id in ; 43 | }, 44 | { 45 | optionNav: "Projects", 46 | idSection: "projects" // If it changes, check the session id in ; 47 | } 48 | 49 | 50 | ] 51 | 52 | } 53 | 54 | 55 | //========================================= 56 | // ABOUT ME 57 | //========================================= 58 | export const aboutMeData = { 59 | title: "Example", 60 | description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. A ratione harum sapiente ipsum maiores, blanditiis atque magni quam, quia quas hic deserunt rem aliquam. Error earum ab modi porro at? Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus sunt veniam, eligendi modi similique tempore accusamus dolore, nobis non facilis quos veritatis officia eveniet molestias libero quisquam sed doloremque fugit!", 61 | titleURL: "View CV", 62 | urlCV: "#" 63 | } 64 | 65 | 66 | 67 | 68 | //========================================= 69 | // SKILLS 70 | //========================================= 71 | export const skillsData = [ 72 | 73 | 74 | { 75 | img: "assets/python.svg", // card image > insert the svg image in the assets folder 76 | nameSkill: "Python" // card name 77 | }, 78 | { 79 | img: "assets/java.svg", 80 | nameSkill: "Java" 81 | }, 82 | { 83 | img: "assets/js.svg", 84 | nameSkill: "JavaScript" 85 | }, 86 | { 87 | img: "assets/js.svg", 88 | nameSkill: "JavaScript" 89 | } 90 | 91 | ] 92 | //========================================= 93 | // PROJECTS 94 | //========================================= 95 | export const projectsData = [ 96 | { 97 | title: "PROJECT TITLE", // card image > insert the svg image in the assets folder 98 | describe: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam veritatis iusto reiciendisquos, delectus in deserunt harum a. Rerum similique corporis sit odit error incidunt distinctio consectetur neque, cum illum?", 99 | url: "#", // url of the Github repository 100 | img: "assets/project1.jpg" //image Project 101 | }, 102 | { 103 | title: "PROJECT TITLE", 104 | describe: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam veritatis iusto reiciendisquos, delectus in deserunt harum a. Rerum similique corporis sit odit error incidunt distinctio consectetur neque, cum illum?", 105 | url: "#", 106 | img: "assets/project1.jpg" 107 | }, 108 | { 109 | title: "PROJECT TITLE", 110 | describe: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam veritatis iusto reiciendisquos, delectus in deserunt harum a. Rerum similique corporis sit odit error incidunt distinctio consectetur neque, cum illum?", 111 | url: "#", 112 | img: "assets/project1.jpg" 113 | } 114 | ] 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 21 | 22 | 23 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | Your Name 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 | 41 | 42 |
43 |

44 | 45 |

46 | 47 |
48 | 49 | 50 | 51 | 52 |
53 | 54 |

55 | 56 |

57 | 58 | 59 | 60 |
61 | 62 | 63 | 64 | 65 | 66 |
67 | 68 | 69 |   70 | 71 | 72 |
73 | 74 | 75 | 76 |
77 | 78 | 79 | 80 |
81 |
82 | 83 |

Skills

84 | 85 |
86 | 87 | 88 | 89 | 90 | 91 | 92 |
93 | 94 |
95 |
96 | 97 | 98 | 99 |
100 |
101 | 102 |

Projects

103 | 104 |
105 | 106 | 107 | 108 | 109 |
110 | 111 |
112 | 113 |
114 | 115 | 116 | 119 | 120 |
121 | 122 |
123 | 124 | 125 |

© 2020

126 |

127 | Build with ❤ 128 | by 129 | Thalyta Barbosa 130 |

131 | 132 | 133 |
134 | 135 | 136 | 137 | 138 | 139 | 167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /js/renderTemplate.js: -------------------------------------------------------------------------------- 1 | import { introductionData, skillsData,projectsData,aboutMeData } from '../data/data.js'; 2 | 3 | 4 | function render() { 5 | 6 | //===================================================================== 7 | // INTRODUCTION 8 | //====================================================================== 9 | 10 | // TEMPLATE YOURNAME <.header-apresentation> 11 | //--------------------------------------------------- 12 | const templateNameApresentation = function (data) { //yourName 13 | return ` 14 | Hi, my name is ${data} 15 | ` 16 | } 17 | 18 | const $windowNameApresentation = document.querySelector(".header-apresentation") 19 | 20 | $windowNameApresentation.innerHTML = templateNameApresentation(introductionData.yourName) 21 | 22 | 23 | // TEMPLATE ICONS SOCIAL NETWORKS <.header-icons> 24 | //--------------------------------------------------------- 25 | const templateSocialNetwors = function (data) { // socialNetwork 26 | return ` 27 | 28 | 29 | 30 | ` 31 | } 32 | 33 | const $windowIconSocialNetworks = document.querySelector(".header-icons") 34 | 35 | $windowIconSocialNetworks.innerHTML = introductionData.socialNetwork.map((data) => { 36 | return templateSocialNetwors(data); 37 | }).join(""); 38 | 39 | 40 | // TEMPLATE OPTIONS NAV <.nav> 41 | //--------------------------------------------------------- 42 | 43 | const templateNav = function (data) { // nav 44 | return ` 45 | 46 | ${data.optionNav} 47 | 48 | ` 49 | } 50 | 51 | const $windowNav = document.querySelector(".nav") 52 | 53 | $windowNav.innerHTML = introductionData.nav.map((data) => { 54 | return templateNav(data); 55 | }).join(""); 56 | 57 | 58 | 59 | //================================================== 60 | // ABOUT ME 61 | //================================================== 62 | 63 | const templateAboutMe = function (data) { //description 64 | return ` 65 |
66 |

${data.title}

67 | 68 |
69 |

${data.description}

70 |
71 | 72 |
73 |
74 | 75 | 76 | 77 | 78 | 79 | ${data.titleURL} 80 | 81 | 82 |
83 |
84 | 85 |
86 | ` 87 | } 88 | 89 | const $windowAboutMe = document.querySelector(".section-style") 90 | 91 | $windowAboutMe.innerHTML = templateAboutMe(aboutMeData); 92 | 93 | 94 | 95 | 96 | 97 | //================================================== 98 | // SKILLS 99 | //================================================== 100 | 101 | // TEMPLATE SKILLS <.cards-main> 102 | //--------------------------------------------------------- 103 | const templateSkills = function (data) { 104 | return ` 105 |
106 |
107 | logo python 108 |

${data.nameSkill}

109 |
110 |
111 | ` 112 | } 113 | 114 | const $windowSkills = document.querySelector(".cards-main") 115 | 116 | $windowSkills.innerHTML = skillsData.map((data) => { 117 | return templateSkills(data); 118 | }).join(""); 119 | 120 | 121 | //================================================== 122 | // PROJECTS 123 | //================================================== 124 | 125 | // TEMPLATE PROJECTS <.projects-main> 126 | //--------------------------------------------------------- 127 | const templateProjects = function (data) { 128 | return ` 129 |
130 |
131 |

${data.title}

132 |

${data.describe}

133 | 134 | 135 |
136 |
137 | View Project 138 |
139 | 140 | 142 | 143 |
144 |
145 |
146 |
147 |
148 | code 149 |
150 |
151 | ` 152 | } 153 | 154 | const $windowProject = document.querySelector(".projects-main") 155 | 156 | $windowProject.innerHTML = projectsData.map((data) => { 157 | return templateProjects(data); 158 | }).join(""); 159 | 160 | 161 | 162 | 163 | 164 | } 165 | 166 | render(); 167 | 168 | --------------------------------------------------------------------------------