├── .gitignore ├── LICENSE ├── README.md ├── dist ├── assets │ ├── favicon.ico │ └── profile.png ├── contact.html ├── css │ └── styles.css ├── index.html ├── js │ └── scripts.js ├── projects.html └── resume.html ├── 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 └── profile.png ├── js └── scripts.js ├── pug ├── contact.pug ├── includes │ ├── css.pug │ ├── footer.pug │ ├── navbar.pug │ ├── scripts.pug │ └── svg-dots.pug ├── index.pug ├── projects.pug └── resume.pug └── scss ├── _global.scss ├── _utilities.scss ├── _variables.scss ├── components ├── _feature.scss └── _profile.scss └── styles.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013-2023 Start Bootstrap LLC 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Start Bootstrap - Personal](https://startbootstrap.com/template/personal/) 2 | 3 | [Personal](https://startbootstrap.com/template/personal/) is a personal website template for [Bootstrap](https://getbootstrap.com/) created by [Start Bootstrap](https://startbootstrap.com/). This template includes 4 unique HTML pages and a working contact form built with [Start Bootstrap Froms](https://startbootstrap.com/solution/contact-forms). 4 | 5 | ## Preview 6 | 7 | [![Personal Preview](https://assets.startbootstrap.com/img/screenshots/themes/personal.png)](https://startbootstrap.github.io/startbootstrap-personal/) 8 | 9 | **[View Live Preview](https://startbootstrap.github.io/startbootstrap-personal/)** 10 | 11 | ## Status 12 | 13 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/StartBootstrap/startbootstrap-personal/master/LICENSE) 14 | [![npm version](https://img.shields.io/npm/v/startbootstrap-personal.svg)](https://www.npmjs.com/package/startbootstrap-personal) 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/template/personal/) 21 | * Install via npm: `npm i startbootstrap-personal` 22 | * Clone the repo: `git clone https://github.com/StartBootstrap/startbootstrap-personal.git` 23 | * [Fork, Clone, or Download on GitHub](https://github.com/StartBootstrap/startbootstrap-personal) 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 `` 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-personal/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](https://startbootstrap.com/template/personal/). 64 | 65 | ## About 66 | 67 | Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects. 68 | 69 | * 70 | * 71 | 72 | Start Bootstrap was created by and is maintained by **[David Miller](https://davidmiller.io/)**. 73 | 74 | * 75 | * 76 | * 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-personal/blob/master/LICENSE) license. 83 | -------------------------------------------------------------------------------- /dist/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-personal/6a1ebcc76a93ead054412fcbdf417d9c83dc762b/dist/assets/favicon.ico -------------------------------------------------------------------------------- /dist/assets/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-personal/6a1ebcc76a93ead054412fcbdf417d9c83dc762b/dist/assets/profile.png -------------------------------------------------------------------------------- /dist/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Modern Business - Start Bootstrap Template 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 37 | 38 |
39 |
40 | 41 |
42 |
43 |
44 |

Get in touch

45 |

Let's work together!

46 |
47 |
48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
57 | 58 |
59 | 60 | 61 |
A name is required.
62 |
63 | 64 |
65 | 66 | 67 |
An email is required.
68 |
Email is not valid.
69 |
70 | 71 |
72 | 73 | 74 |
A phone number is required.
75 |
76 | 77 |
78 | 79 | 80 |
A message is required.
81 |
82 | 83 | 84 | 85 | 86 |
87 |
88 |
Form submission successful!
89 | To activate this form, sign up at 90 |
91 | https://startbootstrap.com/solution/contact-forms 92 |
93 |
94 | 95 | 96 | 97 | 98 |
Error sending message!
99 | 100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 | 109 |
110 |
111 |
112 |
Copyright © Your Website 2023
113 |
114 | Privacy 115 | · 116 | Terms 117 | · 118 | Contact 119 |
120 |
121 |
122 |
123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Personal - Start Bootstrap Theme 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 37 | 38 |
39 |
40 |
41 |
42 | 43 |
44 |
Design · Development · Marketing
45 |
I can help your business to
46 |

Get online and grow fast

47 |
48 | Resume 49 | Projects 50 |
51 |
52 |
53 |
54 | 55 |
56 |
57 | 58 | 59 | ... 60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 |
88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
116 |
117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 |
144 |
145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 | 179 |
180 |
181 |
182 |
183 |
184 |

About Me

185 |

My name is Start Bootstrap and I help brands grow.

186 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit dolorum itaque qui unde quisquam consequatur autem. Eveniet quasi nobis aliquid cumque officiis sed rem iure ipsa! Praesentium ratione atque dolorem?

187 |
188 | 189 | 190 | 191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 | 199 |
200 |
201 |
202 |
Copyright © Your Website 2023
203 |
204 | Privacy 205 | · 206 | Terms 207 | · 208 | Contact 209 |
210 |
211 |
212 |
213 | 214 | 215 | 216 | 217 | 218 | 219 | -------------------------------------------------------------------------------- /dist/js/scripts.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - Personal v1.0.1 (https://startbootstrap.com/template-overviews/personal) 3 | * Copyright 2013-2023 Start Bootstrap 4 | * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-personal/blob/master/LICENSE) 5 | */ 6 | // This file is intentionally blank 7 | // Use this file to add JavaScript to your project -------------------------------------------------------------------------------- /dist/projects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Modern Business - Start Bootstrap Template 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 37 | 38 |
39 |
40 |
41 |

Projects

42 |
43 |
44 |
45 | 46 |
47 |
48 |
49 |
50 |

Project Name 1

51 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius at enim eum illum aperiam placeat esse? Mollitia omnis minima saepe recusandae libero, iste ad asperiores! Explicabo commodi quo itaque! Ipsam!

52 |
53 | ... 54 |
55 |
56 |
57 | 58 |
59 |
60 |
61 |
62 |

Project Name 2

63 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius at enim eum illum aperiam placeat esse? Mollitia omnis minima saepe recusandae libero, iste ad asperiores! Explicabo commodi quo itaque! Ipsam!

64 |
65 | ... 66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | 74 |
75 |
76 |
77 |

Let's build something together

78 | Contact me 79 |
80 |
81 |
82 |
83 | 84 |
85 |
86 |
87 |
Copyright © Your Website 2023
88 |
89 | Privacy 90 | · 91 | Terms 92 | · 93 | Contact 94 |
95 |
96 |
97 |
98 | 99 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /dist/resume.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Personal - Start Bootstrap Template 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 37 | 38 |
39 |
40 |

Resume

41 |
42 |
43 |
44 | 45 |
46 |
47 |

Experience

48 | 49 | 50 | 51 |
52 | Download Resume 53 | 54 |
55 | 56 |
57 |
58 |
59 |
60 |
61 |
2019 - Present
62 |
Web Developer
63 |
Stark Industries
64 |
Los Angeles, CA
65 |
66 |
67 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus laudantium, voluptatem quis repellendus eaque sit animi illo ipsam amet officiis corporis sed aliquam non voluptate corrupti excepturi maxime porro fuga.
68 |
69 |
70 |
71 | 72 |
73 |
74 |
75 |
76 |
77 |
2017 - 2019
78 |
SEM Specialist
79 |
Wayne Enterprises
80 |
Gotham City, NY
81 |
82 |
83 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus laudantium, voluptatem quis repellendus eaque sit animi illo ipsam amet officiis corporis sed aliquam non voluptate corrupti excepturi maxime porro fuga.
84 |
85 |
86 |
87 |
88 | 89 |
90 |

Education

91 | 92 |
93 |
94 |
95 |
96 |
97 |
2015 - 2017
98 |
99 |
Barnett College
100 |
Fairfield, NY
101 |
102 |
103 |
Master's
104 |
Web Development
105 |
106 |
107 |
108 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus laudantium, voluptatem quis repellendus eaque sit animi illo ipsam amet officiis corporis sed aliquam non voluptate corrupti excepturi maxime porro fuga.
109 |
110 |
111 |
112 | 113 |
114 |
115 |
116 |
117 |
118 |
2011 - 2015
119 |
120 |
ULA
121 |
Los Angeles, CA
122 |
123 |
124 |
Undergraduate
125 |
Computer Science
126 |
127 |
128 |
129 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus laudantium, voluptatem quis repellendus eaque sit animi illo ipsam amet officiis corporis sed aliquam non voluptate corrupti excepturi maxime porro fuga.
130 |
131 |
132 |
133 |
134 | 135 |
136 | 137 |
138 | 139 |
140 |
141 | 142 |
143 |
144 |
145 |

Professional Skills

146 |
147 |
148 |
SEO/SEM Marketing
149 |
Statistical Analysis
150 |
Web Development
151 |
152 |
153 |
Network Security
154 |
Adobe Software Suite
155 |
User Interface Design
156 |
157 |
158 | 159 |
160 |
161 |
162 |

Languages

163 |
164 |
165 |
HTML
166 |
CSS
167 |
JavaScript
168 |
169 |
170 |
Python
171 |
Ruby
172 |
Node.js
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 | 183 |
184 |
185 |
186 |
Copyright © Your Website 2023
187 |
188 | Privacy 189 | · 190 | Terms 191 | · 192 | Contact 193 |
194 |
195 |
196 |
197 | 198 | 199 | 200 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Personal", 3 | "name": "startbootstrap-personal", 4 | "version": "1.0.1", 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 personal website template built with Bootstrap", 16 | "keywords": [ 17 | "css", 18 | "sass", 19 | "html", 20 | "responsive", 21 | "theme", 22 | "template" 23 | ], 24 | "homepage": "https://startbootstrap.com/template-overviews/personal", 25 | "bugs": { 26 | "url": "https://github.com/StartBootstrap/startbootstrap-personal/issues", 27 | "email": "feedback@startbootstrap.com" 28 | }, 29 | "license": "MIT", 30 | "author": "Start Bootstrap", 31 | "contributors": [ 32 | "David Miller (https://davidmiller.io/)" 33 | ], 34 | "repository": { 35 | "type": "git", 36 | "url": "https://github.com/StartBootstrap/startbootstrap-personal.git" 37 | }, 38 | "dependencies": { 39 | "bootstrap": "5.2.3" 40 | }, 41 | "devDependencies": { 42 | "autoprefixer": "10.4.14", 43 | "browser-sync": "2.29.1", 44 | "chokidar": "3.5.3", 45 | "concurrently": "6.3.0", 46 | "postcss": "8.4.21", 47 | "prettier": "2.8.6", 48 | "pug": "3.0.2", 49 | "sass": "1.60.0", 50 | "shelljs": "0.8.5", 51 | "upath": "2.0.1" 52 | } 53 | } -------------------------------------------------------------------------------- /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-personal/6a1ebcc76a93ead054412fcbdf417d9c83dc762b/src/assets/favicon.ico -------------------------------------------------------------------------------- /src/assets/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-personal/6a1ebcc76a93ead054412fcbdf417d9c83dc762b/src/assets/profile.png -------------------------------------------------------------------------------- /src/js/scripts.js: -------------------------------------------------------------------------------- 1 | // This file is intentionally blank 2 | // Use this file to add JavaScript to your project -------------------------------------------------------------------------------- /src/pug/contact.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 Modern Business - Start Bootstrap Template 12 | 13 | // Favicon 14 | link(rel='icon', type='image/x-icon', href='assets/favicon.ico') 15 | 16 | include includes/css.pug 17 | 18 | body.d-flex.flex-column 19 | 20 | main.flex-shrink-0 21 | 22 | // Navigation 23 | include includes/navbar.pug 24 | 25 | // Page content 26 | section.py-5 27 | 28 | .container.px-5 29 | 30 | // Contact form 31 | .bg-light.rounded-4.py-5.px-4.px-md-5 32 | .text-center.mb-5 33 | .feature.bg-primary.bg-gradient-primary-to-secondary.text-white.rounded-3.mb-3 34 | i.bi.bi-envelope 35 | h1.fw-bolder Get in touch 36 | p.lead.fw-normal.text-muted.mb-0 Let's work together! 37 | .row.gx-5.justify-content-center 38 | .col-lg-8.col-xl-6 39 | 40 | // * * * * * * * * * * * * * * * 41 | // * * SB Forms Contact Form * * 42 | // * * * * * * * * * * * * * * * 43 | 44 | // This form is pre-integrated with SB Forms. 45 | // To make this form functional, sign up at 46 | // https://startbootstrap.com/solution/contact-forms 47 | // to get an API token! 48 | 49 | form#contactForm(data-sb-form-api-token='API_TOKEN') 50 | 51 | // Name input 52 | .form-floating.mb-3 53 | input#name.form-control( 54 | type='text', 55 | placeholder='Enter your name...' 56 | data-sb-validations='required' 57 | ) 58 | label(for='name') Full name 59 | .invalid-feedback(data-sb-feedback='name:required') 60 | | A name is required. 61 | 62 | // Email address input 63 | .form-floating.mb-3 64 | input#email.form-control( 65 | type='email', 66 | placeholder='name@example.com' 67 | data-sb-validations='required,email' 68 | ) 69 | label(for='email') Email address 70 | .invalid-feedback(data-sb-feedback='email:required') 71 | | An email is required. 72 | .invalid-feedback(data-sb-feedback='email:email') 73 | | Email is not valid. 74 | 75 | // Phone number input 76 | .form-floating.mb-3 77 | input#phone.form-control( 78 | type='tel', 79 | placeholder='(123) 456-7890' 80 | data-sb-validations='required' 81 | ) 82 | label(for='phone') Phone number 83 | .invalid-feedback(data-sb-feedback='phone:required') 84 | | A phone number is required. 85 | 86 | // Message input 87 | .form-floating.mb-3 88 | textarea#message.form-control( 89 | type='text', 90 | placeholder='Enter your message here...', 91 | style='height: 10rem;' 92 | data-sb-validations='required' 93 | ) 94 | label(for='message') Message 95 | .invalid-feedback(data-sb-feedback='message:required') 96 | | A message is required. 97 | 98 | // Submit success message 99 | // 100 | // This is what your users will see when the form 101 | // has successfully submitted 102 | #submitSuccessMessage.d-none 103 | .text-center.mb-3 104 | .fw-bolder Form submission successful! 105 | | To activate this form, sign up at 106 | br 107 | a(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms 108 | 109 | // Submit error message 110 | // 111 | // This is what your users will see when there is 112 | // an error submitting the form 113 | #submitErrorMessage.d-none 114 | .text-center.text-danger.mb-3 Error sending message! 115 | 116 | // Submit Button 117 | .d-grid 118 | button#submitButton.btn.btn-primary.btn-lg.disabled(type='submit') Submit 119 | 120 | // Footer 121 | include includes/footer.pug 122 | 123 | include includes/scripts.pug 124 | 125 | // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 126 | // * * SB Forms JS * * 127 | // * * Activate your form at https://startbootstrap.com/solution/contact-forms * * 128 | // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 129 | 130 | script(src='https://cdn.startbootstrap.com/sb-forms-latest.js') 131 | -------------------------------------------------------------------------------- /src/pug/includes/css.pug: -------------------------------------------------------------------------------- 1 | // Custom Google font 2 | link(rel='preconnect', href='https://fonts.googleapis.com') 3 | link(rel='preconnect', href='https://fonts.gstatic.com', crossorigin) 4 | link(href='https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap', rel='stylesheet') 5 | 6 | // Bootstrap icons 7 | link(href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css', rel='stylesheet') 8 | 9 | // Core theme CSS (includes Bootstrap) 10 | link(href='css/styles.css', rel='stylesheet') 11 | -------------------------------------------------------------------------------- /src/pug/includes/footer.pug: -------------------------------------------------------------------------------- 1 | footer.bg-white.py-4.mt-auto 2 | .container.px-5 3 | .row.align-items-center.justify-content-between.flex-column.flex-sm-row 4 | .col-auto 5 | .small.m-0 Copyright © Your Website 2023 6 | .col-auto 7 | a.small(href='#!') Privacy 8 | span.mx-1 · 9 | a.small(href='#!') Terms 10 | span.mx-1 · 11 | a.small(href='#!') Contact -------------------------------------------------------------------------------- /src/pug/includes/navbar.pug: -------------------------------------------------------------------------------- 1 | nav.navbar.navbar-expand-lg.navbar-light.bg-white.py-3 2 | .container.px-5 3 | a.navbar-brand(href='index.html') 4 | span.fw-bolder.text-primary Start Bootstrap 5 | button.navbar-toggler(type='button', data-bs-toggle='collapse', data-bs-target='#navbarSupportedContent', aria-controls='navbarSupportedContent', aria-expanded='false', aria-label='Toggle navigation') 6 | span.navbar-toggler-icon 7 | #navbarSupportedContent.collapse.navbar-collapse 8 | ul.navbar-nav.ms-auto.mb-2.mb-lg-0.small.fw-bolder 9 | li.nav-item 10 | a.nav-link(href='index.html') Home 11 | li.nav-item 12 | a.nav-link(href='resume.html') Resume 13 | li.nav-item 14 | a.nav-link(href='projects.html') Projects 15 | li.nav-item 16 | a.nav-link(href='contact.html') Contact 17 | -------------------------------------------------------------------------------- /src/pug/includes/scripts.pug: -------------------------------------------------------------------------------- 1 | // Bootstrap core JS 2 | script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js') 3 | 4 | // Core theme JS 5 | script(src='js/scripts.js') -------------------------------------------------------------------------------- /src/pug/includes/svg-dots.pug: -------------------------------------------------------------------------------- 1 | // SVG Dots 2 | //- ?xml version="1.0" encoding="utf-8"? 3 | //- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) 4 | svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 191.6 1215.4' style='enable-background:new 0 0 191.6 1215.4;' xml:space='preserve') 5 | g(transform='translate(0.000000,1280.000000) scale(0.100000,-0.100000)') 6 | path(d='M227.7,12788.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 7 | C383.7,12801.6,289.7,12808.6,227.7,12788.6z') 8 | path(d='M1507.7,12788.6c-151-50-253-216-222-362c25-119,136-230,254-255c194-41,395,142,375,339c-11,105-90,213-190,262\ 9 | C1663.7,12801.6,1569.7,12808.6,1507.7,12788.6z') 10 | path(d='M227.7,11508.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 11 | C383.7,11521.6,289.7,11528.6,227.7,11508.6z') 12 | path(d='M1507.7,11508.6c-151-50-253-216-222-362c25-119,136-230,254-255c194-41,395,142,375,339c-11,105-90,213-190,262\ 13 | C1663.7,11521.6,1569.7,11528.6,1507.7,11508.6z') 14 | path(d='M227.7,10228.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 15 | C383.7,10241.6,289.7,10248.6,227.7,10228.6z') 16 | path(d='M1507.7,10228.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 17 | C1663.7,10241.6,1569.7,10248.6,1507.7,10228.6z') 18 | path(d='M227.7,8948.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 19 | C383.7,8961.6,289.7,8968.6,227.7,8948.6z') 20 | path(d='M1507.7,8948.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 21 | C1663.7,8961.6,1569.7,8968.6,1507.7,8948.6z') 22 | path(d='M227.7,7668.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 23 | C383.7,7681.6,289.7,7688.6,227.7,7668.6z') 24 | path(d='M1507.7,7668.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 25 | C1663.7,7681.6,1569.7,7688.6,1507.7,7668.6z') 26 | path(d='M227.7,6388.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 27 | C383.7,6401.6,289.7,6408.6,227.7,6388.6z') 28 | path(d='M1507.7,6388.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 29 | C1663.7,6401.6,1569.7,6408.6,1507.7,6388.6z') 30 | path(d='M227.7,5108.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 31 | C383.7,5121.6,289.7,5128.6,227.7,5108.6z') 32 | path(d='M1507.7,5108.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 33 | C1663.7,5121.6,1569.7,5128.6,1507.7,5108.6z') 34 | path(d='M227.7,3828.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 35 | C383.7,3841.6,289.7,3848.6,227.7,3828.6z') 36 | path(d='M1507.7,3828.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 37 | C1663.7,3841.6,1569.7,3848.6,1507.7,3828.6z') 38 | path(d='M227.7,2548.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 39 | C383.7,2561.6,289.7,2568.6,227.7,2548.6z') 40 | path(d='M1507.7,2548.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 41 | C1663.7,2561.6,1569.7,2568.6,1507.7,2548.6z') 42 | path(d='M227.7,1268.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 43 | C383.7,1281.6,289.7,1288.6,227.7,1268.6z') 44 | path(d='M1507.7,1268.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262\ 45 | C1663.7,1281.6,1569.7,1288.6,1507.7,1268.6z') 46 | // END of SVG dots -------------------------------------------------------------------------------- /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 Personal - Start Bootstrap Theme 12 | 13 | // Favicon 14 | link(rel='icon', type='image/x-icon', href='assets/favicon.ico') 15 | 16 | include includes/css.pug 17 | 18 | body.d-flex.flex-column.h-100 19 | 20 | main.flex-shrink-0 21 | 22 | // Navigation 23 | include includes/navbar.pug 24 | 25 | // Header 26 | header.py-5 27 | .container.px-5.pb-5 28 | .row.gx-5.align-items-center 29 | .col-xxl-5 30 | // Header text content 31 | .text-center.text-xxl-start 32 | .badge.bg-gradient-primary-to-secondary.text-white.mb-4 33 | .text-uppercase Design · Development · Marketing 34 | .fs-3.fw-light.text-muted I can help your business to 35 | h1.display-3.fw-bolder.mb-5 36 | span.text-gradient.d-inline Get online and grow fast 37 | .d-grid.gap-3.d-sm-flex.justify-content-sm-center.justify-content-xxl-start.mb-3 38 | a.btn.btn-primary.btn-lg.px-5.py-3.me-sm-3.fs-6.fw-bolder(href='resume.html') Resume 39 | a.btn.btn-outline-dark.btn-lg.px-5.py-3.fs-6.fw-bolder(href='projects.html') Projects 40 | .col-xxl-7 41 | // Header profile picture 42 | .d-flex.justify-content-center.mt-5.mt-xxl-0 43 | .profile.bg-gradient-primary-to-secondary 44 | // TIP: For best results, use a photo with a transparent background like the demo example below 45 | // Watch a tutorial on how to do this on YouTube (link) 46 | img.profile-img(src='assets/profile.png', alt='...') 47 | .dots-1 48 | include includes/svg-dots.pug 49 | .dots-2 50 | include includes/svg-dots.pug 51 | .dots-3 52 | include includes/svg-dots.pug 53 | .dots-4 54 | include includes/svg-dots.pug 55 | 56 | // About Section 57 | section.bg-light.py-5 58 | .container.px-5 59 | .row.gx-5.justify-content-center 60 | .col-xxl-8 61 | .text-center.my-5 62 | h2.display-5.fw-bolder 63 | span.text-gradient.d-inline About Me 64 | p.lead.fw-light.mb-4 My name is Start Bootstrap and I help brands grow. 65 | p.text-muted Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit dolorum itaque qui unde quisquam consequatur autem. Eveniet quasi nobis aliquid cumque officiis sed rem iure ipsa! Praesentium ratione atque dolorem? 66 | .d-flex.justify-content-center.fs-2.gap-4 67 | a.text-gradient(href="#!") 68 | i.bi.bi-twitter 69 | a.text-gradient(href="#!") 70 | i.bi.bi-linkedin 71 | a.text-gradient(href="#!") 72 | i.bi.bi-github 73 | 74 | // Footer 75 | include includes/footer.pug 76 | 77 | include includes/scripts.pug 78 | -------------------------------------------------------------------------------- /src/pug/projects.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 Modern Business - Start Bootstrap Template 12 | 13 | // Favicon 14 | link(rel='icon', type='image/x-icon', href='assets/favicon.ico') 15 | 16 | include includes/css.pug 17 | 18 | body.d-flex.flex-column.h-100.bg-light 19 | 20 | main.flex-shrink-0 21 | 22 | // Navigation 23 | include includes/navbar.pug 24 | 25 | // Projects Section 26 | section.py-5 27 | .container.px-5.mb-5 28 | .text-center.mb-5 29 | h1.display-5.fw-bolder.mb-0 30 | span.text-gradient.d-inline Projects 31 | .row.gx-5.justify-content-center 32 | 33 | .col-lg-11.col-xl-9.col-xxl-8 34 | 35 | // Project Card 1 36 | .card.overflow-hidden.shadow.rounded-4.border-0.mb-5 37 | .card-body.p-0 38 | .d-flex.align-items-center 39 | .p-5 40 | h2.fw-bolder Project Name 1 41 | p Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius at enim eum illum aperiam placeat esse? Mollitia omnis minima saepe recusandae libero, iste ad asperiores! Explicabo commodi quo itaque! Ipsam! 42 | img.img-fluid(src='https://dummyimage.com/300x400/343a40/6c757d', alt='...') 43 | 44 | // Project Card 2 45 | .card.overflow-hidden.shadow.rounded-4.border-0 46 | .card-body.p-0 47 | .d-flex.align-items-center 48 | .p-5 49 | h2.fw-bolder Project Name 2 50 | p Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius at enim eum illum aperiam placeat esse? Mollitia omnis minima saepe recusandae libero, iste ad asperiores! Explicabo commodi quo itaque! Ipsam! 51 | img.img-fluid(src='https://dummyimage.com/300x400/343a40/6c757d', alt='...') 52 | 53 | // Call to action section 54 | section.py-5.bg-gradient-primary-to-secondary.text-white 55 | .container.px-5.my-5 56 | .text-center 57 | h2.display-4.fw-bolder.mb-4 Let's build something together 58 | a.btn.btn-outline-light.btn-lg.px-5.py-3.fs-6.fw-bolder(href='contact.html') Contact me 59 | 60 | // Footer 61 | include includes/footer.pug 62 | 63 | include includes/scripts.pug 64 | -------------------------------------------------------------------------------- /src/pug/resume.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 Personal - Start Bootstrap Template 12 | 13 | // Favicon 14 | link(rel='icon', type='image/x-icon', href='assets/favicon.ico') 15 | 16 | include includes/css.pug 17 | 18 | body.d-flex.flex-column.h-100.bg-light 19 | 20 | main.flex-shrink-0 21 | 22 | // Navigation 23 | include includes/navbar.pug 24 | 25 | // Page Content 26 | .container.px-5.my-5 27 | .text-center.mb-5 28 | h1.display-5.fw-bolder.mb-0 29 | span.text-gradient.d-inline Resume 30 | .row.gx-5.justify-content-center 31 | 32 | .col-lg-11.col-xl-9.col-xxl-8 33 | 34 | // Experience Section 35 | section 36 | .d-flex.align-items-center.justify-content-between.mb-4 37 | h2.text-primary.fw-bolder.mb-0 Experience 38 | // Download resume button 39 | // Note: Set the link href target to a PDF file within your project 40 | a.btn.btn-primary.px-4.py-3(href='#!') 41 | .d-inline-block.bi.bi-download.me-2 42 | | Download Resume 43 | 44 | // Experience Card 1 45 | .card.shadow.border-0.rounded-4.mb-5 46 | .card-body.p-5 47 | .row.align-items-center.gx-5 48 | .col.text-center.text-lg-start.mb-4.mb-lg-0 49 | .bg-light.p-4.rounded-4 50 | .text-primary.fw-bolder.mb-2 2019 - Present 51 | .small.fw-bolder Web Developer 52 | .small.text-muted Stark Industries 53 | .small.text-muted Los Angeles, CA 54 | .col-lg-8 55 | div Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus laudantium, voluptatem quis repellendus eaque sit animi illo ipsam amet officiis corporis sed aliquam non voluptate corrupti excepturi maxime porro fuga. 56 | 57 | // Experience Card 2 58 | .card.shadow.border-0.rounded-4.mb-5 59 | .card-body.p-5 60 | .row.align-items-center.gx-5 61 | .col.text-center.text-lg-start.mb-4.mb-lg-0 62 | .bg-light.p-4.rounded-4 63 | .text-primary.fw-bolder.mb-2 2017 - 2019 64 | .small.fw-bolder SEM Specialist 65 | .small.text-muted Wayne Enterprises 66 | .small.text-muted Gotham City, NY 67 | .col-lg-8 68 | div Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus laudantium, voluptatem quis repellendus eaque sit animi illo ipsam amet officiis corporis sed aliquam non voluptate corrupti excepturi maxime porro fuga. 69 | 70 | // Education Section 71 | section 72 | h2.text-secondary.fw-bolder.mb-4 Education 73 | 74 | // Education Card 1 75 | .card.shadow.border-0.rounded-4.mb-5 76 | .card-body.p-5 77 | .row.align-items-center.gx-5 78 | .col.text-center.text-lg-start.mb-4.mb-lg-0 79 | .bg-light.p-4.rounded-4 80 | .text-secondary.fw-bolder.mb-2 2015 - 2017 81 | .mb-2 82 | .small.fw-bolder Barnett College 83 | .small.text-muted Fairfield, NY 84 | .fst-italic 85 | .small.text-muted Master's 86 | .small.text-muted Web Development 87 | .col-lg-8 88 | div Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus laudantium, voluptatem quis repellendus eaque sit animi illo ipsam amet officiis corporis sed aliquam non voluptate corrupti excepturi maxime porro fuga. 89 | 90 | // Education Card 2 91 | .card.shadow.border-0.rounded-4.mb-5 92 | .card-body.p-5 93 | .row.align-items-center.gx-5 94 | .col.text-center.text-lg-start.mb-4.mb-lg-0 95 | .bg-light.p-4.rounded-4 96 | .text-secondary.fw-bolder.mb-2 2011 - 2015 97 | .mb-2 98 | .small.fw-bolder ULA 99 | .small.text-muted Los Angeles, CA 100 | .fst-italic 101 | .small.text-muted Undergraduate 102 | .small.text-muted Computer Science 103 | .col-lg-8 104 | div Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus laudantium, voluptatem quis repellendus eaque sit animi illo ipsam amet officiis corporis sed aliquam non voluptate corrupti excepturi maxime porro fuga. 105 | 106 | // Divider 107 | .pb-5 108 | 109 | // Skills Section 110 | section 111 | // Skillset Card 112 | .card.shadow.border-0.rounded-4.mb-5 113 | .card-body.p-5 114 | // Professional skills list 115 | .mb-5 116 | .d-flex.align-items-center.mb-4 117 | .feature.bg-primary.bg-gradient-primary-to-secondary.text-white.rounded-3.me-3 118 | i.bi.bi-tools 119 | h3.fw-bolder.mb-0 120 | span.text-gradient.d-inline Professional Skills 121 | .row.row-cols-1.row-cols-md-3.mb-4 122 | .col.mb-4.mb-md-0 123 | .d-flex.align-items-center.bg-light.rounded-4.p-3.h-100 SEO/SEM Marketing 124 | .col.mb-4.mb-md-0 125 | .d-flex.align-items-center.bg-light.rounded-4.p-3.h-100 Statistical Analysis 126 | .col 127 | .d-flex.align-items-center.bg-light.rounded-4.p-3.h-100 Web Development 128 | .row.row-cols-1.row-cols-md-3 129 | .col.mb-4.mb-md-0 130 | .d-flex.align-items-center.bg-light.rounded-4.p-3.h-100 Network Security 131 | .col.mb-4.mb-md-0 132 | .d-flex.align-items-center.bg-light.rounded-4.p-3.h-100 Adobe Software Suite 133 | .col 134 | .d-flex.align-items-center.bg-light.rounded-4.p-3.h-100 User Interface Design 135 | // Languages list 136 | .mb-0 137 | .d-flex.align-items-center.mb-4 138 | .feature.bg-primary.bg-gradient-primary-to-secondary.text-white.rounded-3.me-3 139 | i.bi.bi-code-slash 140 | h3.fw-bolder.mb-0 141 | span.text-gradient.d-inline Languages 142 | .row.row-cols-1.row-cols-md-3.mb-4 143 | .col.mb-4.mb-md-0 144 | .d-flex.align-items-center.bg-light.rounded-4.p-3.h-100 HTML 145 | .col.mb-4.mb-md-0 146 | .d-flex.align-items-center.bg-light.rounded-4.p-3.h-100 CSS 147 | .col 148 | .d-flex.align-items-center.bg-light.rounded-4.p-3.h-100 JavaScript 149 | .row.row-cols-1.row-cols-md-3 150 | .col.mb-4.mb-md-0 151 | .d-flex.align-items-center.bg-light.rounded-4.p-3.h-100 Python 152 | .col.mb-4.mb-md-0 153 | .d-flex.align-items-center.bg-light.rounded-4.p-3.h-100 Ruby 154 | .col 155 | .d-flex.align-items-center.bg-light.rounded-4.p-3.h-100 Node.js 156 | 157 | // Footer 158 | include includes/footer.pug 159 | 160 | include includes/scripts.pug -------------------------------------------------------------------------------- /src/scss/_global.scss: -------------------------------------------------------------------------------- 1 | // Global styling for entire theme 2 | 3 | // Resets for body and html height for sticky footer 4 | body, 5 | html { 6 | height: 100%; 7 | } -------------------------------------------------------------------------------- /src/scss/_utilities.scss: -------------------------------------------------------------------------------- 1 | // Custom utilities to extend Bootstrap's utility classes 2 | 3 | // Background gradient utility for a primary to secondary gradient 4 | .bg-gradient-primary-to-secondary { 5 | background: $primary; 6 | background: linear-gradient(135deg, $primary 0%, $secondary 100%); 7 | } 8 | 9 | // Utility for creating gradient text 10 | // Note: When using gradient text, it is best utilized on 11 | // text that has the position set to inline 12 | .text-gradient { 13 | background: -webkit-linear-gradient(315deg, $primary 0%, $secondary 100%); 14 | -webkit-background-clip: text; 15 | -webkit-text-fill-color: transparent; 16 | } 17 | 18 | // Additional rounded border utility that uses a custom XL border radius (defined in _variables.scss) 19 | .rounded-4 { 20 | border-radius: $border-radius-xl !important; 21 | } -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | 3 | // Override Bootstrap Colors 4 | $blue: #1e30f3; 5 | $pink: #e21e80; 6 | 7 | // Redefine Bootstrap State Colors 8 | $primary: $blue; 9 | $secondary: $pink; 10 | 11 | // Bootstrap Variable Functions 12 | $enable-negative-margins: true; 13 | 14 | // Override Bootstrap Typography Variables 15 | $font-family-sans-serif: 'Plus Jakarta Sans'; 16 | $font-weight-light: 200; 17 | 18 | // Custom Border Variables 19 | $border-radius-xl: 1rem; -------------------------------------------------------------------------------- /src/scss/components/_feature.scss: -------------------------------------------------------------------------------- 1 | // Custom SCSS for feature component using Bootstrap icons 2 | .feature { 3 | display: inline-flex; 4 | align-items: center; 5 | justify-content: center; 6 | height: 3rem; 7 | width: 3rem; 8 | font-size: 1.5rem; 9 | } -------------------------------------------------------------------------------- /src/scss/components/_profile.scss: -------------------------------------------------------------------------------- 1 | // Custom component for profile picture on the homepage 2 | 3 | .profile { 4 | position: relative; 5 | height: 75vw; 6 | width: 75vw; 7 | border-radius: 5vw; 8 | margin-top: 5vw; 9 | max-height: 40rem; 10 | max-width: 40rem; 11 | 12 | .profile-img { 13 | height: 80vw; 14 | max-height: 45rem; 15 | position: absolute; 16 | bottom: 0; 17 | left: 50%; 18 | transform: translateX(-50%); 19 | } 20 | 21 | .dots-1 { 22 | position: absolute; 23 | width: 3vw; 24 | right: 1.5vw; 25 | top: 4vw; 26 | 27 | svg { 28 | fill: $white; 29 | } 30 | } 31 | 32 | .dots-2 { 33 | position: absolute; 34 | width: 3vw; 35 | right: -4vw; 36 | top: 6.05vw; 37 | 38 | svg { 39 | fill: $primary; 40 | } 41 | } 42 | 43 | .dots-3 { 44 | position: absolute; 45 | width: 3vw; 46 | left: 1.5vw; 47 | bottom: 6.05vw; 48 | 49 | svg { 50 | fill: $white; 51 | } 52 | } 53 | 54 | .dots-4 { 55 | position: absolute; 56 | width: 3vw; 57 | left: -4vw; 58 | bottom: 4vw; 59 | 60 | svg { 61 | fill: $primary; 62 | } 63 | } 64 | 65 | } 66 | 67 | // Responsive styling for profile photo component 68 | 69 | @include media-breakpoint-up(sm) { 70 | .profile { 71 | height: 60vw; 72 | width: 60vw; 73 | 74 | .profile-img { 75 | height: 65vw; 76 | } 77 | 78 | .dots-1 { 79 | width: 3vw; 80 | right: 1.5vw; 81 | } 82 | 83 | .dots-2 { 84 | width: 3vw; 85 | right: -4vw; 86 | } 87 | 88 | .dots-3 { 89 | width: 3vw; 90 | left: 1.5vw; 91 | } 92 | 93 | .dots-4 { 94 | width: 3vw; 95 | left: -4vw; 96 | } 97 | 98 | } 99 | } 100 | @include media-breakpoint-up(md) { 101 | .profile { 102 | height: 50vw; 103 | width: 50vw; 104 | 105 | .profile-img { 106 | height: 55vw; 107 | } 108 | 109 | .dots-1 { 110 | width: 3vw; 111 | right: 1.5vw; 112 | } 113 | 114 | .dots-2 { 115 | width: 3vw; 116 | right: -4vw; 117 | } 118 | 119 | .dots-3 { 120 | width: 3vw; 121 | left: 1.5vw; 122 | } 123 | 124 | .dots-4 { 125 | width: 3vw; 126 | left: -4vw; 127 | } 128 | 129 | } 130 | } 131 | @include media-breakpoint-up(lg) { 132 | .profile { 133 | height: 40vw; 134 | width: 40vw; 135 | 136 | .profile-img { 137 | height: 45vw; 138 | } 139 | 140 | .dots-1 { 141 | width: 1.5vw; 142 | right: 0.75vw; 143 | } 144 | 145 | .dots-2 { 146 | width: 1.5vw; 147 | right: -2vw; 148 | } 149 | 150 | .dots-3 { 151 | width: 1.5vw; 152 | left: 0.75vw; 153 | } 154 | 155 | .dots-4 { 156 | width: 1.5vw; 157 | left: -2vw; 158 | } 159 | 160 | } 161 | } 162 | 163 | @include media-breakpoint-up(xl) { 164 | .profile { 165 | height: 35vw; 166 | width: 35vw; 167 | 168 | .profile-img { 169 | height: 40vw; 170 | } 171 | 172 | .dots-1 { 173 | width: 1.5vw; 174 | right: 0.75vw; 175 | } 176 | 177 | .dots-2 { 178 | width: 1.5vw; 179 | right: -2vw; 180 | } 181 | 182 | .dots-3 { 183 | width: 1.5vw; 184 | left: 0.75vw; 185 | } 186 | 187 | .dots-4 { 188 | width: 1.5vw; 189 | left: -2vw; 190 | } 191 | } 192 | } -------------------------------------------------------------------------------- /src/scss/styles.scss: -------------------------------------------------------------------------------- 1 | // Import Variables 2 | @import "variables"; 3 | 4 | // Import Bootstrap 5 | @import "bootstrap/scss/bootstrap.scss"; 6 | 7 | // Import Global Theme Styles 8 | @import "global"; 9 | @import "utilities"; 10 | 11 | // Import Custom Component Styles 12 | @import "components/feature"; 13 | @import "components/profile"; --------------------------------------------------------------------------------