├── README.md
├── Text Responsive portfolio website Patrick.txt
├── assets
    ├── css
    │   └── styles.css
    ├── img
    │   ├── blob-border.svg
    │   ├── blob.svg
    │   ├── favicon.png
    │   ├── perfil.png
    │   ├── project-img-1.jpg
    │   ├── project-img-2.jpg
    │   ├── project-img-3.jpg
    │   ├── project-img-4.jpg
    │   ├── project-img-5.jpg
    │   └── project-img-6.jpg
    └── js
    │   ├── main.js
    │   └── scrollreveal.min.js
├── index.html
└── preview.png


/README.md:
--------------------------------------------------------------------------------
 1 | # Responsive Portfolio Website Patrick
 2 | ## [Watch it on youtube](https://youtu.be/Y4-xMb-eHOQ)
 3 | ### Responsive Portfolio Website Patrick
 4 | 
 5 | - Responsive Portfolio Website Design Using HTML CSS & JavaScript
 6 | - Contains animations when scrolling.
 7 | - Smooth scrolling in each section.
 8 | - Contains a beautiful dark theme.
 9 | - The color of the project can be customized.
10 | - Sending emails in the contact section.
11 | - Developed first with the Mobile First methodology, then for desktop.
12 | - Compatible with all mobile devices and with a beautiful and pleasant user interface.
13 | 
14 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode)
15 | 
16 | ![preview img](/preview.png)
17 | 


--------------------------------------------------------------------------------
/Text Responsive portfolio website Patrick.txt:
--------------------------------------------------------------------------------
  1 | ========== HEADER ==========
  2 | .nav__logo
  3 | Patrick <span>Moz</span>
  4 | 
  5 | .nav__link
  6 | Home - About - Services - Projects - Contact
  7 | 
  8 | 
  9 | ========== HOME ==========
 10 | .home__subtitle
 11 | Hello, <span>I’m</span>
 12 | 
 13 | .home__title
 14 | Patrick Moz
 15 | 
 16 | .home__education
 17 | Front-end Developer
 18 | 
 19 | .home__description
 20 | With knowledge in web development and 
 21 | design, I offer the best projects resulting 
 22 | in quality work.
 23 | 
 24 | .button
 25 | Let's Talk
 26 | 
 27 | .home__social
 28 | https://github.com/
 29 | https://dribbble.com/
 30 | https://www.linkedin.com/
 31 | 
 32 | .home__social-icon (clip-path)
 33 | polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
 34 | 
 35 | 
 36 | ========== ABOUT ==========
 37 | .section__subtitle
 38 | My <span>Intro</span>
 39 | 
 40 | .section__title
 41 | About Me
 42 | 
 43 | .about__description
 44 | Frontend developer, I create web pages with 
 45 | UI / UX user interface, I have years of 
 46 | experience and many clients are happy with the 
 47 | projects carried out.
 48 | 
 49 | .button
 50 | Contact Me
 51 | 
 52 | 
 53 | ========== SKILLS ==========
 54 | .section__subtitle
 55 | Favorite <span>Skills</span>
 56 | 
 57 | .section__title
 58 | My Skills
 59 | 
 60 | .skills__description
 61 | See fully what skills I have and perform, 
 62 | to develop the projects for you.
 63 | 
 64 | .button
 65 | See Projects
 66 | 
 67 | .skills__item
 68 | HTML & CSS
 69 | JavaScript
 70 | Bootstrap
 71 | React
 72 | 
 73 | Git & GitHub
 74 | Figma
 75 | Sketch
 76 | 
 77 | 
 78 | ========== SERVICES ==========
 79 | .section__subtitle
 80 | My <span>Services
 81 | 
 82 | .section__title
 83 | What I Do
 84 | 
 85 | .services__title .services__description
 86 | Web Developer
 87 | Development of custom web pages. 
 88 | Using current technologies and 
 89 | libraries of the labor field.
 90 | 
 91 | UI/UX Designer
 92 | I offer design of web interfaces and 
 93 | mobile applications, design made in 
 94 | figma, adobe xd and sketch.
 95 | 
 96 | Graphic Design
 97 | I make designs at the client's request, 
 98 | banner design, posters, digital 
 99 | designs among others.
100 | 
101 | 
102 | ========== PROJECTS ==========
103 | .section__subtitle
104 | My <span>Jobs</span>
105 | 
106 | .section__title
107 | Recent Projects
108 | 
109 | .projects__subtitle .projects__title .projects__button
110 | Web
111 | Modern website
112 | View demo
113 | 
114 | 
115 | ========== CONTACT ==========
116 | .section__subtitle
117 | Get In <span>Touch</span>
118 | 
119 | .section__title
120 | Contact Me
121 | 
122 | .contact__input (placeholder)
123 | Enter your name
124 | Enter your email
125 | Enter your message
126 | 
127 | .button (type="submit")
128 | Send Message
129 | 
130 | 
131 | ========== EMAIL JS CONTACT ==========
132 | Before proceeding, I recommend creating your EmailJs account(https://www.emailjs.com/)
133 | 
134 | // serviceID - templateID - #form - publicKey
135 | 
136 | 	// Show sent message
137 | 
138 | 		Message sent successfully
139 | 
140 | 	// Remove message after five seconds
141 | 
142 | 	// Clear input fields
143 | 
144 | 	// Show error message
145 | 
146 | 		Message not sent (service error)
147 | 
148 | 
149 | * Copy this code into your (Email Template)
150 | 
151 | Names: {{user_name}}
152 | 
153 | Email: {{user_email}}
154 | 
155 | Project: {{user_project}}
156 | 
157 | Best wishes,
158 | EmailJS team
159 | 
160 | 
161 | ========== FOOTER ==========
162 | .footer__title
163 | Patrick <span>Moz</span>
164 | 
165 | .footer__education
166 | Front-end Developer  
167 | 
168 | .footer__social-link
169 | https://www.facebook.com/
170 | https://www.instagram.com/
171 | https://twitter.com/
172 | 
173 | .footer__copy
174 | &#169; Copyright Bedimcode. All rights reserved
175 | 
176 | .footer__social-icon (clip-path)
177 | polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
178 | 


--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
  1 | /*=============== GOOGLE FONTS ===============*/
  2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
  3 | 
  4 | /*=============== VARIABLES CSS ===============*/
  5 | :root {
  6 |   --header-height: 3.5rem;
  7 | 
  8 |   /*========== Colors ==========*/
  9 |   /*Color mode HSL(hue, saturation, lightness)*/
 10 |   /* 
 11 |       Change favorite color
 12 |       Default: hsl(162, 100%, 40%)
 13 |       Orange: hsl(14, 100%, 65%) - Blue: hsl(210, 100%, 70%)
 14 |       Pink: hsl(356, 100%, 75%) - Purple: hsl(250, 100%, 75%)
 15 | 
 16 |       For more colors visit: https://colors.dopely.top/color-pedia
 17 |       -> Choose any color 
 18 |       -> click on tab (Color Conversion)
 19 |       -> Copy the color mode (HSL)
 20 |   */
 21 | 
 22 |   --hue: 162;
 23 |   --first-color: hsl(var(--hue), 100%, 40%);
 24 |   --first-color-alt: hsl(var(--hue), 56%, 35%);
 25 |   --title-color: hsl(228, 8%, 95%);
 26 |   --text-color: hsl(228, 8%, 65%);
 27 |   --body-color: hsl(228, 15%, 20%);
 28 |   --container-color: hsl(228, 15%, 15%);
 29 | 
 30 |   /*========== Font and typography ==========*/
 31 |   /*.5rem = 8px | 1rem = 16px ...*/
 32 |   --body-font: "Poppins", sans-serif;
 33 |   --biggest-font-size: 2rem;
 34 |   --bigger-font-size: 1.25rem;
 35 |   --h1-font-size: 1.5rem;
 36 |   --h2-font-size: 1.25rem;
 37 |   --h3-font-size: 1rem;
 38 |   --normal-font-size: .938rem;
 39 |   --small-font-size: .813rem;
 40 |   --smaller-font-size: .75rem;
 41 | 
 42 |   /*========== Font weight ==========*/
 43 |   --font-regular: 400;
 44 |   --font-medium: 500;
 45 |   --font-semi-bold: 600;
 46 | 
 47 |   /*========== z index ==========*/
 48 |   --z-tooltip: 10;
 49 |   --z-fixed: 100;
 50 | }
 51 | 
 52 | /*========== Responsive typography ==========*/
 53 | @media screen and (min-width: 1152px) {
 54 |   :root {
 55 |     --biggest-font-size: 4rem;
 56 |     --bigger-font-size: 2rem;
 57 |     --h1-font-size: 2.25rem;
 58 |     --h2-font-size: 1.5rem;
 59 |     --h3-font-size: 1.25rem;
 60 |     --normal-font-size: 1rem;
 61 |     --small-font-size: .875rem;
 62 |     --smaller-font-size: .813rem;
 63 |   }
 64 | }
 65 | 
 66 | /*=============== BASE ===============*/
 67 | * {
 68 |   box-sizing: border-box;
 69 |   padding: 0;
 70 |   margin: 0;
 71 | }
 72 | 
 73 | html {
 74 |   scroll-behavior: smooth;
 75 | }
 76 | 
 77 | input,
 78 | textarea,
 79 | button,
 80 | body {
 81 |   font-family: var(--body-font);
 82 |   font-size: var(--normal-font-size);
 83 | }
 84 | 
 85 | body {
 86 |   background-color: var(--body-color);
 87 |   color: var(--text-color);
 88 | }
 89 | 
 90 | input,
 91 | textarea,
 92 | button {
 93 |   outline: none;
 94 |   border: none;
 95 | }
 96 | 
 97 | h1, h2, h3, h4 {
 98 |   color: var(--title-color);
 99 |   font-weight: var(--font-medium);
100 | }
101 | 
102 | ul {
103 |   list-style: none;
104 | }
105 | 
106 | a {
107 |   text-decoration: none;
108 | }
109 | 
110 | img,
111 | svg {
112 |   max-width: 100%;
113 |   height: auto;
114 | }
115 | 
116 | /*=============== REUSABLE CSS CLASSES ===============*/
117 | .container {
118 |   max-width: 1120px;
119 |   margin-inline: 1.5rem;
120 | }
121 | 
122 | .grid {
123 |   display: grid;
124 |   gap: 1.5rem;
125 | }
126 | 
127 | .section {
128 |   padding-block: 5rem 2rem;
129 | }
130 | 
131 | .section__title, 
132 | .section__subtitle {
133 |   text-align: center;
134 |   color: var(--title-color);
135 |   font-weight: var(--font-semi-bold);
136 | }
137 | 
138 | .section__title {
139 |   font-size: var(--h1-font-size);
140 |   margin-bottom: 1.5rem;
141 | }
142 | 
143 | .section__subtitle {
144 |   font-size: var(--small-font-size);
145 |   margin-bottom: .25rem;
146 | }
147 | 
148 | .section__subtitle span {
149 |   color: var(--first-color);
150 | }
151 | 
152 | .main {
153 |   overflow: hidden; /* For animation ScrollReveal */
154 | }
155 | 
156 | /*=============== HEADER & NAV ===============*/
157 | 
158 | 
159 | /* Navigation for mobile devices */
160 | 
161 | 
162 | /* Show menu */
163 | 
164 | 
165 | /* Add blur to header */
166 | 
167 | 
168 | /* Active link */
169 | 
170 | 
171 | /*=============== HOME ===============*/
172 | 
173 | 
174 | /*=============== BUTTON ===============*/
175 | 
176 | 
177 | /*=============== ABOUT ===============*/
178 | 
179 | 
180 | /*=============== SKILLS ===============*/
181 | 
182 | 
183 | /*=============== SERVICES ===============*/
184 | 
185 | 
186 | /*=============== PROJECTS ===============*/
187 | 
188 | 
189 | /*=============== CONTACT ===============*/
190 | 
191 | 
192 | /*=============== FOOTER ===============*/
193 | 
194 | 
195 | /*=============== SCROLL BAR ===============*/
196 | 
197 | 
198 | /*=============== SCROLL UP ===============*/
199 | 
200 | 
201 | /* Show Scroll Up */
202 | 
203 | 
204 | /*=============== BREAKPOINTS ===============*/
205 | /* For small devices */
206 | 
207 | 
208 | /* For medium devices */
209 | 
210 | 
211 | /* For large devices */
212 | 


--------------------------------------------------------------------------------
/assets/img/blob-border.svg:
--------------------------------------------------------------------------------
 1 | <svg viewBox="0 0 550 592" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |    <mask id="maskBorder" mask-type="alpha">
 3 |       <path d="M263 48.1782C270.426 43.891 279.574 43.891 287 48.1782L501.157 
 4 |       171.822C508.583 176.109 513.157 184.032 513.157 192.606V439.894C513.157 
 5 |       448.468 508.583 456.391 501.157 460.678L287 584.322C279.574 588.609 
 6 |       270.426 588.609 263 584.322L48.843 460.678C41.4174 456.391 36.843 448.468 36.843 
 7 |       439.894V192.606C36.843 184.032 41.4174 176.109 48.843 171.822L263 48.1782Z" fill="black"/>
 8 |    </mask>
 9 |    <g mask="url(#maskBorder)">
10 |       <rect x="37" width="476" height="630" fill="url(#pattern2)"/>
11 |       
12 |       <path d="M285 51.6423L499.157 175.286C505.345 178.859 509.157 185.461 509.157 
13 |       192.606V439.894C509.157 447.039 505.345 453.641 499.157 457.214L285 
14 |       580.858C278.812 584.43 271.188 584.43 265 580.858L50.843 457.214C44.655 453.641 
15 |       40.843 447.039 40.843 439.894V192.606C40.843 185.461 44.655 178.859 50.843 
16 |       175.286L265 51.6423C271.188 48.0697 278.812 48.0696 285 51.6423Z" stroke="black" stroke-width="10"/>
17 |    </g>
18 | 
19 |    <rect x="37" width="476" height="300" fill="url(#pattern3)"/>
20 | 
21 |    <defs>
22 |       <pattern id="pattern2" patternContentUnits="objectBoundingBox" width="1" height="1">
23 |          <use href="#imageBorder" transform="matrix(0.00143057 0 0 0.00108108 0.0404062 0)"/>
24 |       </pattern>
25 | 
26 |       <pattern id="pattern3" patternContentUnits="objectBoundingBox" width="1" height="1">
27 |          <use href="#imageBorder" transform="matrix(0.00143057 0 0 0.00226984 0.0404062 0)"/>
28 |       </pattern>
29 | 
30 |       <!-- Insert your profile (recommended size: 640 x 940) -->
31 |       <image id="imageBorder" width="640" height="940" href=""/>
32 |    </defs>
33 | </svg>


--------------------------------------------------------------------------------
/assets/img/blob.svg:
--------------------------------------------------------------------------------
 1 | <svg viewBox="0 0 550 591" xmlns="http://www.w3.org/2000/svg">
 2 |    <mask id="maskBlob" mask-type="alpha">
 3 |       <path d="M263 47.1782C270.426 42.891 279.574 42.891 287 47.1782L501.157 
 4 |       170.822C508.583 175.109 513.157 183.032 513.157 191.606V438.894C513.157 
 5 |       447.468 508.583 455.391 501.157 459.678L287 583.322C279.574 587.609 270.426 
 6 |       587.609 263 583.322L48.843 459.678C41.4174 455.391 36.843 447.468 36.843 
 7 |       438.894V191.606C36.843 183.032 41.4174 175.109 48.843 170.822L263 47.1782Z"/>
 8 |    </mask>
 9 |    <g mask="url(#maskBlob)">
10 |       <path d="M263 47.1782C270.426 42.891 279.574 42.891 287 47.1782L501.157 
11 |       170.822C508.583 175.109 513.157 183.032 513.157 191.606V438.894C513.157 
12 |       447.468 508.583 455.391 501.157 459.678L287 583.322C279.574 587.609 270.426 
13 |       587.609 263 583.322L48.843 459.678C41.4174 455.391 36.843 447.468 36.843 
14 |       438.894V191.606C36.843 183.032 41.4174 175.109 48.843 170.822L263 47.1782Z"/>
15 | 
16 |       <rect x="37" width="476" height="630" fill="url(#pattern0)"/>
17 |    </g>
18 | 
19 |    <rect x="37" width="476" height="300" fill="url(#pattern1)"/>
20 | 
21 |    <defs>
22 |       <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
23 |          <use href="#imageBlob" transform="matrix(0.00143057 0 0 0.00108108 0.0404062 0)"/>
24 |       </pattern>
25 | 
26 |       <pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
27 |          <use href="#imageBlob" transform="matrix(0.00143057 0 0 0.00226984 0.0404062 0)"/>
28 |       </pattern>
29 | 
30 |       <!-- Insert your profile (recommended size: 640 x 940) -->
31 |       <image id="imageBlob" width="640" height="925" href=""/>
32 |    </defs>
33 | </svg>


--------------------------------------------------------------------------------
/assets/img/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-patrick/08def41ca3450be01cec3f901189257c33e4c9b2/assets/img/favicon.png


--------------------------------------------------------------------------------
/assets/img/perfil.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-patrick/08def41ca3450be01cec3f901189257c33e4c9b2/assets/img/perfil.png


--------------------------------------------------------------------------------
/assets/img/project-img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-patrick/08def41ca3450be01cec3f901189257c33e4c9b2/assets/img/project-img-1.jpg


--------------------------------------------------------------------------------
/assets/img/project-img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-patrick/08def41ca3450be01cec3f901189257c33e4c9b2/assets/img/project-img-2.jpg


--------------------------------------------------------------------------------
/assets/img/project-img-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-patrick/08def41ca3450be01cec3f901189257c33e4c9b2/assets/img/project-img-3.jpg


--------------------------------------------------------------------------------
/assets/img/project-img-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-patrick/08def41ca3450be01cec3f901189257c33e4c9b2/assets/img/project-img-4.jpg


--------------------------------------------------------------------------------
/assets/img/project-img-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-patrick/08def41ca3450be01cec3f901189257c33e4c9b2/assets/img/project-img-5.jpg


--------------------------------------------------------------------------------
/assets/img/project-img-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-patrick/08def41ca3450be01cec3f901189257c33e4c9b2/assets/img/project-img-6.jpg


--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
 1 | /*=============== SHOW MENU ===============*/
 2 | 
 3 | 
 4 | /*=============== REMOVE MENU MOBILE ===============*/
 5 | 
 6 | 
 7 | /*=============== ADD BLUR TO HEADER ===============*/
 8 | 
 9 | 
10 | /*=============== EMAIL JS ===============*/
11 | 
12 | 
13 | /*=============== SHOW SCROLL UP ===============*/ 
14 | 
15 | 
16 | /*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
17 | 
18 | 
19 | /*=============== SCROLL REVEAL ANIMATION ===============*/
20 | 


--------------------------------------------------------------------------------
/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<n--;)t[n]=arguments[n+1];if(this.constructor.debug&&console){var i="%cScrollReveal: "+e;t.forEach(function(e){return i+="\n — "+e}),console.log(i,"color: #ea654b;")}}function t(){var n=this,i={active:[],stale:[]},t={active:[],stale:[]},r={active:[],stale:[]};try{f(u("[data-sr-id]"),function(e){var t=parseInt(e.getAttribute("data-sr-id"));i.active.push(t)})}catch(e){throw e}f(this.store.elements,function(e){-1===i.active.indexOf(e.id)&&i.stale.push(e.id)}),f(i.stale,function(e){return delete n.store.elements[e]}),f(this.store.elements,function(e){-1===r.active.indexOf(e.containerId)&&r.active.push(e.containerId),e.hasOwnProperty("sequence")&&-1===t.active.indexOf(e.sequence.id)&&t.active.push(e.sequence.id)}),f(this.store.containers,function(e){-1===r.active.indexOf(e.id)&&r.stale.push(e.id)}),f(r.stale,function(e){var t=n.store.containers[e].node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate),delete n.store.containers[e]}),f(this.store.sequences,function(e){-1===t.active.indexOf(e.id)&&t.stale.push(e.id)}),f(t.stale,function(e){return delete n.store.sequences[e]})}function N(e){if(e.constructor!==Array)throw new TypeError("Expected array.");if(16===e.length)return e;if(6!==e.length)throw new RangeError("Expected array with either 6 or 16 values.");var t=z();return t[0]=e[0],t[1]=e[1],t[4]=e[2],t[5]=e[3],t[12]=e[4],t[13]=e[5],t}function z(){for(var e=[],t=0;t<16;t++)t%5==0?e.push(1):e.push(0);return e}function F(e,t){for(var n=N(e),i=N(t),r=[],o=0;o<4;o++)for(var s=[n[o],n[o+4],n[o+8],n[o+12]],a=0;a<4;a++){var c=4*a,l=[i[c],i[c+1],i[c+2],i[c+3]],d=s[0]*l[0]+s[1]*l[1]+s[2]*l[2]+s[3]*l[3];r[o+c]=d}return r}function D(e,t){var n=z();return n[0]=e,n[5]="number"==typeof t?t:e,n}var S=function(){var n={},i=document.documentElement.style;function e(e,t){if(void 0===t&&(t=i),e&&"string"==typeof e){if(n[e])return n[e];if("string"==typeof t[e])return n[e]=e;if("string"==typeof t["-webkit-"+e])return n[e]="-webkit-"+e;throw new RangeError('Unable to find "'+e+'" style property.')}throw new TypeError("Expected a string.")}return e.clearCache=function(){return n={}},e}();function p(e){var t=window.getComputedStyle(e.node),n=t.position,i=e.config,r={},o=(e.node.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[];r.computed=o?o.map(function(e){return e.trim()}).join("; ")+";":"",r.generated=o.some(function(e){return e.match(/visibility\s?:\s?visible/i)})?r.computed:o.concat(["visibility: visible"]).map(function(e){return e.trim()}).join("; ")+";";var s,a,c,l,d,u,f,h,p,m,y,v,g,b=parseFloat(t.opacity),w=isNaN(parseFloat(i.opacity))?parseFloat(t.opacity):parseFloat(i.opacity),E={computed:b!==w?"opacity: "+b+";":"",generated:b!==w?"opacity: "+w+";":""},j=[];if(parseFloat(i.distance)){var T="top"===i.origin||"bottom"===i.origin?"Y":"X",k=i.distance;"top"!==i.origin&&"left"!==i.origin||(k=/^-/.test(k)?k.substr(1):"-"+k);var O=k.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g),x=O[0];switch(O[1]){case"em":k=parseInt(t.fontSize)*x;break;case"px":k=x;break;case"%":k="Y"===T?e.node.getBoundingClientRect().height*x/100:e.node.getBoundingClientRect().width*x/100;break;default:throw new RangeError("Unrecognized or missing distance unit.")}"Y"===T?j.push((c=k,(l=z())[13]=c,l)):j.push((s=k,(a=z())[12]=s,a))}i.rotate.x&&j.push((d=i.rotate.x,u=Math.PI/180*d,(f=z())[5]=f[10]=Math.cos(u),f[6]=f[9]=Math.sin(u),f[9]*=-1,f)),i.rotate.y&&j.push((h=i.rotate.y,p=Math.PI/180*h,(m=z())[0]=m[10]=Math.cos(p),m[2]=m[8]=Math.sin(p),m[2]*=-1,m)),i.rotate.z&&j.push((y=i.rotate.z,v=Math.PI/180*y,(g=z())[0]=g[5]=Math.cos(v),g[1]=g[4]=Math.sin(v),g[4]*=-1,g)),1!==i.scale&&(0===i.scale?j.push(D(2e-4)):j.push(D(i.scale)));var R={};if(j.length){R.property=S("transform"),R.computed={raw:t[R.property],matrix:function(e){if("string"==typeof e){var t=e.match(/matrix(3d)?\(([^)]+)\)/);if(t)return N(t[2].split(", ").map(parseFloat))}return z()}(t[R.property])},j.unshift(R.computed.matrix);var q=j.reduce(F);R.generated={initial:R.property+": matrix3d("+q.join(", ")+");",final:R.property+": matrix3d("+R.computed.matrix.join(", ")+");"}}else R.generated={initial:"",final:""};var A={};if(E.generated||R.generated.initial){A.property=S("transition"),A.computed=t[A.property],A.fragments=[];var P=i.delay,L=i.duration,M=i.easing;E.generated&&A.fragments.push({delayed:"opacity "+L/1e3+"s "+M+" "+P/1e3+"s",instant:"opacity "+L/1e3+"s "+M+" 0s"}),R.generated.initial&&A.fragments.push({delayed:R.property+" "+L/1e3+"s "+M+" "+P/1e3+"s",instant:R.property+" "+L/1e3+"s "+M+" 0s"}),A.computed&&!A.computed.match(/all 0s|none 0s/)&&A.fragments.unshift({delayed:A.computed,instant:A.computed});var I=A.fragments.reduce(function(e,t,n){return e.delayed+=0===n?t.delayed:", "+t.delayed,e.instant+=0===n?t.instant:", "+t.instant,e},{delayed:"",instant:""});A.generated={delayed:A.property+": "+I.delayed+";",instant:A.property+": "+I.instant+";"}}else A.generated={delayed:"",instant:""};return{inline:r,opacity:E,position:n,transform:R,transition:A}}function m(r,e){e.split(";").forEach(function(e){var t=e.split(":"),n=t[0],i=t.slice(1);n&&i&&(r.style[n.trim()]=i.join(":"))})}function y(e){var i,r=this;try{f(u(e),function(e){var t=e.getAttribute("data-sr-id");if(null!==t){i=!0;var n=r.store.elements[t];n.callbackTimer&&window.clearTimeout(n.callbackTimer.clock),m(n.node,n.styles.inline.generated),e.removeAttribute("data-sr-id"),delete r.store.elements[t]}})}catch(e){return h.call(this,"Clean failed.",e.message)}if(i)try{t.call(this)}catch(e){return h.call(this,"Clean failed.",e.message)}}function v(n){for(var e=[],t=arguments.length-1;0<t--;)e[t]=arguments[t+1];if(s(n))return f(e,function(e){f(e,function(e,t){s(e)?(n[t]&&s(n[t])||(n[t]={}),v(n[t],e)):n[t]=e})}),n;throw new TypeError("Target must be an object literal.")}function g(e){return void 0===e&&(e=navigator.userAgent),/Android|iPhone|iPad|iPod/i.test(e)}var e,b=(e=0,function(){return e++});function w(){var n=this;t.call(this),f(this.store.elements,function(e){var t=[e.styles.inline.generated];e.visible?(t.push(e.styles.opacity.computed),t.push(e.styles.transform.generated.final),e.revealed=!0):(t.push(e.styles.opacity.generated),t.push(e.styles.transform.generated.initial),e.revealed=!1),m(e.node,t.filter(function(e){return""!==e}).join(" "))}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.addEventListener("scroll",n.delegate),t.addEventListener("resize",n.delegate)}),this.delegate(),this.initTimeout=null}function c(e,t){void 0===t&&(t={});var n=t.pristine||this.pristine,i="always"===e.config.useDelay||"onload"===e.config.useDelay&&n||"once"===e.config.useDelay&&!e.seen,r=e.visible&&!e.revealed,o=!e.visible&&e.revealed&&e.config.reset;return t.reveal||r?function(e,t){var n=[e.styles.inline.generated,e.styles.opacity.computed,e.styles.transform.generated.final];t?n.push(e.styles.transition.generated.delayed):n.push(e.styles.transition.generated.instant);e.revealed=e.seen=!0,m(e.node,n.filter(function(e){return""!==e}).join(" ")),a.call(this,e,t)}.call(this,e,i):t.reset||o?function(e){var t=[e.styles.inline.generated,e.styles.opacity.generated,e.styles.transform.generated.initial,e.styles.transition.generated.instant];e.revealed=!1,m(e.node,t.filter(function(e){return""!==e}).join(" ")),a.call(this,e)}.call(this,e):void 0}function a(e,t){var n=this,i=t?e.config.duration+e.config.delay:e.config.duration,r=e.revealed?e.config.beforeReveal:e.config.beforeReset,o=e.revealed?e.config.afterReveal:e.config.afterReset,s=0;e.callbackTimer&&(s=Date.now()-e.callbackTimer.start,window.clearTimeout(e.callbackTimer.clock)),r(e.node),e.callbackTimer={start:Date.now(),clock:window.setTimeout(function(){o(e.node),e.callbackTimer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&y.call(n,e.node)},i-s)}}function l(e,t){if(void 0===t&&(t=this.pristine),!e.visible&&e.revealed&&e.config.reset)return c.call(this,e,{reset:!0});var n=this.store.sequences[e.sequence.id],i=e.sequence.index;if(n){var r=new d(n,"visible",this.store),o=new d(n,"revealed",this.store);if(n.models={visible:r,revealed:o},!o.body.length){var s=n.members[r.body[0]],a=this.store.elements[s];if(a)return j.call(this,n,r.body[0],-1,t),j.call(this,n,r.body[0],1,t),c.call(this,a,{reveal:!0,pristine:t})}if(!n.blocked.head&&i===[].concat(o.head).pop()&&i>=[].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<o.body[0]?o.head.push(t):o.foot.push(t))})}function j(e,t,n,i){var r=this,o=["head",null,"foot"][1+n],s=e.members[t+n],a=this.store.elements[s];e.blocked[o]=!0,setTimeout(function(){e.blocked[o]=!1,a&&l.call(r,a,i)},e.interval)}function i(e,a,t){var c=this;void 0===a&&(a={}),void 0===t&&(t=!1);var l,d=[],n=a.interval||r.interval;try{n&&(l=new E(n));var i=u(e);if(!i.length)throw new Error("Invalid reveal target.");f(i.reduce(function(e,t){var n={},i=t.getAttribute("data-sr-id");i?(v(n,c.store.elements[i]),m(n.node,n.styles.inline.computed)):(n.id=b(),n.node=t,n.seen=!1,n.revealed=!1,n.visible=!1);var r=v({},n.config||c.defaults,a);if(!r.mobile&&g()||!r.desktop&&!g())return i&&y.call(c,n),e;var o,s=u(r.container)[0];if(!s)throw new Error("Invalid container.");return s.contains(t)&&(null===(o=function(t){var e=[],n=arguments.length-1;for(;0<n--;)e[n]=arguments[n+1];var i=null;return f(e,function(e){f(e,function(e){null===i&&e.node===t&&(i=e.id)})}),i}(s,d,c.store.containers))&&(o=b(),d.push({id:o,node:s})),n.config=r,n.containerId=o,n.styles=p(n),l&&(n.sequence={id:l.id,index:l.members.length},l.members.push(n.id)),e.push(n)),e},[]),function(e){(c.store.elements[e.id]=e).node.setAttribute("data-sr-id",e.id)})}catch(e){return h.call(this,"Reveal failed.",e.message)}f(d,function(e){c.store.containers[e.id]={id:e.id,node:e.node}}),l&&(this.store.sequences[l.id]=l),!0!==t&&(this.store.history.push({target:e,options:a}),this.initTimeout&&window.clearTimeout(this.initTimeout),this.initTimeout=window.setTimeout(w.bind(this),0))}var T,k=Math.sign||function(e){return(0<e)-(e<0)||+e},O=(T=Date.now(),function(e){var t=Date.now();16<t-T?e(T=t):setTimeout(function(){return O(e)},0)}),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||O;function R(e,t){for(var n=t?e.node.clientHeight:e.node.offsetHeight,i=t?e.node.clientWidth:e.node.offsetWidth,r=0,o=0,s=e.node;isNaN(s.offsetTop)||(r+=s.offsetTop),isNaN(s.offsetLeft)||(o+=s.offsetLeft),s=s.offsetParent;);return{bounds:{top:r,right:o+i,bottom:r+n,left:o},height:n,width:i}}function q(e,t){var i=this;void 0===e&&(e={type:"init"}),void 0===t&&(t=this.store.elements),x(function(){var n="init"===e.type||"resize"===e.type;f(i.store.containers,function(e){n&&(e.geometry=R.call(i,e,!0));var t=function(e){var t,n;return n=e.node===document.documentElement?(t=window.pageYOffset,window.pageXOffset):(t=e.node.scrollTop,e.node.scrollLeft),{top:t,left:n}}.call(i,e);e.scroll&&(e.direction={x:k(t.left-e.scroll.left),y:k(t.top-e.scroll.top)}),e.scroll=t}),f(t,function(e){(n||void 0===e.geometry)&&(e.geometry=R.call(i,e)),e.visible=function(e){void 0===e&&(e={});var t=this.store.containers[e.containerId];if(t){var n=Math.max(0,Math.min(1,e.config.viewFactor)),i=e.config.viewOffset,r=e.geometry.bounds.top+e.geometry.height*n,o=e.geometry.bounds.right-e.geometry.width*n,s=e.geometry.bounds.bottom-e.geometry.height*n,a=e.geometry.bounds.left+e.geometry.width*n,c=t.geometry.bounds.top+t.scroll.top+i.top,l=t.geometry.bounds.right+t.scroll.left-i.right,d=t.geometry.bounds.bottom+t.scroll.top-i.bottom,u=t.geometry.bounds.left+t.scroll.left+i.left;return r<d&&u<o&&c<s&&a<l||"fixed"===e.styles.position}}.call(i,e)}),f(t,function(e){e.sequence?l.call(i,e):c.call(i,e)}),i.pristine=!1})}var A,P,L,M,I,C,W,Y,$="4.0.9";function H(e){var t;if(void 0===e&&(e={}),void 0===this||Object.getPrototypeOf(this)!==H.prototype)return new H(e);if(!H.isSupported())return h.call(this,"Instantiation failed.","This browser is not supported."),n.failure();try{t=v({},C||r,e)}catch(e){return h.call(this,"Invalid configuration.",e.message),n.failure()}try{if(!u(t.container)[0])throw new Error("Invalid container.")}catch(e){return h.call(this,e.message),n.failure()}return!(C=t).mobile&&g()||!C.desktop&&!g()?(h.call(this,"This device is disabled.","desktop: "+C.desktop,"mobile: "+C.mobile),n.failure()):(n.success(),this.store={containers:{},elements:{},history:[],sequences:{}},this.pristine=!0,A=A||q.bind(this),P=P||function(){var n=this;f(this.store.elements,function(e){m(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id")}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate)}),this.store={containers:{},elements:{},history:[],sequences:{}}}.bind(this),L=L||i.bind(this),M=M||y.bind(this),I=I||function(){var t=this;f(this.store.history,function(e){i.call(t,e.target,e.options,!0)}),w.call(this)}.bind(this),Object.defineProperty(this,"delegate",{get:function(){return A}}),Object.defineProperty(this,"destroy",{get:function(){return P}}),Object.defineProperty(this,"reveal",{get:function(){return L}}),Object.defineProperty(this,"clean",{get:function(){return M}}),Object.defineProperty(this,"sync",{get:function(){return I}}),Object.defineProperty(this,"defaults",{get:function(){return C}}),Object.defineProperty(this,"version",{get:function(){return $}}),Object.defineProperty(this,"noop",{get:function(){return!1}}),Y||(Y=this))}return H.isSupported=function(){return("transform"in(t=document.documentElement.style)||"WebkitTransform"in t)&&("transition"in(e=document.documentElement.style)||"WebkitTransition"in e);var e,t},Object.defineProperty(H,"debug",{get:function(){return W||!1},set:function(e){return W="boolean"==typeof e?e:W}}),H(),H}();
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en">
 3 |    <head>
 4 |       <meta charset="UTF-8">
 5 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 
 7 |       <!--=============== FAVICON ===============-->
 8 |       <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
 9 | 
10 |       <!--=============== REMIXICONS ===============-->
11 |       <link href="https://cdn.jsdelivr.net/npm/remixicon@3.0.0/fonts/remixicon.css" rel="stylesheet">
12 | 
13 |       <!--=============== CSS ===============-->
14 |       <link rel="stylesheet" href="assets/css/styles.css">
15 | 
16 |       <title>Responsive portfolio website - Bedimcode</title>
17 |    </head>
18 |    <body>
19 |       <!--==================== HEADER ====================-->
20 |       <header class="header" id="header">
21 |          
22 |       </header>
23 | 
24 |       <!--==================== MAIN ====================-->
25 |       <main class="main">
26 |          <!--==================== HOME ====================-->
27 |          <section class="home section" id="home">
28 |             
29 |          </section>
30 | 
31 |          <!--==================== ABOUT ====================-->
32 |          <section class="about section" id="about">
33 |             
34 |          </section>
35 | 
36 |          <!--==================== SKILLS ====================-->
37 |          <section class="skills section">
38 |             
39 |          </section>
40 | 
41 |          <!--==================== SERVICES ====================-->
42 |          <section class="services section" id="services">
43 |             
44 |          </section>
45 | 
46 |          <!--==================== PROJECTS ====================-->
47 |          <section class="projects section" id="projects">
48 |             
49 |          </section>
50 | 
51 |          <!--==================== CONTACT ====================-->
52 |          <section class="contact section" id="contact">
53 |             
54 |          </section>
55 |       </main>
56 | 
57 |       <!--==================== FOOTER ====================-->
58 |       <footer class="footer">
59 |          
60 |       </footer>
61 | 
62 |       <!--========== SCROLL UP ==========-->
63 |       
64 | 
65 |       <!--=============== SCROLLREVEAL ===============-->
66 |       <script src=""></script>
67 | 
68 |       <!--=============== EMAIL JS ===============-->
69 |       
70 | 
71 |       <!--=============== MAIN JS ===============-->
72 |       <script src="assets/js/main.js"></script>
73 |    </body>
74 | </html>


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-portfolio-website-patrick/08def41ca3450be01cec3f901189257c33e4c9b2/preview.png


--------------------------------------------------------------------------------