├── .editorconfig
├── .gitignore
├── LICENSE
├── README.md
├── dist
├── assets
│ ├── favicon.ico
│ └── img
│ │ ├── avataaars.svg
│ │ └── portfolio
│ │ ├── cabin.png
│ │ ├── cake.png
│ │ ├── circus.png
│ │ ├── game.png
│ │ ├── safe.png
│ │ └── submarine.png
├── css
│ └── styles.css
├── index.html
└── js
│ └── scripts.js
├── package-lock.json
├── package.json
├── scripts
├── build-assets.js
├── build-pug.js
├── build-scripts.js
├── build-scss.js
├── clean.js
├── render-assets.js
├── render-pug.js
├── render-scripts.js
├── render-scss.js
├── sb-watch.js
├── start-debug.js
└── start.js
└── src
├── assets
├── favicon.ico
└── img
│ ├── avataaars.svg
│ └── portfolio
│ ├── cabin.png
│ ├── cake.png
│ ├── circus.png
│ ├── game.png
│ ├── safe.png
│ └── submarine.png
├── js
└── scripts.js
├── pug
├── includes
│ ├── portfolio-modal-1.pug
│ ├── portfolio-modal-2.pug
│ ├── portfolio-modal-3.pug
│ ├── portfolio-modal-4.pug
│ ├── portfolio-modal-5.pug
│ └── portfolio-modal-6.pug
└── index.pug
└── scss
├── _global.scss
├── _variables.scss
├── components
├── _buttons.scss
├── _divider.scss
├── _forms.scss
└── _navbar.scss
├── sections
├── _footer.scss
├── _masthead.scss
└── _portfolio.scss
├── styles.scss
└── variables
├── _borders.scss
├── _colors.scss
├── _forms.scss
├── _spacing.scss
└── _typography.scss
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 4
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | Copyright (c) 2013-2023 Start Bootstrap LLC
3 |
4 | Permission is hereby granted, free of charge, to any person obtaining a copy
5 | of this software and associated documentation files (the "Software"), to deal
6 | in the Software without restriction, including without limitation the rights
7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | copies of the Software, and to permit persons to whom the Software is
9 | furnished to do so, subject to the following conditions:
10 |
11 | The above copyright notice and this permission notice shall be included in
12 | all copies or substantial portions of the Software.
13 |
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [Start Bootstrap - Freelancer](https://startbootstrap.com/theme/freelancer/)
2 |
3 | [Freelancer](https://startbootstrap.com/theme/freelancer/) is a one page, freelancer portfolio theme built with [Bootstrap](https://getbootstrap.com/) created by [Start Bootstrap](https://startbootstrap.com/). This theme features several content sections, a responsive portfolio grid, modal windows for each portfolio item, and a working PHP based contact form.
4 |
5 | ## Preview
6 |
7 | [](https://startbootstrap.github.io/startbootstrap-freelancer/)
8 |
9 | **[View Live Preview](https://startbootstrap.github.io/startbootstrap-freelancer/)**
10 |
11 | ## Status
12 |
13 | [](https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/master/LICENSE)
14 | [](https://www.npmjs.com/package/startbootstrap-freelancer)
15 |
16 | ## Download and Installation
17 |
18 | To begin using this template, choose one of the following options to get started:
19 |
20 | - [Download the latest release on Start Bootstrap](https://startbootstrap.com/theme/freelancer/)
21 | - Install using npm: `npm i startbootstrap-freelancer`
22 | - Clone the repo: `git clone https://github.com/StartBootstrap/startbootstrap-freelancer.git`
23 | - [Fork, Clone, or Download on GitHub](https://github.com/StartBootstrap/startbootstrap-freelancer)
24 |
25 | ## Usage
26 |
27 | ### Basic Usage
28 |
29 | After downloading, simply edit the HTML and CSS files included with `dist` directory. These are the only files you need to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the `index.html` file in your web browser.
30 |
31 | ### Advanced Usage
32 |
33 | Clone the source files of the theme and navigate into the theme's root directory. Run `npm install` and then run `npm start` which will open up a preview of the template in your default browser, watch for changes to core template files, and live reload the browser when changes are saved. You can view the `package.json` file to see which scripts are included.
34 |
35 | #### npm Scripts
36 |
37 | - `npm run build` builds the project - this builds assets, HTML, JS, and CSS into `dist`
38 | - `npm run build:assets` copies the files in the `src/assets/` directory into `dist`
39 | - `npm run build:pug` compiles the Pug located in the `src/pug/` directory into `dist`
40 | - `npm run build:scripts` brings the `src/js/scripts.js` file into `dist`
41 | - `npm run build:scss` compiles the SCSS files located in the `src/scss/` directory into `dist`
42 | - `npm run clean` deletes the `dist` directory to prepare for rebuilding the project
43 | - `npm run start:debug` runs the project in debug mode
44 | - `npm start` or `npm run start` runs the project, launches a live preview in your default browser, and watches for changes made to files in `src`
45 |
46 | You must have npm installed in order to use this build environment.
47 |
48 | ### Contact Form
49 |
50 | The contact form available with this theme is prebuilt to use [SB Forms](https://startbootstrap.com/solution/contact-forms).
51 | SB Forms is a simple form solution for adding functional forms to your theme. Since this theme is prebuilt using our
52 | SB Forms markup, all you need to do is sign up for [SB Forms on Start Bootstrap](https://startbootstrap.com/solution/contact-forms).
53 |
54 | After signing up you will need to set the domain name your form will be used on, and you will then see your
55 | access key. Copy this and paste it into the `data-sb-form-api-token='API_TOKEN'` data attribute in place of
56 | `API_TOKEN`. That's it! Your forms will be up and running!
57 |
58 | If you aren't using SB Forms, simply delete the custom data attributes from the form, and remove the link above the
59 | closing `</body>` tag to SB Forms.
60 |
61 | ## Bugs and Issues
62 |
63 | Have a bug or an issue with this template? [Open a new issue](https://github.com/StartBootstrap/startbootstrap-freelancer/issues) here on GitHub or leave a comment on the [theme overview page at Start Bootstrap](https://startbootstrap.com/theme/freelancer/).
64 |
65 | ## About
66 |
67 | Start Bootstrap is an open source library of free Bootstrap themes and templates. All of the free themes and templates on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
68 |
69 | - <https://startbootstrap.com>
70 | - <https://twitter.com/SBootstrap>
71 |
72 | Start Bootstrap was created by and is maintained by **[David Miller](https://davidmiller.io/)**.
73 |
74 | - <https://davidmiller.io>
75 | - <https://twitter.com/davidmillerhere>
76 | - <https://github.com/davidtmiller>
77 |
78 | Start Bootstrap is based on the [Bootstrap](https://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat).
79 |
80 | ## Copyright and License
81 |
82 | Copyright 2013-2023 Start Bootstrap LLC. Code released under the [MIT](https://github.com/StartBootstrap/startbootstrap-freelancer/blob/master/LICENSE) license.
83 |
--------------------------------------------------------------------------------
/dist/assets/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/dist/assets/favicon.ico
--------------------------------------------------------------------------------
/dist/assets/img/avataaars.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | viewBox="0 0 264 280" style="enable-background:new 0 0 264 280;" xml:space="preserve">
5 | <style type="text/css">
6 | .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#E6E6E6;}
7 | .st1{filter:url(#Adobe_OpacityMaskFilter);}
8 | .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
9 | .st3{mask:url(#mask-2_1_);}
10 | .st4{fill-rule:evenodd;clip-rule:evenodd;fill:#2C3E50;}
11 | .st5{filter:url(#Adobe_OpacityMaskFilter_1_);}
12 | .st6{mask:url(#mask-4_1_);}
13 | .st7{fill-rule:evenodd;clip-rule:evenodd;fill:#D0C6AC;}
14 | .st8{filter:url(#Adobe_OpacityMaskFilter_2_);}
15 | .st9{mask:url(#mask-6_1_);}
16 | .st10{fill-rule:evenodd;clip-rule:evenodd;fill:#EDB98A;}
17 | .st11{filter:url(#Adobe_OpacityMaskFilter_3_);}
18 | .st12{mask:url(#mask-6_2_);fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.1;}
19 | .st13{filter:url(#Adobe_OpacityMaskFilter_4_);}
20 | .st14{mask:url(#react-mask-952_1_);}
21 | .st15{filter:url(#Adobe_OpacityMaskFilter_5_);}
22 | .st16{opacity:0.6;mask:url(#react-mask-952_2_);}
23 | .st17{fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.16;}
24 | .st18{fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.7;}
25 | .st19{filter:url(#Adobe_OpacityMaskFilter_6_);}
26 | .st20{mask:url(#react-mask-934_1_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
27 | .st21{filter:url(#Adobe_OpacityMaskFilter_7_);}
28 | .st22{mask:url(#react-mask-934_2_);}
29 | .st23{fill-rule:evenodd;clip-rule:evenodd;fill:#FF4F6D;}
30 | .st24{fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.6;}
31 | .st25{filter:url(#Adobe_OpacityMaskFilter_8_);}
32 | .st26{mask:url(#react-mask-925_1_);}
33 | .st27{fill-rule:evenodd;clip-rule:evenodd;fill:#28354B;}
34 | .st28{filter:url(#Adobe_OpacityMaskFilter_9_);}
35 | .st29{mask:url(#react-mask-924_1_);}
36 | .st30{fill-rule:evenodd;clip-rule:evenodd;fill:#4A312C;}
37 | </style>
38 | <desc>Created with getavataaars.com</desc>
39 | <g>
40 | <g transform="translate(-825.000000, -1100.000000)">
41 | <g transform="translate(825.000000, 1100.000000)">
42 | <g id="Circle" transform="translate(12.000000, 40.000000)">
43 | <g id="Circle-Background">
44 | <circle class="st0" cx="120" cy="120" r="120"/>
45 | </g>
46 | <defs>
47 | <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="240" height="240">
48 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
49 | </filter>
50 | </defs>
51 | <mask maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="240" id="mask-2_1_">
52 | <g class="st1">
53 | <circle id="path-1_1_" class="st2" cx="120" cy="120" r="120"/>
54 | </g>
55 | </mask>
56 | <g class="st3">
57 | <rect class="st4" width="240" height="240"/>
58 | </g>
59 | </g>
60 | <g id="Mask">
61 | </g>
62 | <defs>
63 | <filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="-1" y="0" width="265" height="280">
64 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
65 | </filter>
66 | </defs>
67 | <mask maskUnits="userSpaceOnUse" x="-1" y="0" width="265" height="280" id="mask-4_1_">
68 | <g class="st5">
69 | <path id="path-3_1_" class="st2" d="M12,160c0,66.3,53.7,120,120,120s120-53.7,120-120h12V0H0v160H12z"/>
70 | </g>
71 | </mask>
72 | <g id="Avataaar" class="st6">
73 | <g id="Body" transform="translate(32.000000, 36.000000)">
74 | <g>
75 | <path class="st7" d="M124,144.6V163h4l0,0c39.8,0,72,32.2,72,72v9H0v-9c0-39.8,32.2-72,72-72l0,0h4v-18.4
76 | c-17.2-8.2-29.6-24.9-31.7-44.7C38.5,99.1,34,94.1,34,88V74c0-5.9,4.3-10.9,10-11.8V56l0,0c0-30.9,25.1-56,56-56l0,0l0,0
77 | c30.9,0,56,25.1,56,56v6.2c5.7,1,10,5.9,10,11.8v14c0,6.1-4.5,11.1-10.3,11.9C153.6,119.7,141.2,136.4,124,144.6z"/>
78 | </g>
79 | <defs>
80 | <filter id="Adobe_OpacityMaskFilter_2_" filterUnits="userSpaceOnUse" x="-32" y="0" width="264" height="244">
81 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
82 | </filter>
83 | </defs>
84 | <mask maskUnits="userSpaceOnUse" x="-32" y="0" width="264" height="244" id="mask-6_1_">
85 | <g class="st8">
86 | <path id="path-5_1_" class="st2" d="M124,144.6V163h4l0,0c39.8,0,72,32.2,72,72v9H0v-9c0-39.8,32.2-72,72-72l0,0h4v-18.4
87 | c-17.2-8.2-29.6-24.9-31.7-44.7C38.5,99.1,34,94.1,34,88V74c0-5.9,4.3-10.9,10-11.8V56l0,0c0-30.9,25.1-56,56-56l0,0l0,0
88 | c30.9,0,56,25.1,56,56v6.2c5.7,1,10,5.9,10,11.8v14c0,6.1-4.5,11.1-10.3,11.9C153.6,119.7,141.2,136.4,124,144.6z"/>
89 | </g>
90 | </mask>
91 | <g class="st9">
92 | <g id="Color" transform="translate(-32.000000, 0.000000)">
93 | <rect class="st10" width="264" height="244"/>
94 | </g>
95 | </g>
96 | <defs>
97 | <filter id="Adobe_OpacityMaskFilter_3_" filterUnits="userSpaceOnUse" x="44" y="79" width="112" height="79">
98 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
99 | </filter>
100 | </defs>
101 | <mask maskUnits="userSpaceOnUse" x="44" y="79" width="112" height="79" id="mask-6_2_">
102 | <g class="st11">
103 | <path id="path-5_2_" class="st2" d="M124,144.6V163h4l0,0c39.8,0,72,32.2,72,72v9H0v-9c0-39.8,32.2-72,72-72l0,0h4v-18.4
104 | c-17.2-8.2-29.6-24.9-31.7-44.7C38.5,99.1,34,94.1,34,88V74c0-5.9,4.3-10.9,10-11.8V56l0,0c0-30.9,25.1-56,56-56l0,0l0,0
105 | c30.9,0,56,25.1,56,56v6.2c5.7,1,10,5.9,10,11.8v14c0,6.1-4.5,11.1-10.3,11.9C153.6,119.7,141.2,136.4,124,144.6z"/>
106 | </g>
107 | </mask>
108 | <path id="Neck-Shadow" class="st12" d="M156,79v23c0,30.9-25.1,56-56,56s-56-25.1-56-56V79v15c0,30.9,25.1,56,56,56
109 | s56-25.1,56-56V79z"/>
110 | </g>
111 | <g transform="translate(0.000000, 170.000000)">
112 | <g id="Clothes">
113 | <path class="st0" d="M166,29.3c37,3,66,34,66,71.8v8.9H32v-8.9C32,63,61.6,31.8,99,29.2c0,0.4,0,0.7,0,1.1
114 | c0,11.9,15,21.5,33.5,21.5S166,42.2,166,30.3C166,30,166,29.6,166,29.3z"/>
115 | </g>
116 | <defs>
117 | <filter id="Adobe_OpacityMaskFilter_4_" filterUnits="userSpaceOnUse" x="0" y="0" width="264" height="110">
118 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
119 | </filter>
120 | </defs>
121 | <mask maskUnits="userSpaceOnUse" x="0" y="0" width="264" height="110" id="react-mask-952_1_">
122 | <g class="st13">
123 | <path id="react-path-951_1_" class="st2" d="M166,29.3c37,3,66,34,66,71.8v8.9H32v-8.9C32,63,61.6,31.8,99,29.2
124 | c0,0.4,0,0.7,0,1.1c0,11.9,15,21.5,33.5,21.5S166,42.2,166,30.3C166,30,166,29.6,166,29.3z"/>
125 | </g>
126 | </mask>
127 | <g class="st14">
128 | <rect class="st2" width="264" height="110"/>
129 | </g>
130 | <defs>
131 | <filter id="Adobe_OpacityMaskFilter_5_" filterUnits="userSpaceOnUse" x="92.9" y="4.9" width="79.3" height="53.8">
132 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
133 | </filter>
134 | </defs>
135 | <mask maskUnits="userSpaceOnUse" x="92.9" y="4.9" width="79.3" height="53.8" id="react-mask-952_2_">
136 | <g class="st15">
137 | <path id="react-path-951_2_" class="st2" d="M166,29.3c37,3,66,34,66,71.8v8.9H32v-8.9C32,63,61.6,31.8,99,29.2
138 | c0,0.4,0,0.7,0,1.1c0,11.9,15,21.5,33.5,21.5S166,42.2,166,30.3C166,30,166,29.6,166,29.3z"/>
139 | </g>
140 | </mask>
141 | <g id="Shadowy" class="st16">
142 | <g transform="translate(92.000000, 4.000000)">
143 | <ellipse class="st17" cx="40.5" cy="27.8" rx="39.6" ry="26.9"/>
144 | </g>
145 | </g>
146 | </g>
147 | <g id="Face" transform="translate(76.000000, 82.000000)">
148 | <g transform="translate(2.000000, 52.000000)">
149 | <g id="Mouth">
150 | <path class="st18" d="M35.1,15.1C36.2,24.6,44.2,32,54,32c9.8,0,17.9-7.4,18.9-17c0.1-0.8-0.8-2-1.8-2c-14.9,0-26.3,0-34,0
151 | C36,13,35,14.2,35.1,15.1z"/>
152 | </g>
153 | <defs>
154 | <filter id="Adobe_OpacityMaskFilter_6_" filterUnits="userSpaceOnUse" x="39" y="2" width="31" height="16">
155 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
156 | </filter>
157 | </defs>
158 | <mask maskUnits="userSpaceOnUse" x="39" y="2" width="31" height="16" id="react-mask-934_1_">
159 | <g class="st19">
160 | <path id="react-path-933_1_" class="st2" d="M35.1,15.1C36.2,24.6,44.2,32,54,32c9.8,0,17.9-7.4,18.9-17
161 | c0.1-0.8-0.8-2-1.8-2c-14.9,0-26.3,0-34,0C36,13,35,14.2,35.1,15.1z"/>
162 | </g>
163 | </mask>
164 | <path id="Teeth" class="st20" d="M44,2h21c2.8,0,5,2.2,5,5v6c0,2.8-2.2,5-5,5H44c-2.8,0-5-2.2-5-5V7C39,4.2,41.2,2,44,2z"/>
165 | <defs>
166 | <filter id="Adobe_OpacityMaskFilter_7_" filterUnits="userSpaceOnUse" x="38" y="24" width="32" height="22">
167 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
168 | </filter>
169 | </defs>
170 | <mask maskUnits="userSpaceOnUse" x="38" y="24" width="32" height="22" id="react-mask-934_2_">
171 | <g class="st21">
172 | <path id="react-path-933_2_" class="st2" d="M35.1,15.1C36.2,24.6,44.2,32,54,32c9.8,0,17.9-7.4,18.9-17
173 | c0.1-0.8-0.8-2-1.8-2c-14.9,0-26.3,0-34,0C36,13,35,14.2,35.1,15.1z"/>
174 | </g>
175 | </mask>
176 | <g id="Tongue" class="st22">
177 | <g transform="translate(38.000000, 24.000000)">
178 | <circle class="st23" cx="11" cy="11" r="11"/>
179 | <circle class="st23" cx="21" cy="11" r="11"/>
180 | </g>
181 | </g>
182 | </g>
183 | <g transform="translate(28.000000, 40.000000)">
184 | <path id="Nose" class="st17" d="M16,8c0,4.4,5.4,8,12,8l0,0c6.6,0,12-3.6,12-8"/>
185 | </g>
186 | <g transform="translate(0.000000, 8.000000)">
187 | <path id="Squint" class="st24" d="M16.2,22.4C18,18.6,22.2,16,27,16c4.8,0,9,2.6,10.8,6.4c0.6,1.1-0.2,2-1,1.4
188 | c-2.5-2.1-5.9-3.4-9.8-3.4c-3.7,0-7.1,1.2-9.6,3.2C16.5,24.3,15.6,23.6,16.2,22.4z"/>
189 | <path class="st24" d="M74.2,22.4C76,18.6,80.2,16,85,16c4.8,0,9,2.6,10.8,6.4c0.6,1.1-0.2,2-1,1.4c-2.5-2.1-5.9-3.4-9.8-3.4
190 | c-3.7,0-7.1,1.2-9.6,3.2C74.5,24.3,73.6,23.6,74.2,22.4z"/>
191 | </g>
192 | <g>
193 | <path id="Eyebrow" class="st24" d="M26.5,6.1c-5.8,0.3-15.2,4.5-15,10.3c0,0.2,0.3,0.3,0.4,0.1c2.8-3,22.3-5.9,29.2-4.4
194 | c0.6,0.1,1.1-0.5,0.7-0.9C38.5,7.5,31.7,5.9,26.5,6.1"/>
195 | <path class="st24" d="M86.5,6.1c5.8,0.3,15.2,4.5,15,10.3c0,0.2-0.3,0.3-0.4,0.1c-2.8-3-22.3-5.9-29.2-4.4
196 | c-0.6,0.1-1.1-0.5-0.7-0.9C74.5,7.5,81.3,5.9,86.5,6.1"/>
197 | </g>
198 | </g>
199 | <g id="Top">
200 | <defs>
201 | <filter id="Adobe_OpacityMaskFilter_8_" filterUnits="userSpaceOnUse" x="-1" y="0" width="264" height="280">
202 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
203 | </filter>
204 | </defs>
205 | <mask maskUnits="userSpaceOnUse" x="-1" y="0" width="264" height="280" id="react-mask-925_1_">
206 | <g class="st25">
207 | <rect id="react-path-927_1_" class="st2" width="264" height="280"/>
208 | </g>
209 | </mask>
210 | <g class="st26">
211 | <g transform="translate(-1.000000, 0.000000)">
212 | <g id="Short-Hair">
213 | <path class="st27" d="M183.7,38.9c5.4-5,6.7-15,3.6-21.5c-3.8-8-11.4-9-18.7-5.5c-6.9,3.3-13.1,4.4-20.6,2.8
214 | c-7.3-1.5-14.1-4.3-21.6-4.7C114,9.3,102,13.9,93.6,23.1c-1.6,1.8-2.9,3.8-4.1,5.8c-1,1.6-2.1,3.4-2.5,5.3
215 | c-0.2,0.9,0.2,3.1-0.3,3.8c-0.5,0.8-2.3,1.5-3.1,2.1c-1.6,1.2-2.9,2.5-4.2,4c-2.7,3.2-4.1,6.6-5.4,10.6
216 | c-4.1,13.2-4.5,29,0.9,42c0.7,1.7,2.9,5.4,4.2,1.6c0.3-0.7-0.3-3.2-0.3-3.9c0-2.7,1.5-20.7,8-30.8c2.1-3.3,12-15.6,14-15.7
217 | c1.1,1.7,11.9,12.5,39.9,11.2c12.7-0.6,22.4-6.3,24.7-8.7c1,5.5,13,13.8,14.8,17.2c5.3,9.8,6.4,30.3,8.4,30.3
218 | s3.5-5.2,3.9-6.2c3.1-7.4,3.6-16.6,3.3-24.6C195.5,57,191.3,45.9,183.7,38.9z"/>
219 | </g>
220 | <defs>
221 | <filter id="Adobe_OpacityMaskFilter_9_" filterUnits="userSpaceOnUse" x="0" y="0" width="264" height="280">
222 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
223 | </filter>
224 | </defs>
225 | <mask maskUnits="userSpaceOnUse" x="0" y="0" width="264" height="280" id="react-mask-924_1_">
226 | <g class="st28">
227 | <path id="react-path-926_1_" class="st2" d="M183.7,38.9c5.4-5,6.7-15,3.6-21.5c-3.8-8-11.4-9-18.7-5.5
228 | c-6.9,3.3-13.1,4.4-20.6,2.8c-7.3-1.5-14.1-4.3-21.6-4.7C114,9.3,102,13.9,93.6,23.1c-1.6,1.8-2.9,3.8-4.1,5.8
229 | c-1,1.6-2.1,3.4-2.5,5.3c-0.2,0.9,0.2,3.1-0.3,3.8c-0.5,0.8-2.3,1.5-3.1,2.1c-1.6,1.2-2.9,2.5-4.2,4
230 | c-2.7,3.2-4.1,6.6-5.4,10.6c-4.1,13.2-4.5,29,0.9,42c0.7,1.7,2.9,5.4,4.2,1.6c0.3-0.7-0.3-3.2-0.3-3.9
231 | c0-2.7,1.5-20.7,8-30.8c2.1-3.3,12-15.6,14-15.7c1.1,1.7,11.9,12.5,39.9,11.2c12.7-0.6,22.4-6.3,24.7-8.7
232 | c1,5.5,13,13.8,14.8,17.2c5.3,9.8,6.4,30.3,8.4,30.3s3.5-5.2,3.9-6.2c3.1-7.4,3.6-16.6,3.3-24.6
233 | C195.5,57,191.3,45.9,183.7,38.9z"/>
234 | </g>
235 | </mask>
236 | <g class="st29">
237 | <g transform="translate(0.000000, 0.000000) ">
238 | <rect class="st30" width="264" height="280"/>
239 | </g>
240 | </g>
241 | </g>
242 | </g>
243 | </g>
244 | </g>
245 | </g>
246 | </g>
247 | </g>
248 | </svg>
249 |
--------------------------------------------------------------------------------
/dist/assets/img/portfolio/cabin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/dist/assets/img/portfolio/cabin.png
--------------------------------------------------------------------------------
/dist/assets/img/portfolio/cake.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/dist/assets/img/portfolio/cake.png
--------------------------------------------------------------------------------
/dist/assets/img/portfolio/circus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/dist/assets/img/portfolio/circus.png
--------------------------------------------------------------------------------
/dist/assets/img/portfolio/game.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/dist/assets/img/portfolio/game.png
--------------------------------------------------------------------------------
/dist/assets/img/portfolio/safe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/dist/assets/img/portfolio/safe.png
--------------------------------------------------------------------------------
/dist/assets/img/portfolio/submarine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/dist/assets/img/portfolio/submarine.png
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="utf-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6 | <meta name="description" content="" />
7 | <meta name="author" content="" />
8 | <title>Freelancer - Start Bootstrap Theme</title>
9 | <!-- Favicon-->
10 | <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
11 | <!-- Font Awesome icons (free version)-->
12 | <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
13 | <!-- Google fonts-->
14 | <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
15 | <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
16 | <!-- Core theme CSS (includes Bootstrap)-->
17 | <link href="css/styles.css" rel="stylesheet" />
18 | </head>
19 | <body id="page-top">
20 | <!-- Navigation-->
21 | <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
22 | <div class="container">
23 | <a class="navbar-brand" href="#page-top">Start Bootstrap</a>
24 | <button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
25 | Menu
26 | <i class="fas fa-bars"></i>
27 | </button>
28 | <div class="collapse navbar-collapse" id="navbarResponsive">
29 | <ul class="navbar-nav ms-auto">
30 | <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#portfolio">Portfolio</a></li>
31 | <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">About</a></li>
32 | <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#contact">Contact</a></li>
33 | </ul>
34 | </div>
35 | </div>
36 | </nav>
37 | <!-- Masthead-->
38 | <header class="masthead bg-primary text-white text-center">
39 | <div class="container d-flex align-items-center flex-column">
40 | <!-- Masthead Avatar Image-->
41 | <img class="masthead-avatar mb-5" src="assets/img/avataaars.svg" alt="..." />
42 | <!-- Masthead Heading-->
43 | <h1 class="masthead-heading text-uppercase mb-0">Start Bootstrap</h1>
44 | <!-- Icon Divider-->
45 | <div class="divider-custom divider-light">
46 | <div class="divider-custom-line"></div>
47 | <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
48 | <div class="divider-custom-line"></div>
49 | </div>
50 | <!-- Masthead Subheading-->
51 | <p class="masthead-subheading font-weight-light mb-0">Graphic Artist - Web Designer - Illustrator</p>
52 | </div>
53 | </header>
54 | <!-- Portfolio Section-->
55 | <section class="page-section portfolio" id="portfolio">
56 | <div class="container">
57 | <!-- Portfolio Section Heading-->
58 | <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Portfolio</h2>
59 | <!-- Icon Divider-->
60 | <div class="divider-custom">
61 | <div class="divider-custom-line"></div>
62 | <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
63 | <div class="divider-custom-line"></div>
64 | </div>
65 | <!-- Portfolio Grid Items-->
66 | <div class="row justify-content-center">
67 | <!-- Portfolio Item 1-->
68 | <div class="col-md-6 col-lg-4 mb-5">
69 | <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
70 | <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
71 | <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
72 | </div>
73 | <img class="img-fluid" src="assets/img/portfolio/cabin.png" alt="..." />
74 | </div>
75 | </div>
76 | <!-- Portfolio Item 2-->
77 | <div class="col-md-6 col-lg-4 mb-5">
78 | <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal2">
79 | <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
80 | <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
81 | </div>
82 | <img class="img-fluid" src="assets/img/portfolio/cake.png" alt="..." />
83 | </div>
84 | </div>
85 | <!-- Portfolio Item 3-->
86 | <div class="col-md-6 col-lg-4 mb-5">
87 | <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal3">
88 | <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
89 | <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
90 | </div>
91 | <img class="img-fluid" src="assets/img/portfolio/circus.png" alt="..." />
92 | </div>
93 | </div>
94 | <!-- Portfolio Item 4-->
95 | <div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
96 | <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal4">
97 | <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
98 | <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
99 | </div>
100 | <img class="img-fluid" src="assets/img/portfolio/game.png" alt="..." />
101 | </div>
102 | </div>
103 | <!-- Portfolio Item 5-->
104 | <div class="col-md-6 col-lg-4 mb-5 mb-md-0">
105 | <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal5">
106 | <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
107 | <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
108 | </div>
109 | <img class="img-fluid" src="assets/img/portfolio/safe.png" alt="..." />
110 | </div>
111 | </div>
112 | <!-- Portfolio Item 6-->
113 | <div class="col-md-6 col-lg-4">
114 | <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal6">
115 | <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
116 | <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
117 | </div>
118 | <img class="img-fluid" src="assets/img/portfolio/submarine.png" alt="..." />
119 | </div>
120 | </div>
121 | </div>
122 | </div>
123 | </section>
124 | <!-- About Section-->
125 | <section class="page-section bg-primary text-white mb-0" id="about">
126 | <div class="container">
127 | <!-- About Section Heading-->
128 | <h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
129 | <!-- Icon Divider-->
130 | <div class="divider-custom divider-light">
131 | <div class="divider-custom-line"></div>
132 | <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
133 | <div class="divider-custom-line"></div>
134 | </div>
135 | <!-- About Section Content-->
136 | <div class="row">
137 | <div class="col-lg-4 ms-auto"><p class="lead">Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional SASS stylesheets for easy customization.</p></div>
138 | <div class="col-lg-4 me-auto"><p class="lead">You can create your own custom avatar for the masthead, change the icon in the dividers, and add your email address to the contact form to make it fully functional!</p></div>
139 | </div>
140 | <!-- About Section Button-->
141 | <div class="text-center mt-4">
142 | <a class="btn btn-xl btn-outline-light" href="https://startbootstrap.com/theme/freelancer/">
143 | <i class="fas fa-download me-2"></i>
144 | Free Download!
145 | </a>
146 | </div>
147 | </div>
148 | </section>
149 | <!-- Contact Section-->
150 | <section class="page-section" id="contact">
151 | <div class="container">
152 | <!-- Contact Section Heading-->
153 | <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Contact Me</h2>
154 | <!-- Icon Divider-->
155 | <div class="divider-custom">
156 | <div class="divider-custom-line"></div>
157 | <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
158 | <div class="divider-custom-line"></div>
159 | </div>
160 | <!-- Contact Section Form-->
161 | <div class="row justify-content-center">
162 | <div class="col-lg-8 col-xl-7">
163 | <!-- * * * * * * * * * * * * * * *-->
164 | <!-- * * SB Forms Contact Form * *-->
165 | <!-- * * * * * * * * * * * * * * *-->
166 | <!-- This form is pre-integrated with SB Forms.-->
167 | <!-- To make this form functional, sign up at-->
168 | <!-- https://startbootstrap.com/solution/contact-forms-->
169 | <!-- to get an API token!-->
170 | <form id="contactForm" data-sb-form-api-token="API_TOKEN">
171 | <!-- Name input-->
172 | <div class="form-floating mb-3">
173 | <input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
174 | <label for="name">Full name</label>
175 | <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
176 | </div>
177 | <!-- Email address input-->
178 | <div class="form-floating mb-3">
179 | <input class="form-control" id="email" type="email" placeholder="name@example.com" data-sb-validations="required,email" />
180 | <label for="email">Email address</label>
181 | <div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
182 | <div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
183 | </div>
184 | <!-- Phone number input-->
185 | <div class="form-floating mb-3">
186 | <input class="form-control" id="phone" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
187 | <label for="phone">Phone number</label>
188 | <div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
189 | </div>
190 | <!-- Message input-->
191 | <div class="form-floating mb-3">
192 | <textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
193 | <label for="message">Message</label>
194 | <div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
195 | </div>
196 | <!-- Submit success message-->
197 | <!---->
198 | <!-- This is what your users will see when the form-->
199 | <!-- has successfully submitted-->
200 | <div class="d-none" id="submitSuccessMessage">
201 | <div class="text-center mb-3">
202 | <div class="fw-bolder">Form submission successful!</div>
203 | To activate this form, sign up at
204 | <br />
205 | <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
206 | </div>
207 | </div>
208 | <!-- Submit error message-->
209 | <!---->
210 | <!-- This is what your users will see when there is-->
211 | <!-- an error submitting the form-->
212 | <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
213 | <!-- Submit Button-->
214 | <button class="btn btn-primary btn-xl disabled" id="submitButton" type="submit">Send</button>
215 | </form>
216 | </div>
217 | </div>
218 | </div>
219 | </section>
220 | <!-- Footer-->
221 | <footer class="footer text-center">
222 | <div class="container">
223 | <div class="row">
224 | <!-- Footer Location-->
225 | <div class="col-lg-4 mb-5 mb-lg-0">
226 | <h4 class="text-uppercase mb-4">Location</h4>
227 | <p class="lead mb-0">
228 | 2215 John Daniel Drive
229 | <br />
230 | Clark, MO 65243
231 | </p>
232 | </div>
233 | <!-- Footer Social Icons-->
234 | <div class="col-lg-4 mb-5 mb-lg-0">
235 | <h4 class="text-uppercase mb-4">Around the Web</h4>
236 | <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-facebook-f"></i></a>
237 | <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-twitter"></i></a>
238 | <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-linkedin-in"></i></a>
239 | <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-dribbble"></i></a>
240 | </div>
241 | <!-- Footer About Text-->
242 | <div class="col-lg-4">
243 | <h4 class="text-uppercase mb-4">About Freelancer</h4>
244 | <p class="lead mb-0">
245 | Freelance is a free to use, MIT licensed Bootstrap theme created by
246 | <a href="http://startbootstrap.com">Start Bootstrap</a>
247 | .
248 | </p>
249 | </div>
250 | </div>
251 | </div>
252 | </footer>
253 | <!-- Copyright Section-->
254 | <div class="copyright py-4 text-center text-white">
255 | <div class="container"><small>Copyright © Your Website 2023</small></div>
256 | </div>
257 | <!-- Portfolio Modals-->
258 | <!-- Portfolio Modal 1-->
259 | <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" aria-labelledby="portfolioModal1" aria-hidden="true">
260 | <div class="modal-dialog modal-xl">
261 | <div class="modal-content">
262 | <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
263 | <div class="modal-body text-center pb-5">
264 | <div class="container">
265 | <div class="row justify-content-center">
266 | <div class="col-lg-8">
267 | <!-- Portfolio Modal - Title-->
268 | <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Log Cabin</h2>
269 | <!-- Icon Divider-->
270 | <div class="divider-custom">
271 | <div class="divider-custom-line"></div>
272 | <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
273 | <div class="divider-custom-line"></div>
274 | </div>
275 | <!-- Portfolio Modal - Image-->
276 | <img class="img-fluid rounded mb-5" src="assets/img/portfolio/cabin.png" alt="..." />
277 | <!-- Portfolio Modal - Text-->
278 | <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
279 | <button class="btn btn-primary" data-bs-dismiss="modal">
280 | <i class="fas fa-xmark fa-fw"></i>
281 | Close Window
282 | </button>
283 | </div>
284 | </div>
285 | </div>
286 | </div>
287 | </div>
288 | </div>
289 | </div>
290 | <!-- Portfolio Modal 2-->
291 | <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" aria-labelledby="portfolioModal2" aria-hidden="true">
292 | <div class="modal-dialog modal-xl">
293 | <div class="modal-content">
294 | <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
295 | <div class="modal-body text-center pb-5">
296 | <div class="container">
297 | <div class="row justify-content-center">
298 | <div class="col-lg-8">
299 | <!-- Portfolio Modal - Title-->
300 | <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Tasty Cake</h2>
301 | <!-- Icon Divider-->
302 | <div class="divider-custom">
303 | <div class="divider-custom-line"></div>
304 | <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
305 | <div class="divider-custom-line"></div>
306 | </div>
307 | <!-- Portfolio Modal - Image-->
308 | <img class="img-fluid rounded mb-5" src="assets/img/portfolio/cake.png" alt="..." />
309 | <!-- Portfolio Modal - Text-->
310 | <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
311 | <button class="btn btn-primary" data-bs-dismiss="modal">
312 | <i class="fas fa-xmark fa-fw"></i>
313 | Close Window
314 | </button>
315 | </div>
316 | </div>
317 | </div>
318 | </div>
319 | </div>
320 | </div>
321 | </div>
322 | <!-- Portfolio Modal 3-->
323 | <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" aria-labelledby="portfolioModal3" aria-hidden="true">
324 | <div class="modal-dialog modal-xl">
325 | <div class="modal-content">
326 | <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
327 | <div class="modal-body text-center pb-5">
328 | <div class="container">
329 | <div class="row justify-content-center">
330 | <div class="col-lg-8">
331 | <!-- Portfolio Modal - Title-->
332 | <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Circus Tent</h2>
333 | <!-- Icon Divider-->
334 | <div class="divider-custom">
335 | <div class="divider-custom-line"></div>
336 | <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
337 | <div class="divider-custom-line"></div>
338 | </div>
339 | <!-- Portfolio Modal - Image-->
340 | <img class="img-fluid rounded mb-5" src="assets/img/portfolio/circus.png" alt="..." />
341 | <!-- Portfolio Modal - Text-->
342 | <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
343 | <button class="btn btn-primary" data-bs-dismiss="modal">
344 | <i class="fas fa-xmark fa-fw"></i>
345 | Close Window
346 | </button>
347 | </div>
348 | </div>
349 | </div>
350 | </div>
351 | </div>
352 | </div>
353 | </div>
354 | <!-- Portfolio Modal 4-->
355 | <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" aria-labelledby="portfolioModal4" aria-hidden="true">
356 | <div class="modal-dialog modal-xl">
357 | <div class="modal-content">
358 | <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
359 | <div class="modal-body text-center pb-5">
360 | <div class="container">
361 | <div class="row justify-content-center">
362 | <div class="col-lg-8">
363 | <!-- Portfolio Modal - Title-->
364 | <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Controller</h2>
365 | <!-- Icon Divider-->
366 | <div class="divider-custom">
367 | <div class="divider-custom-line"></div>
368 | <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
369 | <div class="divider-custom-line"></div>
370 | </div>
371 | <!-- Portfolio Modal - Image-->
372 | <img class="img-fluid rounded mb-5" src="assets/img/portfolio/game.png" alt="..." />
373 | <!-- Portfolio Modal - Text-->
374 | <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
375 | <button class="btn btn-primary" data-bs-dismiss="modal">
376 | <i class="fas fa-xmark fa-fw"></i>
377 | Close Window
378 | </button>
379 | </div>
380 | </div>
381 | </div>
382 | </div>
383 | </div>
384 | </div>
385 | </div>
386 | <!-- Portfolio Modal 5-->
387 | <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" aria-labelledby="portfolioModal5" aria-hidden="true">
388 | <div class="modal-dialog modal-xl">
389 | <div class="modal-content">
390 | <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
391 | <div class="modal-body text-center pb-5">
392 | <div class="container">
393 | <div class="row justify-content-center">
394 | <div class="col-lg-8">
395 | <!-- Portfolio Modal - Title-->
396 | <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Locked Safe</h2>
397 | <!-- Icon Divider-->
398 | <div class="divider-custom">
399 | <div class="divider-custom-line"></div>
400 | <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
401 | <div class="divider-custom-line"></div>
402 | </div>
403 | <!-- Portfolio Modal - Image-->
404 | <img class="img-fluid rounded mb-5" src="assets/img/portfolio/safe.png" alt="..." />
405 | <!-- Portfolio Modal - Text-->
406 | <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
407 | <button class="btn btn-primary" data-bs-dismiss="modal">
408 | <i class="fas fa-xmark fa-fw"></i>
409 | Close Window
410 | </button>
411 | </div>
412 | </div>
413 | </div>
414 | </div>
415 | </div>
416 | </div>
417 | </div>
418 | <!-- Portfolio Modal 6-->
419 | <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" aria-labelledby="portfolioModal6" aria-hidden="true">
420 | <div class="modal-dialog modal-xl">
421 | <div class="modal-content">
422 | <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
423 | <div class="modal-body text-center pb-5">
424 | <div class="container">
425 | <div class="row justify-content-center">
426 | <div class="col-lg-8">
427 | <!-- Portfolio Modal - Title-->
428 | <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Submarine</h2>
429 | <!-- Icon Divider-->
430 | <div class="divider-custom">
431 | <div class="divider-custom-line"></div>
432 | <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
433 | <div class="divider-custom-line"></div>
434 | </div>
435 | <!-- Portfolio Modal - Image-->
436 | <img class="img-fluid rounded mb-5" src="assets/img/portfolio/submarine.png" alt="..." />
437 | <!-- Portfolio Modal - Text-->
438 | <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
439 | <button class="btn btn-primary" data-bs-dismiss="modal">
440 | <i class="fas fa-xmark fa-fw"></i>
441 | Close Window
442 | </button>
443 | </div>
444 | </div>
445 | </div>
446 | </div>
447 | </div>
448 | </div>
449 | </div>
450 | <!-- Bootstrap core JS-->
451 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
452 | <!-- Core theme JS-->
453 | <script src="js/scripts.js"></script>
454 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
455 | <!-- * * SB Forms JS * *-->
456 | <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
457 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
458 | <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
459 | </body>
460 | </html>
461 |
--------------------------------------------------------------------------------
/dist/js/scripts.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Start Bootstrap - Freelancer v7.0.7 (https://startbootstrap.com/theme/freelancer)
3 | * Copyright 2013-2023 Start Bootstrap
4 | * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-freelancer/blob/master/LICENSE)
5 | */
6 | //
7 | // Scripts
8 | //
9 |
10 | window.addEventListener('DOMContentLoaded', event => {
11 |
12 | // Navbar shrink function
13 | var navbarShrink = function () {
14 | const navbarCollapsible = document.body.querySelector('#mainNav');
15 | if (!navbarCollapsible) {
16 | return;
17 | }
18 | if (window.scrollY === 0) {
19 | navbarCollapsible.classList.remove('navbar-shrink')
20 | } else {
21 | navbarCollapsible.classList.add('navbar-shrink')
22 | }
23 |
24 | };
25 |
26 | // Shrink the navbar
27 | navbarShrink();
28 |
29 | // Shrink the navbar when page is scrolled
30 | document.addEventListener('scroll', navbarShrink);
31 |
32 | // Activate Bootstrap scrollspy on the main nav element
33 | const mainNav = document.body.querySelector('#mainNav');
34 | if (mainNav) {
35 | new bootstrap.ScrollSpy(document.body, {
36 | target: '#mainNav',
37 | rootMargin: '0px 0px -40%',
38 | });
39 | };
40 |
41 | // Collapse responsive navbar when toggler is visible
42 | const navbarToggler = document.body.querySelector('.navbar-toggler');
43 | const responsiveNavItems = [].slice.call(
44 | document.querySelectorAll('#navbarResponsive .nav-link')
45 | );
46 | responsiveNavItems.map(function (responsiveNavItem) {
47 | responsiveNavItem.addEventListener('click', () => {
48 | if (window.getComputedStyle(navbarToggler).display !== 'none') {
49 | navbarToggler.click();
50 | }
51 | });
52 | });
53 |
54 | });
55 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Freelancer",
3 | "name": "startbootstrap-freelancer",
4 | "version": "7.0.7",
5 | "scripts": {
6 | "build": "npm run clean && npm run build:pug && npm run build:scss && npm run build:scripts && npm run build:assets",
7 | "build:assets": "node scripts/build-assets.js",
8 | "build:pug": "node scripts/build-pug.js",
9 | "build:scripts": "node scripts/build-scripts.js",
10 | "build:scss": "node scripts/build-scss.js",
11 | "clean": "node scripts/clean.js",
12 | "start": "npm run build && node scripts/start.js",
13 | "start:debug": "npm run build && node scripts/start-debug.js"
14 | },
15 | "description": "A freelancer portfolio HTML theme for Bootstrap.",
16 | "keywords": [
17 | "css",
18 | "sass",
19 | "scss",
20 | "html",
21 | "pug",
22 | "responsive",
23 | "theme",
24 | "template"
25 | ],
26 | "homepage": "https://startbootstrap.com/theme/freelancer",
27 | "bugs": {
28 | "url": "https://github.com/StartBootstrap/startbootstrap-freelancer/issues",
29 | "email": "feedback@startbootstrap.com"
30 | },
31 | "license": "MIT",
32 | "author": "Start Bootstrap",
33 | "contributors": [
34 | "David Miller (https://davidmiller.io/)"
35 | ],
36 | "repository": {
37 | "type": "git",
38 | "url": "https://github.com/StartBootstrap/startbootstrap-freelancer.git"
39 | },
40 | "dependencies": {
41 | "bootstrap": "5.2.3"
42 | },
43 | "devDependencies": {
44 | "autoprefixer": "10.4.14",
45 | "browser-sync": "2.29.1",
46 | "chokidar": "3.5.3",
47 | "concurrently": "6.3.0",
48 | "postcss": "8.4.21",
49 | "prettier": "2.8.6",
50 | "pug": "3.0.2",
51 | "sass": "1.60.0",
52 | "shelljs": "0.8.5",
53 | "upath": "2.0.1"
54 | }
55 | }
--------------------------------------------------------------------------------
/scripts/build-assets.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const renderAssets = require('./render-assets');
4 |
5 | renderAssets();
--------------------------------------------------------------------------------
/scripts/build-pug.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const upath = require('upath');
3 | const sh = require('shelljs');
4 | const renderPug = require('./render-pug');
5 |
6 | const srcPath = upath.resolve(upath.dirname(__filename), '../src');
7 |
8 | sh.find(srcPath).forEach(_processFile);
9 |
10 | function _processFile(filePath) {
11 | if (
12 | filePath.match(/\.pug$/)
13 | && !filePath.match(/include/)
14 | && !filePath.match(/mixin/)
15 | && !filePath.match(/\/pug\/layouts\//)
16 | ) {
17 | renderPug(filePath);
18 | }
19 | }
--------------------------------------------------------------------------------
/scripts/build-scripts.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const renderScripts = require('./render-scripts');
4 |
5 | renderScripts();
--------------------------------------------------------------------------------
/scripts/build-scss.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const renderSCSS = require('./render-scss');
4 |
5 | renderSCSS();
6 |
--------------------------------------------------------------------------------
/scripts/clean.js:
--------------------------------------------------------------------------------
1 | const sh = require('shelljs');
2 | const upath = require('upath');
3 |
4 | const destPath = upath.resolve(upath.dirname(__filename), '../dist');
5 |
6 | sh.rm('-rf', `${destPath}/*`)
7 |
8 |
--------------------------------------------------------------------------------
/scripts/render-assets.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const fs = require('fs');
3 | const upath = require('upath');
4 | const sh = require('shelljs');
5 |
6 | module.exports = function renderAssets() {
7 | const sourcePath = upath.resolve(upath.dirname(__filename), '../src/assets');
8 | const destPath = upath.resolve(upath.dirname(__filename), '../dist/.');
9 |
10 | sh.cp('-R', sourcePath, destPath)
11 | };
--------------------------------------------------------------------------------
/scripts/render-pug.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const fs = require('fs');
3 | const upath = require('upath');
4 | const pug = require('pug');
5 | const sh = require('shelljs');
6 | const prettier = require('prettier');
7 |
8 | module.exports = function renderPug(filePath) {
9 | const destPath = filePath.replace(/src\/pug\//, 'dist/').replace(/\.pug$/, '.html');
10 | const srcPath = upath.resolve(upath.dirname(__filename), '../src');
11 |
12 | console.log(`### INFO: Rendering ${filePath} to ${destPath}`);
13 | const html = pug.renderFile(filePath, {
14 | doctype: 'html',
15 | filename: filePath,
16 | basedir: srcPath
17 | });
18 |
19 | const destPathDirname = upath.dirname(destPath);
20 | if (!sh.test('-e', destPathDirname)) {
21 | sh.mkdir('-p', destPathDirname);
22 | }
23 |
24 | const prettified = prettier.format(html, {
25 | printWidth: 1000,
26 | tabWidth: 4,
27 | singleQuote: true,
28 | proseWrap: 'preserve',
29 | endOfLine: 'lf',
30 | parser: 'html',
31 | htmlWhitespaceSensitivity: 'ignore'
32 | });
33 |
34 | fs.writeFileSync(destPath, prettified);
35 | };
36 |
--------------------------------------------------------------------------------
/scripts/render-scripts.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const fs = require('fs');
3 | const packageJSON = require('../package.json');
4 | const upath = require('upath');
5 | const sh = require('shelljs');
6 |
7 | module.exports = function renderScripts() {
8 |
9 | const sourcePath = upath.resolve(upath.dirname(__filename), '../src/js');
10 | const destPath = upath.resolve(upath.dirname(__filename), '../dist/.');
11 |
12 | sh.cp('-R', sourcePath, destPath)
13 |
14 | const sourcePathScriptsJS = upath.resolve(upath.dirname(__filename), '../src/js/scripts.js');
15 | const destPathScriptsJS = upath.resolve(upath.dirname(__filename), '../dist/js/scripts.js');
16 |
17 | const copyright = `/*!
18 | * Start Bootstrap - ${packageJSON.title} v${packageJSON.version} (${packageJSON.homepage})
19 | * Copyright 2013-${new Date().getFullYear()} ${packageJSON.author}
20 | * Licensed under ${packageJSON.license} (https://github.com/StartBootstrap/${packageJSON.name}/blob/master/LICENSE)
21 | */
22 | `
23 | const scriptsJS = fs.readFileSync(sourcePathScriptsJS);
24 |
25 | fs.writeFileSync(destPathScriptsJS, copyright + scriptsJS);
26 | };
--------------------------------------------------------------------------------
/scripts/render-scss.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const autoprefixer = require('autoprefixer')
3 | const fs = require('fs');
4 | const packageJSON = require('../package.json');
5 | const upath = require('upath');
6 | const postcss = require('postcss')
7 | const sass = require('sass');
8 | const sh = require('shelljs');
9 |
10 | const stylesPath = '../src/scss/styles.scss';
11 | const destPath = upath.resolve(upath.dirname(__filename), '../dist/css/styles.css');
12 |
13 | module.exports = function renderSCSS() {
14 |
15 | const results = sass.renderSync({
16 | data: entryPoint,
17 | includePaths: [
18 | upath.resolve(upath.dirname(__filename), '../node_modules')
19 | ],
20 | });
21 |
22 | const destPathDirname = upath.dirname(destPath);
23 | if (!sh.test('-e', destPathDirname)) {
24 | sh.mkdir('-p', destPathDirname);
25 | }
26 |
27 | postcss([ autoprefixer ]).process(results.css, {from: 'styles.css', to: 'styles.css'}).then(result => {
28 | result.warnings().forEach(warn => {
29 | console.warn(warn.toString())
30 | })
31 | fs.writeFileSync(destPath, result.css.toString());
32 | })
33 |
34 | };
35 |
36 | const entryPoint = `/*!
37 | * Start Bootstrap - ${packageJSON.title} v${packageJSON.version} (${packageJSON.homepage})
38 | * Copyright 2013-${new Date().getFullYear()} ${packageJSON.author}
39 | * Licensed under ${packageJSON.license} (https://github.com/StartBootstrap/${packageJSON.name}/blob/master/LICENSE)
40 | */
41 | @import "${stylesPath}"
42 | `
--------------------------------------------------------------------------------
/scripts/sb-watch.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const _ = require('lodash');
4 | const chokidar = require('chokidar');
5 | const upath = require('upath');
6 | const renderAssets = require('./render-assets');
7 | const renderPug = require('./render-pug');
8 | const renderScripts = require('./render-scripts');
9 | const renderSCSS = require('./render-scss');
10 |
11 | const watcher = chokidar.watch('src', {
12 | persistent: true,
13 | });
14 |
15 | let READY = false;
16 |
17 | process.title = 'pug-watch';
18 | process.stdout.write('Loading');
19 | let allPugFiles = {};
20 |
21 | watcher.on('add', filePath => _processFile(upath.normalize(filePath), 'add'));
22 | watcher.on('change', filePath => _processFile(upath.normalize(filePath), 'change'));
23 | watcher.on('ready', () => {
24 | READY = true;
25 | console.log(' READY TO ROLL!');
26 | });
27 |
28 | _handleSCSS();
29 |
30 | function _processFile(filePath, watchEvent) {
31 |
32 | if (!READY) {
33 | if (filePath.match(/\.pug$/)) {
34 | if (!filePath.match(/includes/) && !filePath.match(/mixins/) && !filePath.match(/\/pug\/layouts\//)) {
35 | allPugFiles[filePath] = true;
36 | }
37 | }
38 | process.stdout.write('.');
39 | return;
40 | }
41 |
42 | console.log(`### INFO: File event: ${watchEvent}: ${filePath}`);
43 |
44 | if (filePath.match(/\.pug$/)) {
45 | return _handlePug(filePath, watchEvent);
46 | }
47 |
48 | if (filePath.match(/\.scss$/)) {
49 | if (watchEvent === 'change') {
50 | return _handleSCSS(filePath, watchEvent);
51 | }
52 | return;
53 | }
54 |
55 | if (filePath.match(/src\/js\//)) {
56 | return renderScripts();
57 | }
58 |
59 | if (filePath.match(/src\/assets\//)) {
60 | return renderAssets();
61 | }
62 |
63 | }
64 |
65 | function _handlePug(filePath, watchEvent) {
66 | if (watchEvent === 'change') {
67 | if (filePath.match(/includes/) || filePath.match(/mixins/) || filePath.match(/\/pug\/layouts\//)) {
68 | return _renderAllPug();
69 | }
70 | return renderPug(filePath);
71 | }
72 | if (!filePath.match(/includes/) && !filePath.match(/mixins/) && !filePath.match(/\/pug\/layouts\//)) {
73 | return renderPug(filePath);
74 | }
75 | }
76 |
77 | function _renderAllPug() {
78 | console.log('### INFO: Rendering All');
79 | _.each(allPugFiles, (value, filePath) => {
80 | renderPug(filePath);
81 | });
82 | }
83 |
84 | function _handleSCSS() {
85 | renderSCSS();
86 | }
--------------------------------------------------------------------------------
/scripts/start-debug.js:
--------------------------------------------------------------------------------
1 | const concurrently = require('concurrently');
2 | const upath = require('upath');
3 |
4 | const browserSyncPath = upath.resolve(upath.dirname(__filename), '../node_modules/.bin/browser-sync');
5 |
6 | concurrently([
7 | { command: 'node --inspect scripts/sb-watch.js', name: 'SB_WATCH', prefixColor: 'bgBlue.bold' },
8 | {
9 | command: `${browserSyncPath} dist -w --no-online`,
10 | name: 'SB_BROWSER_SYNC',
11 | prefixColor: 'bgBlue.bold',
12 | }
13 | ], {
14 | prefix: 'name',
15 | killOthers: ['failure', 'success'],
16 | }).then(success, failure);
17 |
18 | function success() {
19 | console.log('Success');
20 | }
21 |
22 | function failure() {
23 | console.log('Failure');
24 | }
--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
1 | const concurrently = require('concurrently');
2 | const upath = require('upath');
3 |
4 | const browserSyncPath = upath.resolve(upath.dirname(__filename), '../node_modules/.bin/browser-sync');
5 |
6 | concurrently([
7 | { command: 'node scripts/sb-watch.js', name: 'SB_WATCH', prefixColor: 'bgBlue.bold' },
8 | {
9 | command: `"${browserSyncPath}" --reload-delay 2000 --reload-debounce 2000 dist -w --no-online`,
10 | name: 'SB_BROWSER_SYNC',
11 | prefixColor: 'bgGreen.bold',
12 | }
13 | ], {
14 | prefix: 'name',
15 | killOthers: ['failure', 'success'],
16 | }).then(success, failure);
17 |
18 | function success() {
19 | console.log('Success');
20 | }
21 |
22 | function failure() {
23 | console.log('Failure');
24 | }
--------------------------------------------------------------------------------
/src/assets/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/src/assets/favicon.ico
--------------------------------------------------------------------------------
/src/assets/img/avataaars.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | viewBox="0 0 264 280" style="enable-background:new 0 0 264 280;" xml:space="preserve">
5 | <style type="text/css">
6 | .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#E6E6E6;}
7 | .st1{filter:url(#Adobe_OpacityMaskFilter);}
8 | .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
9 | .st3{mask:url(#mask-2_1_);}
10 | .st4{fill-rule:evenodd;clip-rule:evenodd;fill:#2C3E50;}
11 | .st5{filter:url(#Adobe_OpacityMaskFilter_1_);}
12 | .st6{mask:url(#mask-4_1_);}
13 | .st7{fill-rule:evenodd;clip-rule:evenodd;fill:#D0C6AC;}
14 | .st8{filter:url(#Adobe_OpacityMaskFilter_2_);}
15 | .st9{mask:url(#mask-6_1_);}
16 | .st10{fill-rule:evenodd;clip-rule:evenodd;fill:#EDB98A;}
17 | .st11{filter:url(#Adobe_OpacityMaskFilter_3_);}
18 | .st12{mask:url(#mask-6_2_);fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.1;}
19 | .st13{filter:url(#Adobe_OpacityMaskFilter_4_);}
20 | .st14{mask:url(#react-mask-952_1_);}
21 | .st15{filter:url(#Adobe_OpacityMaskFilter_5_);}
22 | .st16{opacity:0.6;mask:url(#react-mask-952_2_);}
23 | .st17{fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.16;}
24 | .st18{fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.7;}
25 | .st19{filter:url(#Adobe_OpacityMaskFilter_6_);}
26 | .st20{mask:url(#react-mask-934_1_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
27 | .st21{filter:url(#Adobe_OpacityMaskFilter_7_);}
28 | .st22{mask:url(#react-mask-934_2_);}
29 | .st23{fill-rule:evenodd;clip-rule:evenodd;fill:#FF4F6D;}
30 | .st24{fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.6;}
31 | .st25{filter:url(#Adobe_OpacityMaskFilter_8_);}
32 | .st26{mask:url(#react-mask-925_1_);}
33 | .st27{fill-rule:evenodd;clip-rule:evenodd;fill:#28354B;}
34 | .st28{filter:url(#Adobe_OpacityMaskFilter_9_);}
35 | .st29{mask:url(#react-mask-924_1_);}
36 | .st30{fill-rule:evenodd;clip-rule:evenodd;fill:#4A312C;}
37 | </style>
38 | <desc>Created with getavataaars.com</desc>
39 | <g>
40 | <g transform="translate(-825.000000, -1100.000000)">
41 | <g transform="translate(825.000000, 1100.000000)">
42 | <g id="Circle" transform="translate(12.000000, 40.000000)">
43 | <g id="Circle-Background">
44 | <circle class="st0" cx="120" cy="120" r="120"/>
45 | </g>
46 | <defs>
47 | <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="240" height="240">
48 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
49 | </filter>
50 | </defs>
51 | <mask maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="240" id="mask-2_1_">
52 | <g class="st1">
53 | <circle id="path-1_1_" class="st2" cx="120" cy="120" r="120"/>
54 | </g>
55 | </mask>
56 | <g class="st3">
57 | <rect class="st4" width="240" height="240"/>
58 | </g>
59 | </g>
60 | <g id="Mask">
61 | </g>
62 | <defs>
63 | <filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="-1" y="0" width="265" height="280">
64 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
65 | </filter>
66 | </defs>
67 | <mask maskUnits="userSpaceOnUse" x="-1" y="0" width="265" height="280" id="mask-4_1_">
68 | <g class="st5">
69 | <path id="path-3_1_" class="st2" d="M12,160c0,66.3,53.7,120,120,120s120-53.7,120-120h12V0H0v160H12z"/>
70 | </g>
71 | </mask>
72 | <g id="Avataaar" class="st6">
73 | <g id="Body" transform="translate(32.000000, 36.000000)">
74 | <g>
75 | <path class="st7" d="M124,144.6V163h4l0,0c39.8,0,72,32.2,72,72v9H0v-9c0-39.8,32.2-72,72-72l0,0h4v-18.4
76 | c-17.2-8.2-29.6-24.9-31.7-44.7C38.5,99.1,34,94.1,34,88V74c0-5.9,4.3-10.9,10-11.8V56l0,0c0-30.9,25.1-56,56-56l0,0l0,0
77 | c30.9,0,56,25.1,56,56v6.2c5.7,1,10,5.9,10,11.8v14c0,6.1-4.5,11.1-10.3,11.9C153.6,119.7,141.2,136.4,124,144.6z"/>
78 | </g>
79 | <defs>
80 | <filter id="Adobe_OpacityMaskFilter_2_" filterUnits="userSpaceOnUse" x="-32" y="0" width="264" height="244">
81 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
82 | </filter>
83 | </defs>
84 | <mask maskUnits="userSpaceOnUse" x="-32" y="0" width="264" height="244" id="mask-6_1_">
85 | <g class="st8">
86 | <path id="path-5_1_" class="st2" d="M124,144.6V163h4l0,0c39.8,0,72,32.2,72,72v9H0v-9c0-39.8,32.2-72,72-72l0,0h4v-18.4
87 | c-17.2-8.2-29.6-24.9-31.7-44.7C38.5,99.1,34,94.1,34,88V74c0-5.9,4.3-10.9,10-11.8V56l0,0c0-30.9,25.1-56,56-56l0,0l0,0
88 | c30.9,0,56,25.1,56,56v6.2c5.7,1,10,5.9,10,11.8v14c0,6.1-4.5,11.1-10.3,11.9C153.6,119.7,141.2,136.4,124,144.6z"/>
89 | </g>
90 | </mask>
91 | <g class="st9">
92 | <g id="Color" transform="translate(-32.000000, 0.000000)">
93 | <rect class="st10" width="264" height="244"/>
94 | </g>
95 | </g>
96 | <defs>
97 | <filter id="Adobe_OpacityMaskFilter_3_" filterUnits="userSpaceOnUse" x="44" y="79" width="112" height="79">
98 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
99 | </filter>
100 | </defs>
101 | <mask maskUnits="userSpaceOnUse" x="44" y="79" width="112" height="79" id="mask-6_2_">
102 | <g class="st11">
103 | <path id="path-5_2_" class="st2" d="M124,144.6V163h4l0,0c39.8,0,72,32.2,72,72v9H0v-9c0-39.8,32.2-72,72-72l0,0h4v-18.4
104 | c-17.2-8.2-29.6-24.9-31.7-44.7C38.5,99.1,34,94.1,34,88V74c0-5.9,4.3-10.9,10-11.8V56l0,0c0-30.9,25.1-56,56-56l0,0l0,0
105 | c30.9,0,56,25.1,56,56v6.2c5.7,1,10,5.9,10,11.8v14c0,6.1-4.5,11.1-10.3,11.9C153.6,119.7,141.2,136.4,124,144.6z"/>
106 | </g>
107 | </mask>
108 | <path id="Neck-Shadow" class="st12" d="M156,79v23c0,30.9-25.1,56-56,56s-56-25.1-56-56V79v15c0,30.9,25.1,56,56,56
109 | s56-25.1,56-56V79z"/>
110 | </g>
111 | <g transform="translate(0.000000, 170.000000)">
112 | <g id="Clothes">
113 | <path class="st0" d="M166,29.3c37,3,66,34,66,71.8v8.9H32v-8.9C32,63,61.6,31.8,99,29.2c0,0.4,0,0.7,0,1.1
114 | c0,11.9,15,21.5,33.5,21.5S166,42.2,166,30.3C166,30,166,29.6,166,29.3z"/>
115 | </g>
116 | <defs>
117 | <filter id="Adobe_OpacityMaskFilter_4_" filterUnits="userSpaceOnUse" x="0" y="0" width="264" height="110">
118 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
119 | </filter>
120 | </defs>
121 | <mask maskUnits="userSpaceOnUse" x="0" y="0" width="264" height="110" id="react-mask-952_1_">
122 | <g class="st13">
123 | <path id="react-path-951_1_" class="st2" d="M166,29.3c37,3,66,34,66,71.8v8.9H32v-8.9C32,63,61.6,31.8,99,29.2
124 | c0,0.4,0,0.7,0,1.1c0,11.9,15,21.5,33.5,21.5S166,42.2,166,30.3C166,30,166,29.6,166,29.3z"/>
125 | </g>
126 | </mask>
127 | <g class="st14">
128 | <rect class="st2" width="264" height="110"/>
129 | </g>
130 | <defs>
131 | <filter id="Adobe_OpacityMaskFilter_5_" filterUnits="userSpaceOnUse" x="92.9" y="4.9" width="79.3" height="53.8">
132 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
133 | </filter>
134 | </defs>
135 | <mask maskUnits="userSpaceOnUse" x="92.9" y="4.9" width="79.3" height="53.8" id="react-mask-952_2_">
136 | <g class="st15">
137 | <path id="react-path-951_2_" class="st2" d="M166,29.3c37,3,66,34,66,71.8v8.9H32v-8.9C32,63,61.6,31.8,99,29.2
138 | c0,0.4,0,0.7,0,1.1c0,11.9,15,21.5,33.5,21.5S166,42.2,166,30.3C166,30,166,29.6,166,29.3z"/>
139 | </g>
140 | </mask>
141 | <g id="Shadowy" class="st16">
142 | <g transform="translate(92.000000, 4.000000)">
143 | <ellipse class="st17" cx="40.5" cy="27.8" rx="39.6" ry="26.9"/>
144 | </g>
145 | </g>
146 | </g>
147 | <g id="Face" transform="translate(76.000000, 82.000000)">
148 | <g transform="translate(2.000000, 52.000000)">
149 | <g id="Mouth">
150 | <path class="st18" d="M35.1,15.1C36.2,24.6,44.2,32,54,32c9.8,0,17.9-7.4,18.9-17c0.1-0.8-0.8-2-1.8-2c-14.9,0-26.3,0-34,0
151 | C36,13,35,14.2,35.1,15.1z"/>
152 | </g>
153 | <defs>
154 | <filter id="Adobe_OpacityMaskFilter_6_" filterUnits="userSpaceOnUse" x="39" y="2" width="31" height="16">
155 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
156 | </filter>
157 | </defs>
158 | <mask maskUnits="userSpaceOnUse" x="39" y="2" width="31" height="16" id="react-mask-934_1_">
159 | <g class="st19">
160 | <path id="react-path-933_1_" class="st2" d="M35.1,15.1C36.2,24.6,44.2,32,54,32c9.8,0,17.9-7.4,18.9-17
161 | c0.1-0.8-0.8-2-1.8-2c-14.9,0-26.3,0-34,0C36,13,35,14.2,35.1,15.1z"/>
162 | </g>
163 | </mask>
164 | <path id="Teeth" class="st20" d="M44,2h21c2.8,0,5,2.2,5,5v6c0,2.8-2.2,5-5,5H44c-2.8,0-5-2.2-5-5V7C39,4.2,41.2,2,44,2z"/>
165 | <defs>
166 | <filter id="Adobe_OpacityMaskFilter_7_" filterUnits="userSpaceOnUse" x="38" y="24" width="32" height="22">
167 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
168 | </filter>
169 | </defs>
170 | <mask maskUnits="userSpaceOnUse" x="38" y="24" width="32" height="22" id="react-mask-934_2_">
171 | <g class="st21">
172 | <path id="react-path-933_2_" class="st2" d="M35.1,15.1C36.2,24.6,44.2,32,54,32c9.8,0,17.9-7.4,18.9-17
173 | c0.1-0.8-0.8-2-1.8-2c-14.9,0-26.3,0-34,0C36,13,35,14.2,35.1,15.1z"/>
174 | </g>
175 | </mask>
176 | <g id="Tongue" class="st22">
177 | <g transform="translate(38.000000, 24.000000)">
178 | <circle class="st23" cx="11" cy="11" r="11"/>
179 | <circle class="st23" cx="21" cy="11" r="11"/>
180 | </g>
181 | </g>
182 | </g>
183 | <g transform="translate(28.000000, 40.000000)">
184 | <path id="Nose" class="st17" d="M16,8c0,4.4,5.4,8,12,8l0,0c6.6,0,12-3.6,12-8"/>
185 | </g>
186 | <g transform="translate(0.000000, 8.000000)">
187 | <path id="Squint" class="st24" d="M16.2,22.4C18,18.6,22.2,16,27,16c4.8,0,9,2.6,10.8,6.4c0.6,1.1-0.2,2-1,1.4
188 | c-2.5-2.1-5.9-3.4-9.8-3.4c-3.7,0-7.1,1.2-9.6,3.2C16.5,24.3,15.6,23.6,16.2,22.4z"/>
189 | <path class="st24" d="M74.2,22.4C76,18.6,80.2,16,85,16c4.8,0,9,2.6,10.8,6.4c0.6,1.1-0.2,2-1,1.4c-2.5-2.1-5.9-3.4-9.8-3.4
190 | c-3.7,0-7.1,1.2-9.6,3.2C74.5,24.3,73.6,23.6,74.2,22.4z"/>
191 | </g>
192 | <g>
193 | <path id="Eyebrow" class="st24" d="M26.5,6.1c-5.8,0.3-15.2,4.5-15,10.3c0,0.2,0.3,0.3,0.4,0.1c2.8-3,22.3-5.9,29.2-4.4
194 | c0.6,0.1,1.1-0.5,0.7-0.9C38.5,7.5,31.7,5.9,26.5,6.1"/>
195 | <path class="st24" d="M86.5,6.1c5.8,0.3,15.2,4.5,15,10.3c0,0.2-0.3,0.3-0.4,0.1c-2.8-3-22.3-5.9-29.2-4.4
196 | c-0.6,0.1-1.1-0.5-0.7-0.9C74.5,7.5,81.3,5.9,86.5,6.1"/>
197 | </g>
198 | </g>
199 | <g id="Top">
200 | <defs>
201 | <filter id="Adobe_OpacityMaskFilter_8_" filterUnits="userSpaceOnUse" x="-1" y="0" width="264" height="280">
202 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
203 | </filter>
204 | </defs>
205 | <mask maskUnits="userSpaceOnUse" x="-1" y="0" width="264" height="280" id="react-mask-925_1_">
206 | <g class="st25">
207 | <rect id="react-path-927_1_" class="st2" width="264" height="280"/>
208 | </g>
209 | </mask>
210 | <g class="st26">
211 | <g transform="translate(-1.000000, 0.000000)">
212 | <g id="Short-Hair">
213 | <path class="st27" d="M183.7,38.9c5.4-5,6.7-15,3.6-21.5c-3.8-8-11.4-9-18.7-5.5c-6.9,3.3-13.1,4.4-20.6,2.8
214 | c-7.3-1.5-14.1-4.3-21.6-4.7C114,9.3,102,13.9,93.6,23.1c-1.6,1.8-2.9,3.8-4.1,5.8c-1,1.6-2.1,3.4-2.5,5.3
215 | c-0.2,0.9,0.2,3.1-0.3,3.8c-0.5,0.8-2.3,1.5-3.1,2.1c-1.6,1.2-2.9,2.5-4.2,4c-2.7,3.2-4.1,6.6-5.4,10.6
216 | c-4.1,13.2-4.5,29,0.9,42c0.7,1.7,2.9,5.4,4.2,1.6c0.3-0.7-0.3-3.2-0.3-3.9c0-2.7,1.5-20.7,8-30.8c2.1-3.3,12-15.6,14-15.7
217 | c1.1,1.7,11.9,12.5,39.9,11.2c12.7-0.6,22.4-6.3,24.7-8.7c1,5.5,13,13.8,14.8,17.2c5.3,9.8,6.4,30.3,8.4,30.3
218 | s3.5-5.2,3.9-6.2c3.1-7.4,3.6-16.6,3.3-24.6C195.5,57,191.3,45.9,183.7,38.9z"/>
219 | </g>
220 | <defs>
221 | <filter id="Adobe_OpacityMaskFilter_9_" filterUnits="userSpaceOnUse" x="0" y="0" width="264" height="280">
222 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
223 | </filter>
224 | </defs>
225 | <mask maskUnits="userSpaceOnUse" x="0" y="0" width="264" height="280" id="react-mask-924_1_">
226 | <g class="st28">
227 | <path id="react-path-926_1_" class="st2" d="M183.7,38.9c5.4-5,6.7-15,3.6-21.5c-3.8-8-11.4-9-18.7-5.5
228 | c-6.9,3.3-13.1,4.4-20.6,2.8c-7.3-1.5-14.1-4.3-21.6-4.7C114,9.3,102,13.9,93.6,23.1c-1.6,1.8-2.9,3.8-4.1,5.8
229 | c-1,1.6-2.1,3.4-2.5,5.3c-0.2,0.9,0.2,3.1-0.3,3.8c-0.5,0.8-2.3,1.5-3.1,2.1c-1.6,1.2-2.9,2.5-4.2,4
230 | c-2.7,3.2-4.1,6.6-5.4,10.6c-4.1,13.2-4.5,29,0.9,42c0.7,1.7,2.9,5.4,4.2,1.6c0.3-0.7-0.3-3.2-0.3-3.9
231 | c0-2.7,1.5-20.7,8-30.8c2.1-3.3,12-15.6,14-15.7c1.1,1.7,11.9,12.5,39.9,11.2c12.7-0.6,22.4-6.3,24.7-8.7
232 | c1,5.5,13,13.8,14.8,17.2c5.3,9.8,6.4,30.3,8.4,30.3s3.5-5.2,3.9-6.2c3.1-7.4,3.6-16.6,3.3-24.6
233 | C195.5,57,191.3,45.9,183.7,38.9z"/>
234 | </g>
235 | </mask>
236 | <g class="st29">
237 | <g transform="translate(0.000000, 0.000000) ">
238 | <rect class="st30" width="264" height="280"/>
239 | </g>
240 | </g>
241 | </g>
242 | </g>
243 | </g>
244 | </g>
245 | </g>
246 | </g>
247 | </g>
248 | </svg>
249 |
--------------------------------------------------------------------------------
/src/assets/img/portfolio/cabin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/src/assets/img/portfolio/cabin.png
--------------------------------------------------------------------------------
/src/assets/img/portfolio/cake.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/src/assets/img/portfolio/cake.png
--------------------------------------------------------------------------------
/src/assets/img/portfolio/circus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/src/assets/img/portfolio/circus.png
--------------------------------------------------------------------------------
/src/assets/img/portfolio/game.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/src/assets/img/portfolio/game.png
--------------------------------------------------------------------------------
/src/assets/img/portfolio/safe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/src/assets/img/portfolio/safe.png
--------------------------------------------------------------------------------
/src/assets/img/portfolio/submarine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-freelancer/5bc65b4bd01e4ab63186395d5f95c7fdaa26216d/src/assets/img/portfolio/submarine.png
--------------------------------------------------------------------------------
/src/js/scripts.js:
--------------------------------------------------------------------------------
1 | //
2 | // Scripts
3 | //
4 |
5 | window.addEventListener('DOMContentLoaded', event => {
6 |
7 | // Navbar shrink function
8 | var navbarShrink = function () {
9 | const navbarCollapsible = document.body.querySelector('#mainNav');
10 | if (!navbarCollapsible) {
11 | return;
12 | }
13 | if (window.scrollY === 0) {
14 | navbarCollapsible.classList.remove('navbar-shrink')
15 | } else {
16 | navbarCollapsible.classList.add('navbar-shrink')
17 | }
18 |
19 | };
20 |
21 | // Shrink the navbar
22 | navbarShrink();
23 |
24 | // Shrink the navbar when page is scrolled
25 | document.addEventListener('scroll', navbarShrink);
26 |
27 | // Activate Bootstrap scrollspy on the main nav element
28 | const mainNav = document.body.querySelector('#mainNav');
29 | if (mainNav) {
30 | new bootstrap.ScrollSpy(document.body, {
31 | target: '#mainNav',
32 | rootMargin: '0px 0px -40%',
33 | });
34 | };
35 |
36 | // Collapse responsive navbar when toggler is visible
37 | const navbarToggler = document.body.querySelector('.navbar-toggler');
38 | const responsiveNavItems = [].slice.call(
39 | document.querySelectorAll('#navbarResponsive .nav-link')
40 | );
41 | responsiveNavItems.map(function (responsiveNavItem) {
42 | responsiveNavItem.addEventListener('click', () => {
43 | if (window.getComputedStyle(navbarToggler).display !== 'none') {
44 | navbarToggler.click();
45 | }
46 | });
47 | });
48 |
49 | });
50 |
--------------------------------------------------------------------------------
/src/pug/includes/portfolio-modal-1.pug:
--------------------------------------------------------------------------------
1 | // Portfolio Modal 1
2 | #portfolioModal1.portfolio-modal.modal.fade(tabindex='-1', aria-labelledby='portfolioModal1', aria-hidden='true')
3 | .modal-dialog.modal-xl
4 | .modal-content
5 | .modal-header.border-0
6 | button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
7 | .modal-body.text-center.pb-5
8 | .container
9 | .row.justify-content-center
10 | .col-lg-8
11 | // Portfolio Modal - Title
12 | h2.portfolio-modal-title.text-secondary.text-uppercase.mb-0 Log Cabin
13 | // Icon Divider
14 | .divider-custom
15 | .divider-custom-line
16 | .divider-custom-icon
17 | i.fas.fa-star
18 | .divider-custom-line
19 | // Portfolio Modal - Image
20 | img.img-fluid.rounded.mb-5(src='assets/img/portfolio/cabin.png', alt='...')
21 | // Portfolio Modal - Text
22 | p.mb-4
23 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.
24 | button.btn.btn-primary(data-bs-dismiss='modal')
25 | i.fas.fa-xmark.fa-fw
26 | | Close Window
--------------------------------------------------------------------------------
/src/pug/includes/portfolio-modal-2.pug:
--------------------------------------------------------------------------------
1 | // Portfolio Modal 2
2 | #portfolioModal2.portfolio-modal.modal.fade(tabindex='-1', aria-labelledby='portfolioModal2', aria-hidden='true')
3 | .modal-dialog.modal-xl
4 | .modal-content
5 | .modal-header.border-0
6 | button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
7 | .modal-body.text-center.pb-5
8 | .container
9 | .row.justify-content-center
10 | .col-lg-8
11 | // Portfolio Modal - Title
12 | h2.portfolio-modal-title.text-secondary.text-uppercase.mb-0 Tasty Cake
13 | // Icon Divider
14 | .divider-custom
15 | .divider-custom-line
16 | .divider-custom-icon
17 | i.fas.fa-star
18 | .divider-custom-line
19 | // Portfolio Modal - Image
20 | img.img-fluid.rounded.mb-5(src='assets/img/portfolio/cake.png', alt='...')
21 | // Portfolio Modal - Text
22 | p.mb-4
23 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.
24 | button.btn.btn-primary(data-bs-dismiss='modal')
25 | i.fas.fa-xmark.fa-fw
26 | | Close Window
--------------------------------------------------------------------------------
/src/pug/includes/portfolio-modal-3.pug:
--------------------------------------------------------------------------------
1 | // Portfolio Modal 3
2 | #portfolioModal3.portfolio-modal.modal.fade(tabindex='-1', aria-labelledby='portfolioModal3', aria-hidden='true')
3 | .modal-dialog.modal-xl
4 | .modal-content
5 | .modal-header.border-0
6 | button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
7 | .modal-body.text-center.pb-5
8 | .container
9 | .row.justify-content-center
10 | .col-lg-8
11 | // Portfolio Modal - Title
12 | h2.portfolio-modal-title.text-secondary.text-uppercase.mb-0 Circus Tent
13 | // Icon Divider
14 | .divider-custom
15 | .divider-custom-line
16 | .divider-custom-icon
17 | i.fas.fa-star
18 | .divider-custom-line
19 | // Portfolio Modal - Image
20 | img.img-fluid.rounded.mb-5(src='assets/img/portfolio/circus.png', alt='...')
21 | // Portfolio Modal - Text
22 | p.mb-4
23 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.
24 | button.btn.btn-primary(data-bs-dismiss='modal')
25 | i.fas.fa-xmark.fa-fw
26 | | Close Window
--------------------------------------------------------------------------------
/src/pug/includes/portfolio-modal-4.pug:
--------------------------------------------------------------------------------
1 | // Portfolio Modal 4
2 | #portfolioModal4.portfolio-modal.modal.fade(tabindex='-1', aria-labelledby='portfolioModal4', aria-hidden='true')
3 | .modal-dialog.modal-xl
4 | .modal-content
5 | .modal-header.border-0
6 | button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
7 | .modal-body.text-center.pb-5
8 | .container
9 | .row.justify-content-center
10 | .col-lg-8
11 | // Portfolio Modal - Title
12 | h2.portfolio-modal-title.text-secondary.text-uppercase.mb-0 Controller
13 | // Icon Divider
14 | .divider-custom
15 | .divider-custom-line
16 | .divider-custom-icon
17 | i.fas.fa-star
18 | .divider-custom-line
19 | // Portfolio Modal - Image
20 | img.img-fluid.rounded.mb-5(src='assets/img/portfolio/game.png', alt='...')
21 | // Portfolio Modal - Text
22 | p.mb-4
23 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.
24 | button.btn.btn-primary(data-bs-dismiss='modal')
25 | i.fas.fa-xmark.fa-fw
26 | | Close Window
--------------------------------------------------------------------------------
/src/pug/includes/portfolio-modal-5.pug:
--------------------------------------------------------------------------------
1 | // Portfolio Modal 5
2 | #portfolioModal5.portfolio-modal.modal.fade(tabindex='-1', aria-labelledby='portfolioModal5', aria-hidden='true')
3 | .modal-dialog.modal-xl
4 | .modal-content
5 | .modal-header.border-0
6 | button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
7 | .modal-body.text-center.pb-5
8 | .container
9 | .row.justify-content-center
10 | .col-lg-8
11 | // Portfolio Modal - Title
12 | h2.portfolio-modal-title.text-secondary.text-uppercase.mb-0 Locked Safe
13 | // Icon Divider
14 | .divider-custom
15 | .divider-custom-line
16 | .divider-custom-icon
17 | i.fas.fa-star
18 | .divider-custom-line
19 | // Portfolio Modal - Image
20 | img.img-fluid.rounded.mb-5(src='assets/img/portfolio/safe.png', alt='...')
21 | // Portfolio Modal - Text
22 | p.mb-4
23 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.
24 | button.btn.btn-primary(data-bs-dismiss='modal')
25 | i.fas.fa-xmark.fa-fw
26 | | Close Window
--------------------------------------------------------------------------------
/src/pug/includes/portfolio-modal-6.pug:
--------------------------------------------------------------------------------
1 | // Portfolio Modal 6
2 | #portfolioModal6.portfolio-modal.modal.fade(tabindex='-1', aria-labelledby='portfolioModal6', aria-hidden='true')
3 | .modal-dialog.modal-xl
4 | .modal-content
5 | .modal-header.border-0
6 | button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
7 | .modal-body.text-center.pb-5
8 | .container
9 | .row.justify-content-center
10 | .col-lg-8
11 | // Portfolio Modal - Title
12 | h2.portfolio-modal-title.text-secondary.text-uppercase.mb-0 Submarine
13 | // Icon Divider
14 | .divider-custom
15 | .divider-custom-line
16 | .divider-custom-icon
17 | i.fas.fa-star
18 | .divider-custom-line
19 | // Portfolio Modal - Image
20 | img.img-fluid.rounded.mb-5(src='assets/img/portfolio/submarine.png', alt='...')
21 | // Portfolio Modal - Text
22 | p.mb-4
23 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.
24 | button.btn.btn-primary(data-bs-dismiss='modal')
25 | i.fas.fa-xmark.fa-fw
26 | | Close Window
--------------------------------------------------------------------------------
/src/pug/index.pug:
--------------------------------------------------------------------------------
1 | doctype html
2 | html(lang='en')
3 |
4 | head
5 |
6 | meta(charset='utf-8')
7 | meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
8 | meta(name='description', content='')
9 | meta(name='author', content='')
10 |
11 | title Freelancer - Start Bootstrap Theme
12 |
13 | // Favicon
14 | link(rel='icon', type='image/x-icon', href='assets/favicon.ico')
15 |
16 | // Font Awesome icons (free version)
17 | script(src='https://use.fontawesome.com/releases/v6.3.0/js/all.js', crossorigin='anonymous')
18 |
19 | // Google fonts
20 | link(href='https://fonts.googleapis.com/css?family=Montserrat:400,700', rel='stylesheet', type='text/css')
21 | link(href='https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic', rel='stylesheet', type='text/css')
22 |
23 | // Core theme CSS (includes Bootstrap)
24 | link(href='css/styles.css', rel='stylesheet')
25 |
26 | body#page-top
27 |
28 | // Navigation
29 | nav#mainNav.navbar.navbar-expand-lg.bg-secondary.text-uppercase.fixed-top
30 | .container
31 | a.navbar-brand(href='#page-top') Start Bootstrap
32 | button.navbar-toggler.text-uppercase.font-weight-bold.bg-primary.text-white.rounded(type='button', data-bs-toggle='collapse', data-bs-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
33 | | Menu
34 | i.fas.fa-bars
35 | #navbarResponsive.collapse.navbar-collapse
36 | ul.navbar-nav.ms-auto
37 | li.nav-item.mx-0.mx-lg-1
38 | a.nav-link.py-3.px-0.px-lg-3.rounded(href='#portfolio') Portfolio
39 | li.nav-item.mx-0.mx-lg-1
40 | a.nav-link.py-3.px-0.px-lg-3.rounded(href='#about') About
41 | li.nav-item.mx-0.mx-lg-1
42 | a.nav-link.py-3.px-0.px-lg-3.rounded(href='#contact') Contact
43 |
44 | // Masthead
45 | header.masthead.bg-primary.text-white.text-center
46 | .container.d-flex.align-items-center.flex-column
47 | // Masthead Avatar Image
48 | img.masthead-avatar.mb-5(src='assets/img/avataaars.svg', alt='...')
49 | // Masthead Heading
50 | h1.masthead-heading.text-uppercase.mb-0 Start Bootstrap
51 | // Icon Divider
52 | .divider-custom.divider-light
53 | .divider-custom-line
54 | .divider-custom-icon
55 | i.fas.fa-star
56 | .divider-custom-line
57 | // Masthead Subheading
58 | p.masthead-subheading.font-weight-light.mb-0 Graphic Artist - Web Designer - Illustrator
59 |
60 | // Portfolio Section
61 | section#portfolio.page-section.portfolio
62 | .container
63 | // Portfolio Section Heading
64 | h2.page-section-heading.text-center.text-uppercase.text-secondary.mb-0 Portfolio
65 | // Icon Divider
66 | .divider-custom
67 | .divider-custom-line
68 | .divider-custom-icon
69 | i.fas.fa-star
70 | .divider-custom-line
71 | // Portfolio Grid Items
72 | .row.justify-content-center
73 | // Portfolio Item 1
74 | .col-md-6.col-lg-4.mb-5
75 | .portfolio-item.mx-auto(data-bs-toggle='modal', data-bs-target='#portfolioModal1')
76 | .portfolio-item-caption.d-flex.align-items-center.justify-content-center.h-100.w-100
77 | .portfolio-item-caption-content.text-center.text-white
78 | i.fas.fa-plus.fa-3x
79 | img.img-fluid(src='assets/img/portfolio/cabin.png', alt='...')
80 | // Portfolio Item 2
81 | .col-md-6.col-lg-4.mb-5
82 | .portfolio-item.mx-auto(data-bs-toggle='modal', data-bs-target='#portfolioModal2')
83 | .portfolio-item-caption.d-flex.align-items-center.justify-content-center.h-100.w-100
84 | .portfolio-item-caption-content.text-center.text-white
85 | i.fas.fa-plus.fa-3x
86 | img.img-fluid(src='assets/img/portfolio/cake.png', alt='...')
87 | // Portfolio Item 3
88 | .col-md-6.col-lg-4.mb-5
89 | .portfolio-item.mx-auto(data-bs-toggle='modal', data-bs-target='#portfolioModal3')
90 | .portfolio-item-caption.d-flex.align-items-center.justify-content-center.h-100.w-100
91 | .portfolio-item-caption-content.text-center.text-white
92 | i.fas.fa-plus.fa-3x
93 | img.img-fluid(src='assets/img/portfolio/circus.png', alt='...')
94 | // Portfolio Item 4
95 | .col-md-6.col-lg-4.mb-5.mb-lg-0
96 | .portfolio-item.mx-auto(data-bs-toggle='modal', data-bs-target='#portfolioModal4')
97 | .portfolio-item-caption.d-flex.align-items-center.justify-content-center.h-100.w-100
98 | .portfolio-item-caption-content.text-center.text-white
99 | i.fas.fa-plus.fa-3x
100 | img.img-fluid(src='assets/img/portfolio/game.png', alt='...')
101 | // Portfolio Item 5
102 | .col-md-6.col-lg-4.mb-5.mb-md-0
103 | .portfolio-item.mx-auto(data-bs-toggle='modal', data-bs-target='#portfolioModal5')
104 | .portfolio-item-caption.d-flex.align-items-center.justify-content-center.h-100.w-100
105 | .portfolio-item-caption-content.text-center.text-white
106 | i.fas.fa-plus.fa-3x
107 | img.img-fluid(src='assets/img/portfolio/safe.png', alt='...')
108 | // Portfolio Item 6
109 | .col-md-6.col-lg-4
110 | .portfolio-item.mx-auto(data-bs-toggle='modal', data-bs-target='#portfolioModal6')
111 | .portfolio-item-caption.d-flex.align-items-center.justify-content-center.h-100.w-100
112 | .portfolio-item-caption-content.text-center.text-white
113 | i.fas.fa-plus.fa-3x
114 | img.img-fluid(src='assets/img/portfolio/submarine.png', alt='...')
115 |
116 | // About Section
117 | section#about.page-section.bg-primary.text-white.mb-0
118 | .container
119 | // About Section Heading
120 | h2.page-section-heading.text-center.text-uppercase.text-white About
121 | // Icon Divider
122 | .divider-custom.divider-light
123 | .divider-custom-line
124 | .divider-custom-icon
125 | i.fas.fa-star
126 | .divider-custom-line
127 | // About Section Content
128 | .row
129 | .col-lg-4.ms-auto
130 | p.lead
131 | | Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional SASS stylesheets for easy customization.
132 | .col-lg-4.me-auto
133 | p.lead
134 | | You can create your own custom avatar for the masthead, change the icon in the dividers, and add your email address to the contact form to make it fully functional!
135 | // About Section Button
136 | .text-center.mt-4
137 | a.btn.btn-xl.btn-outline-light(href='https://startbootstrap.com/theme/freelancer/')
138 | i.fas.fa-download.me-2
139 | | Free Download!
140 |
141 | // Contact Section
142 | section#contact.page-section
143 | .container
144 | // Contact Section Heading
145 | h2.page-section-heading.text-center.text-uppercase.text-secondary.mb-0 Contact Me
146 | // Icon Divider
147 | .divider-custom
148 | .divider-custom-line
149 | .divider-custom-icon
150 | i.fas.fa-star
151 | .divider-custom-line
152 | // Contact Section Form
153 | .row.justify-content-center
154 | .col-lg-8.col-xl-7
155 |
156 | // * * * * * * * * * * * * * * *
157 | // * * SB Forms Contact Form * *
158 | // * * * * * * * * * * * * * * *
159 |
160 | // This form is pre-integrated with SB Forms.
161 | // To make this form functional, sign up at
162 | // https://startbootstrap.com/solution/contact-forms
163 | // to get an API token!
164 |
165 | form#contactForm(data-sb-form-api-token='API_TOKEN')
166 |
167 | // Name input
168 | .form-floating.mb-3
169 | input#name.form-control(
170 | type='text',
171 | placeholder='Enter your name...',
172 | data-sb-validations='required'
173 | )
174 | label(for='name') Full name
175 | .invalid-feedback(data-sb-feedback='name:required')
176 | | A name is required.
177 |
178 | // Email address input
179 | .form-floating.mb-3
180 | input#email.form-control(
181 | type='email',
182 | placeholder='name@example.com',
183 | data-sb-validations='required,email'
184 | )
185 | label(for='email') Email address
186 | .invalid-feedback(data-sb-feedback='email:required')
187 | | An email is required.
188 | .invalid-feedback(data-sb-feedback='email:email')
189 | | Email is not valid.
190 |
191 | // Phone number input
192 | .form-floating.mb-3
193 | input#phone.form-control(
194 | type='tel',
195 | placeholder='(123) 456-7890',
196 | data-sb-validations='required'
197 | )
198 | label(for='phone') Phone number
199 | .invalid-feedback(data-sb-feedback='phone:required')
200 | | A phone number is required.
201 |
202 | // Message input
203 | .form-floating.mb-3
204 | textarea#message.form-control(
205 | type='text',
206 | placeholder='Enter your message here...',
207 | style='height: 10rem;',
208 | data-sb-validations='required'
209 | )
210 | label(for='message') Message
211 | .invalid-feedback(data-sb-feedback='message:required')
212 | | A message is required.
213 |
214 | // Submit success message
215 | //
216 | // This is what your users will see when the form
217 | // has successfully submitted
218 |
219 | #submitSuccessMessage.d-none
220 | .text-center.mb-3
221 | .fw-bolder Form submission successful!
222 | | To activate this form, sign up at
223 | br
224 | a(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms
225 |
226 | // Submit error message
227 | //
228 | // This is what your users will see when there is
229 | // an error submitting the form
230 |
231 | #submitErrorMessage.d-none
232 | .text-center.text-danger.mb-3 Error sending message!
233 |
234 | // Submit Button
235 | button#submitButton.btn.btn-primary.btn-xl.disabled(type='submit') Send
236 |
237 | // Footer
238 | footer.footer.text-center
239 | .container
240 | .row
241 | // Footer Location
242 | .col-lg-4.mb-5.mb-lg-0
243 | h4.text-uppercase.mb-4 Location
244 | p.lead.mb-0
245 | | 2215 John Daniel Drive
246 | br
247 | | Clark, MO 65243
248 | // Footer Social Icons
249 | .col-lg-4.mb-5.mb-lg-0
250 | h4.text-uppercase.mb-4 Around the Web
251 | a.btn.btn-outline-light.btn-social.mx-1(href='#!')
252 | i.fab.fa-fw.fa-facebook-f
253 | a.btn.btn-outline-light.btn-social.mx-1(href='#!')
254 | i.fab.fa-fw.fa-twitter
255 | a.btn.btn-outline-light.btn-social.mx-1(href='#!')
256 | i.fab.fa-fw.fa-linkedin-in
257 | a.btn.btn-outline-light.btn-social.mx-1(href='#!')
258 | i.fab.fa-fw.fa-dribbble
259 | // Footer About Text
260 | .col-lg-4
261 | h4.text-uppercase.mb-4 About Freelancer
262 | p.lead.mb-0
263 | | Freelance is a free to use, MIT licensed Bootstrap theme created by
264 | a(href='http://startbootstrap.com') Start Bootstrap
265 | | .
266 |
267 | // Copyright Section
268 | div.copyright.py-4.text-center.text-white
269 | .container
270 | small Copyright © Your Website 2023
271 |
272 | // Portfolio Modals
273 | include includes/portfolio-modal-1.pug
274 | include includes/portfolio-modal-2.pug
275 | include includes/portfolio-modal-3.pug
276 | include includes/portfolio-modal-4.pug
277 | include includes/portfolio-modal-5.pug
278 | include includes/portfolio-modal-6.pug
279 |
280 | // Bootstrap core JS
281 | script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js')
282 |
283 | // Core theme JS
284 | script(src='js/scripts.js')
285 |
286 | // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
287 | // * * SB Forms JS * *
288 | // * * Activate your form at https://startbootstrap.com/solution/contact-forms * *
289 | // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
290 |
291 | script(src='https://cdn.startbootstrap.com/sb-forms-latest.js')
--------------------------------------------------------------------------------
/src/scss/_global.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Global
3 | //
4 |
5 | // Scroll padding for all scroll targets on page used with
6 | // native CSS smooth scrolling
7 | //
8 | // https://caniuse.com/?search=scroll-padding
9 |
10 | html {
11 | height: 100%;
12 | scroll-padding-top: calc(#{$navbar-height} - 1px);
13 | }
14 |
15 | // Styling for page sections
16 | .page-section {
17 | padding: 6rem 0;
18 |
19 | .page-section-heading {
20 | font-size: 2.25rem;
21 | line-height: 2rem;
22 | }
23 |
24 | @include media-breakpoint-up(lg) {
25 | .page-section-heading {
26 | font-size: 3rem;
27 | line-height: 2.5rem;
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/scss/_variables.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Variables
3 | //
4 |
5 | @import './variables/colors';
6 | @import './variables/spacing';
7 | @import './variables/typography';
8 | @import './variables/borders';
9 | @import './variables/forms';
10 |
--------------------------------------------------------------------------------
/src/scss/components/_buttons.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Buttons
3 | //
4 |
5 | // Custom extra large button size
6 | .btn-xl {
7 | padding: 1rem 1.75rem;
8 | font-size: 1.25rem;
9 | }
10 |
11 | // Custom social buttons
12 | .btn-social {
13 | border-radius: 100%;
14 | display: inline-flex;
15 | width: 3.25rem;
16 | height: 3.25rem;
17 | font-size: 1.25rem;
18 | justify-content: center;
19 | align-items: center;
20 | }
21 |
--------------------------------------------------------------------------------
/src/scss/components/_divider.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Divider
3 | //
4 |
5 | .divider-custom {
6 | margin: 1.25rem 0 1.5rem;
7 | width: 100%;
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 |
12 | .divider-custom-line {
13 | width: 100%;
14 | max-width: 7rem;
15 | height: 0.25rem;
16 | background-color: $secondary;
17 | border-radius: 1rem;
18 | border-color: $secondary;
19 |
20 | &:first-child {
21 | margin-right: 1rem;
22 | }
23 |
24 | &:last-child {
25 | margin-left: 1rem;
26 | }
27 | }
28 |
29 | .divider-custom-icon {
30 | color: $secondary;
31 | font-size: 2rem;
32 | }
33 |
34 | &.divider-light {
35 | .divider-custom-line {
36 | background-color: $white;
37 | }
38 |
39 | .divider-custom-icon {
40 | color: $white;
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/scss/components/_forms.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Forms
3 | //
4 |
5 | .form-floating {
6 |
7 | input.form-control,
8 | textarea.form-control {
9 | font-size: 1.5rem;
10 | border-left: 0;
11 | border-right: 0;
12 | border-top: 0;
13 | border-radius: 0;
14 | border-width: 1px;
15 |
16 | &:focus {
17 | box-shadow: none;
18 | }
19 |
20 | }
21 |
22 | label {
23 | font-size: 1.5rem;
24 | color: $gray-600;
25 | }
26 |
27 | }
28 |
--------------------------------------------------------------------------------
/src/scss/components/_navbar.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Navbar
3 | //
4 |
5 | #mainNav {
6 | padding-top: 1rem;
7 | padding-bottom: 1rem;
8 | font-family: $headings-font-family;
9 | font-weight: $headings-font-weight;
10 |
11 | .navbar-brand {
12 | color: $white;
13 | }
14 |
15 | .navbar-nav {
16 | margin-top: 1rem;
17 |
18 | li.nav-item {
19 | a.nav-link {
20 | color: $white;
21 |
22 | &:hover {
23 | color: $primary;
24 | }
25 |
26 | &:active,
27 | &:focus {
28 | color: $white;
29 | }
30 |
31 | &.active {
32 | color: $primary;
33 | }
34 | }
35 | }
36 | }
37 |
38 | .navbar-toggler {
39 | font-size: 80%;
40 | padding: 0.8rem;
41 | }
42 | }
43 |
44 | @include media-breakpoint-up(lg) {
45 | #mainNav {
46 | padding-top: 1.5rem;
47 | padding-bottom: 1.5rem;
48 | transition: padding-top 0.3s, padding-bottom 0.3s;
49 |
50 | .navbar-brand {
51 | font-size: 1.75em;
52 | transition: font-size 0.3s;
53 | }
54 |
55 | .navbar-nav {
56 | margin-top: 0;
57 | }
58 |
59 | .navbar-nav>li.nav-item>a.nav-link.active {
60 | color: $white;
61 | background: $primary;
62 |
63 | &:active,
64 | &:focus,
65 | &:hover {
66 | color: $white;
67 | background: $primary;
68 | }
69 | }
70 | }
71 |
72 | #mainNav.navbar-shrink {
73 | padding-top: 0.5rem;
74 | padding-bottom: 0.5rem;
75 |
76 | .navbar-brand {
77 | font-size: 1.5em;
78 | }
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/scss/sections/_footer.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Footer
3 | //
4 |
5 | .footer {
6 | padding-top: 5rem;
7 | padding-bottom: 5rem;
8 | background-color: $secondary;
9 | color: $white;
10 | }
11 |
12 | .copyright {
13 | background-color: darken($secondary, 10%);
14 | }
15 |
--------------------------------------------------------------------------------
/src/scss/sections/_masthead.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Masthead
3 | //
4 |
5 | .masthead {
6 | padding-top: calc(6rem + 74px);
7 | padding-bottom: 6rem;
8 |
9 | .masthead-heading {
10 | font-size: 2.75rem;
11 | line-height: 2.75rem;
12 | }
13 |
14 | .masthead-subheading {
15 | font-size: 1.25rem;
16 | }
17 |
18 | .masthead-avatar {
19 | width: 15rem;
20 | }
21 | }
22 |
23 | @include media-breakpoint-up(lg) {
24 | .masthead {
25 | padding-top: calc(6rem + 104px);
26 | padding-bottom: 6rem;
27 |
28 | .masthead-heading {
29 | font-size: 4rem;
30 | line-height: 3.5rem;
31 | }
32 |
33 | .masthead-subheading {
34 | font-size: 1.5rem;
35 | }
36 |
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/scss/sections/_portfolio.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Portfolio
3 | //
4 |
5 | .portfolio {
6 | .portfolio-item {
7 | cursor: pointer;
8 | position: relative;
9 | display: block;
10 | max-width: 25rem;
11 | border-radius: $border-radius;
12 | overflow: hidden;
13 |
14 | .portfolio-item-caption {
15 | position: absolute;
16 | top: 0;
17 | left: 0;
18 | transition: $transition-base;
19 | opacity: 0;
20 | background-color: fade-out($primary, .1);
21 |
22 | &:hover {
23 | opacity: 1;
24 | }
25 |
26 | .portfolio-item-caption-content {
27 | font-size: 1.5rem;
28 | }
29 | }
30 | }
31 | }
32 |
33 | // Styling for the portfolio modals
34 | .portfolio-modal {
35 | .btn-close {
36 | color: $primary;
37 | font-size: 2rem;
38 | padding: 1rem;
39 | }
40 |
41 | .portfolio-modal-title {
42 | font-size: 2.25rem;
43 | line-height: 2rem;
44 |
45 | @include media-breakpoint-up(lg) {
46 | font-size: 3rem;
47 | line-height: 2.5rem;
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/scss/styles.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Styles
3 | //
4 |
5 | // Import custom variables and override default Bootstrap variables
6 | @import "./variables.scss";
7 |
8 | // Import Bootstrap
9 | @import "bootstrap/scss/bootstrap.scss";
10 |
11 | // Import custom styles
12 | @import "./global.scss";
13 |
14 | // Components
15 | @import "./components/divider.scss";
16 | @import "./components/buttons.scss";
17 | @import "./components/navbar.scss";
18 | @import "./components/forms.scss";
19 |
20 | // Sections
21 | @import "./sections/masthead.scss";
22 | @import "./sections/portfolio.scss";
23 | @import "./sections/footer.scss";
24 |
--------------------------------------------------------------------------------
/src/scss/variables/_borders.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Borders
3 | //
4 |
5 | $border-width: 0.125rem;
6 | $border-radius: 0.5rem;
7 | $border-radius-lg: 0.75rem;
8 | $border-radius-sm: 0.25rem;
9 |
--------------------------------------------------------------------------------
/src/scss/variables/_colors.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Colors
3 | //
4 |
5 | //- Override and add to color system
6 | $teal: #1abc9c;
7 | $dark-blue: #2c3e50;
8 |
9 | //- Override primary color
10 | $primary: $teal;
11 | $secondary: $dark-blue;
12 |
13 | // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
14 | // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
15 | $min-contrast-ratio: 2.4;
16 |
--------------------------------------------------------------------------------
/src/scss/variables/_forms.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Forms
3 | //
4 |
5 | // Override variables for the Bootstrap floating forms component
6 |
7 | $form-floating-height: 5.5rem;
8 | $form-floating-padding-x: 0;
9 | $form-floating-padding-y: 1.5rem;
10 | $form-floating-input-padding-t: 2.5rem;
11 | $form-floating-input-padding-b: 1.5rem;
12 | $form-floating-label-transform: scale(.65) translateY(-.5rem) translateX(0rem);
13 |
14 | $input-btn-border-width: $border-width;
15 |
--------------------------------------------------------------------------------
/src/scss/variables/_spacing.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Spacing
3 | //
4 |
5 | $navbar-height: 4.5rem;
6 |
--------------------------------------------------------------------------------
/src/scss/variables/_typography.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Typography
3 | //
4 |
5 | $font-family-sans-serif: "Lato",
6 | -apple-system,
7 | BlinkMacSystemFont,
8 | "Segoe UI",
9 | Roboto,
10 | "Helvetica Neue",
11 | Arial,
12 | "Noto Sans",
13 | sans-serif,
14 | "Apple Color Emoji",
15 | "Segoe UI Emoji",
16 | "Segoe UI Symbol",
17 | 'Noto Color Emoji';
18 |
19 | $headings-font-family: "Montserrat",
20 | -apple-system,
21 | BlinkMacSystemFont,
22 | "Segoe UI",
23 | Roboto,
24 | "Helvetica Neue",
25 | Arial,
26 | "Noto Sans",
27 | sans-serif,
28 | "Apple Color Emoji",
29 | "Segoe UI Emoji",
30 | "Segoe UI Symbol",
31 | 'Noto Color Emoji';
32 |
33 | $headings-font-weight: 700;
34 |
--------------------------------------------------------------------------------