├── .gitignore ├── LICENSE.md ├── README.md ├── dist ├── about.html ├── assets │ ├── css │ │ ├── libs.bundle.css │ │ ├── libs.bundle.css.map │ │ ├── theme.bundle.css │ │ └── theme.bundle.css.map │ ├── fonts │ │ └── remixicon.woff │ ├── images │ │ ├── avatar-1.jpeg │ │ ├── avatar-2.jpeg │ │ ├── avatar-3.jpeg │ │ ├── avatar-4.jpeg │ │ ├── avatar-5.jpeg │ │ ├── avatar-6.jpeg │ │ ├── avatar-7.jpeg │ │ ├── avatar-small.jpg │ │ ├── avatar.jpg │ │ ├── favicon │ │ │ ├── android-chrome-192x192.png │ │ │ ├── android-chrome-256x256.png │ │ │ ├── apple-touch-icon.png │ │ │ ├── browserconfig.xml │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-32x32.png │ │ │ ├── favicon.ico │ │ │ ├── mstile-150x150.png │ │ │ ├── safari-pinned-tab.svg │ │ │ └── site.webmanifest │ │ ├── project-1.jpg │ │ ├── project-2.jpg │ │ ├── project-3.jpg │ │ ├── project-listing-1.jpg │ │ ├── project-listing-2.jpg │ │ ├── project-listing-3.jpg │ │ ├── project-listing-4.jpg │ │ ├── project-listing-5.jpg │ │ ├── project-listing-6.jpg │ │ ├── project-listing-7.jpg │ │ └── project-listing-8.jpg │ └── js │ │ ├── theme.bundle.js │ │ └── vendor.bundle.js ├── contact.html ├── index.html ├── work-listing.html └── work-single.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── assets │ ├── fonts │ │ └── remixicon.woff │ ├── images │ │ ├── avatar-1.jpeg │ │ ├── avatar-2.jpeg │ │ ├── avatar-3.jpeg │ │ ├── avatar-4.jpeg │ │ ├── avatar-5.jpeg │ │ ├── avatar-6.jpeg │ │ ├── avatar-7.jpeg │ │ ├── avatar-small.jpg │ │ ├── avatar.jpg │ │ ├── favicon │ │ │ ├── android-chrome-192x192.png │ │ │ ├── android-chrome-256x256.png │ │ │ ├── apple-touch-icon.png │ │ │ ├── browserconfig.xml │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-32x32.png │ │ │ ├── favicon.ico │ │ │ ├── mstile-150x150.png │ │ │ ├── safari-pinned-tab.svg │ │ │ └── site.webmanifest │ │ ├── project-1.jpg │ │ ├── project-2.jpg │ │ ├── project-3.jpg │ │ ├── project-listing-1.jpg │ │ ├── project-listing-2.jpg │ │ ├── project-listing-3.jpg │ │ ├── project-listing-4.jpg │ │ ├── project-listing-5.jpg │ │ ├── project-listing-6.jpg │ │ ├── project-listing-7.jpg │ │ └── project-listing-8.jpg │ ├── js │ │ ├── components │ │ │ ├── dark-mode.js │ │ │ ├── locomotive-scroll.js │ │ │ ├── swiper.js │ │ │ └── typed.js │ │ ├── misc.js │ │ └── theme.js │ └── scss │ │ ├── abstracts │ │ ├── _css-vars.scss │ │ ├── _mixins.scss │ │ └── _sass-variables.scss │ │ ├── base │ │ └── _base.scss │ │ ├── components │ │ ├── _avatar.scss │ │ ├── _buttons.scss │ │ ├── _components.scss │ │ ├── _forms.scss │ │ ├── _navbar.scss │ │ └── _testimonials.scss │ │ ├── custom.scss │ │ ├── libs.scss │ │ ├── theme.scss │ │ ├── utilities │ │ ├── _backgrounds.scss │ │ ├── _bootstrap-api-utilities.scss │ │ ├── _borders.scss │ │ ├── _text.scss │ │ └── _utilities.scss │ │ └── vendors │ │ ├── _vendors.scss │ │ ├── aos │ │ └── _aos.scss │ │ ├── locomotive-scroll │ │ └── _locomotive-scroll.scss │ │ ├── remixicon │ │ └── _remixicon.scss │ │ └── swiper │ │ └── _swiper.scss ├── data │ ├── config.json │ ├── experience.json │ ├── skills.json │ ├── testimonials-two.json │ ├── testimonials.json │ └── work.json ├── html │ ├── about.html │ ├── contact.html │ ├── index.html │ ├── work-listing.html │ └── work-single.html └── partials │ ├── content │ └── subtitle.html │ ├── footer │ ├── footer.html │ └── scripts.html │ ├── header │ ├── head │ │ └── head.html │ └── navbar │ │ └── navbar.html │ ├── swiper │ ├── swiper-latest-bottom.html │ └── swiper-latest-top.html │ ├── testimonials │ └── testimonial-single.html │ └── widgets │ ├── experience.html │ ├── hero.html │ ├── latest-work.html │ ├── skills.html │ └── testimonials.html └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Compiled source # 2 | ################### 3 | *.com 4 | *.class 5 | *.dll 6 | *.exe 7 | *.o 8 | *.so 9 | 10 | # Packages # 11 | ############ 12 | # it's better to unpack these files and commit the raw source 13 | # git has its own built in compression methods 14 | *.7z 15 | *.dmg 16 | *.gz 17 | *.iso 18 | *.jar 19 | *.rar 20 | *.tar 21 | *.zip 22 | 23 | # Logs and databases # 24 | ###################### 25 | *.log 26 | *.sql 27 | *.sqlite 28 | 29 | # OS generated files # 30 | ###################### 31 | .DS_Store 32 | .DS_Store? 33 | ._* 34 | .Spotlight-V100 35 | .Trashes 36 | ehthumbs.db 37 | Thumbs.db 38 | 39 | # Logs 40 | logs 41 | *.log 42 | npm-debug.log* 43 | yarn-debug.log* 44 | yarn-error.log* 45 | lerna-debug.log* 46 | 47 | # Diagnostic reports (https://nodejs.org/api/report.html) 48 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 49 | 50 | # Runtime data 51 | pids 52 | *.pid 53 | *.seed 54 | *.pid.lock 55 | 56 | # Directory for instrumented libs generated by jscoverage/JSCover 57 | lib-cov 58 | 59 | # Coverage directory used by tools like istanbul 60 | coverage 61 | *.lcov 62 | 63 | # nyc test coverage 64 | .nyc_output 65 | 66 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 67 | .grunt 68 | 69 | # Bower dependency directory (https://bower.io/) 70 | bower_components 71 | 72 | # node-waf configuration 73 | .lock-wscript 74 | 75 | # Compiled binary addons (https://nodejs.org/api/addons.html) 76 | build/Release 77 | 78 | # Dependency directories 79 | node_modules/ 80 | jspm_packages/ 81 | 82 | # TypeScript v1 declaration files 83 | typings/ 84 | 85 | # TypeScript cache 86 | *.tsbuildinfo 87 | 88 | # Optional npm cache directory 89 | .npm 90 | 91 | # Optional eslint cache 92 | .eslintcache 93 | 94 | # Microbundle cache 95 | .rpt2_cache/ 96 | .rts2_cache_cjs/ 97 | .rts2_cache_es/ 98 | .rts2_cache_umd/ 99 | 100 | # Optional REPL history 101 | .node_repl_history 102 | 103 | # Output of 'npm pack' 104 | *.tgz 105 | 106 | # Yarn Integrity file 107 | .yarn-integrity 108 | 109 | # dotenv environment variables file 110 | .env 111 | .env.test 112 | 113 | # parcel-bundler cache (https://parceljs.org/) 114 | .cache 115 | 116 | # Next.js build output 117 | .next 118 | 119 | # Nuxt.js build / generate output 120 | .nuxt 121 | docs 122 | 123 | # don't ignore our src/docs 124 | !src/docs/ 125 | 126 | # Serverless directories 127 | .serverless/ 128 | 129 | # FuseBox cache 130 | .fusebox/ 131 | 132 | # DynamoDB Local files 133 | .dynamodb/ 134 | 135 | # TernJS port file 136 | .tern-port 137 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 PixelRocket 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Folio - Bootstrap 5 HTML Responsive Portfolio Template 2 | 3 | ## Overview 4 | Folio is a responsive HTML Bootstrap 5 template for web developers and designers to showcase their work. 5 | The template uses Locomotive Scroll to animate in sections on scroll, and also comes with light mode/dark mode support. 6 | 7 | View Demo | Download ZIP 8 | 9 | ![Bootstrap 5 Responsive HTML Portfolio Template](https://pixelrocket-public-assets.s3.eu-west-2.amazonaws.com/github-assets/folio-html/home.jpg "folio | Responsive Bootstrap 5 Portfolio Template") 10 | 11 | ## Table of contents 12 | 13 | - [Requirements](#requirements) 14 | - [Quick Start](#quick-start) 15 | - [Template Pages](#template-pages) 16 | - [Demo Link](#demo-link) 17 | - [Template Key Features](#template-key-features) 18 | - [Template File Structure](#template-file-structure) 19 | - [Handlebars](#handlebars) 20 | - [Template JSON Data](#template-json-data) 21 | - [Customise Template Styles](#customise-template-styles) 22 | - [Create New Pages](#create-new-pages) 23 | - [Bootstrap Documentation](#bootstrap-documentation) 24 | - [Credits](#credits) 25 | - [Contact Us](#contact-us) 26 | 27 | 28 | ## Requirements 29 | If you do not intend to work with the template source code (and that means you will not be compiling it or running the Webpack dev server), you do not need to install anything. You can simply navigate to the dist folder and start editing the files. 30 | 31 | Most developers will be editing the source code and will also be running Webpack to recompile the template files. If that's the case, then ensure that you have Node.js installed. [You can download it from here](https://nodejs.org/en/download/) 32 | 33 | 34 | ## Quick Start 35 | - [Download the latest release](https://github.com/PixelRocket-Shop/folio-html-bootstrap/archive/main.zip) OR clone the repo: `git clone https://github.com/PixelRocket-Shop/folio-html-bootstrap.git` 36 | - Install Node.js if you don't already have it on your system. 37 | - Open the project root in your command line. 38 | - run `npm install` in your command line. 39 | - run `npm start` to start Webpack devserver. 40 | - if you want to recompile the template files (which output to the dist folder), run `npm run build` 41 | 42 | 43 | ## Template Pages 44 | The template consists of a single page: 45 | 46 | * Homepage 47 | * About Me 48 | * My Work (Listing Page) 49 | * My Work (Single Page) 50 | * Contact Me 51 | 52 | To keep code repetition to a minimum, we've used Handlebars.js as the templating engine and partials to quickly add the same code to different pages. We also use a Handlebars plugin for JSON data - this allows us to use loops and output a single HTML code block instead of repeating the same HTML. 53 | 54 | 55 | ## Demo Link 56 | [Demo URL](https://folio-html-bootstrap.vercel.app/) 57 | 58 | **Please note that this is an HTML template only. It does not connect to a database, and will not automatically work in a content management system (Wordpress etc). You will need to incorporate our code into your application.** 59 | 60 | 61 | ## Template Key Features 62 | 63 | * Built with Bootstrap 5 64 | * Fully responsive 65 | * Locomotive Scroll Integration 66 | * Light/Dark Mode support 67 | * My experience component 68 | * My skills component 69 | * Client testmonials component 70 | 71 | 72 | ## Template File structure 73 | 📁 dist - Generated version of the template. Go here if you do not want to work with the template source code. But be warned: if you customise anything in this folder directly, and then later recompile the template using webpack, unless you move the dist folder out of the template, your changes will be overridden. 74 | 75 | 📁 node_modules - Directory where NPM installs dependancies. You will not see this folder until you complete the template installation. You do not need to create this folder. 76 | 77 | 📁 src - Template source code. Go here to customise your template. 78 | 79 | 📁 src/assets - Template assets such as CSS, JS, Images etc. 80 | 81 | 📁 src/data - Template JSON Data files. We use these JSON files to make your job easier to insert content into the template. 82 | 83 | 📁 src/html - Template pages. Go here to edit existing pages or add new pages. 84 | 85 | 📁 src/partials - Handlebars partial templates. 86 | 87 | 88 | ## Handlebars 89 | Handlebars is a template engine that allows us to keep our template source code as organised and as clean as possible. It cuts down on code duplication and through the use of helper functions, allows template developers to very quickly output large amounts of data with minimal code. [You can read more about it here](https://handlebarsjs.com). 90 | 91 | 92 | ## Template JSON Data 93 | The Webpack Handlebars plugin that we use comes with a very handy utility that allows us to pass in JSON files as template data. 94 | 95 | Please navigate to: src/data. Here is where our template data JSON files reside. You can edit, remove or add your own to this folder. 96 | 97 | 98 | ## Customise Template Styles 99 | All of the template's source CSS/SASS files are kept inside the template's assets folder. Navigate to src/assets/scss. Open up theme.scss with your editor. 100 | 101 | This is the main entry point for all other SASS/CSS files. 102 | 103 | 104 | ## Create New Pages 105 | To create a new page, navigate in your code editor to: src/html. To make it easier to get the correct HTML in place, clone an existing page. Rename the newly-created file to whatever URL you require. And that's it. You are now free to open the new page with your code editor, make your changes, and then save the file. Quit Webpack devserver and restart it for the page to show up. 106 | 107 | 108 | ## Bootstrap Documentation 109 | Bootstrap already has a comprehensive documentation site that will guide you in setting up and using all default Bootstrap features. Bootstrap 5 is fully integrated to our template's source code. Please refer to Bootstrap's doc site first for any default Bootstrap features: [Visit Bootstrap's Doc Site](https://getbootstrap.com/docs/5.0/getting-started/introduction/) 110 | 111 | 112 | ## Credits 113 | [Bootstrap](https://getbootstrap.com/) 114 | 115 | [Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) 116 | 117 | [Unsplash](https://unsplash.com/) 118 | 119 | [Freepik](https://www.freepik.com/) 120 | 121 | [Swiper.js](https://swiperjs.com/) 122 | 123 | ## Contact Us 124 | You can find our website [here](https://www.pixelrocket.store) or you can email us at support@pixelrocket.store -------------------------------------------------------------------------------- /dist/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 44 | 45 | 46 | Bootstrap 5 HTML Template 47 | 48 | 49 | 50 | 51 | 52 |
53 | 54 | 90 | 91 | 92 |
93 | 94 | 95 |

About Me

96 | 97 |
98 | 99 |
100 | 101 | HTML Bootstrap Template by Pixel Rocket 103 | 104 |
105 | 106 | 107 | 108 |
109 |
110 |
111 |

I'm Jenny Smith, a freelance web developer and designer based in London, United Kingdom.

112 | 113 |

I'm passionate about creating engaging and easy-to-navigate layouts. I love the look of clean lines, sharp contrasts in color schemes or bold graphic assets paired with sophisticated illustrations. 114 | 115 |

As an Ecommerce developer my work is focused on web design; abstract forms make up most projects these days because they're so popular among consumers who want more control over their shopping experience than ever before.

116 |
117 |
118 | Download My CV 119 |
Find Me Online
120 | 126 |
127 |
128 |
129 | 130 |
131 | 132 | 133 |
134 |

Experience

138 |
143 |
144 |

NWD Designs Ltd

145 | (2020 - present) 146 |
147 |
148 |

Technical Lead

149 |

After two years of working in London, I joined the NWD Designs team. Our design group works with clients including Motorola and Nokia who are just some examples; Apple stands out among all others because it had such an impactful brand identity for decades until they rebranded recently.

150 | https://www.nwd.co.uk 151 |
152 |
153 | 154 | 155 |
160 |
161 |

Pinnacle Designs

162 | (2018 - 2020) 163 |
164 |
165 |

Lead Developer

166 |

Looking for a new challenge, I joined Pinnacle Designs. My role focused on helping our customers define their strategic branding needs and requirements to achieve an elegant end result that stands out among competitors' work.

167 | https://www.pinnacle-designs.co.uk 168 |
169 |
170 | 171 | 172 |
177 |
178 |

Super 8

179 | (2016 - 2018) 180 |
181 |
182 |

Senior Developer

183 |

I have always loved the idea of being in charge of a design team, so I joined Super 8 as a lead designer where we worked on amazing campaigns including the branding and advert assets for Facebook's VR arm.

184 | https://www.supereight.co.uk 185 |
186 |
187 | 188 | 189 |
194 |
195 |

Cube Agency

196 | (2014 - 2016) 197 |
198 |
199 |

Graphic Designer

200 |

After finishing my degree in Graphic Design, I joined Cube agency in London in 2014 and worked on projects for companies such as Nestle, Spotify and Red Cabbage.

201 | https://www.cubeagency.co.uk 202 |
203 |
204 | 205 |
206 | 207 | 208 | 209 |
210 |

Skills

214 | 215 |
219 |
220 |
221 |

75%

222 |
223 |
224 |

Javascript

225 |
226 |
227 |
228 |
230 |
231 |
232 |
233 |
234 | 235 | 236 |
240 |
241 |
242 |

95%

243 |
244 |
245 |

PHP

246 |
247 |
248 |
249 |
251 |
252 |
253 |
254 |
255 | 256 | 257 |
261 |
262 |
263 |

65%

264 |
265 |
266 |

HTML

267 |
268 |
269 |
270 |
272 |
273 |
274 |
275 |
276 | 277 | 278 |
282 |
283 |
284 |

35%

285 |
286 |
287 |

CSS

288 |
289 |
290 |
291 |
293 |
294 |
295 |
296 |
297 | 298 | 299 |
303 |
304 |
305 |

98%

306 |
307 |
308 |

GraphQL

309 |
310 |
311 |
312 |
314 |
315 |
316 |
317 |
318 | 319 | 320 |
324 |
325 |
326 |

45%

327 |
328 |
329 |

Python

330 |
331 |
332 |
333 |
335 |
336 |
337 |
338 |
339 | 340 |
341 |
342 | 343 | 344 | 345 |
346 | 347 | 348 | 349 | 350 |
351 |

Ready to discuss your project requirements?

352 | Get In Touch 353 |
354 | 355 | 365 | 366 | 367 |
368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | -------------------------------------------------------------------------------- /dist/assets/css/libs.bundle.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-container-pointer-events{touch-action:pan-y}.swiper-container-pointer-events.swiper-container-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/44*27);height:var(--swiper-navigation-size);margin-top:calc(var(--swiper-navigation-size)*-1/2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:normal;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:"prev"}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:"next"}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#fff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:opacity .3s;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,left .2s}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#fff}.swiper-pagination-black{--swiper-pagination-color:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s linear infinite;box-sizing:border-box;border-radius:50%;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-top:4px solid transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{to{transform:rotate(1turn)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;opacity:.6;z-index:0}.swiper-container-cube .swiper-cube-shadow:before{content:"";background:#000;position:absolute;left:0;top:0;bottom:0;right:0;-webkit-filter:blur(50px);filter:blur(50px)}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}html.has-scroll-smooth{overflow:hidden}html.has-scroll-dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.has-scroll-smooth body{overflow:hidden}.has-scroll-smooth [data-scroll-container]{min-height:100vh}[data-scroll-direction=horizontal] [data-scroll-container]{height:100vh;display:inline-block;white-space:nowrap}[data-scroll-direction=horizontal] [data-scroll-section]{display:inline-block;vertical-align:top;white-space:nowrap;height:100%}.c-scrollbar{position:absolute;right:0;top:0;width:11px;height:100%;transform-origin:center right;transition:transform .3s,opacity .3s;opacity:0}.c-scrollbar:hover{transform:scaleX(1.45)}.c-scrollbar:hover,.has-scroll-dragging .c-scrollbar,.has-scroll-scrolling .c-scrollbar{opacity:1}[data-scroll-direction=horizontal] .c-scrollbar{width:100%;height:10px;top:auto;bottom:0;transform:scaleY(1)}[data-scroll-direction=horizontal] .c-scrollbar:hover{transform:scaleY(1.3)}.c-scrollbar_thumb{position:absolute;top:0;right:0;background-color:#000;opacity:.5;width:7px;border-radius:10px;margin:2px;cursor:-webkit-grab;cursor:grab}.has-scroll-dragging .c-scrollbar_thumb{cursor:-webkit-grabbing;cursor:grabbing}[data-scroll-direction=horizontal] .c-scrollbar_thumb{right:auto;bottom:0} -------------------------------------------------------------------------------- /dist/assets/css/libs.bundle.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack://./node_modules/swiper/swiper-bundle.css","webpack://./node_modules/locomotive-scroll/dist/locomotive-scroll.css"],"names":[],"mappings":"AAYA,WACE,wBAA2B,CAC3B,2sEAA4sE,CAC5sE,eAAgB,CAChB,iBACF,CACA,MACE,4BACF,CACA,kBACE,gBAAiB,CACjB,iBAAkB,CAClB,iBAAkB,CAClB,eAAgB,CAChB,eAAgB,CAChB,SAAU,CAEV,SACF,CACA,2CACE,qBACF,CACA,gBACE,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,SAAU,CACV,YAAa,CACb,6BAA8B,CAC9B,sBACF,CACA,wDAEE,uBACF,CACA,2CACE,cACF,CACA,kDACE,cAAe,CACf,qBACF,CACA,4CACE,mCAAoC,CACpC,aACF,CACA,iCACE,kBACF,CACA,2DACE,kBACF,CACA,cACE,aAAc,CACd,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,6BACF,CACA,8BACE,iBACF,CAEA,wEAEE,WACF,CACA,6CACE,sBAAuB,CACvB,oCACF,CAEA,qBACE,kBACF,CACA,+SAOE,2BACF,CACA,8LAIE,iBAAkB,CAClB,MAAO,CACP,KAAM,CACN,UAAW,CACX,WAAY,CACZ,mBAAoB,CACpB,UACF,CACA,+CACE,mEACF,CACA,gDACE,kEACF,CACA,8CACE,iEACF,CACA,iDACE,mEACF,CAEA,2CACE,aAAc,CACd,oBAAqB,CAErB,uBAEF,CACA,8DACE,YACF,CACA,yDACE,6BACF,CACA,uEACE,4BACF,CACA,qEACE,4BACF,CACA,MACE,6BAIF,CACA,wCAEE,iBAAkB,CAClB,OAAQ,CACR,+CAAoD,CACpD,oCAAqC,CACrC,mDAAwD,CACxD,UAAW,CACX,cAAe,CACf,YAAa,CACb,kBAAmB,CACnB,sBAAuB,CACvB,8DACF,CACA,sFAEE,WAAa,CACb,WAAY,CACZ,mBACF,CACA,oDAEE,wBAAyB,CACzB,uCAAwC,CACxC,6BAA+B,CAC/B,gBAAiB,CACjB,mBAAoB,CACpB,mBAAqB,CACrB,aACF,CACA,8DAEE,SAAU,CACV,UACF,CACA,0EAEE,cACF,CACA,8DAEE,UAAW,CACX,SACF,CACA,0EAEE,cACF,CACA,gFAEE,8BACF,CACA,gFAEE,8BACF,CACA,oBACE,YACF,CAMA,mBACE,iBAAkB,CAClB,iBAAkB,CAClB,sBAAyB,CACzB,uBAA+B,CAC/B,UACF,CACA,4CACE,SACF,CAEA,8GAGE,WAAY,CACZ,MAAO,CACP,UACF,CAEA,mCACE,eAAgB,CAChB,WACF,CACA,6DACE,oBAAsB,CACtB,iBACF,CAIA,6IACE,kBACF,CACA,yEACE,oBACF,CACA,8EACE,oBACF,CACA,yEACE,oBACF,CACA,8EACE,oBACF,CACA,0BACE,SAAU,CACV,UAAW,CACX,oBAAqB,CACrB,iBAAkB,CAClB,eAAgB,CAChB,UACF,CACA,gCACE,WAAY,CACZ,QAAS,CACT,SAAU,CACV,eAAgB,CAChB,uBAAwB,CACrB,oBAAqB,CAChB,eACV,CACA,uDACE,cACF,CACA,iCACE,SAAU,CACV,mEACF,CACA,sDACE,UAAW,CACX,OAAQ,CACR,+BACF,CACA,gFACE,YAAa,CACb,aACF,CACA,wFACE,OAAQ,CACR,0BAA2B,CAC3B,SACF,CACA,kHACE,oBAAqB,CACrB,gCACF,CACA,kFACE,YACF,CACA,0FACE,QAAS,CACT,0BAA2B,CAC3B,kBACF,CACA,oHACE,iCACF,CACA,+GACE,kCACF,CAEA,+BACE,0BAA+B,CAC/B,iBACF,CACA,mEACE,mEAAqE,CACrE,iBAAkB,CAClB,MAAO,CACP,KAAM,CACN,UAAW,CACX,WAAY,CACZ,kBAAmB,CACnB,yBACF,CACA,yFACE,0BACF,CACA,6JAEE,UAAW,CACX,UAAW,CACX,MAAO,CACP,KACF,CACA,6JAEE,SAAU,CACV,WAAY,CACZ,MAAO,CACP,KACF,CACA,yBACE,8BACF,CACA,yBACE,8BACF,CACA,wBACE,YACF,CAEA,kBACE,kBAAmB,CACnB,iBAAkB,CAClB,qBAAsB,CACtB,yBACF,CACA,+CACE,iBAAkB,CAClB,OAAQ,CACR,UAAW,CACX,UAAW,CACX,UAAW,CACX,SACF,CACA,6CACE,iBAAkB,CAClB,SAAU,CACV,MAAO,CACP,UAAW,CACX,SAAU,CACV,UACF,CACA,uBACE,WAAY,CACZ,UAAW,CACX,iBAAkB,CAClB,yBAA8B,CAC9B,kBAAmB,CACnB,MAAO,CACP,KACF,CACA,8BACE,WACF,CACA,uBACE,YACF,CACA,uBACE,UAAW,CACX,WAAY,CACZ,YAAa,CACb,sBAAuB,CACvB,kBAAmB,CACnB,iBACF,CACA,oFAGE,cAAe,CACf,eAAgB,CAChB,kBACF,CACA,qBACE,WACF,CAOA,uBACE,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,QAAS,CACT,OAAQ,CACR,iBAAkB,CAClB,gBAAiB,CACjB,UAAW,CACX,oBAAqB,CACrB,kDAAmD,CACnD,qBAAsB,CAEtB,iBAAkB,CAClB,wEAA6B,CAA7B,gCACF,CACA,6BACE,6BACF,CACA,6BACE,6BACF,CACA,iCACE,GACE,uBACF,CACF,CAEA,uCACE,iBAAkB,CAClB,MAAO,CACP,KAAM,CACN,mBAAoB,CACpB,SAAU,CACV,aACF,CACA,gEACE,mCACF,CACA,qCACE,mBAAoB,CACpB,2BACF,CACA,mDACE,mBACF,CACA,6GAEE,mBACF,CACA,uBACE,gBACF,CACA,qCACE,mBAAoB,CACpB,kCAAmC,CAC3B,0BAA2B,CACnC,SAAU,CACV,iBAAkB,CAClB,oBAAqB,CACrB,UAAW,CACX,WACF,CACA,mDACE,mBACF,CACA,0DACE,uBACF,CACA,6GAEE,mBACF,CACA,wLAIE,mBAAoB,CACpB,kBACF,CACA,sMAIE,SAAU,CACV,kCAAmC,CAC3B,0BACV,CACA,2CACE,iBAAkB,CAClB,MAAO,CACP,QAAW,CACX,UAAW,CACX,WAAY,CACZ,UAAY,CACZ,SACF,CACA,kDACE,UAAW,CACX,eAAgB,CAChB,iBAAkB,CAClB,MAAO,CACP,KAAM,CACN,QAAS,CACT,OAAQ,CACR,yBAA0B,CAC1B,iBACF,CACA,uBACE,gBACF,CACA,qCACE,mBAAoB,CACpB,kCAAmC,CAC3B,0BAA2B,CACnC,SACF,CACA,mDACE,mBACF,CACA,6GAEE,mBACF,CACA,sMAIE,SAAU,CACV,kCAAmC,CAC3B,0BACV,CChiBA,uBACE,eAAkB,CAEpB,yBACE,wBAAyB,CACzB,qBAAsB,CACtB,oBAAqB,CACrB,gBAAmB,CAErB,wBACE,eAAkB,CAEpB,2CACE,gBAAmB,CAErB,2DACE,YAAa,CACb,oBAAqB,CACrB,kBAAqB,CAEvB,yDACE,oBAAqB,CACrB,kBAAmB,CACnB,kBAAmB,CACnB,WAAc,CAEhB,aACE,iBAAkB,CAClB,OAAQ,CACR,KAAM,CACN,UAAW,CACX,WAAY,CACZ,6BAA8B,CAC9B,oCAAwC,CACxC,SAAY,CACZ,mBACE,sBAAyB,CAC3B,wFACE,SAAY,CACd,gDACE,UAAW,CACX,WAAY,CACZ,QAAS,CACT,QAAS,CACT,mBAAsB,CACtB,sDACE,qBAAwB,CAE9B,mBACE,iBAAkB,CAClB,KAAM,CACN,OAAQ,CACR,qBAAuB,CACvB,UAAY,CACZ,SAAU,CACV,kBAAmB,CACnB,UAAW,CACX,mBAAoB,CACpB,WAAc,CACd,wCACE,uBAAwB,CACxB,eAAkB,CACpB,sDACE,UAAW,CACX,QAAW","file":"libs.bundle.css","sourcesContent":["/**\n * Swiper 6.4.11\n * Most modern mobile touch slider and framework with hardware accelerated transitions\n * https://swiperjs.com\n *\n * Copyright 2014-2021 Vladimir Kharlampidi\n *\n * Released under the MIT License\n *\n * Released on: February 6, 2021\n */\n\n@font-face {\n font-family: 'swiper-icons';\n src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');\n font-weight: 400;\n font-style: normal;\n}\n:root {\n --swiper-theme-color: #007aff;\n}\n.swiper-container {\n margin-left: auto;\n margin-right: auto;\n position: relative;\n overflow: hidden;\n list-style: none;\n padding: 0;\n /* Fix of Webkit flickering */\n z-index: 1;\n}\n.swiper-container-vertical > .swiper-wrapper {\n flex-direction: column;\n}\n.swiper-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1;\n display: flex;\n transition-property: transform;\n box-sizing: content-box;\n}\n.swiper-container-android .swiper-slide,\n.swiper-wrapper {\n transform: translate3d(0px, 0, 0);\n}\n.swiper-container-multirow > .swiper-wrapper {\n flex-wrap: wrap;\n}\n.swiper-container-multirow-column > .swiper-wrapper {\n flex-wrap: wrap;\n flex-direction: column;\n}\n.swiper-container-free-mode > .swiper-wrapper {\n transition-timing-function: ease-out;\n margin: 0 auto;\n}\n.swiper-container-pointer-events {\n touch-action: pan-y;\n}\n.swiper-container-pointer-events.swiper-container-vertical {\n touch-action: pan-x;\n}\n.swiper-slide {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n}\n.swiper-slide-invisible-blank {\n visibility: hidden;\n}\n/* Auto Height */\n.swiper-container-autoheight,\n.swiper-container-autoheight .swiper-slide {\n height: auto;\n}\n.swiper-container-autoheight .swiper-wrapper {\n align-items: flex-start;\n transition-property: transform, height;\n}\n/* 3D Effects */\n.swiper-container-3d {\n perspective: 1200px;\n}\n.swiper-container-3d .swiper-wrapper,\n.swiper-container-3d .swiper-slide,\n.swiper-container-3d .swiper-slide-shadow-left,\n.swiper-container-3d .swiper-slide-shadow-right,\n.swiper-container-3d .swiper-slide-shadow-top,\n.swiper-container-3d .swiper-slide-shadow-bottom,\n.swiper-container-3d .swiper-cube-shadow {\n transform-style: preserve-3d;\n}\n.swiper-container-3d .swiper-slide-shadow-left,\n.swiper-container-3d .swiper-slide-shadow-right,\n.swiper-container-3d .swiper-slide-shadow-top,\n.swiper-container-3d .swiper-slide-shadow-bottom {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 10;\n}\n.swiper-container-3d .swiper-slide-shadow-left {\n background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.swiper-container-3d .swiper-slide-shadow-right {\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.swiper-container-3d .swiper-slide-shadow-top {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.swiper-container-3d .swiper-slide-shadow-bottom {\n background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n/* CSS Mode */\n.swiper-container-css-mode > .swiper-wrapper {\n overflow: auto;\n scrollbar-width: none;\n /* For Firefox */\n -ms-overflow-style: none;\n /* For Internet Explorer and Edge */\n}\n.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {\n display: none;\n}\n.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {\n scroll-snap-align: start start;\n}\n.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {\n scroll-snap-type: x mandatory;\n}\n.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {\n scroll-snap-type: y mandatory;\n}\n:root {\n --swiper-navigation-size: 44px;\n /*\n --swiper-navigation-color: var(--swiper-theme-color);\n */\n}\n.swiper-button-prev,\n.swiper-button-next {\n position: absolute;\n top: 50%;\n width: calc(var(--swiper-navigation-size) / 44 * 27);\n height: var(--swiper-navigation-size);\n margin-top: calc(-1 * var(--swiper-navigation-size) / 2);\n z-index: 10;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--swiper-navigation-color, var(--swiper-theme-color));\n}\n.swiper-button-prev.swiper-button-disabled,\n.swiper-button-next.swiper-button-disabled {\n opacity: 0.35;\n cursor: auto;\n pointer-events: none;\n}\n.swiper-button-prev:after,\n.swiper-button-next:after {\n font-family: swiper-icons;\n font-size: var(--swiper-navigation-size);\n text-transform: none !important;\n letter-spacing: 0;\n text-transform: none;\n font-variant: initial;\n line-height: 1;\n}\n.swiper-button-prev,\n.swiper-container-rtl .swiper-button-next {\n left: 10px;\n right: auto;\n}\n.swiper-button-prev:after,\n.swiper-container-rtl .swiper-button-next:after {\n content: 'prev';\n}\n.swiper-button-next,\n.swiper-container-rtl .swiper-button-prev {\n right: 10px;\n left: auto;\n}\n.swiper-button-next:after,\n.swiper-container-rtl .swiper-button-prev:after {\n content: 'next';\n}\n.swiper-button-prev.swiper-button-white,\n.swiper-button-next.swiper-button-white {\n --swiper-navigation-color: #ffffff;\n}\n.swiper-button-prev.swiper-button-black,\n.swiper-button-next.swiper-button-black {\n --swiper-navigation-color: #000000;\n}\n.swiper-button-lock {\n display: none;\n}\n:root {\n /*\n --swiper-pagination-color: var(--swiper-theme-color);\n */\n}\n.swiper-pagination {\n position: absolute;\n text-align: center;\n transition: 300ms opacity;\n transform: translate3d(0, 0, 0);\n z-index: 10;\n}\n.swiper-pagination.swiper-pagination-hidden {\n opacity: 0;\n}\n/* Common Styles */\n.swiper-pagination-fraction,\n.swiper-pagination-custom,\n.swiper-container-horizontal > .swiper-pagination-bullets {\n bottom: 10px;\n left: 0;\n width: 100%;\n}\n/* Bullets */\n.swiper-pagination-bullets-dynamic {\n overflow: hidden;\n font-size: 0;\n}\n.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n transform: scale(0.33);\n position: relative;\n}\n.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {\n transform: scale(1);\n}\n.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {\n transform: scale(1);\n}\n.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {\n transform: scale(0.66);\n}\n.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {\n transform: scale(0.33);\n}\n.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {\n transform: scale(0.66);\n}\n.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {\n transform: scale(0.33);\n}\n.swiper-pagination-bullet {\n width: 8px;\n height: 8px;\n display: inline-block;\n border-radius: 50%;\n background: #000;\n opacity: 0.2;\n}\nbutton.swiper-pagination-bullet {\n border: none;\n margin: 0;\n padding: 0;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.swiper-pagination-clickable .swiper-pagination-bullet {\n cursor: pointer;\n}\n.swiper-pagination-bullet-active {\n opacity: 1;\n background: var(--swiper-pagination-color, var(--swiper-theme-color));\n}\n.swiper-container-vertical > .swiper-pagination-bullets {\n right: 10px;\n top: 50%;\n transform: translate3d(0px, -50%, 0);\n}\n.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {\n margin: 6px 0;\n display: block;\n}\n.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n top: 50%;\n transform: translateY(-50%);\n width: 8px;\n}\n.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n display: inline-block;\n transition: 200ms transform, 200ms top;\n}\n.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {\n margin: 0 4px;\n}\n.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n left: 50%;\n transform: translateX(-50%);\n white-space: nowrap;\n}\n.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n transition: 200ms transform, 200ms left;\n}\n.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n transition: 200ms transform, 200ms right;\n}\n/* Progress */\n.swiper-pagination-progressbar {\n background: rgba(0, 0, 0, 0.25);\n position: absolute;\n}\n.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n background: var(--swiper-pagination-color, var(--swiper-theme-color));\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n transform: scale(0);\n transform-origin: left top;\n}\n.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n transform-origin: right top;\n}\n.swiper-container-horizontal > .swiper-pagination-progressbar,\n.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {\n width: 100%;\n height: 4px;\n left: 0;\n top: 0;\n}\n.swiper-container-vertical > .swiper-pagination-progressbar,\n.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {\n width: 4px;\n height: 100%;\n left: 0;\n top: 0;\n}\n.swiper-pagination-white {\n --swiper-pagination-color: #ffffff;\n}\n.swiper-pagination-black {\n --swiper-pagination-color: #000000;\n}\n.swiper-pagination-lock {\n display: none;\n}\n/* Scrollbar */\n.swiper-scrollbar {\n border-radius: 10px;\n position: relative;\n -ms-touch-action: none;\n background: rgba(0, 0, 0, 0.1);\n}\n.swiper-container-horizontal > .swiper-scrollbar {\n position: absolute;\n left: 1%;\n bottom: 3px;\n z-index: 50;\n height: 5px;\n width: 98%;\n}\n.swiper-container-vertical > .swiper-scrollbar {\n position: absolute;\n right: 3px;\n top: 1%;\n z-index: 50;\n width: 5px;\n height: 98%;\n}\n.swiper-scrollbar-drag {\n height: 100%;\n width: 100%;\n position: relative;\n background: rgba(0, 0, 0, 0.5);\n border-radius: 10px;\n left: 0;\n top: 0;\n}\n.swiper-scrollbar-cursor-drag {\n cursor: move;\n}\n.swiper-scrollbar-lock {\n display: none;\n}\n.swiper-zoom-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n.swiper-zoom-container > img,\n.swiper-zoom-container > svg,\n.swiper-zoom-container > canvas {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n}\n.swiper-slide-zoomed {\n cursor: move;\n}\n/* Preloader */\n:root {\n /*\n --swiper-preloader-color: var(--swiper-theme-color);\n */\n}\n.swiper-lazy-preloader {\n width: 42px;\n height: 42px;\n position: absolute;\n left: 50%;\n top: 50%;\n margin-left: -21px;\n margin-top: -21px;\n z-index: 10;\n transform-origin: 50%;\n animation: swiper-preloader-spin 1s infinite linear;\n box-sizing: border-box;\n border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));\n border-radius: 50%;\n border-top-color: transparent;\n}\n.swiper-lazy-preloader-white {\n --swiper-preloader-color: #fff;\n}\n.swiper-lazy-preloader-black {\n --swiper-preloader-color: #000;\n}\n@keyframes swiper-preloader-spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n/* a11y */\n.swiper-container .swiper-notification {\n position: absolute;\n left: 0;\n top: 0;\n pointer-events: none;\n opacity: 0;\n z-index: -1000;\n}\n.swiper-container-fade.swiper-container-free-mode .swiper-slide {\n transition-timing-function: ease-out;\n}\n.swiper-container-fade .swiper-slide {\n pointer-events: none;\n transition-property: opacity;\n}\n.swiper-container-fade .swiper-slide .swiper-slide {\n pointer-events: none;\n}\n.swiper-container-fade .swiper-slide-active,\n.swiper-container-fade .swiper-slide-active .swiper-slide-active {\n pointer-events: auto;\n}\n.swiper-container-cube {\n overflow: visible;\n}\n.swiper-container-cube .swiper-slide {\n pointer-events: none;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n z-index: 1;\n visibility: hidden;\n transform-origin: 0 0;\n width: 100%;\n height: 100%;\n}\n.swiper-container-cube .swiper-slide .swiper-slide {\n pointer-events: none;\n}\n.swiper-container-cube.swiper-container-rtl .swiper-slide {\n transform-origin: 100% 0;\n}\n.swiper-container-cube .swiper-slide-active,\n.swiper-container-cube .swiper-slide-active .swiper-slide-active {\n pointer-events: auto;\n}\n.swiper-container-cube .swiper-slide-active,\n.swiper-container-cube .swiper-slide-next,\n.swiper-container-cube .swiper-slide-prev,\n.swiper-container-cube .swiper-slide-next + .swiper-slide {\n pointer-events: auto;\n visibility: visible;\n}\n.swiper-container-cube .swiper-slide-shadow-top,\n.swiper-container-cube .swiper-slide-shadow-bottom,\n.swiper-container-cube .swiper-slide-shadow-left,\n.swiper-container-cube .swiper-slide-shadow-right {\n z-index: 0;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n}\n.swiper-container-cube .swiper-cube-shadow {\n position: absolute;\n left: 0;\n bottom: 0px;\n width: 100%;\n height: 100%;\n opacity: 0.6;\n z-index: 0;\n}\n.swiper-container-cube .swiper-cube-shadow:before {\n content: '';\n background: #000;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n -webkit-filter: blur(50px);\n filter: blur(50px);\n}\n.swiper-container-flip {\n overflow: visible;\n}\n.swiper-container-flip .swiper-slide {\n pointer-events: none;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n z-index: 1;\n}\n.swiper-container-flip .swiper-slide .swiper-slide {\n pointer-events: none;\n}\n.swiper-container-flip .swiper-slide-active,\n.swiper-container-flip .swiper-slide-active .swiper-slide-active {\n pointer-events: auto;\n}\n.swiper-container-flip .swiper-slide-shadow-top,\n.swiper-container-flip .swiper-slide-shadow-bottom,\n.swiper-container-flip .swiper-slide-shadow-left,\n.swiper-container-flip .swiper-slide-shadow-right {\n z-index: 0;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n}\n","/*! locomotive-scroll v4.1.2 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */\nhtml.has-scroll-smooth {\n overflow: hidden; }\n\nhtml.has-scroll-dragging {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n\n.has-scroll-smooth body {\n overflow: hidden; }\n\n.has-scroll-smooth [data-scroll-container] {\n min-height: 100vh; }\n\n[data-scroll-direction=\"horizontal\"] [data-scroll-container] {\n height: 100vh;\n display: inline-block;\n white-space: nowrap; }\n\n[data-scroll-direction=\"horizontal\"] [data-scroll-section] {\n display: inline-block;\n vertical-align: top;\n white-space: nowrap;\n height: 100%; }\n\n.c-scrollbar {\n position: absolute;\n right: 0;\n top: 0;\n width: 11px;\n height: 100%;\n transform-origin: center right;\n transition: transform 0.3s, opacity 0.3s;\n opacity: 0; }\n .c-scrollbar:hover {\n transform: scaleX(1.45); }\n .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {\n opacity: 1; }\n [data-scroll-direction=\"horizontal\"] .c-scrollbar {\n width: 100%;\n height: 10px;\n top: auto;\n bottom: 0;\n transform: scaleY(1); }\n [data-scroll-direction=\"horizontal\"] .c-scrollbar:hover {\n transform: scaleY(1.3); }\n\n.c-scrollbar_thumb {\n position: absolute;\n top: 0;\n right: 0;\n background-color: black;\n opacity: 0.5;\n width: 7px;\n border-radius: 10px;\n margin: 2px;\n cursor: -webkit-grab;\n cursor: grab; }\n .has-scroll-dragging .c-scrollbar_thumb {\n cursor: -webkit-grabbing;\n cursor: grabbing; }\n [data-scroll-direction=\"horizontal\"] .c-scrollbar_thumb {\n right: auto;\n bottom: 0; }\n"]} -------------------------------------------------------------------------------- /dist/assets/fonts/remixicon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/fonts/remixicon.woff -------------------------------------------------------------------------------- /dist/assets/images/avatar-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/avatar-1.jpeg -------------------------------------------------------------------------------- /dist/assets/images/avatar-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/avatar-2.jpeg -------------------------------------------------------------------------------- /dist/assets/images/avatar-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/avatar-3.jpeg -------------------------------------------------------------------------------- /dist/assets/images/avatar-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/avatar-4.jpeg -------------------------------------------------------------------------------- /dist/assets/images/avatar-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/avatar-5.jpeg -------------------------------------------------------------------------------- /dist/assets/images/avatar-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/avatar-6.jpeg -------------------------------------------------------------------------------- /dist/assets/images/avatar-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/avatar-7.jpeg -------------------------------------------------------------------------------- /dist/assets/images/avatar-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/avatar-small.jpg -------------------------------------------------------------------------------- /dist/assets/images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/avatar.jpg -------------------------------------------------------------------------------- /dist/assets/images/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /dist/assets/images/favicon/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/favicon/android-chrome-256x256.png -------------------------------------------------------------------------------- /dist/assets/images/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /dist/assets/images/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /dist/assets/images/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /dist/assets/images/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /dist/assets/images/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/favicon/favicon.ico -------------------------------------------------------------------------------- /dist/assets/images/favicon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/favicon/mstile-150x150.png -------------------------------------------------------------------------------- /dist/assets/images/favicon/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017 9 | 10 | 12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /dist/assets/images/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-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /dist/assets/images/project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/project-1.jpg -------------------------------------------------------------------------------- /dist/assets/images/project-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/project-2.jpg -------------------------------------------------------------------------------- /dist/assets/images/project-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/project-3.jpg -------------------------------------------------------------------------------- /dist/assets/images/project-listing-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/project-listing-1.jpg -------------------------------------------------------------------------------- /dist/assets/images/project-listing-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/project-listing-2.jpg -------------------------------------------------------------------------------- /dist/assets/images/project-listing-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/project-listing-3.jpg -------------------------------------------------------------------------------- /dist/assets/images/project-listing-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/project-listing-4.jpg -------------------------------------------------------------------------------- /dist/assets/images/project-listing-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/project-listing-5.jpg -------------------------------------------------------------------------------- /dist/assets/images/project-listing-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/project-listing-6.jpg -------------------------------------------------------------------------------- /dist/assets/images/project-listing-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/project-listing-7.jpg -------------------------------------------------------------------------------- /dist/assets/images/project-listing-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/dist/assets/images/project-listing-8.jpg -------------------------------------------------------------------------------- /dist/assets/js/theme.bundle.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(t){for(var o,i,c=t[0],s=t[1],d=t[2],u=0,p=[];u{e.addEventListener("click",(function(){t("light"===n()?{type:"dark"}:{})}))}),function(){const e=n();t(e?{type:e}:{})}()}()},,,function(e,t){window.addEventListener("load",(function(){document.body.classList.add("page-loaded")}))},function(e,t,n){},,function(e,t,n){"use strict";n.r(t);n(14),n(9);var o=n(3),r=n(4),a=n.n(r);!function(){const e=document.querySelector("[data-scroll-container]"),t=new o.a({el:e,smooth:!0,offset:["17.5%"],repeat:!0,class:"animate",smartphone:{smooth:!0},tablet:{smooth:!0}});window.addEventListener("resize",()=>{t.update()}),a()(e,{background:!0},()=>{t.update()})}();var i=n(30),c=n(19),s=n(20),d=n(21),l=n(22),u=n(23),p=n(24),f=n(25),w=n(26),y=n(27),m=n(28),h=n(29);i.a.use([c.a,s.a,d.a,l.a,u.a,p.a,f.a,w.a,y.a,m.a,h.a]),document.addEventListener("DOMContentLoaded",()=>{(document.querySelectorAll("[data-swiper]")||[]).forEach(e=>{let t=e.dataset&&e.dataset.options?JSON.parse(e.dataset.options):{};new i.a(e,t)});var e=new i.a(".swiper-linked-top",{spaceBetween:23,breakpoints:{300:{slidesPerView:2},999:{slidesPerView:3},1024:{slidesPerView:4}},navigation:{nextEl:".swiper-next",prevEl:".swiper-prev"}});new i.a(".swiper-linked-bottom",{spaceBetween:0,slidesPerView:1,parallax:!0,thumbs:{swiper:e},effect:"fade",fadeEffect:{crossFade:!0}})});var b=n(5),v=n.n(b);(document.querySelectorAll("[data-typed]")||[]).forEach(e=>{const t={typeSpeed:50,backSpeed:35,backDelay:1e3,loop:!0,...e.dataset.typed?JSON.parse(e.dataset.typed):{}};new v.a(e,t)});n(12)}]); -------------------------------------------------------------------------------- /dist/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 44 | 45 | 46 | Bootstrap 5 HTML Template 47 | 48 | 49 | 50 | 51 | 52 |
53 | 54 | 90 | 91 | 92 |
93 | 94 | 95 |
96 |
Facebook 98 | · Twitter · Github
100 | 101 |

Let's work together on your next project

102 | 103 |

Email me

104 | hello@jenny.smith 105 | 106 | 107 |

Call me

108 | +44 (0)208 334 4567 109 | 110 |

Send Me A Message

111 | 112 | 113 |
114 |
115 | 116 |
117 |
118 | 119 |
120 | 121 | 122 |
123 | 124 | 125 | 126 |
127 | 128 | 129 |
130 | 131 | 132 | 133 |
134 | 135 | 136 |
137 | 138 | 139 | 140 |
141 | 142 | 144 |
145 | 146 | 147 | 148 |
149 | 150 |
151 |
152 | 153 | 154 |
155 |
156 | 157 | 158 |
159 |
160 | 161 | 162 |
163 |
164 | 165 | 166 |
167 |
168 | 169 | 170 |
171 |
172 | 173 | 174 |
175 |
176 |
177 | 178 | 179 | 180 |
181 | 182 | 184 |
185 | 186 | 187 | 188 |
189 | 190 |
191 | 192 |
193 |
194 | 195 | 196 |
197 |
198 | 199 |
200 | 201 | 202 |
203 | 204 | 205 | 206 | 207 | 208 |
209 |
210 |

All rights reserved. © Jenny Smith 2021. Template created by Pixel Rocket

211 |
    212 |
    • 213 |
    • 214 |
    • 215 |
216 |
217 |
218 | 219 | 220 |
221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | -------------------------------------------------------------------------------- /dist/work-listing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 44 | 45 | 46 | Bootstrap 5 HTML Template 47 | 48 | 49 | 50 | 51 | 52 |
53 | 54 | 90 | 91 | 92 |
93 | 94 | 95 |

My Work

96 | 97 |
99 | 100 |
105 |
106 | 107 | 108 | 109 | 110 | 111 |

Ecommerce · Shopify

112 |

Shopify Fashion Store

113 |

Design and development of a custom Shopify Ecommerce platform for a fashion retailer.

114 | View Project 115 |
116 |
117 | 118 | 119 |
124 |
125 | 126 | 127 | 128 | 129 | 130 |

Ecommerce · Magento

131 |

Magento Furniture Store

132 |

Design and development of a custom Magento Ecommerce platform for a furniture retailer.

133 | View Project 134 |
135 |
136 | 137 | 138 |
143 |
144 | 145 | 146 | 147 | 148 | 149 |

Ecommerce · Wordpress

150 |

Wordpress Grocery Store

151 |

Design and development of a WooCommerce Ecommerce platform for a grocery platform.

152 | View Project 153 |
154 |
155 | 156 | 157 |
162 |
163 | 164 | 165 | 166 | 167 | 168 |

Mobile · React Native

169 |

Messaging App

170 |

Creation of a custom React Native messaging app for a messaging SAAS startup.

171 | View Project 172 |
173 |
174 | 175 | 176 |
181 |
182 | 183 | 184 | 185 | 186 | 187 |

Ecommerce · Shopify

188 |

Shopify Online Store

189 |

Design and development of a custom Shopify Ecommerce platform for a car retailer.

190 | View Project 191 |
192 |
193 | 194 | 195 |
200 |
201 | 202 | 203 | 204 | 205 | 206 |

Ecommerce · Magento

207 |

Magento Online Store

208 |

Design and development of a custom Magento Ecommerce platform for a pet food retailer.

209 | View Project 210 |
211 |
212 | 213 | 214 |
219 |
220 | 221 | 222 | 223 | 224 | 225 |

Ecommerce · Wordpress

226 |

Web Application

227 |

Design and development of a custom WooCommerce Ecommerce platform for a furniture retailer.

228 | View Project 229 |
230 |
231 | 232 | 233 |
238 |
239 | 240 | 241 | 242 | 243 | 244 |

Ecommerce · Shopify

245 |

Ecommerce Marketing

246 |

Design and development of a custom Shopify Ecommerce platform for a fashion retailer.

247 | View Project 248 |
249 |
250 | 251 |
252 | 253 | 254 |
255 | 256 | 257 | 258 | 259 |
260 |

Ready to discuss your project requirements?

261 | Get In Touch 262 |
263 | 264 |
265 |
266 |

All rights reserved. © Jenny Smith 2021. Template created by Pixel Rocket

267 |
    268 |
    • 269 |
    • 270 |
    • 271 |
272 |
273 |
274 | 275 | 276 |
277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | -------------------------------------------------------------------------------- /dist/work-single.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 44 | 45 | 46 | Bootstrap 5 HTML Template 47 | 48 | 49 | 50 | 51 | 52 |
53 | 54 | 90 | 91 | 92 |
93 | 94 | 95 | 96 |
97 |

Shopify Online Store

98 |

Ecommerce · Mobile App

99 |

Design and build of a Ecommerce platform.

100 |
101 | 102 | 103 | 104 |
105 | 106 | 107 | 108 | 109 |
110 |
112 |
113 |

The Client

114 |
115 |
116 |

Heritage Furniture

117 |

Heritage Furniture is a family-owned business located in Nottingham, United Kingdom. They 118 | have 12 locations throughout the UK and have been online since 2007.

119 |
120 |
121 |

The Project

122 |
123 |
124 |

The current Heritage Ecommerce platform ran on OS Commerce. I migrated the existing sales 125 | orders and customer data to our new Shopify platform. I designed a new interface using the 126 | updating branding supplied by Heritage's in-house design team.

127 |

I also designed and built a custom React Native application that used Shopify's API to handle 128 | online sales and integrated with Heritage's new Ecommerce website to allow customers to 129 | place new orders and view previous orders through the new app.

130 | View Website 131 |
132 |
133 |
134 | 135 | 136 | 137 |
138 | 139 | 140 | 141 |
142 |
143 |
144 |

What I Delivered

145 |
146 |
147 |
    148 |
  • React Native mobile application
    • 149 |
  • Shopify Ecommerce platform
    • 150 |
  • Data transfer
    • 151 |
  • Website hosting
    • 152 |
153 |
154 |
155 |

My Services

156 |
157 |
158 |
    159 |
  • UX and UI Design
    • 160 |
  • Solution architecture
    • 161 |
  • Application development
    • 162 |
  • Marketing strategy
    • 163 |
164 |
165 |
166 |
167 | 168 | 169 | 170 |
171 |
172 |
176 | " 177 |

178 | Jenny has excellent software intuition and was able to quickly understand our business 179 | requirements. She did a fantastic job with the redesign of our website and we couldn't be 180 | happier! 181 |

182 |

John Bridges

183 |

CEO, Heritage Furniture

184 |
185 |
189 | 190 | HTML Bootstrap Template by Pixel Rocket 192 | 193 |
194 |
195 |
196 | 197 | 198 | 199 | 200 |
201 | 202 | 203 | 204 | 205 |
206 |

Ready to discuss your project requirements?

207 | Get In Touch 208 |
209 | 210 |
211 |
212 |

All rights reserved. © Jenny Smith 2021. Template created by Pixel Rocket

213 |
    214 |
    • 215 |
    • 216 |
    • 217 |
218 |
219 |
220 | 221 | 222 |
223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "folio", 3 | "version": "1.0.0", 4 | "description": "Bootstrap HTML Template created by Pixel Rocket", 5 | "scripts": { 6 | "start": "webpack-dev-server --open", 7 | "build": "del-cli dist && webpack -p", 8 | "build-docs": "del-cli docs && webpack --config ./webpack.config.docs.js -p" 9 | }, 10 | "keywords": [], 11 | "author": "PixelRocket", 12 | "license": "MIT", 13 | "devDependencies": { 14 | "@babel/core": "^7.12.10", 15 | "@babel/plugin-syntax-dynamic-import": "^7.8.3", 16 | "@babel/preset-env": "^7.12.11", 17 | "autoprefixer": "^9.0.0", 18 | "babel-loader": "^8.2.2", 19 | "babel-minify-webpack-plugin": "^0.3.1", 20 | "copy-webpack-plugin": "^6.0.3", 21 | "css-loader": "^5.0.1", 22 | "css-minimizer-webpack-plugin": "^1.2.0", 23 | "cssnano": "^4.1.10", 24 | "del-cli": "^3.0.1", 25 | "file-loader": "^6.2.0", 26 | "glob-all": "^3.2.1", 27 | "handlebars-webpack-plugin": "^2.2.1", 28 | "mini-css-extract-plugin": "^0.8.0", 29 | "optimize-css-assets-webpack-plugin": "^5.0.3", 30 | "postcss-loader": "^4.1.0", 31 | "sass": "^1.32.4", 32 | "sass-loader": "^10.1.1", 33 | "style-loader": "^2.0.0", 34 | "webpack": "^4.44.2", 35 | "webpack-cli": "^3.3.12", 36 | "webpack-dev-server": "^3.11.0", 37 | "webpack-fix-style-only-entries": "^0.5.1", 38 | "webpack-merge": "^4.2.2" 39 | }, 40 | "dependencies": { 41 | "@popperjs/core": "^2.5.4", 42 | "bootstrap": "^5.1.3", 43 | "imagesloaded": "^4.1.4", 44 | "locomotive-scroll": "^4.1.3", 45 | "swiper": "^6.2.0", 46 | "typed.js": "^2.0.12" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | cssnano: {} 5 | } 6 | }; -------------------------------------------------------------------------------- /src/assets/fonts/remixicon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/fonts/remixicon.woff -------------------------------------------------------------------------------- /src/assets/images/avatar-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/avatar-1.jpeg -------------------------------------------------------------------------------- /src/assets/images/avatar-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/avatar-2.jpeg -------------------------------------------------------------------------------- /src/assets/images/avatar-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/avatar-3.jpeg -------------------------------------------------------------------------------- /src/assets/images/avatar-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/avatar-4.jpeg -------------------------------------------------------------------------------- /src/assets/images/avatar-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/avatar-5.jpeg -------------------------------------------------------------------------------- /src/assets/images/avatar-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/avatar-6.jpeg -------------------------------------------------------------------------------- /src/assets/images/avatar-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/avatar-7.jpeg -------------------------------------------------------------------------------- /src/assets/images/avatar-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/avatar-small.jpg -------------------------------------------------------------------------------- /src/assets/images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/avatar.jpg -------------------------------------------------------------------------------- /src/assets/images/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /src/assets/images/favicon/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/favicon/android-chrome-256x256.png -------------------------------------------------------------------------------- /src/assets/images/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /src/assets/images/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/images/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /src/assets/images/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /src/assets/images/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/favicon/favicon.ico -------------------------------------------------------------------------------- /src/assets/images/favicon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/favicon/mstile-150x150.png -------------------------------------------------------------------------------- /src/assets/images/favicon/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017 9 | 10 | 12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/assets/images/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-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /src/assets/images/project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/project-1.jpg -------------------------------------------------------------------------------- /src/assets/images/project-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/project-2.jpg -------------------------------------------------------------------------------- /src/assets/images/project-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/project-3.jpg -------------------------------------------------------------------------------- /src/assets/images/project-listing-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/project-listing-1.jpg -------------------------------------------------------------------------------- /src/assets/images/project-listing-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/project-listing-2.jpg -------------------------------------------------------------------------------- /src/assets/images/project-listing-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/project-listing-3.jpg -------------------------------------------------------------------------------- /src/assets/images/project-listing-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/project-listing-4.jpg -------------------------------------------------------------------------------- /src/assets/images/project-listing-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/project-listing-5.jpg -------------------------------------------------------------------------------- /src/assets/images/project-listing-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/project-listing-6.jpg -------------------------------------------------------------------------------- /src/assets/images/project-listing-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/project-listing-7.jpg -------------------------------------------------------------------------------- /src/assets/images/project-listing-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/images/project-listing-8.jpg -------------------------------------------------------------------------------- /src/assets/js/components/dark-mode.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | const modeToggleBtns = document.querySelectorAll('.btn-toggle-mode'); 3 | const LIGHT_MODE = 'light'; 4 | const DARK_MODE = 'dark'; 5 | const MODE = 'mode'; 6 | 7 | /** 8 | * On page load, check for localStorage value of mode. 9 | * If not set, set it to user preference (if dark mode) or light mode. 10 | */ 11 | function init() { 12 | const mode = getMode(); 13 | 14 | if (!mode) { 15 | setMode({}); 16 | return; 17 | } 18 | setMode({ type: mode }); 19 | } 20 | 21 | /** 22 | * Set our mode 23 | * @param {type} String 24 | */ 25 | function setMode({ type = LIGHT_MODE }) { 26 | localStorage.setItem(MODE, type); 27 | setHTMLAttrMode({ type }); 28 | } 29 | 30 | /** 31 | * Set HTML data attribute value for our mode 32 | * @param {type} String 33 | */ 34 | function setHTMLAttrMode({ type }) { 35 | const html = document.querySelector('html'); 36 | if (html) { 37 | html.setAttribute('data-mode', type); 38 | } 39 | } 40 | 41 | /** 42 | * Get localStorage value for our mode 43 | * @returns String 44 | */ 45 | function getMode() { 46 | const currentMode = localStorage.getItem(MODE); 47 | 48 | if (currentMode) { 49 | return currentMode; 50 | } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { 51 | return DARK_MODE; 52 | } 53 | 54 | return LIGHT_MODE; 55 | } 56 | 57 | /** 58 | * Toggle our mode via button in navbar 59 | */ 60 | function toggleMode() { 61 | const currentMode = getMode(); 62 | if (currentMode === LIGHT_MODE) { 63 | setMode({ type: DARK_MODE }); 64 | } else { 65 | setMode({}); 66 | } 67 | } 68 | 69 | if (modeToggleBtns) { 70 | modeToggleBtns.forEach((btn) => { 71 | btn.addEventListener('click', function() { 72 | toggleMode(); 73 | }); 74 | }); 75 | } 76 | 77 | init(); 78 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/locomotive-scroll.js: -------------------------------------------------------------------------------- 1 | import LocomotiveScroll from 'locomotive-scroll'; 2 | import imagesLoaded from 'imagesloaded'; 3 | 4 | (function () { 5 | 6 | const scrollContainer = document.querySelector('[data-scroll-container]'); 7 | 8 | const scroll = new LocomotiveScroll({ 9 | el: scrollContainer, 10 | smooth: true, 11 | offset: ['17.5%'], 12 | repeat: true, 13 | class: 'animate', 14 | smartphone: { 15 | smooth: true 16 | }, 17 | tablet: { 18 | smooth: true 19 | } 20 | }); 21 | 22 | window.addEventListener('resize', () => { 23 | scroll.update(); 24 | }); 25 | 26 | imagesLoaded(scrollContainer, { background: true }, () => { 27 | scroll.update(); 28 | }); 29 | 30 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/swiper.js: -------------------------------------------------------------------------------- 1 | import Swiper, { 2 | Navigation, 3 | Pagination, 4 | Scrollbar, 5 | Autoplay, 6 | Mousewheel, 7 | Keyboard, 8 | Parallax, 9 | Lazy, 10 | EffectFade, 11 | Thumbs, 12 | Controller, 13 | } from 'swiper'; 14 | 15 | Swiper.use([Navigation, Pagination, Scrollbar, Autoplay, Mousewheel, Keyboard, Parallax, Lazy, EffectFade, Thumbs, Controller]); 16 | 17 | (function () { 18 | document.addEventListener('DOMContentLoaded', () => { 19 | 20 | // Handle Default swipers 21 | const swipers = document.querySelectorAll('[data-swiper]') || []; 22 | 23 | swipers.forEach((elem) => { 24 | let options = elem.dataset && elem.dataset.options ? JSON.parse(elem.dataset.options) : {}; 25 | var swiper = new Swiper(elem, options); 26 | }); 27 | 28 | // Handle our linked swipers on homepage 29 | var swiperLinkedTop = new Swiper('.swiper-linked-top', { 30 | spaceBetween: 23, 31 | breakpoints: { 32 | 300: { 33 | slidesPerView: 2 34 | }, 35 | 999: { 36 | slidesPerView: 3 37 | }, 38 | 1024: { 39 | slidesPerView: 4 40 | } 41 | }, 42 | navigation: { 43 | nextEl: '.swiper-next', 44 | prevEl: '.swiper-prev', 45 | } 46 | }); 47 | var swiperLinkedBottom = new Swiper('.swiper-linked-bottom', { 48 | spaceBetween: 0, 49 | slidesPerView: 1, 50 | parallax: true, 51 | thumbs: { 52 | swiper: swiperLinkedTop 53 | }, 54 | effect: 'fade', 55 | fadeEffect: { 56 | crossFade: true 57 | } 58 | }); 59 | 60 | }) 61 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/typed.js: -------------------------------------------------------------------------------- 1 | import Typed from 'typed.js'; 2 | 3 | (function () { 4 | const typedElems = document.querySelectorAll('[data-typed]') || []; 5 | 6 | typedElems.forEach(elem => { 7 | const elemOptions = elem.dataset.typed ? JSON.parse(elem.dataset.typed) : {}; 8 | 9 | const defaultOptions = { 10 | typeSpeed: 50, 11 | backSpeed: 35, 12 | backDelay: 1000, 13 | loop: true, 14 | }; 15 | const options = { 16 | ...defaultOptions, 17 | ...elemOptions 18 | }; 19 | new Typed(elem, options); 20 | }); 21 | })(); -------------------------------------------------------------------------------- /src/assets/js/misc.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // Add a body class once page has loaded 4 | // Used to add CSS transitions to elems 5 | // and avoids content shifting during page load 6 | window.addEventListener('load', function() { 7 | document.body.classList.add('page-loaded'); 8 | }); 9 | 10 | })(); -------------------------------------------------------------------------------- /src/assets/js/theme.js: -------------------------------------------------------------------------------- 1 | // Vendor Imports 2 | import 'bootstrap'; 3 | 4 | // Components 5 | import './components/dark-mode'; 6 | import './components/locomotive-scroll'; 7 | import './components/swiper'; 8 | import './components/typed'; 9 | 10 | // theme misc js 11 | import './misc'; -------------------------------------------------------------------------------- /src/assets/scss/abstracts/_css-vars.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Bootstrap vars */ 3 | --bs-font-sans-serif: 'Poppins', sans-serif; 4 | --bs-spacer: #{$spacer}; 5 | --bs-gutter-width: #{$grid-gutter-width}; 6 | 7 | 8 | /* Icon font family */ 9 | --theme-font-icon: 'remixicon'; 10 | --theme-font-icon-style: 'normal'; 11 | 12 | /* Avatar */ 13 | --theme-avatar-size: 45px; 14 | 15 | /* Portfolio Modal Image Fixed Height Size */ 16 | --theme-portfolio-img-height: 600px; 17 | 18 | /* Cubic Bezier Animations */ 19 | --theme-cubic-bezier: cubic-bezier(.25,.46,.45,.94); 20 | 21 | /* Locomotive Scroll Custom Animation Distance */ 22 | --theme-locomotive-scroll-animation-distance: 15px; 23 | 24 | /* theme breakpoints using Bootstrap sass map */ 25 | @each $breakpoint, $value in $grid-breakpoints { 26 | --theme-breakpoint-#{$breakpoint}: #{$value}; 27 | } 28 | 29 | /* theme max widths using sass map */ 30 | @each $breakpoint, $value in $container-max-widths { 31 | --theme-maxwidth-breakpoint-#{$breakpoint}: #{$value}; 32 | } 33 | 34 | /* Dark/Light Mode */ 35 | --theme-body-bg: #{$body-bg}; 36 | --theme-body-color: #{$body-color}; 37 | --theme-nav-link: #{$body-color}; 38 | --theme-nav-link-hover: #{$body-color}; 39 | --theme-btn-icon-bg: #{$gray-900}; 40 | --theme-btn-icon-color: #{$white}; 41 | --theme-border-color: #{$border-color}; 42 | --theme-link-body-color: #{$body-color}; 43 | --theme-link-body-psuedo-bg: #{$primary}; 44 | --theme-card-bg: #{$white}; 45 | --theme-card-box-shadow: #{$box-shadow-sm}; 46 | --theme-card-color: #{$body-color}; 47 | --theme-form-input-bg: #{$input-bg}; 48 | --theme-form-input-color: #{$input-color}; 49 | --theme-form-check-bg: #{$gray-100}; 50 | --theme-form-check-checked-bg: #{$gray-900}; 51 | --theme-darker-primary: #31b681; 52 | } 53 | 54 | 55 | /* dark mode */ 56 | :root[data-mode=dark] { 57 | --theme-body-bg: #{$gray-900}; 58 | --theme-body-color: #{$white}; 59 | --theme-nav-link: #{$white}; 60 | --theme-nav-link-hover: #{$white}; 61 | --theme-btn-icon-bg: #{$white}; 62 | --theme-btn-icon-color: #{$gray-900}; 63 | --theme-border-color: rgba(255,255,255, .2); 64 | --theme-link-body-color: #{$white}; 65 | --theme-link-body-psuedo-bg: var(--theme-darker-primary); 66 | --theme-card-bg: #{$gray-800}; 67 | --theme-card-box-shadow: none; 68 | --theme-card-color: #{$white}; 69 | --theme-form-input-bg: #{$gray-800}; 70 | --theme-form-input-color: #{$white}; 71 | --theme-form-check-bg: #{$gray-800}; 72 | --theme-form-check-checked-bg: var(--theme-darker-primary); 73 | } -------------------------------------------------------------------------------- /src/assets/scss/abstracts/_mixins.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/scss/abstracts/_mixins.scss -------------------------------------------------------------------------------- /src/assets/scss/base/_base.scss: -------------------------------------------------------------------------------- 1 | /* generic site wide styles*/ 2 | body { 3 | overflow-x: hidden; 4 | background: var(--theme-body-bg); 5 | color: var(--theme-body-color); 6 | } 7 | 8 | .container, .container-fluid { 9 | padding-left: 2rem; 10 | padding-right: 2rem; 11 | } 12 | 13 | p { 14 | font-size: 1.2rem; 15 | } 16 | 17 | .disable-child-pointer * { 18 | pointer-events: none; 19 | } 20 | -------------------------------------------------------------------------------- /src/assets/scss/components/_avatar.scss: -------------------------------------------------------------------------------- 1 | .avatar { 2 | width: var(--theme-avatar-size); 3 | height: var(--theme-avatar-size); 4 | display: block; 5 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn-icon { 2 | width: var(--theme-avatar-size); 3 | height: var(--theme-avatar-size); 4 | border: 0; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | border-radius: 50%; 9 | background: var(--theme-btn-icon-bg); 10 | color: var(--theme-btn-icon-color); 11 | } 12 | 13 | 14 | .btn-dark, .navbar-light .navbar-toggler { 15 | background: var(--theme-btn-icon-bg); 16 | color: var(--theme-btn-icon-color); 17 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_components.scss: -------------------------------------------------------------------------------- 1 | 2 | /* Avatar */ 3 | @import './avatar'; 4 | 5 | /* Buttons */ 6 | @import './buttons'; 7 | 8 | /* Forms */ 9 | @import './forms'; 10 | 11 | /* Navbar */ 12 | @import './navbar'; 13 | 14 | /* Testimonials */ 15 | @import './testimonials'; -------------------------------------------------------------------------------- /src/assets/scss/components/_forms.scss: -------------------------------------------------------------------------------- 1 | .form-control, .form-control:focus { 2 | background: var(--theme-form-input-bg); 3 | color: var(--theme-form-input-color); 4 | } 5 | 6 | .form-check-custom { 7 | position: relative; 8 | overflow: hidden; 9 | } 10 | 11 | .form-check-input-custom { 12 | position: absolute; 13 | left: -100px; 14 | } 15 | 16 | .form-check-custom-label { 17 | background: var(--theme-form-check-bg); 18 | border-radius: $border-radius; 19 | padding: $input-padding-y $input-padding-x; 20 | display: flex; 21 | align-items: center; 22 | font-size: $input-btn-font-size; 23 | cursor: pointer; 24 | transition: background-color ease-in .2s, color ease-in .2s; 25 | } 26 | 27 | .form-check-custom-label:before { 28 | font-family: var(--theme-font-icon); 29 | font-style: var(--theme-font-icon-style); 30 | content: "\EB7D"; 31 | margin-right: .35rem; 32 | font-size: 1.25rem; 33 | } 34 | 35 | .form-check-input-custom:checked + label { 36 | background-color: var(--theme-form-check-checked-bg); 37 | color: white; 38 | } 39 | 40 | .form-check-input-custom:checked + label:before { 41 | content: "\EB80" 42 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_navbar.scss: -------------------------------------------------------------------------------- 1 | .nav-item { 2 | margin-left: 2rem; 3 | margin-right: 2rem; 4 | } 5 | 6 | .nav-link, .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-brand, .navbar-brand, .navbar-light .navbar-nav .nav-link:focus { 7 | position: relative; 8 | color: var(--theme-nav-link); 9 | 10 | &:hover, &:active { 11 | color: var(--theme-nav-link-hover); 12 | } 13 | } 14 | 15 | .nav-link:after { 16 | position: absolute; 17 | content: ""; 18 | left: 0; 19 | right: 0; 20 | bottom: .8rem; 21 | height: 0; 22 | background: $primary; 23 | transition: all ease-in .2s; 24 | z-index: -1; 25 | } 26 | 27 | .nav-link:hover:after { 28 | height: 9px; 29 | } 30 | 31 | /* Mobile Navigation styles */ 32 | @include media-breakpoint-down(lg) { 33 | .nav-item { 34 | margin: .5rem 0; 35 | } 36 | .nav-link { 37 | display: table; 38 | } 39 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_testimonials.scss: -------------------------------------------------------------------------------- 1 | .testimonials { 2 | display: flex; 3 | flex-wrap: nowrap; 4 | } 5 | 6 | .card-testimonial { 7 | box-shadow: var(--theme-card-box-shadow); 8 | background: var(--theme-card-bg); 9 | color: var(--theme-card-color); 10 | margin-left: 1rem; 11 | margin-right: 1rem; 12 | width: 80vw; 13 | max-width: 700px; 14 | display: flex; 15 | } -------------------------------------------------------------------------------- /src/assets/scss/custom.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/assets/scss/custom.scss -------------------------------------------------------------------------------- /src/assets/scss/libs.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Use this file to import vendor CSS files from your node_modules directory. 3 | */ 4 | 5 | /* AOS */ 6 | //$aos-distance: 25px; /* custom AOS animation distance */ 7 | //@import '~aos/src/sass/aos.scss'; 8 | 9 | 10 | /* Swiper.js */ 11 | @import '~swiper/swiper-bundle.css'; 12 | 13 | /* Locomotive Scroll */ 14 | @import '~locomotive-scroll/dist/locomotive-scroll.css'; 15 | -------------------------------------------------------------------------------- /src/assets/scss/theme.scss: -------------------------------------------------------------------------------- 1 | /* Table of contents 2 | –––––––––––––––––––––––––––––––––––––––––––––––––– 3 | 4 | Note: Do not write any CSS in this file. Only use it to import other CSS files. 5 | Note: '~' in the import statement means the file is imported from the node_modules directory. Bootstrap functions is an example. 6 | 7 | - Bootstrap Functions. 8 | - Bootstrap Mixins. 9 | - Framework SASS Variables - override Bootstrap's SASS Vars in this file. 10 | - Framework Mixins 11 | - Framework Utilities 12 | - Bootstrap Core 13 | - Framework CSS Custom Properties (CSS Variables) 14 | - Framework Base 15 | - Framework Components 16 | - Framework Vendors 17 | - Custom CSS - Add your custom CSS to this file 18 | */ 19 | 20 | 21 | 22 | 23 | /* Bootstrap Functions - DO NOT CHANGE ANYTHING IN HERE 24 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 25 | @import '~bootstrap/scss/functions'; 26 | 27 | /* Bootstrap Mixins - DO NOT CHANGE ANYTHING IN HERE 28 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 29 | @import '~bootstrap/scss/mixins'; 30 | 31 | /* Framework SASS Variables - GO HERE TO OVERRIDE BOOTSTRAP VARS. 32 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 33 | @import 'abstracts/sass-variables'; 34 | 35 | /* Framework Mixins 36 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 37 | @import 'abstracts/mixins'; 38 | 39 | /* Framework Utilities - Needs to be imported before main bootstrap file. 40 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 41 | @import 'utilities/utilities'; 42 | 43 | /* Bootstrap Core - DO NOT CHANGE ANYTHING IN HERE 44 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 45 | @import '~bootstrap/scss/bootstrap'; 46 | 47 | /* Framework Custom Properties (CSS Variables) 48 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 49 | @import 'abstracts/css-vars'; 50 | 51 | /* Framework Base 52 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 53 | @import 'base/base'; 54 | 55 | /* Framework Components 56 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 57 | @import 'components/components'; 58 | 59 | /* Framework Vendor Overrides 60 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 61 | @import 'vendors/vendors'; 62 | 63 | /* Template Custom CSS - Add your own CSS to this file 64 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 65 | @import 'custom'; -------------------------------------------------------------------------------- /src/assets/scss/utilities/_backgrounds.scss: -------------------------------------------------------------------------------- 1 | .bg-img-cover { 2 | height: 44rem; 3 | background-repeat: no-repeat; 4 | background-size: cover; 5 | background-position: center center; 6 | } 7 | 8 | @include media-breakpoint-down(lg) { 9 | .bg-img-cover { 10 | height: 20rem; 11 | } 12 | } -------------------------------------------------------------------------------- /src/assets/scss/utilities/_bootstrap-api-utilities.scss: -------------------------------------------------------------------------------- 1 | // Import Bootstrap Utils so that we can amend them 2 | @import '~bootstrap/scss/utilities'; 3 | 4 | $utilities: map-merge( 5 | $utilities, 6 | ( 7 | /* cursor */ 8 | "cursor": ( 9 | property: cursor, 10 | values: ( 11 | default: default, 12 | pointer: pointer 13 | ) 14 | ), 15 | /* Fixed width util */ 16 | "fixed-width": ( 17 | property: width, 18 | class: f-w, 19 | responsive: true, 20 | values: map-merge($fixed-widths, (0:0)) 21 | ), 22 | /* Fixed height util - we use fixed width SASS vals to keep CSS clean */ 23 | "fixed-height": ( 24 | property: height, 25 | class: f-h, 26 | responsive: true, 27 | values: map-merge($fixed-widths, (0:0)) 28 | ), 29 | /* Max height util - we use fixed width SASS vals to keep CSS clean */ 30 | "max-height": ( 31 | property: max-height, 32 | class: m-h, 33 | responsive: true, 34 | values: map-merge($fixed-widths, (0:0)) 35 | ), 36 | /* transform - translateY*/ 37 | "translate-y": ( 38 | property: transform, 39 | class: transform-y, 40 | values: ( 41 | 0: translateY(0), 42 | 25: translateY(25%), 43 | 50: translateY(50%), 44 | 75: translateY(75%), 45 | 100: translateY(100%), 46 | -25: translateY(-25%), 47 | -50: translateY(-50%), 48 | -75: translateY(-75%), 49 | -100: translateY(-100%) 50 | ) 51 | ), 52 | /* Amend vertical align */ 53 | "align": map-merge( 54 | map-get($utilities, "align"), 55 | ( 56 | values: ( 57 | baseline: baseline, 58 | top: top, 59 | middle: middle, 60 | bottom: bottom, 61 | text-bottom: text-bottom, 62 | text-top: text-top, 63 | sub: sub 64 | ) 65 | ) 66 | ), 67 | /* Amend width util */ 68 | "width": map-merge( 69 | map-get($utilities, "width"), 70 | ( 71 | responsive: true, 72 | values: map-merge( 73 | map-get(map-get($utilities, "width"), "values"), 74 | (10: 10%, 60: 60%, 65: 65%, 80: 80%, 110: 110%), 75 | ), 76 | ), 77 | ), 78 | /* Amend height util */ 79 | "height": map-merge( 80 | map-get($utilities, "height"), 81 | ( 82 | responsive: true 83 | ), 84 | ), 85 | /* Amend font size util */ 86 | "font-size": map-merge( 87 | map-get($utilities, "font-size"), 88 | ( 89 | responsive: true 90 | ), 91 | ), 92 | /* Amend position util */ 93 | "position": map-merge( 94 | map-get($utilities, "position"), 95 | ( 96 | responsive: true 97 | ), 98 | ), 99 | /* Amend border color to include hover state*/ 100 | "border-color": map-merge( 101 | map-get($utilities, "border-color"), 102 | ( 103 | state: hover focus active, 104 | values: map-merge( 105 | map-get(map-get($utilities, "border-color"), "values"), 106 | (transparent: transparent) 107 | ) 108 | ) 109 | ), 110 | /* Amend text color to include states */ 111 | "color": map-merge( 112 | map-get($utilities, "color"), 113 | ( 114 | state: hover focus active 115 | ) 116 | ), 117 | /* Amend text color to include states */ 118 | "background-color": map-merge( 119 | map-get($utilities, "background-color"), 120 | ( 121 | state: hover, 122 | responsive: true 123 | ) 124 | ), 125 | /* Amend shadow to add states */ 126 | "shadow": map-merge( 127 | map-get($utilities, "shadow"), 128 | ( 129 | state: hover focus active 130 | ) 131 | ), 132 | /* Amend border to add states */ 133 | "border": map-merge( 134 | map-get($utilities, "border"), 135 | ( 136 | state: hover focus active, 137 | responsive: true, 138 | values: map-merge( 139 | map-get(map-get($utilities, "border"), "values"), 140 | (transparent: $border-width solid transparent) 141 | ) 142 | ) 143 | ), 144 | /* add letter spacing */ 145 | "letter-spacing": ( 146 | property: letter-spacing, 147 | class: tracking, 148 | values: $letter-spacing 149 | ), 150 | /* opacity util */ 151 | "opacity": ( 152 | property: opacity, 153 | state: hover, 154 | values: ( 155 | 0: 0, 156 | 5: 5%, 157 | 10: 10%, 158 | 25: .25, 159 | 50: .5, 160 | 75: .75, 161 | 90: .90, 162 | 100: 1, 163 | ) 164 | ), 165 | /* transition util */ 166 | "transition": ( 167 | property: transition, 168 | values: ( "all": all linear .3s) 169 | ), 170 | /* z-index util */ 171 | "z-index": ( 172 | property: z-index, 173 | values: ( 174 | "n1": -1, 175 | "0": 0, 176 | "1": 1, 177 | "10": 10, 178 | "20": 20, 179 | "30": 30, 180 | "40": 40, 181 | "50": 50 182 | ) 183 | ), 184 | /* Amend viewport height to include additional sizes*/ 185 | "viewport-height": map-merge( 186 | map-get($utilities, "viewport-height"), 187 | ( 188 | values: map-merge( 189 | map-get(map-get($utilities, "viewport-height"), "values"), 190 | (10: 10vh, 25: 25vh, 50: 50vh, 75: 75vh) 191 | ) 192 | ) 193 | ), 194 | /* Amend min viewport height to include additional sizes*/ 195 | "min-viewport-height": map-merge( 196 | map-get($utilities, "min-viewport-height"), 197 | ( 198 | values: map-merge( 199 | map-get(map-get($utilities, "min-viewport-height"), "values"), 200 | (10: 10vh, 25: 25vh, 40: 40vh, 50: 50vh, 60: 60vh, 75: 75vh) 201 | ) 202 | ) 203 | ), 204 | /* Add max viewport height*/ 205 | "max-viewport-height": ( 206 | property: max-height, 207 | class: max-vh, 208 | values: ( 209 | 10: 10vh, 210 | 25: 25vh, 211 | 50: 50vh, 212 | 60: 60vh, 213 | 75: 75vh 214 | ) 215 | ), 216 | /* Amend viewport width to include additional sizes*/ 217 | "viewport-width": map-merge( 218 | map-get($utilities, "viewport-width"), 219 | ( 220 | values: map-merge( 221 | map-get(map-get($utilities, "viewport-width"), "values"), 222 | (10: 10vw, 25: 25vw, 50: 50vw, 75: 75vw) 223 | ) 224 | ) 225 | ), 226 | /* Amend min viewport width to include additional sizes*/ 227 | "min-viewport-width": map-merge( 228 | map-get($utilities, "min-viewport-width"), 229 | ( 230 | values: map-merge( 231 | map-get(map-get($utilities, "min-viewport-width"), "values"), 232 | (10: 10vw, 25: 25vw, 50: 50vw, 75: 75vw) 233 | ) 234 | ) 235 | ), 236 | ) 237 | ) -------------------------------------------------------------------------------- /src/assets/scss/utilities/_borders.scss: -------------------------------------------------------------------------------- 1 | body .border-bottom, .body .border, body .border-left, body .border-right, body .border-top { 2 | border-color: var(--theme-border-color) !important; 3 | } -------------------------------------------------------------------------------- /src/assets/scss/utilities/_text.scss: -------------------------------------------------------------------------------- 1 | .text-highlight { 2 | position: relative; 3 | } 4 | 5 | .text-highlight:after { 6 | content: ""; 7 | height: 6px; 8 | position: absolute; 9 | z-index: -1; 10 | left: 0; 11 | right: 0; 12 | bottom: 5px; 13 | background: $primary; 14 | } 15 | 16 | .text-vertical { 17 | transform: rotate(90deg); 18 | transform-origin: left top; 19 | display: inline-block; 20 | position: absolute; 21 | left: 0; 22 | top: 0; 23 | } 24 | 25 | .text-vertical-link { 26 | text-decoration: none; 27 | color: var(--theme-body-color); 28 | transition: color ease-in .2s; 29 | 30 | &:hover { 31 | color: $primary; 32 | } 33 | } 34 | 35 | .subtitle-sm, .subtitle-xs { 36 | color: $text-muted; 37 | letter-spacing: .18em; 38 | text-transform: uppercase; 39 | font-size: $small-font-size; 40 | } 41 | 42 | .subtitle-xs { 43 | font-size: 13px; 44 | font-weight: 500; 45 | } 46 | 47 | .link-body { 48 | color: var(--theme-link-body-color); 49 | text-decoration: none; 50 | position: relative; 51 | 52 | &:hover, &:active { 53 | color: var(--theme-link-body-color); 54 | } 55 | } 56 | 57 | .link-body:after { 58 | content: ""; 59 | height: 6px; 60 | position: absolute; 61 | z-index: -1; 62 | left: 0; 63 | right: 0; 64 | bottom: 5px; 65 | background: var(--theme-link-body-psuedo-bg); 66 | transition: all ease-in .2s; 67 | } 68 | 69 | .link-body:hover:after { 70 | height: 50%; 71 | } 72 | 73 | .link-cover:after { 74 | position: absolute; 75 | top: 0; 76 | right: 0; 77 | left: 0; 78 | bottom: 0; 79 | content: ""; 80 | display: block; 81 | } 82 | 83 | 84 | @include media-breakpoint-down(lg) { 85 | .typed-elem { 86 | min-height: 10rem; 87 | } 88 | } 89 | 90 | @include media-breakpoint-down(md) { 91 | .typed-elem { 92 | min-height: 12rem; 93 | } 94 | } -------------------------------------------------------------------------------- /src/assets/scss/utilities/_utilities.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * - Everything in "bootstrap-api-utilities" either adds to or amends the Bootstrap utilities using their API 3 | * - Everything else is normal CSS/SCSS 4 | */ 5 | /* Bootstrap API Utilities - only put code in here that uses Bootstrap's Util API */ 6 | @import 'bootstrap-api-utilities'; 7 | 8 | 9 | /* Everything in these files DOES NOT use Bootstrap's API */ 10 | @import './backgrounds'; 11 | @import './borders'; 12 | @import './text'; 13 | -------------------------------------------------------------------------------- /src/assets/scss/vendors/_vendors.scss: -------------------------------------------------------------------------------- 1 | /* AOS */ 2 | //@import 'aos/aos'; 3 | 4 | /* Remix Icons */ 5 | @import 'remixicon/remixicon'; 6 | 7 | /* Locomotive Scroll */ 8 | @import 'locomotive-scroll/locomotive-scroll'; 9 | 10 | /* Swiper */ 11 | @import 'swiper/swiper'; 12 | -------------------------------------------------------------------------------- /src/assets/scss/vendors/aos/_aos.scss: -------------------------------------------------------------------------------- 1 | /* Reveal Animation. */ 2 | [data-aos="reveal-right"], [data-aos="reveal-left"], [data-aos="reveal-up"], [data-aos="reveal-down"] { 3 | position: relative; 4 | overflow: hidden; 5 | 6 | &:after { 7 | content: ""; 8 | transition-property: transform; 9 | transition-timing-function: var(--theme-slideout-transition-in); 10 | transition-duration: .5s; 11 | transition-delay: inherit; 12 | display: block; 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | right: 0; 17 | bottom: 0; 18 | background: $body-bg; 19 | } 20 | } 21 | 22 | [data-aos="reveal-right"] { 23 | &.aos-animate { 24 | &:after { 25 | transform: translateX(100%); 26 | } 27 | } 28 | } 29 | 30 | [data-aos="reveal-left"] { 31 | &.aos-animate { 32 | &:after { 33 | transform: translateX(-100%); 34 | } 35 | } 36 | } 37 | 38 | [data-aos="reveal-up"] { 39 | &.aos-animate { 40 | &:after { 41 | transform: translateY(-100%); 42 | } 43 | } 44 | } 45 | 46 | [data-aos="reveal-down"] { 47 | &.aos-animate { 48 | &:after { 49 | transform: translateY(100%); 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/assets/scss/vendors/locomotive-scroll/_locomotive-scroll.scss: -------------------------------------------------------------------------------- 1 | /* apply transition once page loaded */ 2 | .page-loaded .fade-in, .page-loaded .fade-in-up, .page-loaded .fade-in-down, .page-loaded .fade-in-left, .page-loaded .fade-in-right { 3 | transition-property: opacity, transform; 4 | transition-timing-function: var(--theme-cubic-bezier); 5 | transition-duration: .6s; 6 | } 7 | 8 | /* opacity 0 for all our custom animations */ 9 | .fade-in, .fade-in-up, .fade-in-down, .fade-in-left, .fade-in-right { 10 | opacity: 0; 11 | } 12 | 13 | /* opacity 1 for all our custom animations when in view */ 14 | .fade-in.animate, .fade-in-up.animate, .fade-in-down.animate, .fade-in-left.animate, .fade-in-right.animate { 15 | opacity: 1; 16 | transform: translateZ(0); 17 | } 18 | 19 | /* fade in down element when in view */ 20 | .fade-in-down { 21 | transform: translate3D(0, calc(var(--theme-locomotive-scroll-animation-distance) * -1), 0); 22 | } 23 | 24 | /* fade in up element when in view */ 25 | .fade-in-up { 26 | transform: translate3D(0, var(--theme-locomotive-scroll-animation-distance), 0); 27 | } 28 | 29 | /* fade in left element when in view */ 30 | .fade-in-left { 31 | transform: translate3D(calc(var(--theme-locomotive-scroll-animation-distance) * -1), 0, 0); 32 | } 33 | 34 | /* fade in right element when in view */ 35 | .fade-in-right { 36 | transform: translate3D(var(--theme-locomotive-scroll-animation-distance), 0, 0); 37 | } 38 | -------------------------------------------------------------------------------- /src/assets/scss/vendors/swiper/_swiper.scss: -------------------------------------------------------------------------------- 1 | .page-loaded .btn-swiper { 2 | transition: color ease-in .2s; 3 | } 4 | 5 | .btn-swiper:hover { 6 | color: $danger; 7 | } 8 | 9 | .swiper-container-horizontal > .swiper-scrollbar { 10 | background: $gray-600; 11 | left: 0; 12 | width: 100%; 13 | } 14 | 15 | .swiper-scrollbar-drag { 16 | background: $danger; 17 | } 18 | 19 | .swiper-btn { 20 | cursor: pointer; 21 | transition: all ease-in .2s; 22 | position: absolute; 23 | top: 50%; 24 | left: -25px; 25 | z-index: 99; 26 | transform: translateY(-50%); 27 | width: 50px; 28 | height: 50px; 29 | box-shadow: $box-shadow; 30 | border-radius: 50%; 31 | background: $gray-900; 32 | color: $white; 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | 37 | &.swiper-next { 38 | left: auto; 39 | right: -25px; 40 | } 41 | 42 | &:hover { 43 | opacity: .50; 44 | } 45 | } -------------------------------------------------------------------------------- /src/data/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultPageTitle": "Bootstrap 5 HTML Template", 3 | "templateName": "Folio", 4 | "classes": { 5 | "body": "", 6 | "navbar": "", 7 | "content": "", 8 | "footer": "" 9 | }, 10 | "partials": { 11 | "head": "head/head", 12 | "navbar": "navbar/navbar", 13 | "footer": "footer/footer" 14 | }, 15 | "defaultImgAlt": "HTML Bootstrap Template by Pixel Rocket", 16 | "helpDocsURL": "", 17 | "demoURL": "" 18 | } 19 | -------------------------------------------------------------------------------- /src/data/experience.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [ 3 | { 4 | "title": "Technical Lead", 5 | "company": "NWD Designs Ltd", 6 | "years": "2020 - present", 7 | "description": "After two years of working in London, I joined the NWD Designs team. Our design group works with clients including Motorola and Nokia who are just some examples; Apple stands out among all others because it had such an impactful brand identity for decades until they rebranded recently.", 8 | "url": "https://www.google.co.uk", 9 | "url-title": "https://www.nwd.co.uk" 10 | }, 11 | { 12 | "title": "Lead Developer", 13 | "company": "Pinnacle Designs", 14 | "years": "2018 - 2020", 15 | "description": "Looking for a new challenge, I joined Pinnacle Designs. My role focused on helping our customers define their strategic branding needs and requirements to achieve an elegant end result that stands out among competitors' work.", 16 | "url": "https://www.google.co.uk", 17 | "url-title": "https://www.pinnacle-designs.co.uk" 18 | }, 19 | { 20 | "title": "Senior Developer", 21 | "company": "Super 8", 22 | "years": "2016 - 2018", 23 | "description": "I have always loved the idea of being in charge of a design team, so I joined Super 8 as a lead designer where we worked on amazing campaigns including the branding and advert assets for Facebook's VR arm.", 24 | "url": "https://www.google.co.uk", 25 | "url-title": "https://www.supereight.co.uk" 26 | }, 27 | { 28 | "title": "Graphic Designer", 29 | "company": "Cube Agency", 30 | "years": "2014 - 2016", 31 | "description": "After finishing my degree in Graphic Design, I joined Cube agency in London in 2014 and worked on projects for companies such as Nestle, Spotify and Red Cabbage.", 32 | "url": "https://www.google.co.uk", 33 | "url-title": "https://www.cubeagency.co.uk" 34 | } 35 | ] 36 | } -------------------------------------------------------------------------------- /src/data/skills.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [ 3 | { 4 | "skill": "Javascript", 5 | "percent": "75" 6 | }, 7 | { 8 | "skill": "PHP", 9 | "percent": "95" 10 | }, 11 | { 12 | "skill": "HTML", 13 | "percent": "65" 14 | }, 15 | { 16 | "skill": "CSS", 17 | "percent": "35" 18 | }, 19 | { 20 | "skill": "GraphQL", 21 | "percent": "98" 22 | }, 23 | { 24 | "skill": "Python", 25 | "percent": "45" 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /src/data/testimonials-two.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [ 3 | { 4 | "testimonial": "Working with Jenny was an absolute dream. She offered us the perfect logo without any complicated deadlines or tight spots that other designers could not navigate to save their life!", 5 | "person": "Peter Jackson", 6 | "title": "WimWam Limited", 7 | "img": "{{webRoot}}/assets/images/avatar-5.jpeg" 8 | }, 9 | { 10 | "testimonial": "I had the best experience working with Jenny. She is a creative, talented and fun person to be around! Her attention-to detail made it easy for me as her client because we knew what was wanted from day one.", 11 | "person": "Patricia Nelson", 12 | "title": "Cologne Limited", 13 | "img": "{{webRoot}}/assets/images/avatar-6.jpeg" 14 | }, 15 | { 16 | "testimonial": "Working with Jenny was a real pleasure. Not only does her work make us look good but also feels really nice working alongside someone you can trust both personally and professionally!", 17 | "person": "Stephen King", 18 | "title": "King Coding Ltd", 19 | "img": "{{webRoot}}/assets/images/avatar-7.jpeg" 20 | }, 21 | { 22 | "testimonial": "With a creative approach to logos, she was able provide us with custom designs without ever having an unrealistic deadline. Not only does the work make our company look good but also feel really nice when we can trust someone!", 23 | "person": "Simon Smith", 24 | "title": "Brand Juice Co", 25 | "img": "{{webRoot}}/assets/images/avatar-3.jpeg" 26 | }, 27 | { 28 | "testimonial": "I've never met anyone who is more professional and clear in their communications than Jenny, but it was when she started giving me advice on how to improve our website design that really made a difference for us -- she had so many good ideas!", 29 | "person": "Joe Hill", 30 | "title": "Joe Hill Software", 31 | "img": "{{webRoot}}/assets/images/avatar-1.jpeg" 32 | }, 33 | { 34 | "testimonial": "I can't say enough good things about Jenny! We started as a client last year after she made some major changes for us which turned out beautifully. We'll be a client for as long as she will work with us!", 35 | "person": "Rob Waite", 36 | "title": "RW Software Services", 37 | "img": "{{webRoot}}/assets/images/avatar-2.jpeg" 38 | } 39 | ] 40 | } -------------------------------------------------------------------------------- /src/data/testimonials.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [ 3 | { 4 | "testimonial": "Jenny offered creative logos without production deadlines too complicated or tight spots where others could not go. Not only does her work make us look good but also feels really nice working alongside someone you can trust!", 5 | "person": "Emily Parkson", 6 | "title": "Waterpark Theatre", 7 | "img": "{{webRoot}}/assets/images/avatar-1.jpeg" 8 | }, 9 | { 10 | "testimonial": "I had the best experience working with Jenny. She is a creative, talented and fun person to be around! Her attention-to detail made it easy for me as her client because we knew what was wanted from day one.", 11 | "person": "Patrick Smith", 12 | "title": "Cologne Limited", 13 | "img": "{{webRoot}}/assets/images/avatar-7.jpeg" 14 | }, 15 | { 16 | "testimonial": "I was really pleased with the logo designs that Jenny created for my organization. The logos are instantly recognizable, making it easy to find our brand in a crowded market of other education providers.", 17 | "person": "Harry Duckmore", 18 | "title": "SB Design Limited", 19 | "img": "{{webRoot}}/assets/images/avatar-6.jpeg" 20 | }, 21 | { 22 | "testimonial": "She's always professional and clear in her communications, but it was when she started giving me advice on how to improve our website design that really made a difference for us--she had so many good ideas!", 23 | "person": "Nelly Oliver", 24 | "title": "Super 8 Design House", 25 | "img": "{{webRoot}}/assets/images/avatar-4.jpeg" 26 | }, 27 | { 28 | "testimonial": "I was really pleased with the logo designs that Jenny created for my organization. The logos are instantly recognizable, making it easy to find our brand in a crowded market of other education providers.", 29 | "person": "Sarah Fell", 30 | "title": "SFell Limited", 31 | "img": "{{webRoot}}/assets/images/avatar-1.jpeg" 32 | }, 33 | { 34 | "testimonial": "She's always professional and clear in her communications, but it was when she started giving me advice on how to improve our website design that really made a difference for us--she had so many good ideas!", 35 | "person": "Henry Kingsom", 36 | "title": "Henry Codes Ltd", 37 | "img": "{{webRoot}}/assets/images/avatar-2.jpeg" 38 | } 39 | ] 40 | } -------------------------------------------------------------------------------- /src/data/work.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [ 3 | { 4 | "img": "{{webRoot}}/assets/images/project-listing-1.jpg", 5 | "title": "Shopify Fashion Store", 6 | "description": "Design and development of a custom Shopify Ecommerce platform for a fashion retailer.", 7 | "category": "Ecommerce · Shopify" 8 | }, 9 | { 10 | "img": "{{webRoot}}/assets/images/project-listing-2.jpg", 11 | "title": "Magento Furniture Store", 12 | "description": "Design and development of a custom Magento Ecommerce platform for a furniture retailer.", 13 | "category": "Ecommerce · Magento" 14 | }, 15 | { 16 | "img": "{{webRoot}}/assets/images/project-listing-3.jpg", 17 | "title": "Wordpress Grocery Store", 18 | "description": "Design and development of a WooCommerce Ecommerce platform for a grocery platform.", 19 | "category": "Ecommerce · Wordpress" 20 | }, 21 | { 22 | "img": "{{webRoot}}/assets/images/project-listing-4.jpg", 23 | "title": "Messaging App", 24 | "description": "Creation of a custom React Native messaging app for a messaging SAAS startup.", 25 | "category": "Mobile · React Native" 26 | }, 27 | { 28 | "img": "{{webRoot}}/assets/images/project-listing-5.jpg", 29 | "title": "Shopify Online Store", 30 | "description": "Design and development of a custom Shopify Ecommerce platform for a car retailer.", 31 | "category": "Ecommerce · Shopify" 32 | }, 33 | { 34 | "img": "{{webRoot}}/assets/images/project-listing-6.jpg", 35 | "title": "Magento Online Store", 36 | "description": "Design and development of a custom Magento Ecommerce platform for a pet food retailer.", 37 | "category": "Ecommerce · Magento" 38 | }, 39 | { 40 | "img": "{{webRoot}}/assets/images/project-listing-7.jpg", 41 | "title": "Web Application", 42 | "description": "Design and development of a custom WooCommerce Ecommerce platform for a furniture retailer.", 43 | "category": "Ecommerce · Wordpress" 44 | }, 45 | { 46 | "img": "{{webRoot}}/assets/images/project-listing-8.jpg", 47 | "title": "Ecommerce Marketing", 48 | "description": "Design and development of a custom Shopify Ecommerce platform for a fashion retailer.", 49 | "category": "Ecommerce · Shopify" 50 | } 51 | ] 52 | } -------------------------------------------------------------------------------- /src/html/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{> (config config.partials.head) title=config.defaultPageTitle }} 6 | 7 | 8 | 9 | 10 |
11 | 12 | {{> (config config.partials.navbar) 13 | configClassList=config.classes.navbar 14 | classList="" }} 15 | 16 | 17 | 18 |
19 | 20 | 21 |

About Me

22 | 23 |
24 | 25 |
26 | 27 | {{ config.defaultImgAlt }} 29 | 30 |
31 | 32 | 33 | 34 |
35 |
36 |
37 |

I'm Jenny Smith, a freelance web developer and designer based in London, United Kingdom.

38 | 39 |

I'm passionate about creating engaging and easy-to-navigate layouts. I love the look of clean lines, sharp contrasts in color schemes or bold graphic assets paired with sophisticated illustrations. 40 | 41 |

As an Ecommerce developer my work is focused on web design; abstract forms make up most projects these days because they're so popular among consumers who want more control over their shopping experience than ever before.

42 |
43 |
44 | Download My CV 45 |
Find Me Online
46 | 52 |
53 |
54 |
55 | 56 |
57 | 58 | 59 | {{> widgets/experience }} 60 | 61 | 62 | 63 | {{> widgets/skills }} 64 | 65 | 66 | 67 |
68 | 69 | 70 | 71 | {{> (config config.partials.footer) 72 | configClassList=config.classes.footer 73 | classList="" 74 | show-cta="true" 75 | }} 76 | 77 |
78 | 79 | 80 | 81 | {{> footer/scripts }} 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /src/html/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{> (config config.partials.head) title=config.defaultPageTitle }} 6 | 7 | 8 | 9 | 10 |
11 | 12 | {{> (config config.partials.navbar) 13 | configClassList=config.classes.navbar 14 | classList="" }} 15 | 16 | 17 | 18 |
19 | 20 | 21 |
22 |
Facebook 24 | · Twitter · Github
26 | 27 |

Let's work together on your next project

28 | 29 |

Email me

30 | hello@jenny.smith 31 | 32 | 33 |

Call me

34 | +44 (0)208 334 4567 35 | 36 |

Send Me A Message

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 | 66 |
67 | 68 | 70 |
71 | 72 | 73 | 74 |
75 | 76 |
77 |
78 | 79 | 80 |
81 |
82 | 83 | 84 |
85 |
86 | 87 | 88 |
89 |
90 | 91 | 92 |
93 |
94 | 95 | 96 |
97 |
98 | 99 | 100 |
101 |
102 |
103 | 104 | 105 | 106 |
107 | 108 | 110 |
111 | 112 | 113 | 114 |
115 | 116 |
117 | 118 |
119 |
120 | 121 | 122 |
123 |
124 | 125 |
126 | 127 | 128 |
129 | 130 | 131 | 132 | {{> (config config.partials.footer) 133 | configClassList=config.classes.footer 134 | classList="" 135 | }} 136 | 137 |
138 | 139 | 140 | 141 | {{> footer/scripts }} 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /src/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{> (config config.partials.head) title=config.defaultPageTitle }} 6 | 7 | 8 | 9 | 10 |
11 | 12 | {{> (config config.partials.navbar) 13 | configClassList=config.classes.navbar 14 | classList="" }} 15 | 16 | 17 | 18 |
19 | 20 | 21 |
22 | 23 | 24 | {{> widgets/hero }} 25 | 26 | 27 | 28 |
29 | {{> 30 | content/subtitle 31 | title="Selected Work" 32 | }} 33 |
34 | {{> swiper/swiper-latest-top }} 35 |
36 |
37 | 38 | 39 | 40 |
41 | {{> swiper/swiper-latest-bottom }} 42 |
43 | 44 | 45 | 46 | {{> widgets/experience }} 47 | 48 | 49 |
50 | 51 | 52 | {{> widgets/testimonials }} 53 | 54 | 55 | 56 |
57 | 58 | 59 | 60 | {{> (config config.partials.footer) 61 | configClassList=config.classes.footer 62 | classList="" 63 | show-cta="true" 64 | }} 65 | 66 |
67 | 68 | 69 | 70 | 71 | {{> footer/scripts }} 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /src/html/work-listing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{> (config config.partials.head) title=config.defaultPageTitle }} 6 | 7 | 8 | 9 | 10 |
11 | 12 | {{> (config config.partials.navbar) 13 | configClassList=config.classes.navbar 14 | classList="" }} 15 | 16 | 17 | 18 |
19 | 20 | 21 |

My Work

22 | 23 | {{#if (config work)}} 24 |
26 | {{#each work.entries}} 27 | 28 |
37 |
38 | 39 | 40 | {{ config.defaultImgAlt }} 41 | 42 | 43 |

{{{ category }}}

44 |

{{ title }}

45 |

{{ description }}

46 | View Project 47 |
48 |
49 | 50 | {{/each}} 51 |
52 | {{/if}} 53 | 54 | 55 |
56 | 57 | 58 | 59 | {{> (config config.partials.footer) 60 | configClassList=config.classes.footer 61 | classList="" 62 | show-cta="true" 63 | }} 64 | 65 |
66 | 67 | 68 | 69 | {{> footer/scripts }} 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /src/html/work-single.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{> (config config.partials.head) title=config.defaultPageTitle }} 6 | 7 | 8 | 9 | 10 |
11 | 12 | {{> (config config.partials.navbar) 13 | configClassList=config.classes.navbar 14 | classList="" }} 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 |
23 |

Shopify Online Store

24 |

Ecommerce · Mobile App

25 |

Design and build of a Ecommerce platform.

26 |
27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 |
36 |
38 |
39 |

The Client

40 |
41 |
42 |

Heritage Furniture

43 |

Heritage Furniture is a family-owned business located in Nottingham, United Kingdom. They 44 | have 12 locations throughout the UK and have been online since 2007.

45 |
46 |
47 |

The Project

48 |
49 |
50 |

The current Heritage Ecommerce platform ran on OS Commerce. I migrated the existing sales 51 | orders and customer data to our new Shopify platform. I designed a new interface using the 52 | updating branding supplied by Heritage's in-house design team.

53 |

I also designed and built a custom React Native application that used Shopify's API to handle 54 | online sales and integrated with Heritage's new Ecommerce website to allow customers to 55 | place new orders and view previous orders through the new app.

56 | View Website 57 |
58 |
59 |
60 | 61 | 62 | 63 |
64 | 65 | 66 | 67 |
68 |
69 |
70 |

What I Delivered

71 |
72 |
73 |
    74 |
  • React Native mobile application
    • 75 |
  • Shopify Ecommerce platform
    • 76 |
  • Data transfer
    • 77 |
  • Website hosting
    • 78 |
79 |
80 |
81 |

My Services

82 |
83 |
84 |
    85 |
  • UX and UI Design
    • 86 |
  • Solution architecture
    • 87 |
  • Application development
    • 88 |
  • Marketing strategy
    • 89 |
90 |
91 |
92 |
93 | 94 | 95 | 96 |
97 |
98 |
102 | " 103 |

104 | Jenny has excellent software intuition and was able to quickly understand our business 105 | requirements. She did a fantastic job with the redesign of our website and we couldn't be 106 | happier! 107 |

108 |

John Bridges

109 |

CEO, Heritage Furniture

110 |
111 |
115 | 116 | {{ config.defaultImgAlt }} 118 | 119 |
120 |
121 |
122 | 123 | 124 | 125 | 126 |
127 | 128 | 129 | 130 | {{> (config config.partials.footer) 131 | configClassList=config.classes.footer 132 | classList="" 133 | show-cta="true" 134 | }} 135 | 136 |
137 | 138 | 139 | 140 | {{> footer/scripts }} 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /src/partials/content/subtitle.html: -------------------------------------------------------------------------------- 1 |

{{ title }}

-------------------------------------------------------------------------------- /src/partials/footer/footer.html: -------------------------------------------------------------------------------- 1 | 2 | {{#if show-cta}} 3 |
4 |

Ready to discuss your project requirements?

5 | Get In Touch 6 |
7 | {{/if}} 8 | 9 | 19 | 20 | -------------------------------------------------------------------------------- /src/partials/footer/scripts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/partials/header/head/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 40 | 41 | 42 | {{ title }} 43 | 44 | -------------------------------------------------------------------------------- /src/partials/header/navbar/navbar.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/swiper/swiper-latest-bottom.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {{#if (config work)}} 4 | {{#each work.entries}} 5 |
6 |
7 | 8 | 9 |
10 | 11 | {{ config.defaultImgAlt }} 12 | 13 |
14 | 15 | 16 | 17 |
18 |

{{{ category }}}

19 |

{{ title }}

20 |

{{ description }}

21 |
22 | View Project 23 |
24 |
25 | 26 |
27 |
28 | {{/each}} 29 | {{/if}} 30 |
31 |
-------------------------------------------------------------------------------- /src/partials/swiper/swiper-latest-top.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {{#if (config work)}} 4 | {{#each work.entries}} 5 |
6 | 7 | {{ config.defaultImgAlt }} 8 | 9 |
10 | {{/each}} 11 | {{/if}} 12 |
13 |
14 |
15 |
-------------------------------------------------------------------------------- /src/partials/testimonials/testimonial-single.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | "{{ testimonial }}" 5 |

6 |
7 | 8 | {{ config.defaultImgAlt }} 9 | 10 |
11 |

{{ person }}

12 |

{{ title }}

13 |
14 |
15 |
16 |
-------------------------------------------------------------------------------- /src/partials/widgets/experience.html: -------------------------------------------------------------------------------- 1 |
2 | {{> 3 | content/subtitle 4 | title="Experience" 5 | }} 6 | {{#if (config experience)}} 7 | {{#each experience.entries}} 8 | 9 |
14 |
15 |

{{ company }}

16 | ({{ years }}) 17 |
18 |
19 |

{{ title }}

20 |

{{ description }}

21 | {{ url-title }} 22 |
23 |
24 | 25 | {{/each}} 26 | {{/if}} 27 |
-------------------------------------------------------------------------------- /src/partials/widgets/hero.html: -------------------------------------------------------------------------------- 1 |
2 |

Hello there!

3 |

I am Jenny Smith

4 |

London-based freelance specializing in Magento, Wordpress & Shopify development

5 |
-------------------------------------------------------------------------------- /src/partials/widgets/latest-work.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/folio-html-bootstrap/01602587d6910fa88270a8e2ffab9598ac88ec04/src/partials/widgets/latest-work.html -------------------------------------------------------------------------------- /src/partials/widgets/skills.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | {{> 4 | content/subtitle 5 | title-script="My" 6 | title="Skills" 7 | doodle-width="f-w-40" 8 | }} 9 | {{#if (config skills)}} 10 |
11 | {{#each skills.entries}} 12 | 13 |
17 |
18 |
19 |

{{ percent }}%

20 |
21 |
22 |

{{ skill }}

23 |
24 |
25 |
26 |
28 |
29 |
30 |
31 |
32 | 33 | {{/each}} 34 |
35 | {{/if}} 36 |
37 | -------------------------------------------------------------------------------- /src/partials/widgets/testimonials.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 | {{#if (config testimonials) }} 6 | {{#each testimonials.entries}} 7 | {{> testimonials/testimonial-single this }} 8 | {{/each}} 9 | {{/if}} 10 |
11 |
12 |
13 |
14 | {{#if (config testimonials-two) }} 15 | {{#each testimonials-two.entries}} 16 | {{> testimonials/testimonial-single this }} 17 | {{/each}} 18 | {{/if}} 19 |
20 |
21 |
22 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | var glob = require('glob-all'); 3 | const webpack = require('webpack'); 4 | const HandlebarsPlugin = require('handlebars-webpack-plugin'); 5 | const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries"); 6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 7 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); 8 | const MinifyPlugin = require('babel-minify-webpack-plugin'); 9 | const CopyPlugin = require('copy-webpack-plugin'); 10 | const TerserPlugin = require('terser-webpack-plugin'); 11 | const mergeJSON = require('handlebars-webpack-plugin/utils/mergeJSON'); 12 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 13 | 14 | 15 | // Project config data. 16 | // Go here to change stuff for the whole demo, ie, change the navbar. 17 | // Also go here for the various data loops, ie, category products, slideshows 18 | const projectData = mergeJSON(path.join(__dirname, '/src/data/**/*.json')); 19 | 20 | 21 | //PurgeCSS Paths 22 | const purgeCSSPaths = { 23 | src: path.join(__dirname, 'src', 'html'), 24 | partials: path.join(__dirname, 'src', 'partials') 25 | } 26 | 27 | // paths used in various placed in webpack config 28 | const paths = { 29 | src: { 30 | imgs: './src/assets/images', 31 | scss: './src/assets/scss', 32 | fonts: './src/assets/fonts', 33 | js: './src/assets/js', 34 | favicon: './src/assets/favicon', 35 | }, 36 | dist: { 37 | imgs: './assets/images', 38 | css: './assets/css', 39 | fonts: './assets/fonts', 40 | js: './assets/js', 41 | favicon: './assets/favicon', 42 | } 43 | } 44 | 45 | 46 | // Main webpack config options. 47 | const wPackConfig = { 48 | entry: { 49 | 'libs': [paths.src.scss + '/libs.scss'], 50 | 'theme': [paths.src.js + '/theme.js', paths.src.scss + '/theme.scss'] 51 | }, 52 | output: { 53 | filename: paths.dist.js + '/[name].bundle.js', 54 | }, 55 | devtool: 'source-map', 56 | mode: 'development', 57 | module: { 58 | rules: [{ 59 | test: /\.(sass|scss|css)$/, 60 | include: path.resolve(__dirname, paths.src.scss.slice(2)), 61 | use: [{ 62 | loader: MiniCssExtractPlugin.loader, 63 | }, 64 | { 65 | loader: 'css-loader', 66 | options: { 67 | url: false, 68 | // sourceMap: true, 69 | }, 70 | }, 71 | { 72 | loader: 'postcss-loader' 73 | }, 74 | { 75 | loader: 'sass-loader', 76 | // options: { 77 | // sourceMap: true, 78 | // sassOptions: { 79 | // indentWidth: 4, 80 | // outputStyle: 'expanded', 81 | // sourceComments: true 82 | // } 83 | // } 84 | }, 85 | ], 86 | }, ] 87 | }, 88 | optimization: { 89 | splitChunks: { 90 | cacheGroups: { 91 | vendor: { 92 | test: /[\\/](node_modules)[\\/].+\.js$/, 93 | name: 'vendor', 94 | chunks: 'all' 95 | } 96 | } 97 | }, 98 | minimizer: [ 99 | new OptimizeCssAssetsPlugin({ 100 | cssProcessorOptions: { 101 | map: { 102 | inline: false, 103 | }, 104 | }, 105 | cssProcessorPluginOptions: { 106 | preset: [ 107 | 'default', 108 | { 109 | discardComments: { 110 | removeAll: true, 111 | }, 112 | }, 113 | ], 114 | }, 115 | }), 116 | new TerserPlugin({ 117 | extractComments: false, 118 | terserOptions: { 119 | output: { 120 | comments: false, 121 | }, 122 | }, 123 | }), 124 | ], 125 | }, 126 | plugins: [ 127 | new webpack.ProgressPlugin(), 128 | new CopyPlugin({ 129 | patterns: [{ 130 | from: paths.src.fonts, 131 | to: paths.dist.fonts, 132 | noErrorOnMissing: true 133 | }, 134 | { 135 | from: paths.src.imgs, 136 | to: paths.dist.imgs, 137 | noErrorOnMissing: true 138 | }, 139 | { 140 | from: paths.src.favicon, 141 | to: paths.dist.favicon, 142 | noErrorOnMissing: true 143 | } 144 | ], 145 | }), 146 | new HandlebarsPlugin({ 147 | entry: path.join(process.cwd(), 'src', 'html', '**', '*.html'), 148 | output: path.join(process.cwd(), 'dist', '[path]', '[name].html'), 149 | partials: [path.join(process.cwd(), 'src', 'partials', '**', '*.{html,svg}')], 150 | data: projectData, 151 | helpers: { 152 | webRoot: function() { 153 | return '{{webRoot}}'; 154 | }, 155 | config: function(data) { 156 | return data; 157 | }, 158 | ifEquals: function(arg1, arg2, options) { 159 | if (arg1 === arg2) { 160 | return options.fn(this); 161 | } 162 | return options.inverse(this); 163 | }, 164 | log: function(data) { 165 | console.log(data); 166 | }, 167 | limit: function(arr, limit) { 168 | if (!Array.isArray(arr)) { return []; } 169 | return arr.slice(0, limit); 170 | }, 171 | isEven: function(val, options) { 172 | return val % 2 === 0 ? options.fn(this) : options.inverse(this); 173 | } 174 | }, 175 | onBeforeSave: function(Handlebars, res, file) { 176 | const elem = file.split('//').pop().split('/').length; 177 | return res.split('{{webRoot}}').join('.'.repeat(elem)); 178 | }, 179 | }), 180 | new FixStyleOnlyEntriesPlugin(), 181 | new MiniCssExtractPlugin({ 182 | filename: paths.dist.css + '/[name].bundle.css', 183 | }), 184 | ] 185 | }; 186 | 187 | module.exports = wPackConfig; --------------------------------------------------------------------------------