diff --git a/.gitignore b/.gitignore index c85af73..2c5386c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,5 @@ .sass-cache/ -css/ -!css/images/ -!css/skel.css -!css/font-awesome.min.css +dist/ node_modules/ index.html package-lock.json diff --git a/Dockerfile b/Dockerfile index af942b0..530ca45 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,27 +1,30 @@ FROM node:20.19.0 -RUN apt-get update \ - && apt-get --no-install-recommends -y install ruby-full \ - && gem install sass \ - && apt-get clean +ARG DART_SASS_VERSION=1.89.1 + +RUN curl -sSLodart-sass-linux-x64.tar.gz \ + "https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz" \ + && tar xzf dart-sass-linux-x64.tar.gz dart-sass/sass \ + && mv dart-sass/sass /usr/local/bin/sass \ + && rm -rf dart-sass-linux-x64.tar.gz WORKDIR /build -COPY . ./ +COPY package.json . + +RUN npm install -RUN npm install \ - && npm install -g grunt-cli \ - && grunt +COPY src/ ./src +COPY webpack.config.js ./ + +RUN npm run build FROM nginx:1.27.4-alpine WORKDIR /usr/share/nginx/html COPY config/nginx.conf /etc/nginx/conf.d/default.conf - COPY favicon.ico ./ +COPY --from=0 /build/dist ./ -COPY --from=0 /build/css ./css -COPY --from=0 /build/js ./js -COPY --from=0 /build/fonts ./fonts -COPY --from=0 /build/index.html ./ +EXPOSE 80 diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index af12657..0000000 --- a/Gruntfile.js +++ /dev/null @@ -1,62 +0,0 @@ -var defaultTasks = ['sass', 'inline', 'htmlmin']; - -module.exports = function(grunt) { - grunt.initConfig({ - // compile scss files - sass: { - dist: { - options: { - sourcemap: 'none', - style: 'compressed' - }, - files: [{ - expand: true, - cwd: 'src/sass/', - src: ['**/*.scss'], - dest: 'css/', - ext: '.css' - }] - } - }, - // inline external scripts - inline: { - dist: { - options: { - uglify: true - }, - src: 'src/index.html', - dest: './index.html' - } - }, - // minimise HTML - htmlmin: { - dist: { - options: { - removeComments: true, - collapseWhitespace: true - }, - files: { - 'index.html': 'index.html' - } - } - }, - // watch for changes (for dev) - watch: { - scripts: { - files: ['src/sass/**/*.scss', 'src/index.html', 'src/js/**/*.js'], - tasks: defaultTasks, - options: { - debounceDelay: 250, - } - } - } - }); - - grunt.loadNpmTasks('grunt-inline'); - grunt.loadNpmTasks('grunt-contrib-sass'); - grunt.loadNpmTasks('grunt-contrib-htmlmin'); - - grunt.loadNpmTasks('grunt-contrib-watch'); - - grunt.registerTask('default', defaultTasks); -}; diff --git a/css/ie/PIE.htc b/css/ie/PIE.htc deleted file mode 100644 index ca3b547..0000000 --- a/css/ie/PIE.htc +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - - - - diff --git a/css/ie/html5shiv.js b/css/ie/html5shiv.js deleted file mode 100644 index dcf351c..0000000 --- a/css/ie/html5shiv.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed -*/ -(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); -a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; -c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| -"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); -for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d - - - - - - - - \ No newline at end of file diff --git a/package.json b/package.json index 63b4e62..cab9df2 100644 --- a/package.json +++ b/package.json @@ -2,18 +2,19 @@ "name": "personalsite", "version": "1.1.0", "description": "Personal site for Oliver Radwell", - "main": "Gruntfile.js", - "dependencies": { - "grunt": "^1.4.0", - "grunt-contrib-htmlmin": "^3.1.0", - "grunt-contrib-sass": "^2.0.0", - "grunt-inline": "^0.3.7" - }, + "dependencies": {}, "devDependencies": { - "grunt-contrib-watch": "^1.1.0" + "css-loader": "^7.1.2", + "html-webpack-plugin": "^5.6.3", + "sass": "^1.87.0", + "sass-loader": "^16.0.5", + "style-loader": "^4.0.0", + "webpack": "^5.99.8", + "webpack-cli": "^6.0.1" }, "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "build": "webpack" }, "author": "Oliver Radwell", "private": true diff --git a/css/font-awesome.min.css b/src/css/font-awesome.min.css similarity index 100% rename from css/font-awesome.min.css rename to src/css/font-awesome.min.css diff --git a/css/skel.css b/src/css/skel.css similarity index 100% rename from css/skel.css rename to src/css/skel.css diff --git a/fonts/FontAwesome.otf b/src/fonts/FontAwesome.otf similarity index 100% rename from fonts/FontAwesome.otf rename to src/fonts/FontAwesome.otf diff --git a/fonts/SourceSansProBlack.woff b/src/fonts/SourceSansProBlack.woff similarity index 100% rename from fonts/SourceSansProBlack.woff rename to src/fonts/SourceSansProBlack.woff diff --git a/fonts/SourceSansProLight.woff b/src/fonts/SourceSansProLight.woff similarity index 100% rename from fonts/SourceSansProLight.woff rename to src/fonts/SourceSansProLight.woff diff --git a/fonts/fontawesome-webfont.eot b/src/fonts/fontawesome-webfont.eot similarity index 100% rename from fonts/fontawesome-webfont.eot rename to src/fonts/fontawesome-webfont.eot diff --git a/fonts/fontawesome-webfont.svg b/src/fonts/fontawesome-webfont.svg similarity index 100% rename from fonts/fontawesome-webfont.svg rename to src/fonts/fontawesome-webfont.svg diff --git a/fonts/fontawesome-webfont.ttf b/src/fonts/fontawesome-webfont.ttf similarity index 100% rename from fonts/fontawesome-webfont.ttf rename to src/fonts/fontawesome-webfont.ttf diff --git a/fonts/fontawesome-webfont.woff b/src/fonts/fontawesome-webfont.woff similarity index 100% rename from fonts/fontawesome-webfont.woff rename to src/fonts/fontawesome-webfont.woff diff --git a/src/index.html b/src/index.html index 40549ed..d42bdb4 100644 --- a/src/index.html +++ b/src/index.html @@ -3,22 +3,8 @@ Oliver Radwell - Software Developer | System Admin | DevOps - - - - - - - - - - - + +
@@ -56,7 +42,5 @@

Oliver Radwell

- - diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..4700c90 --- /dev/null +++ b/src/index.js @@ -0,0 +1,5 @@ +import "./css/skel.css"; +import "./css/font-awesome.min.css"; +import "./sass/style.scss"; +import "./sass/simptip.scss"; +import "./js/skel.min.js"; diff --git a/js/skel.min.js b/src/js/skel.min.js similarity index 100% rename from js/skel.min.js rename to src/js/skel.min.js diff --git a/src/sass/_vars.scss b/src/sass/_vars.scss index 33bf895..b126f5c 100644 --- a/src/sass/_vars.scss +++ b/src/sass/_vars.scss @@ -1,3 +1,5 @@ +@use "mixins"; + // // Aerial by HTML5 UP // html5up.net | @n33co @@ -18,9 +20,9 @@ $size-nav-icon-wrapper: 5.35em; $size-nav-icon: 1.75em; @mixin bg($width) { - @include vendor-keyframes('bg') { - 0% { @include vendor-property('transform', 'translate3d(0,0,0)'); } - 100% { @include vendor-property('transform', 'translate3d(#{$width * -1},0,0)'); } + @include mixins.vendor-keyframes('bg') { + 0% { @include mixins.vendor-property('transform', 'translate3d(0,0,0)'); } + 100% { @include mixins.vendor-property('transform', 'translate3d(#{$width * -1},0,0)'); } } #bg { diff --git a/css/images/bg.png b/src/sass/images/bg.png similarity index 100% rename from css/images/bg.png rename to src/sass/images/bg.png diff --git a/css/images/overlay-pattern.png b/src/sass/images/overlay-pattern.png similarity index 100% rename from css/images/overlay-pattern.png rename to src/sass/images/overlay-pattern.png diff --git a/css/images/overlay.svg b/src/sass/images/overlay.svg similarity index 100% rename from css/images/overlay.svg rename to src/sass/images/overlay.svg diff --git a/src/sass/style-mobile.scss b/src/sass/style-mobile.scss index 35be0ec..9352ac1 100644 --- a/src/sass/style-mobile.scss +++ b/src/sass/style-mobile.scss @@ -4,8 +4,8 @@ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -@import 'vars'; -@import 'mixins'; +@use 'vars'; +@use 'mixins'; /* Basic */ @@ -19,7 +19,7 @@ /* BG */ - @include bg($bg-width * 0.2); + @include vars.bg(vars.$bg-width * 0.2); /* Header */ diff --git a/src/sass/style-mobilep.scss b/src/sass/style-mobilep.scss index 2767439..e586947 100644 --- a/src/sass/style-mobilep.scss +++ b/src/sass/style-mobilep.scss @@ -4,12 +4,12 @@ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -@import 'vars'; -@import 'mixins'; +@use 'vars'; +@use 'mixins'; /* BG */ - @include bg($bg-width * 0.275); + @include vars.bg(vars.$bg-width * 0.275); /* Header */ diff --git a/src/sass/style-normal.scss b/src/sass/style-normal.scss index 12ee00f..2194585 100644 --- a/src/sass/style-normal.scss +++ b/src/sass/style-normal.scss @@ -4,8 +4,8 @@ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -@import 'vars'; -@import 'mixins'; +@use 'vars'; +@use 'mixins'; /* Basic */ @@ -15,4 +15,4 @@ /* BG */ - @include bg($bg-width * 0.5); + @include vars.bg(vars.$bg-width * 0.5); diff --git a/src/sass/style-noscript.scss b/src/sass/style-noscript.scss index eb8f7ce..213c178 100644 --- a/src/sass/style-noscript.scss +++ b/src/sass/style-noscript.scss @@ -4,8 +4,8 @@ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -@import 'vars'; -@import 'mixins'; +@use 'vars'; +@use 'mixins'; /* Wrapper */ diff --git a/src/sass/style-wide.scss b/src/sass/style-wide.scss index 9348d7a..a13a023 100644 --- a/src/sass/style-wide.scss +++ b/src/sass/style-wide.scss @@ -4,8 +4,8 @@ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -@import 'vars'; -@import 'mixins'; +@use 'vars'; +@use 'mixins'; /* Basic */ @@ -15,4 +15,4 @@ /* BG */ - @include bg($bg-width); \ No newline at end of file + @include vars.bg(vars.$bg-width); \ No newline at end of file diff --git a/src/sass/style.scss b/src/sass/style.scss index 9c06df0..175e99d 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -6,8 +6,8 @@ @charset 'UTF-8'; -@import 'vars'; -@import 'mixins'; +@use 'vars'; +@use 'mixins'; /* Source Sans Pro Font */ @@ -27,7 +27,7 @@ /* Basic */ body, input, select, textarea { - color: $color-fg; + color: vars.$color-fg; font-family: 'Source Sans Pro', sans-serif; font-size: 15pt; font-weight: 300 !important; @@ -36,18 +36,18 @@ } body { - background: $color-bg; + background: vars.$color-bg; overflow: hidden; &.loading{ * { - @include vendor-property('animation', 'none !important'); + @include mixins.vendor-property('animation', 'none !important'); } } } a { - @include vendor-property('transition', 'border-color 0.2s ease-in-out'); + @include mixins.vendor-property('transition', 'border-color 0.2s ease-in-out'); border-bottom: dotted 1px; color: inherit; outline: 0; @@ -61,7 +61,7 @@ /* Icon */ .icon { - @include icon; + @include mixins.icon; position: relative; > .label { @@ -103,7 +103,7 @@ #bg { /* Set your background with this */ - background: $bg; + background: vars.$bg; background-repeat: repeat-x; height: 100%; @@ -113,7 +113,7 @@ top: 0; } - @include bg($bg-width * 1.5); + @include vars.bg(vars.$bg-width * 1.5); /* Main */ @@ -167,11 +167,11 @@ li { display: inline-block; - height: $size-nav-icon-wrapper; - line-height: $size-nav-icon-wrapper * 1.1; + height: vars.$size-nav-icon-wrapper; + line-height: vars.$size-nav-icon-wrapper * 1.1; position: relative; top: 0; - width: $size-nav-icon-wrapper; + width: vars.$size-nav-icon-wrapper; } a { @@ -181,11 +181,11 @@ display: inline-block; &:before { - @include vendor-property('transition', 'all 0.2s ease-in-out'); + @include mixins.vendor-property('transition', 'all 0.2s ease-in-out'); border-radius: 100%; - border: solid 1px $color-fg; + border: solid 1px vars.$color-fg; display: block; - font-size: $size-nav-icon; + font-size: vars.$size-nav-icon; height: 2.5em; line-height: 2.5em; position: relative; @@ -198,8 +198,8 @@ font-size: 1.1em; &:before { - background-color: $color-nav-icon-hover-bg; - color: $color-nav-icon-hover-fg; + background-color: vars.$color-nav-icon-hover-bg; + color: vars.$color-nav-icon-hover-fg; } } @@ -208,8 +208,8 @@ background: none; &:before { - background-color: $color-nav-icon-active-bg; - color: $color-nav-icon-active-fg; + background-color: vars.$color-nav-icon-active-bg; + color: vars.$color-nav-icon-active-fg; } } @@ -223,7 +223,7 @@ /* Footer */ #footer { - @include vendor-value('background-image', 'linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%)'); + @include mixins.vendor-value('background-image', 'linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%)'); bottom: 0; cursor: default; height: 6em; diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..f64e0e8 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,20 @@ +const HtmlWebpackPlugin = require('html-webpack-plugin'); + +module.exports = { + module: { + rules: [{ test: /\.txt$/, use: 'raw-loader' }, + { + test: /\.(sa|s?c)ss$/i, + use: [ + "style-loader", + "css-loader", + // Compiles Sass to CSS + "sass-loader", + ], + },], + }, + plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })], + output: { + path: __dirname + "/dist" + } +};