add navidrome and update gulpfile

Author: jamesalexatkin

gulpfile.js

@@ -10,28 +10,30 @@ const header = require("gulp-header");
 const merge = require("merge-stream");
 const plumber = require("gulp-plumber");
 const rename = require("gulp-rename");
-const sass = require("gulp-sass");
+const sass = require("gulp-sass")(require("sass"));
 const uglify = require("gulp-uglify");
 
 // Load package.json for banner
-const pkg = require('./package.json');
+const pkg = require("./package.json");
 
 // Set the banner content
-const banner = ['/*!\n',
-  ' * Start Bootstrap - <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n',
-  ' * Copyright 2013-' + (new Date()).getFullYear(), ' <%= pkg.author %>\n',
-  ' * Licensed under <%= pkg.license %> (https://github.com/BlackrockDigital/<%= pkg.name %>/blob/master/LICENSE)\n',
-  ' */\n',
-  '\n'
-].join('');
+const banner = [
+  "/*!\n",
+  " * Start Bootstrap - <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n",
+  " * Copyright 2013-" + new Date().getFullYear(),
+  " <%= pkg.author %>\n",
+  " * Licensed under <%= pkg.license %> (https://github.com/BlackrockDigital/<%= pkg.name %>/blob/master/LICENSE)\n",
+  " */\n",
+  "\n",
+].join("");
 
 // BrowserSync
 function browserSync(done) {
   browsersync.init({
     server: {
-      baseDir: "./"
+      baseDir: "./",
     },
-    port: 3000
+    port: 3000,
   });
   done();
 }
@@ -50,23 +52,28 @@ function clean() {
 // Bring third party dependencies from node_modules into vendor directory
 function modules() {
   // Bootstrap JS
-  var bootstrap = gulp.src('./node_modules/bootstrap/dist/js/**/*')
-    .pipe(gulp.dest('./vendor/bootstrap/js'));
+  var bootstrap = gulp
+    .src("./node_modules/bootstrap/dist/js/**/*")
+    .pipe(gulp.dest("./vendor/bootstrap/js"));
   // Font Awesome
-  var fontAwesome = gulp.src('./node_modules/@fortawesome/**/*')
-    .pipe(gulp.dest('./vendor'));
+  var fontAwesome = gulp
+    .src("./node_modules/@fortawesome/**/*")
+    .pipe(gulp.dest("./vendor"));
   // jQuery Easing
-  var jqueryEasing = gulp.src('./node_modules/jquery.easing/*.js')
-    .pipe(gulp.dest('./vendor/jquery-easing'));
+  var jqueryEasing = gulp
+    .src("./node_modules/jquery.easing/*.js")
+    .pipe(gulp.dest("./vendor/jquery-easing"));
   // Magnific Popup
-  var magnificPopup = gulp.src('./node_modules/magnific-popup/dist/*')
-    .pipe(gulp.dest('./vendor/magnific-popup'));
+  var magnificPopup = gulp
+    .src("./node_modules/magnific-popup/dist/*")
+    .pipe(gulp.dest("./vendor/magnific-popup"));
   // jQuery
-  var jquery = gulp.src([
-      './node_modules/jquery/dist/*',
-      '!./node_modules/jquery/dist/core.js'
+  var jquery = gulp
+    .src([
+      "./node_modules/jquery/dist/*",
+      "!./node_modules/jquery/dist/core.js",
     ])
-    .pipe(gulp.dest('./vendor/jquery'));
+    .pipe(gulp.dest("./vendor/jquery"));
   return merge(bootstrap, fontAwesome, jquery, jqueryEasing, magnificPopup);
 }
 
@@ -75,22 +82,30 @@ function css() {
   return gulp
     .src("./scss/**/*.scss")
     .pipe(plumber())
-    .pipe(sass({
-      outputStyle: "expanded",
-      includePaths: "./node_modules",
-    }))
+    .pipe(
+      sass({
+        outputStyle: "expanded",
+        includePaths: "./node_modules",
+      })
+    )
     .on("error", sass.logError)
-    .pipe(autoprefixer({
-      browsers: ['last 2 versions'],
-      cascade: false
-    }))
-    .pipe(header(banner, {
-      pkg: pkg
-    }))
+    .pipe(
+      autoprefixer({
+        browsers: ["last 2 versions"],
+        cascade: false,
+      })
+    )
+    .pipe(
+      header(banner, {
+        pkg: pkg,
+      })
+    )
     .pipe(gulp.dest("./css"))
-    .pipe(rename({
-      suffix: ".min"
-    }))
+    .pipe(
+      rename({
+        suffix: ".min",
+      })
+    )
     .pipe(cleanCSS())
     .pipe(gulp.dest("./css"))
     .pipe(browsersync.stream());
@@ -99,18 +114,19 @@ function css() {
 // JS task
 function js() {
   return gulp
-    .src([
-      './js/*.js',
-      '!./js/*.min.js'
-    ])
+    .src(["./js/*.js", "!./js/*.min.js"])
     .pipe(uglify())
-    .pipe(header(banner, {
-      pkg: pkg
-    }))
-    .pipe(rename({
-      suffix: '.min'
-    }))
-    .pipe(gulp.dest('./js'))
+    .pipe(
+      header(banner, {
+        pkg: pkg,
+      })
+    )
+    .pipe(
+      rename({
+        suffix: ".min",
+      })
+    )
+    .pipe(gulp.dest("./js"))
     .pipe(browsersync.stream());
 }
 

img/portfolio/thumbnails/caribou_states_map_26-05-20.png

@@ -78,21 +78,23 @@
       </div>
     </section>
 
-    <!-- About Section -->
-    <!-- <section class="about" id="about">
-      <div class="intro">
-        <h2>Hi, I'm James!</h2>
-        <hr class="divider_left light my-4">
-        <p>I'm an MSCi Computer Science graduate from the University of Birmingham. I have a keen interest in
-          software development and programming. This is my personal site so feel free to have a look at some of the
-          projects I've done.</p>
-      </div>
-    </section> -->
-
     <!-- Projects Section -->
     <div class="projects" id="portfolio">
       <div class="container-fluid p-0">
         <div class="row no-gutters">
+          <div class="col-lg-4 col-sm-6">
+            <a class="portfolio-box" href="https://medium.com/@curlyw42/self-hosted-music-streaming-on-a-raspberry-pi-9f3ab7568352" target="_blank">
+              <img class="img-fluid" src="img/portfolio/thumbnails/navidrome.png" alt=""> <!--Credit: Harrison Broadbent (https://unsplash.com/photos/c3YpscwJb04)-->
+              <div class="portfolio-box-caption">
+                <div class="project-category text-white-50">
+                  Raspberry Pi
+                </div>
+                <div class="project-name">
+                  Self-hosted music streaming
+                </div>
+              </div>
+            </a>
+          </div>
           <div class="col-lg-4 col-sm-6">
             <a class="portfolio-box" href="https://jamesatk.in/which-zelda" target="_blank">
               <img class="img-fluid" src="img/portfolio/thumbnails/which_zelda.png" alt="">