Relaunch 2021: Corona made me do it.
Category
Frankfurt am Main, January 2021 —
Everyone probably used the lockdown period somehow in a good way: For me, I finally found the time to redo my own website and update my overall design. But since you work on your own stuff, you end up being super critical. And it just takes a lot of time, since in reality you focus on client work and then you need a different kind of balance, such as building a Wifi enabled bunny feeder ... just as an example.
Inspired by silk screen printing
In the last couple of months I have (although only theoretically) worked myself into the field of silk screen printing, even bought myself a 4 color printing machine; and I have taken inspiration from that technique.
White space is left out, colors are layered in separate steps with a silk screen mask, images are rasterized and printed in 100 % black.
That’s how you create the illusion of grayscale. For the main visuals I am trying to simulate the process of silk screen printing with animations.
Responsive? – it certainly is.
Adapting to all shapes and sizes, a responsive website is supposed to fit all screens. The same content just gets realigned by CSS to any screen. It even goes as far as applying completely different layouts for desktop and mobile. If you are on a laptop, you can simulate the way the site looks like on tablets and mobile devices by resizing the browser window.
A Blog on Design & Tech
In my blog you’ll find helpful tutorials and advice for graphic- and webdesigners – as well as application examples in several programming languages. Things that make the life of beginners and pros easier. The tutorials contain code examples that can be easily copied.
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
module.exports = {
entry: {
app: "./src/js/app.js",
style: "./src/scss/style.scss",
},
output: {
path: path.resolve(__dirname, 'js'),
filename: "[name].js"
},
plugins: [
new FixStyleOnlyEntriesPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "../css/[name].css",
chunkFilename: "../css/[id].css",
}),
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
],
},
],
},
mode: 'production',
};
Fig. 1: Example of a webpack config file
Got beef?
Comments for this entry have not been activated.
Comments to this post