oradwell · oradwell · Jun 6, 2025 · Jun 6, 2025 · Jun 6, 2025 · Jun 6, 2025
diff --git 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
@@ -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
diff --git a/css/ie/PIE.htc b/css/ie/PIE.htc
diff --git a/css/ie/html5shiv.js b/css/ie/html5shiv.js
diff --git a/css/ie/images/footer.png b/css/ie/images/footer.png
diff --git a/css/ie/images/footer.svg b/css/ie/images/footer.svg
diff --git 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 → src/css/font-awesome.min.css b/css/font-awesome.min.css → src/css/font-awesome.min.css
diff --git a/css/skel.css → src/css/skel.css b/css/skel.css → src/css/skel.css
diff --git a/fonts/FontAwesome.otf → src/fonts/FontAwesome.otf b/fonts/FontAwesome.otf → src/fonts/FontAwesome.otf
diff --git a/fonts/SourceSansProBlack.woff → src/fonts/SourceSansProBlack.woff b/fonts/SourceSansProBlack.woff → src/fonts/SourceSansProBlack.woff
diff --git a/fonts/SourceSansProLight.woff → src/fonts/SourceSansProLight.woff b/fonts/SourceSansProLight.woff → src/fonts/SourceSansProLight.woff
diff --git a/fonts/fontawesome-webfont.eot → src/fonts/fontawesome-webfont.eot b/fonts/fontawesome-webfont.eot → src/fonts/fontawesome-webfont.eot
diff --git a/fonts/fontawesome-webfont.svg → src/fonts/fontawesome-webfont.svg b/fonts/fontawesome-webfont.svg → src/fonts/fontawesome-webfont.svg
diff --git a/fonts/fontawesome-webfont.ttf → src/fonts/fontawesome-webfont.ttf b/fonts/fontawesome-webfont.ttf → src/fonts/fontawesome-webfont.ttf
diff --git a/fonts/fontawesome-webfont.woff → src/fonts/fontawesome-webfont.woff b/fonts/fontawesome-webfont.woff → src/fonts/fontawesome-webfont.woff
diff --git a/src/index.html b/src/index.html
@@ -3,22 +3,8 @@
 	<head>
 		<title>Oliver Radwell - Software Developer | System Admin | DevOps</title>
 		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<meta name="description" content="" />
-		<meta name="keywords" content="" />
-		<noscript>
-			<link rel="stylesheet" href="css/skel.css" />
-		</noscript>
-		<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
-		<link rel="stylesheet" href="css/style.css" type="text/css" />
-		<noscript>
-			<link rel="stylesheet" href="css/style-wide.css" type="text/css" />
-			<link rel="stylesheet" href="css/style-noscript.css" type="text/css" />
-		</noscript>
-		<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
-		<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
-		<link rel="stylesheet" href="css/simptip.css" type="text/css" />
-		<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
-		<script type="text/javascript" src="js/skel.min.js"></script>
+		<meta name="description" content="Software Developer, System Admin, DevOps" />
+		<meta name="keywords" content="software developer, system admin, devops, php, mariadb, git, javascript, go, linux, kubernetes, apache, docker, bash" />
 	</head>
 	<body class="loading">
 		<div id="wrapper">
@@ -56,7 +42,5 @@ <h1>Oliver Radwell</h1>
 				</footer>
 			</div>
 		</div>
-		<script type="text/javascript" src="js/init.js?__inline=true"></script>
-		<script type="text/javascript" src="js/ga.js?__inline=true"></script>
 	</body>
 </html>
diff --git a/src/index.js 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 → src/js/skel.min.js b/js/skel.min.js → src/js/skel.min.js
diff --git 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 → src/sass/images/bg.png b/css/images/bg.png → src/sass/images/bg.png
diff --git a/css/images/overlay-pattern.png → src/sass/images/overlay-pattern.png b/css/images/overlay-pattern.png → src/sass/images/overlay-pattern.png
diff --git a/css/images/overlay.svg → src/sass/images/overlay.svg b/css/images/overlay.svg → src/sass/images/overlay.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);
+	@include vars.bg(vars.$bg-width);