@@ -0,0 +1,3 @@ | |||||
node_modules/ | |||||
dist/ | |||||
@@ -1,3 +1,20 @@ | |||||
# cv | # cv | ||||
Dejvino's Curriculum Vitae | |||||
Dejvino's Curriculum Vitae | |||||
## Build | |||||
``` | |||||
npm install | |||||
# Development - served on http://localhost:8080/ | |||||
npm run start | |||||
# Production - output in ./dist/ | |||||
npm run build | |||||
``` | |||||
## Info | |||||
Uses Bootstrap and Webpack to compile a static HTML/CSS/JS web page that can be easily served from any webhosting. | |||||
@@ -0,0 +1,33 @@ | |||||
{ | |||||
"name": "webpack", | |||||
"description": "Include Bootstrap's source Sass and individual JavaScript plugins with Webpack.", | |||||
"version": "0.0.0", | |||||
"private": true, | |||||
"repository": "twbs/examples", | |||||
"license": "MIT", | |||||
"stackblitz": { | |||||
"startCommand": "npm start" | |||||
}, | |||||
"scripts": { | |||||
"start": "webpack serve", | |||||
"build": "webpack build --mode=production", | |||||
"test": "npm run build" | |||||
}, | |||||
"dependencies": { | |||||
"@popperjs/core": "^2.11.7", | |||||
"bootstrap": "^5.2.3", | |||||
"lodash": "^4.17.21" | |||||
}, | |||||
"devDependencies": { | |||||
"autoprefixer": "^10.4.14", | |||||
"css-loader": "^6.7.3", | |||||
"html-webpack-plugin": "^5.5.1", | |||||
"postcss-loader": "^7.3.0", | |||||
"sass": "^1.62.1", | |||||
"sass-loader": "^13.2.2", | |||||
"style-loader": "^3.3.2", | |||||
"webpack": "^5.83.1", | |||||
"webpack-cli": "^5.1.1", | |||||
"webpack-dev-server": "^4.13.3" | |||||
} | |||||
} |
@@ -0,0 +1,71 @@ | |||||
<!doctype html> | |||||
<html lang="en"> | |||||
<head> | |||||
<meta charset="utf-8"> | |||||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||||
<title>Bootstrap w/ Webpack</title> | |||||
</head> | |||||
<body> | |||||
<div class="container py-4 px-3 mx-auto"> | |||||
<header class="d-flex justify-content-between align-items-md-center pb-3 mb-5 border-bottom"> | |||||
<h1 class="h4"> | |||||
<a href="/" class="d-flex align-items-center text-dark text-decoration-none"> | |||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-bootstrap-fill d-inline-block me-2" viewBox="0 0 16 16"> | |||||
<path d="M6.375 7.125V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H6.375v2.725z"/> | |||||
<path d="M4.002 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4h-8zm1.06 12V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396H5.062z"/> | |||||
</svg> | |||||
<span>Webpack</span> | |||||
</a> | |||||
</h1> | |||||
<a href="https://github.com/twbs/examples/tree/main/webpack/" target="_blank" rel="noopener">View on GitHub</a> | |||||
</header> | |||||
<h1>Build Bootstrap with Webpack</h1> | |||||
<div class="col-lg-8 px-0"> | |||||
<p class="fs-4">You've successfully loaded the Bootstrap + Webpack example! It's loaded up with <a href="https://getbootstrap.com/">Bootstrap 5</a> and uses Webpack to compile and bundle our Sass and JavaScript. It also includes Autoprefixer.</p> | |||||
<p>If this button appears blue and the link appears purple, you've done it!</p> | |||||
</div> | |||||
<button type="button" class="btn btn-primary me-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">Toggle offcanvas</button> | |||||
<a id="popoverButton" class="text-success" href="#" role="button" data-bs-toggle="popover" title="Custom popover" data-bs-content="This is a Bootstrap popover.">Example popover</a> | |||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> | |||||
<div class="offcanvas-header"> | |||||
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5> | |||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> | |||||
</div> | |||||
<div class="offcanvas-body"> | |||||
<div> | |||||
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. | |||||
</div> | |||||
<div class="dropdown mt-3"> | |||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> | |||||
Dropdown button | |||||
</button> | |||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> | |||||
<li><a class="dropdown-item" href="#">Action</a></li> | |||||
<li><a class="dropdown-item" href="#">Another action</a></li> | |||||
<li><a class="dropdown-item" href="#">Something else here</a></li> | |||||
</ul> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<hr class="col-1 my-5 mx-0"> | |||||
<h2>Guides</h2> | |||||
<p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p> | |||||
<ul class="icon-list"> | |||||
<li><a href="https://getbootstrap.com/docs/5.2/getting-started/introduction/">Bootstrap quick start guide</a></li> | |||||
<li><a href="https://getbootstrap.com/docs/5.2/getting-started/webpack/">Bootstrap Webpack guide</a></li> | |||||
<li><a href="https://getbootstrap.com/docs/5.2/getting-started/parcel/">Bootstrap Parcel guide</a></li> | |||||
<li><a href="https://getbootstrap.com/docs/5.2/getting-started/vite/">Bootstrap Vite guide</a></li> | |||||
<li><a href="https://getbootstrap.com/docs/5.2/getting-started/build-tools/">Contributing to Bootstrap</a></li> | |||||
</ul> | |||||
<hr class="mt-5 mb-4"> | |||||
<p class="text-muted">Created and open sourced by the Bootstrap team. Licensed MIT.</p> | |||||
</div> | |||||
</body> | |||||
</html> |
@@ -0,0 +1,11 @@ | |||||
// Import our custom CSS | |||||
import '../scss/styles.scss'; | |||||
// Import only the Bootstrap components we need | |||||
import { Popover } from 'bootstrap'; | |||||
// Create an example popover | |||||
document.querySelectorAll('[data-bs-toggle="popover"]') | |||||
.forEach(popover => { | |||||
new Popover(popover) | |||||
}) |
@@ -0,0 +1,22 @@ | |||||
// Example of a custom component | |||||
.icon-list { | |||||
padding-left: 0; | |||||
list-style: none; | |||||
li { | |||||
display: flex; | |||||
align-items: flex-start; | |||||
margin-bottom: .25rem; | |||||
&::before { | |||||
display: block; | |||||
flex-shrink: 0; | |||||
width: 1.5em; | |||||
height: 1.5em; | |||||
margin-right: .5rem; | |||||
content: ""; | |||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto; | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,93 @@ | |||||
// Override Bootstrap's Sass default variables | |||||
// | |||||
// Nearly all variables in Bootstrap are written with the `!default` flag. | |||||
// This allows you to override the default values of those variables before | |||||
// you import Bootstrap's source Sass files. | |||||
// | |||||
// Overriding the default variable values is the best way to customize your | |||||
// CSS without writing _new_ styles. For example, change you can either change | |||||
// `$body-color` or write more CSS that override's Bootstrap's CSS like so: | |||||
// `body { color: red; }`. | |||||
// | |||||
// Bring in Bootstrap | |||||
// | |||||
// Option 1 | |||||
// | |||||
// Import all of Bootstrap's CSS | |||||
// @import "bootstrap/scss/bootstrap"; | |||||
// Option 2 | |||||
// | |||||
// Place variable overrides first, then import just the styles you need. Note that some stylesheets are required no matter what. | |||||
// Toggle global options | |||||
$enable-gradients: true; | |||||
$enable-shadows: true; | |||||
$offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175); | |||||
// Customize some defaults | |||||
$body-color: #333; | |||||
$body-bg: #fff; | |||||
$border-radius: .4rem; | |||||
$success: #7952b3; | |||||
// Required | |||||
@import "bootstrap/scss/functions"; | |||||
@import "bootstrap/scss/variables"; | |||||
@import "bootstrap/scss/maps"; | |||||
@import "bootstrap/scss/mixins"; | |||||
@import "bootstrap/scss/utilities"; | |||||
@import "bootstrap/scss/root"; | |||||
@import "bootstrap/scss/reboot"; | |||||
@import "bootstrap/scss/type"; | |||||
// @import "bootstrap/scss/images"; | |||||
@import "bootstrap/scss/containers"; | |||||
@import "bootstrap/scss/grid"; | |||||
// @import "bootstrap/scss/tables"; | |||||
// @import "bootstrap/scss/forms"; | |||||
@import "bootstrap/scss/buttons"; | |||||
@import "bootstrap/scss/transitions"; | |||||
@import "bootstrap/scss/dropdown"; | |||||
// @import "bootstrap/scss/button-group"; | |||||
// @import "bootstrap/scss/nav"; | |||||
// @import "bootstrap/scss/navbar"; // Requires nav | |||||
// @import "bootstrap/scss/card"; | |||||
// @import "bootstrap/scss/breadcrumb"; | |||||
// @import "bootstrap/scss/accordion"; | |||||
// @import "bootstrap/scss/pagination"; | |||||
// @import "bootstrap/scss/badge"; | |||||
// @import "bootstrap/scss/alert"; | |||||
// @import "bootstrap/scss/progress"; | |||||
// @import "bootstrap/scss/list-group"; | |||||
@import "bootstrap/scss/close"; | |||||
// @import "bootstrap/scss/toasts"; | |||||
@import "bootstrap/scss/modal"; // Requires transitions | |||||
// @import "bootstrap/scss/tooltip"; | |||||
@import "bootstrap/scss/popover"; | |||||
// @import "bootstrap/scss/carousel"; | |||||
// @import "bootstrap/scss/spinners"; | |||||
@import "bootstrap/scss/offcanvas"; // Requires transitions | |||||
// @import "bootstrap/scss/placeholders"; | |||||
// Helpers | |||||
// @import "bootstrap/scss/helpers"; | |||||
// Utilities | |||||
@import "bootstrap/scss/utilities/api"; | |||||
// | |||||
// Custom styles | |||||
// | |||||
@import "icon-list"; | |||||
body { | |||||
padding: 1.5rem; | |||||
} |
@@ -0,0 +1,54 @@ | |||||
'use strict' | |||||
const path = require('path') | |||||
const autoprefixer = require('autoprefixer') | |||||
const HtmlWebpackPlugin = require('html-webpack-plugin') | |||||
module.exports = { | |||||
mode: 'development', | |||||
entry: './src/js/main.js', | |||||
output: { | |||||
filename: 'main.js', | |||||
path: path.resolve(__dirname, 'dist'), | |||||
}, | |||||
devServer:{ | |||||
static: path.resolve(__dirname, 'dist'), | |||||
port: 8080, | |||||
hot: true | |||||
}, | |||||
plugins: [ | |||||
new HtmlWebpackPlugin({ template: './src/index.html' }) | |||||
], | |||||
module: { | |||||
rules: [ | |||||
{ | |||||
test: /\.(scss)$/, | |||||
use: [ | |||||
{ | |||||
// Adds CSS to the DOM by injecting a `<style>` tag | |||||
loader: 'style-loader' | |||||
}, | |||||
{ | |||||
// Interprets `@import` and `url()` like `import/require()` and will resolve them | |||||
loader: 'css-loader' | |||||
}, | |||||
{ | |||||
// Loader for webpack to process CSS with PostCSS | |||||
loader: 'postcss-loader', | |||||
options: { | |||||
postcssOptions: { | |||||
plugins: () => [ | |||||
autoprefixer | |||||
] | |||||
} | |||||
} | |||||
}, | |||||
{ | |||||
// Loads a SASS/SCSS file and compiles it to CSS | |||||
loader: 'sass-loader' | |||||
} | |||||
] | |||||
} | |||||
] | |||||
} | |||||
} |