├── preview.png ├── assets ├── img │ ├── favicon.png │ ├── project-1.jpg │ ├── project-2.jpg │ ├── project-3.jpg │ ├── about-perfil.jpg │ ├── home-perfil.jpg │ ├── curved-arrow.svg │ └── random-lines.svg ├── js │ ├── main.js │ └── scrollreveal.min.js └── css │ └── styles.css ├── README.md ├── index.html └── Text Responsive portfolio Rian.txt /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-rian/HEAD/preview.png -------------------------------------------------------------------------------- /assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-rian/HEAD/assets/img/favicon.png -------------------------------------------------------------------------------- /assets/img/project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-rian/HEAD/assets/img/project-1.jpg -------------------------------------------------------------------------------- /assets/img/project-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-rian/HEAD/assets/img/project-2.jpg -------------------------------------------------------------------------------- /assets/img/project-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-rian/HEAD/assets/img/project-3.jpg -------------------------------------------------------------------------------- /assets/img/about-perfil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-rian/HEAD/assets/img/about-perfil.jpg -------------------------------------------------------------------------------- /assets/img/home-perfil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-rian/HEAD/assets/img/home-perfil.jpg -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*=============== SHOW MENU ===============*/ 2 | 3 | 4 | /*=============== REMOVE MENU MOBILE ===============*/ 5 | 6 | 7 | /*=============== SHADOW HEADER ===============*/ 8 | 9 | 10 | /*=============== EMAIL JS ===============*/ 11 | 12 | 13 | /*=============== SHOW SCROLL UP ===============*/ 14 | 15 | 16 | /*=============== SCROLL SECTIONS ACTIVE LINK ===============*/ 17 | 18 | 19 | /*=============== DARK LIGHT THEME ===============*/ 20 | 21 | 22 | /*=============== SCROLL REVEAL ANIMATION ===============*/ 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Responsive Portfolio Website Rian 2 | ## [Watch it on youtube](https://youtu.be/-uQIBlaZ4P0) 3 | ### Responsive Portfolio Website Rian 4 | 5 | - Responsive Personal Portfolio Website Using HTML CSS & JavaScript 6 | - Contains animations when scrolling. 7 | - Smooth scrolling in each section. 8 | - Includes a dark & light theme. 9 | - Sending emails in the contact section. 10 | - Developed first with the Mobile First methodology, then for desktop. 11 | - Compatible with all mobile devices and with a beautiful and pleasant user interface. 12 | 13 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode) 14 | 15 | ![preview img](/preview.png) 16 | -------------------------------------------------------------------------------- /assets/img/curved-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/img/random-lines.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Responsive portfolio website Rian - Bedimcode 17 | 18 | 19 | 20 | 23 | 24 | 25 |
26 | 27 |
28 | 29 |
30 | 31 | 32 |
33 | 34 |
35 | 36 | 37 |
38 | 39 |
40 | 41 | 42 |
43 | 44 |
45 | 46 | 47 |
48 | 49 |
50 |
51 | 52 | 53 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /Text Responsive portfolio Rian.txt: -------------------------------------------------------------------------------- 1 | ========== HEADER ========== 2 | .nav__logo-circle 3 | R 4 | 5 | .nav__logo-name 6 | Rian Lot. 7 | 8 | .nav__title 9 | Menu 10 | 11 | .nav__name 12 | Rian 13 | 14 | .nav__link 15 | Home - About Me - Projects - Contact Me 16 | 17 | 18 | ========== HOME ========== 19 | .home__name 20 | Rian Lot 21 | 22 | .home__social-link 23 | https://www.instagram.com/ 24 | https://www.linkedin.com/ 25 | https://github.com/ 26 | 27 | .home__description 28 | Frontend Developer, with knowledge in web 29 | development and design, I offer the best 30 | projects resulting in quality work. 31 | 32 | .home__scroll-text 33 | Scroll Down 34 | 35 | 36 | ========== ABOUT ========== 37 | .section__title-1 38 | About Me. 39 | 40 | .about__description 41 | Passionate about creating Web Pages with 42 | UI/UX User Interface, I have years of 43 | experience and many clients are happy with 44 | the projects carried out. 45 | 46 | .about__item 47 | My Skills Are: HTML, CSS, JavaScript, 48 | React, Git & GitHub, Bootstrap, Flutter & 49 | Figma. 50 | 51 | .button 52 | Contact Me 53 | 54 | .button__ghost 55 | https://www.linkedin.com/ 56 | 57 | 58 | ========== SERVICES ========== 59 | .section__title-2 60 | Services. 61 | 62 | .services__title .services__description 63 | Web Design 64 | Beautiful and elegant designs with 65 | interfaces that are intuitive, efficient 66 | and pleasant to use for the user. 67 | 68 | Development 69 | Custom web development tailored to your 70 | specifications, designed to provide a 71 | flawless user experience. 72 | 73 | Mobile App 74 | Design and transform website projects 75 | into mobile apps to provide a seamless 76 | user experience. 77 | 78 | 79 | ========== PROJECTS ========== 80 | .section__title-1 81 | Projects. 82 | 83 | .projects__subtitle 84 | Website 85 | App 86 | 87 | .projects__title 88 | Restaurant Website 89 | Yoga App 90 | Fast Food App 91 | Coffee Delivery Website 92 | Barbershop Website 93 | 94 | .projects__description 95 | Project that you carry out in the design 96 | and structure of the layout, showing the 97 | design at the client's request. 98 | 99 | .projects__link 100 | View 101 | 102 | https://github.com/ 103 | https://dribbble.com/ 104 | 105 | ========== CONTACT ========== 106 | .section__title-2 107 | Contact Me. 108 | 109 | .contact__description-1 110 | I will read all emails. Send me any 111 | message you want and I'll get back to you. 112 | 113 | .contact__description-2 114 | I need your Name and Email Address, but 115 | you won't receive anything other than your reply. 116 | 117 | .contact__title 118 | Send Me A Message 119 | 120 | .contact__label - placeholder 121 | First Name 122 | Email Address 123 | Subject 124 | Message 125 | 126 | .contact__button 127 | Send Message 128 | 129 | .contact__social-description-1 130 | Does not send emails 131 | 132 | .contact__social-description-2 133 | Write me on my social networks 134 | 135 | .contact__social-link 136 | https://www.facebook.com/ 137 | https://www.instagram.com/ 138 | https://www.linkedin.com/ 139 | 140 | 141 | ========== CONTACT JS ========== 142 | // serviceID - templateID - #form - publicKey 143 | 144 | // Show sent message 145 | Message sent successfully ✅ 146 | 147 | // Remove message after five seconds 148 | 149 | // Clear input fields 150 | 151 | // Show error message 152 | Message not sent (service error) ❌ 153 | 154 | Subject * 155 | New message from {{user_name}} 156 | 157 | Content * 158 | Names: {{user_name}} 159 | 160 | Email: {{user_email}} 161 | 162 | Subject: {{user_subject}} 163 | 164 | Message: {{user_message}} 165 | 166 | Best wishes, 167 | EmailJS team 168 | 169 | 170 | ========== FOOTER ========== 171 | .footer__links 172 | Home - About - Projects 173 | 174 | .footer__copy 175 | © All Rights Reserved By 176 | Bedimcode. 177 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap"); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root { 6 | --header-height: 3.5rem; 7 | 8 | /*========== Colors ==========*/ 9 | /*Color mode HSL(hue, saturation, lightness)*/ 10 | --first-color: hsl(14, 98%, 50%); 11 | --black-color: hsl(0, 0%, 0%); 12 | --black-color-light: hsl(0, 0%, 40%); 13 | --white-color: hsl(0, 0%, 95%); 14 | --title-color: hsl(0, 0%, 0%); 15 | --text-color: hsl(0, 0%, 35%); 16 | --text-color-light: hsl(0, 0%, 64%); 17 | --body-color: hsl(0, 0%, 87%); 18 | --container-color: hsl(0, 0%, 83%); 19 | 20 | /*========== Font and typography ==========*/ 21 | /*.5rem = 8px | 1rem = 16px ...*/ 22 | --body-font: "Bai Jamjuree", sans-serif; 23 | --biggest-font-size: 2.5rem; 24 | --h1-font-size: 1.75rem; 25 | --h2-font-size: 1.25rem; 26 | --h3-font-size: 1.125rem; 27 | --normal-font-size: .938rem; 28 | --small-font-size: .813rem; 29 | --smaller-font-size: .75rem; 30 | 31 | /*========== Font weight ==========*/ 32 | --font-regular: 400; 33 | --font-medium: 500; 34 | --font-semi-bold: 600; 35 | --font-bold: 700; 36 | 37 | /*========== z index ==========*/ 38 | --z-tooltip: 10; 39 | --z-fixed: 100; 40 | } 41 | 42 | /*========== Responsive typography ==========*/ 43 | @media screen and (min-width: 1150px) { 44 | :root { 45 | --biggest-font-size: 4.5rem; 46 | --h1-font-size: 3rem; 47 | --h2-font-size: 1.5rem; 48 | --h3-font-size: 1.25rem; 49 | --normal-font-size: 1rem; 50 | --small-font-size: .875rem; 51 | --smaller-font-size: .813rem; 52 | } 53 | } 54 | 55 | /*=============== BASE ===============*/ 56 | * { 57 | box-sizing: border-box; 58 | padding: 0; 59 | margin: 0; 60 | } 61 | 62 | html { 63 | scroll-behavior: smooth; 64 | } 65 | 66 | body { 67 | font-family: var(--body-font); 68 | font-size: var(--normal-font-size); 69 | background-color: var(--body-color); 70 | color: var(--text-color); 71 | } 72 | 73 | h1, h2, h3, h4 { 74 | color: var(--title-color); 75 | font-weight: var(--font-bold); 76 | } 77 | 78 | ul { 79 | list-style: none; 80 | } 81 | 82 | a { 83 | text-decoration: none; 84 | } 85 | 86 | img { 87 | display: block; 88 | max-width: 100%; 89 | height: auto; 90 | } 91 | 92 | /*=============== THEME ===============*/ 93 | 94 | 95 | /*========== Variables Dark theme ==========*/ 96 | 97 | 98 | /*========== 99 | Color changes in some parts of 100 | the website, in dark theme 101 | ==========*/ 102 | 103 | 104 | /*=============== REUSABLE CSS CLASSES ===============*/ 105 | .container { 106 | max-width: 1120px; 107 | margin-inline: 1.5rem; 108 | } 109 | 110 | .grid { 111 | display: grid; 112 | gap: 1.5rem; 113 | } 114 | 115 | .section { 116 | padding-block: 4rem 2rem; 117 | } 118 | 119 | .section__title-1, 120 | .section__title-2 { 121 | position: relative; 122 | font-size: var(--h1-font-size); 123 | width: max-content; 124 | margin: .75rem auto 2rem; 125 | } 126 | 127 | .section__title-1 span, 128 | .section__title-2 span { 129 | z-index: 5; 130 | position: relative; 131 | } 132 | 133 | .section__title-1::after, 134 | .section__title-2::after { 135 | content: ""; 136 | width: 40px; 137 | height: 28px; 138 | background-color: hsla(14, 98%, 50%, .2); 139 | position: absolute; 140 | top: -4px; 141 | right: -8px; 142 | } 143 | 144 | .section__title-2::after { 145 | top: initial; 146 | bottom: -4px; 147 | } 148 | 149 | .geometric-box { 150 | position: absolute; 151 | width: 20px; 152 | height: 20px; 153 | background-color: var(--first-color); 154 | rotate: -30deg; 155 | } 156 | 157 | .geometric-box::after { 158 | content: ""; 159 | position: absolute; 160 | width: 16px; 161 | height: 16px; 162 | border: 3px solid var(--black-color); 163 | left: -5px; 164 | top: -5px; 165 | } 166 | 167 | .main { 168 | overflow: hidden; /* For animation ScrollReveal */ 169 | } 170 | 171 | /*=============== HEADER & NAV ===============*/ 172 | 173 | 174 | /* Navigation for mobile devices */ 175 | 176 | 177 | /* Show menu */ 178 | 179 | 180 | /* Add shadow header */ 181 | 182 | 183 | /* Active link */ 184 | 185 | 186 | /*=============== HOME ===============*/ 187 | 188 | 189 | /* Animate scroll icon */ 190 | 191 | 192 | /*=============== BUTTON ===============*/ 193 | 194 | 195 | /*=============== ABOUT ===============*/ 196 | 197 | 198 | /*=============== SERVICES ===============*/ 199 | 200 | 201 | /*=============== PROJECTS ===============*/ 202 | 203 | 204 | /*=============== CONTACT ===============*/ 205 | 206 | 207 | /* Opaque placeholder */ 208 | 209 | 210 | /* Move label up & sticky label */ 211 | 212 | 213 | /*=============== FOOTER ===============*/ 214 | 215 | 216 | /*=============== SCROLL BAR ===============*/ 217 | 218 | 219 | /*=============== SCROLL UP ===============*/ 220 | 221 | 222 | /* Show Scroll Up */ 223 | 224 | 225 | /*=============== BREAKPOINTS ===============*/ 226 | /* For small devices */ 227 | 228 | 229 | /* For medium devices */ 230 | 231 | 232 | /* For large devices */ 233 | -------------------------------------------------------------------------------- /assets/js/scrollreveal.min.js: -------------------------------------------------------------------------------- 1 | /*! @license ScrollReveal v4.0.9 2 | 3 | Copyright 2021 Fisssion LLC. 4 | 5 | Licensed under the GNU General Public License 3.0 for 6 | compatible open source projects and non-commercial use. 7 | 8 | For commercial sites, themes, projects, and applications, 9 | keep your source code private/proprietary by purchasing 10 | a commercial license from https://scrollrevealjs.org/ 11 | */ 12 | var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var n={success:function(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",function(){document.body.style.height="100%"})},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0=[].concat(r.body).shift())return j.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return j.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function E(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=b(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t