├── README.md
├── assets
    ├── css
    │   └── styles.css
    ├── img
    │   ├── blob-border.svg
    │   ├── blob.svg
    │   ├── favicon
    │   │   ├── android-chrome-192x192.png
    │   │   ├── android-chrome-512x512.png
    │   │   ├── apple-touch-icon.png
    │   │   ├── browserconfig.xml
    │   │   ├── favicon-16x16.png
    │   │   ├── favicon-32x32.png
    │   │   ├── favicon.ico
    │   │   ├── mstile-150x150.png
    │   │   ├── safari-pinned-tab.svg
    │   │   └── site.webmanifest
    │   ├── johnwick.png
    │   ├── project-1.jpg
    │   ├── project-2.jpg
    │   ├── project-3.jpg
    │   ├── project-4.jpg
    │   ├── project-5.jpg
    │   └── project-6.jpg
    └── js
    │   ├── main.js
    │   └── scrollreveal.min.js
├── index.html
└── readme.md


/README.md:
--------------------------------------------------------------------------------
 1 | # Please Fork this project or download the zip file by clicking the green button
 2 | # CodeBlock's Frontend website (John Wick Portfolio website)
 3 | 
 4 | ## (Warning) Please do not update default values in style.css file without understaning it
 5 | ## Mobile first approach (industry demand) and 100% responsive on each devices
 6 | 
 7 | ## Implementations and learnings that you will get
 8 | - Your amazing portfolio, replace the content and image with yours and enjoy!
 9 | - Write semantic markup using semantic tags
10 | - BEM methodology to declare meaningful class name to elements and it's modifiers
11 | - Use Flexbox and Grid to create layout
12 | - Uses dynamic animations on each sections
13 | - Smooth scrolling
14 | - it has a dark theme
15 | - You can customise the color of the portfolio as per your choice
16 | - The power of CSS variables and custom properties
17 | - Approach followed (Mobile first)
18 | - 100% Active contact us form for Sending Emails functionality if someone wants to connect with you (helpful if someone decides to give you an offer or role, they can contact you using the contact form)
19 | - Compatible with all mobile devices and with a beautiful and pleasant user interface.
20 | - Dom interaction using javascript
21 | - Lighthouse search for more clarity on the performance of the website
22 | - Hosting on netlify
23 | 
24 | ## you can use it as your portfolio
25 | Please Subscribe the channel for such awesome contents like Frontend Best Practices, React, Backend, MERN, Python, Extraordinary Python Skills, AI, ML, UI/UX, Data Structures and Algorithms, System design and more. [CodeBlock](https://www.youtube.com/@codeblockdev)
26 | 


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


--------------------------------------------------------------------------------
/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="740" height="1125" 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="740" height="1125" href="#"/>
32 |    </defs>
33 | </svg>


--------------------------------------------------------------------------------
/assets/img/favicon/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/favicon/android-chrome-192x192.png


--------------------------------------------------------------------------------
/assets/img/favicon/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/favicon/android-chrome-512x512.png


--------------------------------------------------------------------------------
/assets/img/favicon/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/favicon/apple-touch-icon.png


--------------------------------------------------------------------------------
/assets/img/favicon/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |     <msapplication>
 4 |         <tile>
 5 |             <square150x150logo src="/mstile-150x150.png"/>
 6 |             <TileColor>#da532c</TileColor>
 7 |         </tile>
 8 |     </msapplication>
 9 | </browserconfig>
10 | 


--------------------------------------------------------------------------------
/assets/img/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/favicon/favicon-16x16.png


--------------------------------------------------------------------------------
/assets/img/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/favicon/favicon-32x32.png


--------------------------------------------------------------------------------
/assets/img/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/favicon/favicon.ico


--------------------------------------------------------------------------------
/assets/img/favicon/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/favicon/mstile-150x150.png


--------------------------------------------------------------------------------
/assets/img/favicon/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" standalone="no"?>
  2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
  4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
  5 |  width="1600.000000pt" height="1600.000000pt" viewBox="0 0 1600.000000 1600.000000"
  6 |  preserveAspectRatio="xMidYMid meet">
  7 | <metadata>
  8 | Created by potrace 1.14, written by Peter Selinger 2001-2017
  9 | </metadata>
 10 | <g transform="translate(0.000000,1600.000000) scale(0.100000,-0.100000)"
 11 | fill="#000000" stroke="none">
 12 | <path d="M7562 13585 c0 -16 2 -22 5 -12 2 9 2 23 0 30 -3 6 -5 -1 -5 -18z"/>
 13 | <path d="M7560 13400 c-2 -160 -8 -271 -16 -279 -2 -2 -4 85 -4 194 0 109 -2
 14 | 196 -4 194 -2 -2 -7 -56 -10 -119 -4 -63 -9 -135 -11 -160 -1 -25 -6 -250 -10
 15 | -500 -5 -250 -9 -475 -10 -500 -1 -25 -3 -75 -4 -112 0 -38 -5 -68 -11 -68 -5
 16 | 0 -9 3 -9 8 3 18 -1 195 -5 191 -2 -2 -6 -45 -9 -94 -3 -50 -9 -98 -12 -107
 17 | -6 -15 -34 -33 -41 -25 -2 1 -6 59 -9 127 -7 133 -17 222 -33 281 -5 20 -11
 18 | 81 -12 135 -2 55 -4 133 -5 174 -2 41 -4 149 -6 240 l-2 165 -8 -125 c-4 -69
 19 | -9 -135 -12 -147 -5 -19 -9 -134 -22 -603 -2 -52 -3 -139 -4 -192 -1 -90 -3
 20 | -99 -23 -112 -52 -32 -64 -30 -92 21 -40 71 -55 126 -70 258 -9 81 -14 104
 21 | -15 70 -1 -49 -6 -108 -17 -212 -6 -55 -18 -68 -29 -33 -7 22 -25 27 -26 8 0
 22 | -7 -2 -21 -4 -31 -2 -10 -6 -64 -10 -120 -3 -56 -8 -110 -11 -119 -8 -25 -24
 23 | -22 -25 5 0 12 -2 54 -4 92 -2 39 -3 115 -4 169 -1 55 -3 97 -5 95 -2 -2 -7
 24 | -35 -11 -74 -6 -60 -30 -134 -40 -123 -3 3 -6 35 -20 233 -3 39 -7 79 -10 90
 25 | -2 11 -4 34 -5 50 -4 45 -18 -45 -19 -115 -1 -42 -4 -51 -13 -42 -7 7 -20 12
 26 | -29 12 -18 0 -25 -13 -33 -65 -20 -123 -38 -225 -46 -255 -10 -37 -17 -119
 27 | -25 -285 -6 -133 -12 -165 -35 -195 -20 -25 -20 -25 -21 170 -1 107 -3 224 -4
 28 | 260 -5 151 -16 380 -20 440 -2 36 -7 108 -10 160 -15 254 -37 262 -51 20 -7
 29 | -121 -18 -158 -29 -94 -32 192 -46 241 -64 229 -31 -19 -62 -323 -86 -845 -6
 30 | -119 -9 -170 -20 -320 -22 -276 -33 -282 -70 -35 -19 126 -23 145 -35 145 -4
 31 | 0 -10 -10 -13 -22 -10 -37 -14 -18 -21 87 -15 233 -30 372 -41 383 -2 2 -9
 32 | -16 -16 -39 l-12 -44 -11 40 c-18 61 -27 23 -51 -225 -8 -80 -15 -89 -16 -24
 33 | -1 27 -3 63 -4 79 -2 17 -6 55 -9 85 -8 76 -20 115 -37 115 -18 0 -36 -39 -43
 34 | -90 -3 -22 -10 -83 -17 -135 -6 -52 -15 -99 -19 -103 -4 -4 -12 16 -19 45 -26
 35 | 118 -44 95 -60 -77 -14 -151 -19 -224 -26 -350 -3 -55 -8 -136 -10 -180 -3
 36 | -44 -7 -134 -10 -200 -5 -114 -8 -157 -20 -312 -10 -122 -28 -223 -41 -223
 37 | -11 0 -24 57 -54 222 -38 210 -52 234 -69 116 -6 -46 -15 -96 -19 -112 -7 -27
 38 | -8 -26 -21 23 -24 93 -33 72 -55 -134 -24 -215 -27 -246 -31 -300 -6 -68 -30
 39 | -275 -40 -334 -2 -13 -9 -69 -15 -125 -7 -56 -13 -110 -15 -121 -2 -11 -4 -29
 40 | -4 -39 -2 -47 -12 1 -27 130 -18 155 -32 201 -35 114 -1 -30 -3 -68 -4 -85 -2
 41 | -16 -3 -68 -4 -114 0 -46 -3 -82 -5 -80 -5 5 -14 124 -17 229 l-2 75 -6 -55
 42 | c-4 -30 -5 -412 -5 -848 l2 -794 -26 24 c-37 34 -91 93 -131 145 -19 25 -37
 43 | 40 -39 34 -6 -19 70 -184 115 -250 24 -35 42 -66 39 -68 -6 -6 -141 128 -179
 44 | 177 l-26 35 5 -55 c12 -122 73 -252 171 -368 25 -29 43 -55 40 -58 -12 -12
 45 | -210 102 -268 154 -33 30 -62 52 -65 50 -8 -9 57 -122 100 -173 73 -89 147
 46 | -141 244 -171 80 -25 69 -39 -33 -43 -77 -3 -86 -11 -12 -11 62 0 76 -14 26
 47 | -24 -74 -14 -282 1 -399 30 -51 12 34 -33 111 -59 107 -36 172 -44 312 -36 26
 48 | 1 49 0 51 -2 3 -2 7 -56 11 -119 3 -63 8 -146 10 -185 2 -38 7 -121 11 -182
 49 | l6 -113 -52 -82 c-29 -46 -98 -144 -154 -218 -101 -136 -171 -256 -182 -318
 50 | -5 -25 -2 -38 14 -55 11 -12 34 -49 50 -82 l31 -60 1 50 c1 44 16 106 20 80 5
 51 | -37 9 -76 21 -200 10 -107 14 -132 20 -105 10 48 18 118 18 159 1 60 19 21 30
 52 | -62 5 -43 14 -83 19 -90 11 -13 37 -128 48 -214 7 -56 24 -63 24 -10 0 18 7
 53 | 44 14 59 8 16 18 49 21 75 4 27 9 55 12 63 8 21 21 -24 22 -78 1 -63 17 -43
 54 | 20 25 1 32 4 67 6 78 2 11 4 29 4 39 1 20 1 20 16 0 8 -10 15 -30 15 -44 1
 55 | -21 3 -22 9 -7 15 39 26 19 31 -53 5 -77 16 -91 37 -49 12 22 13 22 13 4 1
 56 | -15 5 -12 19 14 18 33 18 33 24 10 4 -13 7 -42 8 -64 l1 -40 13 35 c17 45 22
 57 | 29 28 -80 4 -84 10 -103 65 -208 18 -35 26 -41 37 -32 18 15 23 -5 26 -110 1
 58 | -47 6 -90 10 -95 8 -10 16 -85 19 -170 2 -44 5 -40 15 18 6 40 25 42 25 2 0
 59 | -13 4 -26 9 -29 5 -3 9 42 10 100 1 58 8 141 16 183 8 42 17 102 21 135 3 32
 60 | 10 53 14 46 4 -6 10 19 14 57 4 37 10 79 13 93 l7 25 7 -25 c4 -14 8 -50 8
 61 | -80 2 -72 16 -97 25 -44 8 48 25 80 26 49 1 -15 4 -13 14 10 l13 30 12 -65 c7
 62 | -36 14 -74 16 -85 2 -11 4 -47 4 -79 1 -77 9 -68 16 19 7 81 14 97 16 34 1
 63 | -24 3 -66 4 -94 2 -27 6 -144 10 -260 7 -210 14 -275 16 -154 1 35 2 75 4 89
 64 | 1 14 3 61 5 105 3 76 3 78 10 30 l7 -50 2 50 c6 108 9 226 11 345 3 164 7 190
 65 | 31 190 11 0 19 -3 19 -7 0 -5 5 -37 10 -73 11 -78 24 -359 31 -685 1 -74 2
 66 | -77 10 -36 4 24 13 48 18 55 5 6 12 63 16 126 6 115 15 160 15 81 0 -23 7 -58
 67 | 16 -79 9 -22 17 -82 21 -152 3 -63 9 -116 14 -118 5 -2 9 -20 10 -40 1 -33 2
 68 | -35 9 -12 7 21 8 18 10 -20 2 -25 4 -58 5 -75 2 -16 3 -86 4 -154 1 -68 3
 69 | -122 6 -119 11 11 23 339 25 660 1 103 4 196 7 208 5 19 6 19 19 3 11 -15 13
 70 | -15 14 -3 1 22 30 -19 30 -42 0 -23 20 -24 21 0 0 9 7 49 14 87 10 55 14 63
 71 | 15 35 1 -19 4 -51 5 -70 2 -19 6 -100 9 -180 8 -176 17 -304 22 -309 2 -2 5
 72 | 36 5 85 1 49 2 94 4 99 1 6 3 32 3 59 4 119 20 -13 22 -184 l2 -105 14 65 c16
 73 | 75 21 118 29 248 3 52 11 105 19 120 13 24 14 15 18 -103 3 -98 8 -137 20
 74 | -160 l17 -30 1 50 c2 56 8 47 24 -35 19 -96 34 -64 52 113 3 32 7 57 9 55 6
 75 | -6 21 -140 30 -268 3 -47 8 -96 11 -109 8 -37 25 -11 39 61 l13 63 1 -80 c3
 76 | -115 17 -66 24 85 4 69 7 139 7 155 l1 30 14 -27 c9 -15 20 -73 25 -130 6 -57
 77 | 15 -130 20 -163 5 -33 12 -139 15 -235 4 -96 9 -188 12 -205 3 -16 7 -92 10
 78 | -167 3 -76 9 -138 13 -138 4 0 8 64 9 143 2 78 4 158 6 177 2 19 6 87 10 150
 79 | 3 63 8 133 10 155 2 22 7 88 10 146 4 58 8 114 10 125 2 10 4 28 5 39 0 16 2
 80 | 17 9 5 9 -15 16 -159 27 -530 3 -113 7 -232 9 -265 2 -33 4 -80 4 -104 2 -91
 81 | 11 -29 16 105 6 142 14 229 20 222 4 -4 10 -57 20 -168 17 -203 36 -350 46
 82 | -356 5 -3 9 2 9 12 0 13 3 14 15 4 13 -11 15 -4 16 51 1 35 2 75 4 89 1 14 6
 83 | 86 10 160 4 74 9 146 10 160 2 14 6 111 10 215 3 105 9 206 12 225 l6 35 8
 84 | -35 c4 -19 10 -45 13 -58 3 -13 8 -123 12 -245 3 -122 8 -233 9 -247 2 -14 4
 85 | -56 5 -95 3 -111 16 -31 24 142 12 280 21 367 36 358 10 -6 18 -84 26 -265 3
 86 | -74 7 -137 10 -141 3 -6 15 -358 18 -551 1 -69 10 -89 18 -43 3 14 6 155 8
 87 | 313 1 158 4 316 5 352 2 36 6 137 9 225 3 88 9 196 13 240 7 71 8 75 14 40 5
 88 | -31 7 -20 8 45 4 151 12 215 27 223 8 4 14 15 14 24 0 29 8 9 14 -32 2 -22 8
 89 | -76 11 -120 4 -44 13 -99 21 -123 8 -23 14 -50 14 -58 0 -8 5 -12 10 -9 6 3
 90 | 10 25 11 48 1 76 15 88 23 19 4 -35 16 -90 26 -123 11 -33 19 -63 18 -67 -2
 91 | -7 15 -242 18 -254 1 -5 2 -38 3 -75 2 -84 26 -45 31 50 0 4 5 7 10 7 6 0 10
 92 | -22 10 -50 0 -40 3 -48 15 -44 8 4 15 17 15 30 0 13 5 24 10 24 6 0 9 3 9 8
 93 | -4 21 2 135 6 130 6 -5 17 -202 31 -563 3 -88 8 -162 10 -164 2 -2 4 43 5 100
 94 | 0 57 2 120 4 139 1 19 3 53 4 75 2 32 4 36 11 20 5 -11 9 -32 9 -47 1 -38 21
 95 | -36 21 2 0 17 5 30 10 30 6 0 10 -31 11 -72 0 -59 2 -70 12 -56 10 15 13 14
 96 | 23 -10 l12 -27 1 32 c1 17 5 34 10 37 13 8 20 -29 22 -121 1 -45 6 -80 10 -77
 97 | 5 3 9 12 9 20 0 8 4 14 8 14 5 0 9 46 11 103 2 129 10 181 26 165 3 -2 8 -76
 98 | 11 -164 3 -87 10 -177 15 -199 6 -22 11 -50 13 -63 4 -30 26 -54 26 -29 0 10
 99 | 5 14 15 11 10 -4 15 -20 15 -45 0 -21 5 -39 10 -39 6 0 11 -21 12 -47 1 -44 2
100 | -45 5 -10 2 20 7 35 11 33 4 -2 8 19 9 47 0 29 1 76 2 105 1 49 13 68 24 39 3
101 | -7 11 -70 18 -141 12 -116 14 -124 24 -91 14 50 25 34 25 -38 0 -94 8 -63 15
102 | 63 4 63 9 117 11 119 2 2 5 -55 5 -127 1 -73 3 -145 4 -162 1 -16 3 -62 4
103 | -102 0 -39 4 -68 8 -64 10 10 10 11 12 102 1 57 4 75 14 71 9 -3 13 25 15 122
104 | 3 121 18 291 28 300 2 2 4 -62 4 -143 0 -81 4 -145 8 -142 5 3 9 29 11 58 1
105 | 29 4 55 7 57 4 4 8 -130 5 -154 -1 -5 6 -1 14 9 8 11 16 27 16 35 1 9 7 -6 14
106 | -34 l13 -50 2 75 c1 41 3 89 5 105 1 17 4 46 5 65 2 31 4 28 15 -25 7 -33 13
107 | -62 14 -65 1 -3 6 2 11 10 5 8 10 56 11 105 1 102 4 101 24 -11 19 -105 32
108 | -162 34 -144 1 11 9 7 25 -12 16 -17 26 -45 30 -80 4 -29 10 -71 14 -93 l6
109 | -40 6 50 c6 50 6 49 19 -42 8 -51 17 -90 21 -88 4 2 10 25 14 51 3 26 11 65
110 | 18 88 l12 41 9 -55 c4 -30 11 -90 13 -132 6 -78 23 -108 25 -43 1 19 3 44 4
111 | 55 1 11 4 39 5 63 l3 42 7 -35 7 -35 2 30 c2 17 4 39 6 50 2 11 6 47 9 79 6
112 | 63 15 86 17 45 1 -13 3 -37 4 -54 2 -16 3 -120 4 -229 1 -110 3 -197 5 -195 4
113 | 4 15 239 16 339 0 37 3 50 9 41 7 -11 10 -5 13 20 2 21 8 33 16 31 6 -1 12 6
114 | 12 15 1 38 39 -32 46 -82 3 -27 9 -56 13 -63 10 -17 61 80 62 116 0 15 4 36 9
115 | 47 7 18 9 18 15 3 4 -9 12 -15 19 -12 16 6 31 -13 40 -50 6 -26 8 -27 20 -11
116 | 12 17 13 17 19 1 4 -10 12 -14 18 -10 7 4 31 -3 54 -16 24 -13 50 -20 59 -17
117 | 19 8 18 24 -25 237 -65 319 -144 577 -285 933 -43 108 -73 195 -69 205 8 28
118 | 13 132 20 417 4 143 8 278 10 300 2 22 6 96 10 165 3 69 10 166 15 215 5 50
119 | 10 101 10 114 0 16 4 21 9 15 6 -5 13 -54 17 -109 8 -114 13 -134 15 -52 1 31
120 | 3 62 4 67 1 6 3 20 5 33 4 45 18 -24 35 -173 9 -79 20 -151 24 -160 5 -8 11
121 | -111 15 -229 3 -118 8 -216 10 -218 8 -8 16 75 21 232 3 88 8 207 10 265 2 58
122 | 7 197 11 310 3 113 10 212 15 220 6 12 9 9 9 -10 1 -14 3 -33 5 -42 2 -10 6
123 | -59 9 -110 7 -96 10 -133 25 -253 4 -38 9 -153 10 -255 3 -221 10 -423 16
124 | -429 3 -2 5 25 5 62 0 36 4 68 8 71 5 3 10 38 11 78 2 88 10 138 22 138 5 0
125 | 10 -11 10 -25 1 -14 2 -28 3 -32 6 -25 23 -224 32 -378 4 -66 8 -131 9 -145 2
126 | -14 3 -45 4 -69 1 -24 3 -42 5 -40 10 9 17 128 32 489 3 85 10 162 15 170 6
127 | 10 9 1 10 -30 0 -25 2 -56 4 -70 1 -14 5 -178 9 -365 7 -392 16 -658 22 -664
128 | 2 -2 4 24 4 58 0 39 4 60 10 56 6 -4 10 9 11 32 0 21 2 45 4 53 3 16 12 366
129 | 20 790 9 466 17 735 21 739 2 2 4 -36 5 -85 1 -93 7 -176 15 -183 2 -2 4 34 5
130 | 80 1 160 18 47 25 -167 3 -114 8 -215 9 -223 2 -9 4 -27 4 -40 1 -13 3 -22 5
131 | -20 8 8 16 114 32 464 3 72 10 148 16 170 16 61 16 65 23 191 3 66 8 153 10
132 | 194 11 210 18 305 21 309 3 4 8 -103 8 -181 0 -9 3 -15 6 -13 4 2 10 42 14 87
133 | 4 46 11 87 16 92 7 7 10 6 11 -2 1 -7 2 -15 3 -19 1 -5 6 -44 10 -88 5 -44 10
134 | -89 11 -100 2 -11 6 -51 10 -90 19 -205 36 -246 50 -123 4 35 9 70 10 78 2 8
135 | 6 71 10 140 7 128 14 168 16 89 1 -24 3 -73 4 -109 1 -36 6 -189 10 -340 4
136 | -151 8 -281 8 -287 0 -7 4 -13 9 -13 4 0 8 21 9 48 1 51 6 93 16 132 l6 25 7
137 | -25 c6 -24 7 -23 19 15 18 60 39 234 46 375 3 77 10 127 17 131 14 9 14 8 22
138 | 329 4 140 9 307 11 370 2 63 7 206 11 318 3 112 7 211 9 220 2 9 4 28 5 42 2
139 | 17 6 10 15 -25 7 -27 17 -62 23 -76 6 -14 13 -73 16 -130 14 -243 19 -291 32
140 | -366 7 -36 24 -35 24 0 0 18 2 19 10 7 5 -8 10 -31 10 -49 0 -58 18 -22 24 49
141 | 3 36 8 142 11 235 9 323 29 570 46 581 5 3 9 -5 9 -18 1 -47 13 -203 16 -207
142 | 2 -2 4 40 5 95 0 54 2 142 4 194 2 52 4 264 5 470 l1 375 41 125 c22 69 59
143 | 200 82 292 38 150 61 222 52 157 -2 -13 -7 -49 -11 -79 -14 -124 -86 -435
144 | -122 -525 -25 -65 -26 -71 -9 -48 9 12 40 77 70 145 136 312 195 604 200 986
145 | 7 601 -142 1145 -414 1511 -140 189 -362 354 -545 406 -84 24 -137 49 -176 83
146 | -19 16 -78 59 -132 96 -53 37 -101 75 -106 84 -4 10 -14 41 -21 70 -6 28 -15
147 | 54 -20 57 -4 2 -10 -18 -14 -45 -12 -89 -29 -73 -46 43 -5 36 -8 42 -9 20 0
148 | -18 -12 -44 -25 -59 l-24 -28 -5 29 c-8 38 -15 114 -23 245 -4 58 -8 112 -10
149 | 120 -1 8 -3 24 -4 35 0 16 -2 17 -9 5 -5 -8 -12 -62 -16 -120 -4 -58 -10 -118
150 | -15 -135 -5 -16 -12 -49 -15 -72 -4 -24 -11 -43 -16 -43 -4 0 -68 20 -141 44
151 | -112 37 -237 70 -188 50 8 -4 30 -13 49 -20 52 -21 33 -25 -44 -9 -62 13 -100
152 | 35 -74 43 6 3 6 8 1 15 -5 7 -12 66 -16 132 -3 66 -8 129 -10 140 -3 11 -5 47
153 | -5 79 -1 33 -3 57 -6 55 -10 -10 -22 -134 -31 -309 -3 -69 -8 -127 -10 -129
154 | -10 -11 -22 18 -28 64 -3 28 -8 181 -11 340 -4 160 -8 371 -10 470 -2 99 -5
155 | 245 -6 325 l-2 145 -8 -130 c-4 -71 -10 -146 -13 -165 -4 -34 -9 -115 -22
156 | -429 -3 -80 -9 -154 -13 -165 -5 -12 -9 -52 -10 -90 -1 -38 -6 -78 -11 -90 -4
157 | -11 -11 -64 -16 -116 -4 -52 -9 -98 -10 -102 -1 -5 -2 -15 -3 -23 -1 -11 -13
158 | -15 -48 -15 -80 0 -75 -9 -99 215 -5 39 -9 73 -10 78 -1 4 -2 19 -3 35 -1 20
159 | -4 23 -10 12 -9 -15 -16 -58 -27 -160 -7 -72 -14 -76 -15 -9 -1 30 -3 61 -4
160 | 69 -1 8 -3 58 -4 110 -2 93 -2 94 -16 61 -8 -18 -15 -44 -15 -58 0 -13 -3 -22
161 | -7 -20 -5 3 -9 -50 -10 -116 -1 -67 -5 -141 -8 -165 l-6 -43 -70 2 c-38 1 -72
162 | -1 -76 -4 -3 -4 -33 -7 -65 -7 l-58 0 -1 58 c0 31 -1 80 -1 107 l0 50 -8 -40
163 | c-5 -29 -8 -10 -9 73 0 67 -5 112 -11 112 -5 0 -10 -21 -10 -47 -1 -109 -13
164 | -250 -24 -282 -14 -44 -36 -52 -37 -14 l-1 28 -8 -30 c-5 -21 -8 3 -10 75 -1
165 | 58 -3 119 -5 135 -1 17 -3 68 -4 114 -2 126 -10 93 -12 -49 -1 -69 -5 -145 -9
166 | -170 l-7 -45 -2 53 c-2 83 -16 53 -19 -40 -3 -103 -12 -163 -22 -151 -5 4 -10
167 | 22 -13 38 -3 26 -4 24 -6 -10 0 -23 -5 -35 -10 -30 -5 6 -12 117 -16 248 -3
168 | 131 -8 248 -10 260 -2 12 -6 72 -9 132 -9 161 -17 229 -27 239 -5 6 -9 -14
169 | -10 -50 0 -32 -2 -93 -5 -134 -2 -41 -6 -113 -8 -160 -3 -47 -5 -112 -6 -145
170 | 0 -35 -4 -55 -9 -47 -7 11 -11 121 -14 348 -1 47 -4 61 -14 57 -7 -3 -13 -1
171 | -14 3 0 5 -3 18 -5 29 -3 11 -8 160 -10 330 -6 347 -11 418 -14 185z"/>
172 | <path d="M7931 12554 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
173 | <path d="M7951 12434 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
174 | <path d="M5068 7558 c6 -6 18 -8 28 -6 14 3 12 5 -9 10 -19 3 -25 2 -19 -4z"/>
175 | <path d="M5133 7543 c9 -2 23 -2 30 0 6 3 -1 5 -18 5 -16 0 -22 -2 -12 -5z"/>
176 | <path d="M6731 4804 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
177 | <path d="M7050 3860 c0 -5 5 -10 10 -10 6 0 10 5 10 10 0 6 -4 10 -10 10 -5 0
178 | -10 -4 -10 -10z"/>
179 | </g>
180 | </svg>
181 | 


--------------------------------------------------------------------------------
/assets/img/favicon/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "",
 3 |     "short_name": "",
 4 |     "icons": [
 5 |         {
 6 |             "src": "/android-chrome-192x192.png",
 7 |             "sizes": "192x192",
 8 |             "type": "image/png"
 9 |         },
10 |         {
11 |             "src": "/android-chrome-512x512.png",
12 |             "sizes": "512x512",
13 |             "type": "image/png"
14 |         }
15 |     ],
16 |     "theme_color": "#ffffff",
17 |     "background_color": "#ffffff",
18 |     "display": "standalone"
19 | }
20 | 


--------------------------------------------------------------------------------
/assets/img/johnwick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/johnwick.png


--------------------------------------------------------------------------------
/assets/img/project-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/project-1.jpg


--------------------------------------------------------------------------------
/assets/img/project-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/project-2.jpg


--------------------------------------------------------------------------------
/assets/img/project-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/project-3.jpg


--------------------------------------------------------------------------------
/assets/img/project-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/project-4.jpg


--------------------------------------------------------------------------------
/assets/img/project-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/project-5.jpg


--------------------------------------------------------------------------------
/assets/img/project-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/e32589b830ba7bd2ec2a71d6862c4c8476e9b9c7/assets/img/project-6.jpg


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


--------------------------------------------------------------------------------
/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 | 
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |         <!--=============== FAVICON ===============-->
 9 |         <link
10 |             rel="shortcut icon"
11 |             href="assets/img/favicon/favicon.ico"
12 |             type="image/x-icon"
13 |         />
14 | 
15 |         <!--=============== REMIXICONS ===============-->
16 |         <link
17 |             href="https://cdn.jsdelivr.net/npm/remixicon@3.0.0/fonts/remixicon.css"
18 |             rel="stylesheet"
19 |         />
20 | 
21 |         <!--=============== CSS ===============-->
22 |         <link rel="stylesheet" href="assets/css/styles.css" />
23 | 
24 |         <title>🔫 John Wick - I am gonna need a GUN</title>
25 |     </head>
26 |     <body>
27 |         <!--==================== HEADER ====================-->
28 |         <header class="header" id="header"></header>
29 | 
30 |         <!--==================== MAIN ====================-->
31 |         <main class="main">
32 |             <!--==================== HOME ====================-->
33 |             <section class="home section" id="home"></section>
34 | 
35 |             <!--==================== ABOUT ====================-->
36 |             <section class="about section" id="about"></section>
37 | 
38 |             <!--==================== SKILLS ====================-->
39 |             <section class="skills section"></section>
40 | 
41 |             <!--==================== SERVICES ====================-->
42 |             <section class="services section" id="services"></section>
43 | 
44 |             <!--==================== PROJECTS ====================-->
45 |             <section class="projects section" id="projects"></section>
46 | 
47 |             <!--==================== CONTACT ====================-->
48 |             <section class="contact section" id="contact"></section>
49 |         </main>
50 | 
51 |         <!--==================== FOOTER ====================-->
52 |         <footer class="footer"></footer>
53 | 
54 |         <!--========== SCROLL UP ==========-->
55 | 
56 |         <!--=============== SCROLLREVEAL ===============-->
57 |         <script src="assets/js/scrollreveal.min.js"></script>
58 | 
59 |         <!--=============== EMAIL JS ===============-->
60 | 
61 |         <!--=============== MAIN JS ===============-->
62 |         <script src="assets/js/main.js"></script>
63 |     </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Please Fork this project or download the zip file by clicking the green button
 2 | # CodeBlock's Frontend website (John Wick Portfolio website)
 3 | 
 4 | ## (Warning) Please do not update default values in style.css file without understaning it
 5 | ## Mobile first approach (industry demand) and 100% responsive on each devices
 6 | 
 7 | ## Implementations and learnings that you will get
 8 | - Your amazing portfolio, replace the content and image with yours and enjoy!
 9 | - Write semantic markup using semantic tags
10 | - BEM methodology to declare meaningful class name to elements and it's modifiers
11 | - Use Flexbox and Grid to create layout
12 | - Uses dynamic animations on each sections
13 | - Smooth scrolling
14 | - it has a dark theme
15 | - You can customise the color of the portfolio as per your choice
16 | - The power of CSS variables and custom properties
17 | - Approach followed (Mobile first)
18 | - 100% Active contact us form for Sending Emails functionality if someone wants to connect with you (helpful if someone decides to give you an offer or role, they can contact you using the contact form)
19 | - Compatible with all mobile devices and with a beautiful and pleasant user interface.
20 | - Dom interaction using javascript
21 | - Lighthouse search for more clarity on the performance of the website
22 | - Hosting on netlify
23 | 
24 | ## you can use it as your portfolio
25 | Please Subscribe the channel for such awesome contents like Frontend Best Practices, React, Backend, MERN, Python, Extraordinary Python Skills, AI, ML, UI/UX, Data Structures and Algorithms, System design and more. [CodeBlock](https://www.youtube.com/@codeblockdev)


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