├── assets
├── img
│ ├── johnwick.png
│ ├── project-1.jpg
│ ├── project-2.jpg
│ ├── project-3.jpg
│ ├── project-4.jpg
│ ├── project-5.jpg
│ ├── project-6.jpg
│ ├── favicon
│ │ ├── favicon.ico
│ │ ├── favicon-16x16.png
│ │ ├── favicon-32x32.png
│ │ ├── mstile-150x150.png
│ │ ├── apple-touch-icon.png
│ │ ├── android-chrome-192x192.png
│ │ ├── android-chrome-512x512.png
│ │ ├── browserconfig.xml
│ │ ├── site.webmanifest
│ │ └── safari-pinned-tab.svg
│ ├── blob.svg
│ └── blob-border.svg
├── js
│ ├── main.js
│ └── scrollreveal.min.js
└── css
│ └── styles.css
├── readme.md
├── README.md
└── index.html
/assets/img/johnwick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/johnwick.png
--------------------------------------------------------------------------------
/assets/img/project-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/project-1.jpg
--------------------------------------------------------------------------------
/assets/img/project-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/project-2.jpg
--------------------------------------------------------------------------------
/assets/img/project-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/project-3.jpg
--------------------------------------------------------------------------------
/assets/img/project-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/project-4.jpg
--------------------------------------------------------------------------------
/assets/img/project-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/project-5.jpg
--------------------------------------------------------------------------------
/assets/img/project-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/project-6.jpg
--------------------------------------------------------------------------------
/assets/img/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/favicon/favicon.ico
--------------------------------------------------------------------------------
/assets/img/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/favicon/favicon-16x16.png
--------------------------------------------------------------------------------
/assets/img/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/favicon/favicon-32x32.png
--------------------------------------------------------------------------------
/assets/img/favicon/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/favicon/mstile-150x150.png
--------------------------------------------------------------------------------
/assets/img/favicon/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/favicon/apple-touch-icon.png
--------------------------------------------------------------------------------
/assets/img/favicon/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/favicon/android-chrome-192x192.png
--------------------------------------------------------------------------------
/assets/img/favicon/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thecodeblockdev/john-wick-starter-file/HEAD/assets/img/favicon/android-chrome-512x512.png
--------------------------------------------------------------------------------
/assets/img/favicon/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | #da532c
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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)
--------------------------------------------------------------------------------
/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/img/blob.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/img/blob-border.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
14 |
15 |
16 |
20 |
21 |
22 |
23 |
24 | 🔫 John Wick - I am gonna need a GUN
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/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/favicon/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
181 |
--------------------------------------------------------------------------------
/assets/js/scrollreveal.min.js:
--------------------------------------------------------------------------------
1 | /*! @license ScrollReveal v4.0.9
2 |
3 | Copyright 2021 Fisssion LLC.
4 |
5 | Licensed under the GNU General Public License 3.0 for
6 | compatible open source projects and non-commercial use.
7 |
8 | For commercial sites, themes, projects, and applications,
9 | keep your source code private/proprietary by purchasing
10 | a commercial license from https://scrollrevealjs.org/
11 | */
12 | var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var n={success:function(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",function(){document.body.style.height="100%"})},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0=[].concat(r.body).shift())return j.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return j.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function E(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=b(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t