diff --git a/_resources/me.png b/_resources/me.png
new file mode 100644
index 0000000..86c63c3
Binary files /dev/null and b/_resources/me.png differ
diff --git a/_source/img/me.jpg b/_source/img/me.jpg
new file mode 100644
index 0000000..dc7a579
Binary files /dev/null and b/_source/img/me.jpg differ
diff --git a/_source/img/me.webp b/_source/img/me.webp
new file mode 100644
index 0000000..07e10d1
Binary files /dev/null and b/_source/img/me.webp differ
diff --git a/_source/index.html b/_source/index.html
index 28160e4..4d650a0 100644
--- a/_source/index.html
+++ b/_source/index.html
@@ -9,13 +9,21 @@
-
+
+
+
+
+
Jan Jastrow
@@ -52,6 +60,10 @@
Spotify
+
+
+ Twitch
+
Letterboxd
diff --git a/_source/scss/styles.scss b/_source/scss/styles.scss
index bef45fd..b9137cd 100644
--- a/_source/scss/styles.scss
+++ b/_source/scss/styles.scss
@@ -1,72 +1,91 @@
-$color1: #4BB5A9;
-$color2: #D6E8E6;
-$svg_background: #111;
+$color_primary: #4BB5A9;
+$color_secondary: #D6E8E6;
+$svg_color: #111;
body {
- background-color: $color2;
- color: #111111;
+ background-color: $color_secondary;
+ color: $svg_color;
display: flex;
flex-direction: column;
font-family: sans-serif;
- font-size: 24px;
+ font-size: 1rem;
+ line-height: 1.5;
}
header {
+ display: flex;
+ flex-direction: column;
+
h1 {
- text-align: center;
margin: 0.25em;
+ text-align: center;
+ }
+
+ .photo {
+ align-self: center;
+ margin: 1em 0 0 0;
+ width: 200px;
+
+ img {
+ border-radius: 50%;
+ }
}
}
.list_links {
- font-size: 18px;
+ align-items: center;
+ display: flex;
+ flex-direction: column;
list-style: none;
- margin: 0 auto;
+ margin: 0 1.25em;
padding: 0;
li {
- background-color: $color1;
- margin: 0.5em 0;
+ max-width: 400px;
width: 100%;
- max-width: 640px;
}
a {
- color: $color2;
+ background-color: $color_primary;
+ color: $svg_color;
display: block;
+ font-weight: 700;
+ margin: 0.3em 0;
padding: 0.65em;
text-decoration: none;
- }
- a:visited {
- color: $color2;
+
+ &:visited {
+ color: $svg_color;
+ }
+
+ &:hover, &:active, &:focus {
+ background-color: darken($color_primary, 5%);
+ }
}
}
.link-icon {
display: inline-block;
+ height: 24px;
margin-right: 0.75em;
width: 24px;
- height: 24px;
svg {
height: 24px;
+ fill: $svg_color;
width: 24px;
- fill: $svg_background;
}
}
footer {
- margin-top: 1.5em;
- font-size: 12px;
+ font-size: 0.75rem;
+ margin: 0 0 0 0.75em;
a {
- color: #111;
- }
- a:visited {
- color: #111;
- }
-
- p {
- margin: 0 0 0 0.65em;
+ color: $svg_color;
+
+ &:visited {
+ color: $svg_color;
+ }
}
}
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 3e34649..5ff3f43 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,7 +1,8 @@
-'use strict'
+'use strict';
-//----------------
+//------------------------
//:: Initiate npm-modules
+
const gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
@@ -15,8 +16,10 @@ const gulp = require('gulp'),
merge2 = require('merge2'),
rimraf = require('rimraf');
-//----------------
-//:: configs
+
+//------------------------
+//:: Config parameter
+
var Config = {
inputDir: '_source/',
outputDir: '_dist/'
@@ -30,22 +33,18 @@ var SassConfig = {
}
}
-var postcss_plugins = [
- cssnano,
- autoprefixer
-];
-//----------------
+//------------------------
//:: Tasks
// compile scss
-function scss() {
+function scss_addons() {
var onError = function(err) {
notify.onError({
- title: 'gulp',
- subtitle: 'Error!',
- message: '❌ <%= error.message %>',
- sound: 'Submarine'
+ title: 'scss_addons',
+ subtitle: 'Error!',
+ message: '❌ <%= error.message %>',
+ sound: 'Submarine'
})(err);
this.emit('end');
};
@@ -55,22 +54,44 @@ function scss() {
'node_modules/sanitize.css/sanitize.css'
]))
.pipe(concat('addons.css'))
+ .pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(SassConfig.outputDir))
- .pipe(postcss(postcss_plugins))
- .pipe(rename({suffix: '.min'}))
- .pipe(gulp.dest(SassConfig.outputDir)),
-
- gulp.src(SassConfig.inputDir + '*.scss')
- .pipe(concat('styles.css'))
- .pipe(plumber({errorHandler: onError}))
- .pipe(postcss(postcss_plugins))
- .pipe(sass(SassConfig.options).on('error', sass.logError))
- .pipe(gulp.dest(SassConfig.outputDir))
+ .pipe(postcss([cssnano()]))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(SassConfig.outputDir))
.pipe(livereload())
.pipe(notify({
- title: 'gulp',
+ title: 'scss_addons',
+ subtitle: 'Success!',
+ message: '✅ SCSS compiled',
+ timeout: '2'
+ }));
+}
+
+function scss_main() {
+ var onError = function(err) {
+ notify.onError({
+ title: 'scss_main',
+ subtitle: 'Error!',
+ message: '❌ <%= error.message %>',
+ sound: 'Submarine'
+ })(err);
+ this.emit('end');
+ };
+
+ return gulp
+ .src(SassConfig.inputDir + '*.scss')
+ .pipe(concat('styles.css'))
+ .pipe(plumber({errorHandler: onError}))
+ .pipe(sass(SassConfig.options).on('error', sass.logError))
+ .pipe(postcss([autoprefixer()]))
+ .pipe(gulp.dest(SassConfig.outputDir))
+ .pipe(postcss([cssnano()]))
+ .pipe(rename({suffix: '.min'}))
+ .pipe(gulp.dest(SassConfig.outputDir))
+ .pipe(livereload())
+ .pipe(notify({
+ title: 'scss_main',
subtitle: 'Success!',
message: '✅ SCSS compiled',
timeout: '2'
@@ -79,16 +100,16 @@ function scss() {
// Copy those other files
function copy(done) {
- gulp.src([Config.inputDir + '*.*'])
+ gulp.src([Config.inputDir + '**/*.*'])
.pipe(gulp.dest(Config.outputDir))
.pipe(livereload())
done();
};
-// watch for changes
+// Watch for changes
function watch() {
livereload.listen();
- gulp.watch(SassConfig.inputDir + '*.scss', scss);
+ gulp.watch(SassConfig.inputDir + '*.scss', scss_main);
gulp.watch(Config.inputDir + '*.html', copy);
};
@@ -97,14 +118,16 @@ function cleanup(cb) {
return rimraf(Config.outputDir + '*', cb)
};
-//----------------
-//:: Export tasks
+
+//------------------------
+//:: Define tasks
// complex tasks
-const build = gulp.series(cleanup, gulp.parallel(copy, scss));
+const build = gulp.series(cleanup, gulp.parallel(copy, scss_addons, scss_main));
// export tasks
-exports.scss = scss;
+exports.scss_main = scss_main;
+exports.scss_addons = scss_addons;
exports.copy = copy;
exports.watch = watch;
exports.cleanup = cleanup;