├── banner.png ├── assets ├── img │ ├── banner.png │ ├── avatar.webp │ ├── people-2.webp │ ├── people.webp │ └── project.webp ├── svg │ ├── arrow.svg │ ├── close-menu.svg │ ├── menu.svg │ ├── facebook.svg │ ├── linkedin.svg │ ├── vector.svg │ ├── broom.svg │ ├── computer.svg │ ├── github.svg │ ├── twitter.svg │ ├── button-change-theme.svg │ ├── logo.svg │ ├── colab.svg │ ├── volume.svg │ ├── scale.svg │ ├── thiago.svg │ └── terra.svg ├── js │ └── main.js └── css │ ├── style.min.css │ └── style.css ├── LICENSE ├── README.md └── index.html /banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-portfolio-website-thiago/HEAD/banner.png -------------------------------------------------------------------------------- /assets/img/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-portfolio-website-thiago/HEAD/assets/img/banner.png -------------------------------------------------------------------------------- /assets/img/avatar.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-portfolio-website-thiago/HEAD/assets/img/avatar.webp -------------------------------------------------------------------------------- /assets/img/people-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-portfolio-website-thiago/HEAD/assets/img/people-2.webp -------------------------------------------------------------------------------- /assets/img/people.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-portfolio-website-thiago/HEAD/assets/img/people.webp -------------------------------------------------------------------------------- /assets/img/project.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-portfolio-website-thiago/HEAD/assets/img/project.webp -------------------------------------------------------------------------------- /assets/svg/arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/svg/close-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/svg/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/svg/facebook.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /assets/svg/linkedin.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /assets/svg/vector.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /assets/svg/broom.svg: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Kennedy Barros 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 | -------------------------------------------------------------------------------- /assets/svg/computer.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /assets/svg/github.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /assets/svg/twitter.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /assets/svg/button-change-theme.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

6 |

7 |

8 |

9 | 10 |

11 | 12 |

13 | 14 |

You can access the project Clicking here

15 | 16 |

Appliction developed to learning effects. The UI in figma can be seen in Figma

17 | 18 | --- 19 | 20 |
21 | 22 | # 🚀 Technologies 23 | 24 | - [HTML](https://www.w3schools.com/html/) 25 | - [CSS](https://www.w3schools.com/css/) 26 | - [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 27 | - [ScrollReveal](https://scrollrevealjs.org/) 28 | - [Swiper](https://swiperjs.com/) 29 | 30 | --- 31 | 32 |
33 | 34 | ## 🛠 How to download the project: 35 | 36 | ```bash 37 | # Clone the repository 38 | $ git clone https://github.com/kennedybarros/reponsive-portfolio-website-thiago 39 | 40 | # Enter directory 41 | $ cd responsive-portfolio-website-thiago 42 | ``` 43 | 44 | --- 45 | 46 |
47 | 48 | ## 📝 Licença: 49 | 50 | This project is under license. see the file [LICENSE](LICENSE.md) for more details. 51 | 52 |
53 | 54 | --- 55 | 56 |
57 | 58 |

Developed by Kennedy Barros ✌🏼

59 | -------------------------------------------------------------------------------- /assets/svg/logo.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | // Menu 2 | const navMenu = document.getElementById('nav-menu'), 3 | navToggle = document.getElementById('nav-toggle'), 4 | navClose = document.getElementById('nav-close'); 5 | 6 | if (navToggle) { 7 | navToggle.addEventListener('click', () => { 8 | navMenu.classList.add('show-menu'); 9 | }); 10 | } 11 | 12 | if (navClose) { 13 | navClose.addEventListener('click', () => { 14 | navMenu.classList.remove('show-menu'); 15 | }); 16 | } 17 | 18 | const navLink = document.querySelectorAll('.nav_link'); 19 | 20 | // Change Background 21 | function linkAction() { 22 | const navMenu = document.getElementById('nav-menu'); 23 | navMenu.classList.remove('show-menu'); 24 | } 25 | navLink.forEach((n) => n.addEventListener('click', linkAction)); 26 | 27 | // Dark Mode 28 | const themeButton = document.getElementById('theme-button'); 29 | const darkTheme = 'dark-theme'; 30 | const iconTheme = 'dark-change-theme'; 31 | const selectedTheme = localStorage.getItem('selected-theme'); 32 | const selectedIcon = localStorage.getItem('selected-icon'); 33 | const getCurrentTheme = () => 34 | document.body.classList.contains(darkTheme) ? 'dark' : 'light'; 35 | 36 | if (selectedTheme) { 37 | document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove']( 38 | darkTheme 39 | ); 40 | themeButton.classList[selectedIcon === 'change-theme' ? 'add' : 'remove']( 41 | iconTheme 42 | ); 43 | } 44 | themeButton.addEventListener('click', () => { 45 | document.body.classList.toggle(darkTheme); 46 | themeButton.classList.toggle(iconTheme); 47 | localStorage.setItem('selected-theme', getCurrentTheme()); 48 | }); 49 | 50 | // Scroll Reveal 51 | const sr = ScrollReveal({ 52 | origin: 'top', 53 | distance: '60px', 54 | duration: 2500, 55 | delay: 400, 56 | }); 57 | 58 | sr.reveal(`.home_img, .about_emp, .footer_text, .footer_logo_box`, { 59 | delay: 600, 60 | }); 61 | sr.reveal(` .about_img`, { origin: 'left' }); 62 | sr.reveal(`.about_text`, { origin: 'right' }); 63 | sr.reveal(`.home_data, .about_emp, .project_title, .services_title`, { 64 | delay: 300, 65 | }); 66 | sr.reveal(`.project_data, .services_container`, { delay: 400 }); 67 | sr.reveal(`.services_design`, { origin: 'left' }); 68 | sr.reveal(`.services_development`, { origin: 'right' }); 69 | // Scroll Ative Link 70 | const sections = document.querySelectorAll('section[id]'); 71 | function scrollActive() { 72 | const scrollY = window.pageYOffset; 73 | sections.forEach((current) => { 74 | const sectionHeight = current.offsetHeight, 75 | sectionTop = current.offsetTop - 58, 76 | sectionId = current.getAttribute('id'); 77 | if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { 78 | document 79 | .querySelector('.nav_menu a[href*=' + sectionId + ']') 80 | .classList.add('active-link'); 81 | } else { 82 | document 83 | .querySelector('.nav_menu a[href*=' + sectionId + ']') 84 | .classList.remove('active-link'); 85 | } 86 | }); 87 | } 88 | window.addEventListener('scroll', scrollActive); 89 | 90 | // Scroll Up 91 | function scrollUp() { 92 | const scrollUp = document.getElementById('scroll-up'); 93 | if (this.scrollY >= 350) scrollUp.classList.add('show-scroll'); 94 | else scrollUp.classList.remove('show-scroll'); 95 | } 96 | window.addEventListener('scroll', scrollUp); 97 | -------------------------------------------------------------------------------- /assets/svg/colab.svg: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /assets/svg/volume.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /assets/svg/scale.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /assets/svg/thiago.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /assets/svg/terra.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /assets/css/style.min.css: -------------------------------------------------------------------------------- 1 | :root{--primary-color:#b08968;--title-color:#1a1a1a;--text-color:#555555;--body-color:#ffffff;--button:#b0b0b0;--button-hover:#919191;--link-hover:#1a1a1a;--link-active:#171515;--scrollup-hover:#947154;--scrollbar:#555555;--white:#f7f7f7;--gray:#c4c4c4;--black:#171515;--font-weight-bold:700;--font-weight-semibold:600;--font-weight-medium:500}*{box-sizing:border-box;padding:0;margin:0}html{scroll-behavior:smooth}body,button,input{font-family:Poppins,sans-serif;font-size:1.5rem}body{margin:3.5rem 0 0 0;background-color:var(--body-color);color:var(--text-color)}h1,h2,h3,h4{color:var(--title-color);font-weight:var(--font-weight-semibold)}ul{list-style:none}a{text-decoration:none}img{max-width:100%;height:auto}body.dark-theme{--title-color:#f2f2f2;--text-color:#c2bdbd;--body-color:#171515;--button:rgba(255, 255, 255, 0.1)}.dark-theme .nav_link{color:#b2b2b2}.dark-theme .nav_link:hover{color:var(--white)}.dark-theme .active-link{color:var(--white)}.nav_btns{display:flex;align-items:center;column-gap:1rem}.change-theme{max-width:26px;color:var(--title-color);cursor:pointer}.container{background-color:var(--body-color);max-width:1200px;margin-left:1.5rem;margin-right:1.5rem}.grid{display:grid}.main{overflow:hidden}.header{width:100%;position:fixed;top:0;left:0;z-index:100}.nav{height:3.5rem;display:flex;justify-content:space-between;align-items:center}.nav_close,.nav_logo,.nav_toggle{color:var(--title-color)}.nav_logo{display:flex;align-items:center;column-gap:.25rem;font-weight:var(--font-weight-semibold);font-size:1.375rem}.nav_toggle{display:inline-flex;cursor:pointer}@media screen and (max-width:767px){.nav_menu{position:fixed;background-color:var(--body-color);top:-100%;left:0;width:100%;padding:4rem 0;border-radius:0 0 1.5rem 1.5rem;transition:.6s}}.nav_list{display:flex;flex-direction:column;align-items:center;row-gap:.5rem}.nav_link{color:var(--text-color);font-size:1rem;font-weight:var(--font-weight-semibold);transition:.3s}.nav_link:hover{color:var(--link-hover)}.nav_close{position:absolute;top:.5rem;right:1rem;cursor:pointer;color:var(--button)}.show-menu{top:0}.active-link{color:var(--black)}.home_container{padding-top:1.5rem;row-gap:1.5rem}.home_img{justify-self:center}.home_vector{position:absolute;opacity:.3}.home_data{left:130px;top:252px;background:rgba(196,196,196,.07);border:1px solid rgba(196,196,196,.76);box-sizing:border-box;backdrop-filter:blur(56px);border-radius:12px}.home_title{font-weight:var(--font-weight-semibold);font-size:3.125rem;color:var(--primary-color);padding-left:3.125rem}.home_description{font-weight:var(--font-weight-medium);font-size:1.125rem;color:var(--text-color);padding-top:.9375rem;padding-left:3.125rem}.home_text{font-weight:var(--font-weight-semibold);font-size:1rem;color:var(--text-color);padding-top:1.5625rem;padding-left:3.125rem}.home_icons{display:flex;gap:10px;padding-top:1.5625rem;padding-left:3.125rem;padding-bottom:1.5625rem}.about_emp{justify-content:center;display:flex;opacity:.5;gap:50px}.about_emp-logo{width:130px}.about_data{display:grid;grid-template-columns:repeat(2,1fr);padding-top:5.3125rem}.about_img{justify-self:center}.about_text{padding-left:1.5625rem}.about_title{font-weight:var(--font-weight-semibold);font-size:3.125rem;color:var(--title-color)}.about_pont{color:var(--primary-color)}.about_description{font-weight:var(--font-weight-medium);font-size:1.125rem;color:var(--text-color);padding-top:1.5625rem;padding-bottom:2.1875rem}.about_button{display:inline-block;background:var(--button);border-radius:8px;font-weight:var(--font-weight-semibold);font-size:1.125rem;text-align:center;color:var(--title-color);padding:1rem 1.875rem}.about_button:hover{background-color:var(--button-hover)}.about_icons{display:flex;gap:10px;padding-top:1.5625rem}.projects{padding-top:5.3125rem}.project_title{font-weight:var(--font-weight-semibold);font-size:3.125rem;color:var(--title-color);justify-self:center}.project_pont{color:var(--primary-color)}.project_data{background:rgba(196,196,196,.07);border:1px solid rgba(196,196,196,.76);box-sizing:border-box;backdrop-filter:blur(56px);border-radius:24px;justify-self:center}.project_container{padding-top:2.625rem;display:grid;grid-template-columns:repeat(3,1fr);gap:23px}.project_img_text{text-align:left;display:flex;padding-bottom:1.5rem;padding-left:1.5625rem;padding-right:1.5625rem;justify-content:center}.project_img{padding:1.5625rem 1.5625rem .625rem}.project_icon{place-self:center;max-inline-size:50px}.project_text{font-weight:var(--font-weight-bold);font-size:1.125rem;padding-left:.9375rem;color:var(--title-color)}.project_description{font-size:.875rem;font-weight:var(--font-weight-medium);padding-left:.9375rem;line-height:1.5rem;color:var(--text-color)}.project_white{color:var(--title-color)}.project_box{text-align:center}.services_title{padding-top:6.25rem;font-weight:var(--font-weight-semibold);font-size:3.125rem;color:var(--title-color);justify-self:center}.services_pont{color:var(--primary-color)}.services_container{display:grid;grid-template-columns:repeat(2,1fr);gap:25px;padding-top:3.125rem;padding-bottom:5.3125rem;justify-items:center}.services_services{background:rgba(196,196,196,.07);border:1px solid rgba(196,196,196,.76);box-sizing:border-box;backdrop-filter:blur(56px);border-radius:12px;padding:4.0625rem 1.5625rem 3.4375rem 1.5625rem}.services_div{text-align:center;justify-self:center}.services_text{padding-top:1.25rem;padding-bottom:1.5625rem;font-weight:var(--font-weight-bold);font-size:1.875rem;color:var(--title-color)}.services_description{font-weight:var(--font-weight-medium);font-size:1.125rem;line-height:1.875rem;text-align:center;color:var(--text-color);max-width:30ch}.footer{padding-top:1.25rem;padding-bottom:1.25rem;background-color:var(--black);display:flex;justify-content:space-between;align-items:center}.footer_text{padding-left:6.25rem;font-weight:var(--font-weight-medium);font-size:1rem;color:var(--gray)}.footer_logo{color:var(--white);font-weight:var(--font-weight-semibold);font-size:1.375rem;padding-right:6.25rem}.footer_logo-img{vertical-align:middle;width:22px}.scrollup{position:fixed;margin-bottom:-1.875rem;right:40px;background-color:var(--primary-color);display:inline-flex;padding:.35rem;border-radius:.25rem;z-index:10;transition:.4s}.scrollup:hover{background-color:var(--scrollup-hover);opacity:1}.scrollup_icon{font-size:1.25rem;color:var(--primary-color)}.show-scroll{bottom:3rem}::-webkit-scrollbar{width:5px;background:var(--body-color);border-radius:5px}::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:5px}@media screen and (max-width:320px){.container{margin-left:1rem;margin-right:1rem}}@media screen and (max-width:767px){.home{padding-top:3.125rem}.home_description,.home_icons,.home_text,.home_title{padding-left:1.875rem;padding-right:1.875rem}.home_text{font-size:.75rem}.about_title,.home_title,.project_title,.services_title{font-size:2rem}.about_description,.home_description,.project_text{font-size:1rem}.home_img{width:150px}.about_links,.home_links{max-width:22px}.about_img,.home_img{display:none}.about_emp-logo{max-width:100px;place-self:center}.about_data,.project_container,.services_container{grid-template-columns:1fr}.about_emp{display:grid;padding-top:3.125rem;grid-template-columns:repeat(2,1fr)}.about_text{padding-left:.9375rem}.about_button{padding:.9375rem .9375rem;font-size:.9375rem}.project_description{font-size:.875rem}.project_data{max-width:300px}.project_img_text{padding-right:.9375rem;padding-left:.9375rem;padding-bottom:1.25rem}.project_img{padding:.9375rem .9375rem .3125rem}.services_services{max-width:300px}.services_text{font-size:1.375rem}.services_description{font-size:.875rem;max-width:300px}.services_container{gap:25px}.services_services{padding:2.8125rem .9375rem 2.8125rem .9375rem}.footer{padding-top:.625rem;padding-bottom:.625rem}.footer_text{padding-left:1.5625rem;font-size:.675rem}.footer_logo{padding:0;font-size:1rem}.footer_text{padding-top:.625rem}.footer_logo-img{width:15px}.footer_logo_box{padding-right:1.5625rem}.scrollup{margin-bottom:1.25rem;right:15px}}@media screen and (min-width:767px){body{margin:0}.nav{height:calc(3.5rem + 1.5rem);column-gap:3rem}.nav_close,.nav_img,.nav_toggle{display:none}.nav_menu{margin-left:auto}.nav_list{flex-direction:row;column-gap:3rem}.home_container{grid-template-columns:repeat(2,1fr);align-items:center}.home_img{width:190px}.home_container{padding-top:8rem}.project_container{grid-template-columns:repeat(2,1fr)}.about_emp{padding-top:2.5rem}}@media screen and (max-width:768px){.nav_link,.nav_logo{font-size:1rem}.nav_logo-img{width:16px}.change-theme{max-width:20px}}@media screen and (min-width:1200px){.container{margin-left:auto;margin-right:auto}.home_container{column-gap:1rem}.home_img{width:190px}.home_description{padding-right:8rem}.about_emp,.about_text{padding-top:3.75rem}.about_img{width:370px}.project_data,.services_services{max-width:350px}.project_container{grid-template-columns:repeat(3,1fr)}} -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #b08968; 3 | --title-color: #1a1a1a; 4 | --text-color: #555555; 5 | --body-color: #ffffff; 6 | --button: #b0b0b0; 7 | --button-hover: #919191; 8 | --link-hover: #1a1a1a; 9 | --link-active: #171515; 10 | --scrollup-hover: #947154; 11 | --scrollbar: #555555; 12 | --white: #f7f7f7; 13 | --gray: #c4c4c4; 14 | --black: #171515; 15 | --font-weight-bold: 700; 16 | --font-weight-semibold: 600; 17 | --font-weight-medium: 500; 18 | } 19 | 20 | /* CSS Reset */ 21 | * { 22 | box-sizing: border-box; 23 | padding: 0; 24 | margin: 0; 25 | } 26 | 27 | html { 28 | scroll-behavior: smooth; 29 | } 30 | 31 | body, 32 | button, 33 | input { 34 | font-family: 'Poppins', sans-serif; 35 | font-size: 1.5rem; 36 | } 37 | 38 | body { 39 | margin: 3.5rem 0 0 0; 40 | background-color: var(--body-color); 41 | color: var(--text-color); 42 | } 43 | 44 | h1, 45 | h2, 46 | h3, 47 | h4 { 48 | color: var(--title-color); 49 | font-weight: var(--font-weight-semibold); 50 | } 51 | 52 | ul { 53 | list-style: none; 54 | } 55 | 56 | a { 57 | text-decoration: none; 58 | } 59 | 60 | img { 61 | max-width: 100%; 62 | height: auto; 63 | } 64 | 65 | body.dark-theme { 66 | --title-color: #f2f2f2; 67 | --text-color: #c2bdbd; 68 | --body-color: #171515; 69 | --button: rgba(255, 255, 255, 0.1); 70 | } 71 | 72 | .dark-theme .nav_link { 73 | color: #b2b2b2; 74 | } 75 | 76 | .dark-theme .nav_link:hover { 77 | color: var(--white); 78 | } 79 | 80 | .dark-theme .active-link { 81 | color: var(--white); 82 | } 83 | 84 | /* General Styles */ 85 | .nav_btns { 86 | display: flex; 87 | align-items: center; 88 | column-gap: 1rem; 89 | } 90 | 91 | .change-theme { 92 | max-width: 26px; 93 | color: var(--title-color); 94 | cursor: pointer; 95 | } 96 | 97 | .container { 98 | background-color: var(--body-color); 99 | max-width: 1200px; 100 | margin-left: 1.5rem; 101 | margin-right: 1.5rem; 102 | } 103 | 104 | .grid { 105 | display: grid; 106 | } 107 | 108 | .main { 109 | overflow: hidden; 110 | } 111 | 112 | /* Header */ 113 | .header { 114 | width: 100%; 115 | position: fixed; 116 | top: 0; 117 | left: 0; 118 | z-index: 100; 119 | } 120 | 121 | .nav { 122 | height: 3.5rem; 123 | display: flex; 124 | justify-content: space-between; 125 | align-items: center; 126 | } 127 | 128 | .nav_logo, 129 | .nav_close, 130 | .nav_toggle { 131 | color: var(--title-color); 132 | } 133 | 134 | .nav_logo { 135 | display: flex; 136 | align-items: center; 137 | column-gap: 0.25rem; 138 | font-weight: var(--font-weight-semibold); 139 | font-size: 1.375rem; 140 | } 141 | 142 | .nav_toggle { 143 | display: inline-flex; 144 | cursor: pointer; 145 | } 146 | 147 | @media screen and (max-width: 767px) { 148 | .nav_menu { 149 | position: fixed; 150 | background-color: var(--body-color); 151 | top: -100%; 152 | left: 0; 153 | width: 100%; 154 | padding: 4rem 0; 155 | border-radius: 0 0 1.5rem 1.5rem; 156 | transition: 0.6s; 157 | } 158 | } 159 | 160 | .nav_list { 161 | display: flex; 162 | flex-direction: column; 163 | align-items: center; 164 | row-gap: 0.5rem; 165 | } 166 | 167 | .nav_link { 168 | color: var(--text-color); 169 | font-size: 1rem; 170 | font-weight: var(--font-weight-semibold); 171 | transition: 0.3s; 172 | } 173 | 174 | .nav_link:hover { 175 | color: var(--link-hover); 176 | } 177 | 178 | .nav_close { 179 | position: absolute; 180 | top: 0.5rem; 181 | right: 1rem; 182 | cursor: pointer; 183 | color: var(--button); 184 | } 185 | 186 | .show-menu { 187 | top: 0; 188 | } 189 | 190 | .active-link { 191 | color: var(--black); 192 | } 193 | 194 | /* Home */ 195 | .home_container { 196 | padding-top: 1.5rem; 197 | row-gap: 1.5rem; 198 | } 199 | 200 | .home_img { 201 | justify-self: center; 202 | } 203 | 204 | .home_vector { 205 | position: absolute; 206 | opacity: 0.3; 207 | } 208 | 209 | .home_data { 210 | left: 130px; 211 | top: 252px; 212 | background: rgba(196, 196, 196, 0.07); 213 | border: 1px solid rgba(196, 196, 196, 0.76); 214 | box-sizing: border-box; 215 | backdrop-filter: blur(56px); 216 | border-radius: 12px; 217 | } 218 | 219 | .home_title { 220 | font-weight: var(--font-weight-semibold); 221 | font-size: 3.125rem; 222 | color: var(--primary-color); 223 | padding-left: 3.125rem; 224 | } 225 | 226 | .home_description { 227 | font-weight: var(--font-weight-medium); 228 | font-size: 1.125rem; 229 | color: var(--text-color); 230 | padding-top: 0.9375rem; 231 | padding-left: 3.125rem; 232 | } 233 | 234 | .home_text { 235 | font-weight: var(--font-weight-semibold); 236 | font-size: 1rem; 237 | color: var(--text-color); 238 | padding-top: 1.5625rem; 239 | padding-left: 3.125rem; 240 | } 241 | 242 | .home_icons { 243 | display: flex; 244 | gap: 10px; 245 | padding-top: 1.5625rem; 246 | padding-left: 3.125rem; 247 | padding-bottom: 1.5625rem; 248 | } 249 | 250 | /* About */ 251 | .about_emp { 252 | justify-content: center; 253 | display: flex; 254 | opacity: 0.5; 255 | gap: 50px; 256 | } 257 | 258 | .about_emp-logo { 259 | width: 130px; 260 | } 261 | 262 | .about_data { 263 | display: grid; 264 | grid-template-columns: repeat(2, 1fr); 265 | padding-top: 5.3125rem; 266 | } 267 | 268 | .about_img { 269 | justify-self: center; 270 | } 271 | 272 | .about_text { 273 | padding-left: 1.5625rem; 274 | } 275 | 276 | .about_title { 277 | font-weight: var(--font-weight-semibold); 278 | font-size: 3.125rem; 279 | color: var(--title-color); 280 | } 281 | 282 | .about_pont { 283 | color: var(--primary-color); 284 | } 285 | 286 | .about_description { 287 | font-weight: var(--font-weight-medium); 288 | font-size: 1.125rem; 289 | color: var(--text-color); 290 | padding-top: 1.5625rem; 291 | padding-bottom: 2.1875rem; 292 | } 293 | 294 | .about_button { 295 | display: inline-block; 296 | background: var(--button); 297 | border-radius: 8px; 298 | font-weight: var(--font-weight-semibold); 299 | font-size: 1.125rem; 300 | text-align: center; 301 | color: var(--title-color); 302 | padding: 1rem 1.875rem; 303 | } 304 | 305 | .about_button:hover { 306 | background-color: var(--button-hover); 307 | } 308 | 309 | .about_icons { 310 | display: flex; 311 | gap: 10px; 312 | padding-top: 1.5625rem; 313 | } 314 | 315 | /* Projects */ 316 | .projects { 317 | padding-top: 5.3125rem; 318 | } 319 | 320 | .project_title { 321 | font-weight: var(--font-weight-semibold); 322 | font-size: 3.125rem; 323 | color: var(--title-color); 324 | justify-self: center; 325 | } 326 | 327 | .project_pont { 328 | color: var(--primary-color); 329 | } 330 | 331 | .project_data { 332 | background: rgba(196, 196, 196, 0.07); 333 | border: 1px solid rgba(196, 196, 196, 0.76); 334 | box-sizing: border-box; 335 | backdrop-filter: blur(56px); 336 | border-radius: 24px; 337 | justify-self: center; 338 | } 339 | 340 | .project_container { 341 | padding-top: 2.625rem; 342 | display: grid; 343 | grid-template-columns: repeat(3, 1fr); 344 | gap: 23px; 345 | } 346 | 347 | .project_img_text { 348 | text-align: left; 349 | display: flex; 350 | padding-bottom: 1.5rem; 351 | padding-left: 1.5625rem; 352 | padding-right: 1.5625rem; 353 | justify-content: center; 354 | } 355 | 356 | .project_img { 357 | padding: 1.5625rem 1.5625rem 0.625rem; 358 | } 359 | 360 | .project_icon { 361 | place-self: center; 362 | max-inline-size: 50px; 363 | } 364 | 365 | .project_text { 366 | font-weight: var(--font-weight-bold); 367 | font-size: 1.125rem; 368 | padding-left: 0.9375rem; 369 | color: var(--title-color); 370 | } 371 | 372 | .project_description { 373 | font-size: 0.875rem; 374 | font-weight: var(--font-weight-medium); 375 | padding-left: 0.9375rem; 376 | line-height: 1.5rem; 377 | color: var(--text-color); 378 | } 379 | 380 | .project_white { 381 | color: var(--title-color); 382 | } 383 | 384 | .project_box { 385 | text-align: center; 386 | } 387 | 388 | /* Services */ 389 | .services_title { 390 | padding-top: 6.25rem; 391 | font-weight: var(--font-weight-semibold); 392 | font-size: 3.125rem; 393 | color: var(--title-color); 394 | justify-self: center; 395 | } 396 | 397 | .services_pont { 398 | color: var(--primary-color); 399 | } 400 | 401 | .services_container { 402 | display: grid; 403 | grid-template-columns: repeat(2, 1fr); 404 | gap: 25px; 405 | padding-top: 3.125rem; 406 | padding-bottom: 5.3125rem; 407 | justify-items: center; 408 | } 409 | 410 | .services_services { 411 | background: rgba(196, 196, 196, 0.07); 412 | border: 1px solid rgba(196, 196, 196, 0.76); 413 | box-sizing: border-box; 414 | backdrop-filter: blur(56px); 415 | border-radius: 12px; 416 | padding: 4.0625rem 1.5625rem 3.4375rem 1.5625rem; 417 | } 418 | 419 | .services_div { 420 | text-align: center; 421 | justify-self: center; 422 | } 423 | 424 | .services_text { 425 | padding-top: 1.25rem; 426 | padding-bottom: 1.5625rem; 427 | font-weight: var(--font-weight-bold); 428 | font-size: 1.875rem; 429 | color: var(--title-color); 430 | } 431 | 432 | .services_description { 433 | font-weight: var(--font-weight-medium); 434 | font-size: 1.125rem; 435 | line-height: 1.875rem; 436 | text-align: center; 437 | color: var(--text-color); 438 | max-width: 30ch; 439 | } 440 | 441 | /* Footer */ 442 | .footer { 443 | padding-top: 1.25rem; 444 | padding-bottom: 1.25rem; 445 | background-color: var(--black); 446 | display: flex; 447 | justify-content: space-between; 448 | align-items: center; 449 | } 450 | 451 | .footer_text { 452 | padding-left: 6.25rem; 453 | font-weight: var(--font-weight-medium); 454 | font-size: 1rem; 455 | color: var(--gray); 456 | } 457 | 458 | .footer_logo { 459 | color: var(--white); 460 | font-weight: var(--font-weight-semibold); 461 | font-size: 1.375rem; 462 | padding-right: 6.25rem; 463 | } 464 | 465 | .footer_logo-img { 466 | vertical-align: middle; 467 | width: 22px; 468 | } 469 | 470 | /* Scroll UP */ 471 | .scrollup { 472 | position: fixed; 473 | margin-bottom: -1.875rem; 474 | right: 40px; 475 | background-color: var(--primary-color); 476 | display: inline-flex; 477 | padding: 0.35rem; 478 | border-radius: 0.25rem; 479 | z-index: 10; 480 | transition: 0.4s; 481 | } 482 | 483 | .scrollup:hover { 484 | background-color: var(--scrollup-hover); 485 | opacity: 1; 486 | } 487 | 488 | .scrollup_icon { 489 | font-size: 1.25rem; 490 | color: var(--primary-color); 491 | } 492 | 493 | .show-scroll { 494 | bottom: 3rem; 495 | } 496 | 497 | /* Scroll Bar */ 498 | ::-webkit-scrollbar { 499 | width: 5px; 500 | background: var(--body-color); 501 | border-radius: 5px; 502 | } 503 | 504 | ::-webkit-scrollbar-thumb { 505 | background: var(--scrollbar); 506 | border-radius: 5px; 507 | } 508 | 509 | /* Media Queries */ 510 | @media screen and (max-width: 320px) { 511 | .container { 512 | margin-left: 1rem; 513 | margin-right: 1rem; 514 | } 515 | } 516 | 517 | @media screen and (max-width: 767px) { 518 | .home { 519 | padding-top: 3.125rem; 520 | } 521 | .home_description, 522 | .home_text, 523 | .home_title, 524 | .home_icons { 525 | padding-left: 1.875rem; 526 | padding-right: 1.875rem; 527 | } 528 | .home_text { 529 | font-size: 0.75rem; 530 | } 531 | .home_title, 532 | .about_title, 533 | .project_title, 534 | .services_title { 535 | font-size: 2rem; 536 | } 537 | .home_description, 538 | .about_description, 539 | .project_text { 540 | font-size: 1rem; 541 | } 542 | .home_img { 543 | width: 150px; 544 | } 545 | .home_links, 546 | .about_links { 547 | max-width: 22px; 548 | } 549 | .home_img, 550 | .about_img { 551 | display: none; 552 | } 553 | .about_emp-logo { 554 | max-width: 100px; 555 | place-self: center; 556 | } 557 | .about_data, 558 | .project_container, 559 | .services_container { 560 | grid-template-columns: 1fr; 561 | } 562 | .about_emp { 563 | display: grid; 564 | padding-top: 3.125rem; 565 | grid-template-columns: repeat(2, 1fr); 566 | } 567 | .about_text { 568 | padding-left: 0.9375rem; 569 | } 570 | .about_button { 571 | padding: 0.9375rem 0.9375rem; 572 | font-size: 0.9375rem; 573 | } 574 | .project_description { 575 | font-size: 0.875rem; 576 | } 577 | .project_data { 578 | max-width: 300px; 579 | } 580 | .project_img_text { 581 | padding-right: 0.9375rem; 582 | padding-left: 0.9375rem; 583 | padding-bottom: 1.25rem; 584 | } 585 | .project_img { 586 | padding: 0.9375rem 0.9375rem 0.3125rem; 587 | } 588 | .services_services { 589 | max-width: 300px; 590 | } 591 | .services_text { 592 | font-size: 1.375rem; 593 | } 594 | .services_description { 595 | font-size: 0.875rem; 596 | max-width: 300px; 597 | } 598 | .services_container { 599 | gap: 25px; 600 | } 601 | .services_services { 602 | padding: 2.8125rem 0.9375rem 2.8125rem 0.9375rem; 603 | } 604 | .footer { 605 | padding-top: 0.625rem; 606 | padding-bottom: 0.625rem; 607 | } 608 | .footer_text { 609 | padding-left: 1.5625rem; 610 | font-size: 0.675rem; 611 | } 612 | .footer_logo { 613 | padding: 0rem; 614 | font-size: 1rem; 615 | } 616 | .footer_text { 617 | padding-top: 0.625rem; 618 | } 619 | .footer_logo-img { 620 | width: 15px; 621 | } 622 | .footer_logo_box { 623 | padding-right: 1.5625rem; 624 | } 625 | .scrollup { 626 | margin-bottom: 1.25rem; 627 | right: 15px; 628 | } 629 | } 630 | 631 | @media screen and (min-width: 767px) { 632 | body { 633 | margin: 0; 634 | } 635 | .nav { 636 | height: calc(3.5rem + 1.5rem); 637 | column-gap: 3rem; 638 | } 639 | .nav_toggle, 640 | .nav_close, 641 | .nav_img { 642 | display: none; 643 | } 644 | .nav_menu { 645 | margin-left: auto; 646 | } 647 | .nav_list { 648 | flex-direction: row; 649 | column-gap: 3rem; 650 | } 651 | .home_container { 652 | grid-template-columns: repeat(2, 1fr); 653 | align-items: center; 654 | } 655 | .home_img { 656 | width: 190px; 657 | } 658 | .home_container { 659 | padding-top: 8rem; 660 | } 661 | .project_container { 662 | grid-template-columns: repeat(2, 1fr); 663 | } 664 | .about_emp { 665 | padding-top: 2.5rem; 666 | } 667 | } 668 | 669 | @media screen and (max-width: 768px) { 670 | .nav_logo, 671 | .nav_link { 672 | font-size: 1rem; 673 | } 674 | .nav_logo-img { 675 | width: 16px; 676 | } 677 | .change-theme { 678 | max-width: 20px; 679 | } 680 | } 681 | 682 | @media screen and (min-width: 1200px) { 683 | .container { 684 | margin-left: auto; 685 | margin-right: auto; 686 | } 687 | .home_container { 688 | column-gap: 1rem; 689 | } 690 | .home_img { 691 | width: 190px; 692 | } 693 | .home_description { 694 | padding-right: 8rem; 695 | } 696 | .about_emp, 697 | .about_text { 698 | padding-top: 3.75rem; 699 | } 700 | .about_img { 701 | width: 370px; 702 | } 703 | .project_data, 704 | .services_services { 705 | max-width: 350px; 706 | } 707 | .project_container { 708 | grid-template-columns: repeat(3, 1fr); 709 | } 710 | } 711 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Reponsive Portfolio Website Thiago 8 | 9 | 10 | 14 | 15 | 16 | 20 | 21 | 22 | 26 | 27 | 28 | 29 | 33 | 34 | 35 | 36 | 37 | 38 | 42 | 46 | 47 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 63 | 64 | 65 | 69 | 70 | 71 | 72 | 73 | 74 |

75 |

76 | 77 | Thiago 78 |

85 | 86 | 105 |

106 |

114 |

115 |

116 |

117 |

118 |

119 |

120 | 121 |

122 | 123 |

124 |

125 |

126 |

127 |

Hello, I'm Thiago.

128 |

129 | Front End &
130 | UI/UX Design 131 |

132 |

133 | Front End & UI/UX Design Always looking for more knowledge and 134 | learning. 💻 135 |

136 |

137 |

145 |

153 |

163 |

171 |

172 |

173 |

180 |

181 |

182 | 183 |

184 |

185 |

192 |

199 |

206 |

213 |

214 |

215 |

222 |

223 |

224 | About Me. 225 |

226 |

227 | Hi, my name is Thiago, I'm Front End & UI/UX Design, I live in 228 | Brazil. I have 6 years of experience, currently I am looking for a 229 | new job. 🚀 230 |

231 | Download CV 232 |

233 |

241 |

249 |

259 |

267 |

268 |

269 |

270 |

271 | 272 |

277 |

278 | Projects. 279 |

280 |

281 |

282 |

283 |

290 |

291 |

298 |

299 |

iPhone

300 |

301 | Created by Kennedy B. 302 |

303 |

304 |

305 |

306 |

307 |

308 |

309 |

316 |

317 |

324 |

325 |

iPhone

326 |

327 | Created by Kennedy B. 328 |

329 |

330 |

331 |

332 |

333 |

334 |

335 |

342 |

343 |

350 |

351 |

iPhone

352 |

353 | Created by Kennedy B. 354 |

355 |

356 |

357 |

358 |

359 |

360 |

361 | 362 |

367 |

368 | Services. 369 |

370 |

371 |

372 |

373 |

379 |

Web Design

380 |

381 | I work with Web Design, using the biggest design platforms such 382 | as: Figma, AdobeXD and Sketch. 383 |

384 |

385 |

386 |

387 |

388 |

394 |

Web Development

395 |

396 | I work with Web Development, using the biggest linguage 397 | programming such as: HTML, CSS and JavaScript. 398 |

399 |

400 |

401 |

402 |

403 |

404 | 405 | 420 | 421 | 422 |

429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | --------------------------------------------------------------------------------

2 | 3 |

11 | 12 |

You can access the project Clicking here

129 | Front End & 130 | UI/UX Design 131 |

224 | About Me. 225 |

278 | Projects. 279 |

368 | Services. 369 |

129 | Front End &
130 | UI/UX Design 131 |