@@ -1,6 +1,8 @@ | |||
# cv | |||
Dejvino's Curriculum Vitae | |||
Dejvino's Curriculum Vitae in a web app. | |||
Uses React, Bootstrap and NextJs. Compiles into a static HTML/CSS/JS web page that can be easily served from any webhosting. | |||
## Build | |||
@@ -10,10 +12,19 @@ npm install | |||
# Development - served on http://localhost:3000/ with auto-reload | |||
npm run dev | |||
# Production - output in ./dist/ | |||
# Production - output in ./out/ | |||
npm run build | |||
``` | |||
## Info | |||
All that is needed to deploy is to copy the contents of the `./out/` folder onto any web hosting. | |||
## Configuration | |||
### CV content | |||
- src/PersonalData.ts :: source of all data for the CV, nicely structured in a type-checked TypeScript object literal | |||
### Images | |||
Uses React with Bootstrap and NextJs, compiles a static HTML/CSS/JS web page that can be easily served from any webhosting. | |||
- public/favicon.ico | |||
- public/photo.png |
@@ -1,5 +0,0 @@ | |||
module.exports = { | |||
plugins: { | |||
autoprefixer: {}, | |||
}, | |||
} |
@@ -1,11 +0,0 @@ | |||
// 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) | |||
}) |
@@ -1,22 +0,0 @@ | |||
// 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; | |||
} | |||
} | |||
} |
@@ -1,93 +0,0 @@ | |||
// 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; | |||
} |
@@ -1,54 +0,0 @@ | |||
'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' | |||
} | |||
] | |||
} | |||
] | |||
} | |||
} |