Back home.
I'm Daniel Canetti, a front-end web developer living and working in Yorkshire, England.
Currently the front-end developer for Nouveau HD Beauty Group, a permanent makeup training company.
On this site you'll find updates on my latest projects as well as some updates about life, books, golf, and work.
I'm an avid gym-goer (home workouts via - Nike Training Club), improving golfer, and like the occasional wander.
Follow me on instagram.
This site is built with Eleventy, Webpack, Netlify, and Coffee.
Keep up to date with changes here.
A curated list of websites for design and development inspiration.
Download both MAMP and WordPress.
I try to read as often as I can, typically a chapter a night of whichever book I'm reading on my Kindle or listening to via Audible. I'm really into business and start-up books at the moment, I love to read about their humble beginnings and often find something to take away from each book to help me improve in my own work or personal life.
Everyone works differently and I love it. I follow a few too many set-up focussed Instagram accounts and have been watching Setup Wars, TLD, Oliur for as long as I can remember. I'm still working on my ideal set-up and I'll keep this page updated with all the latest tech and workflow tools I use.
Please Note: This article was written in 2019. My approach to building Jamstack sites has changed since this article was written, I will upload a new post detailing my new approach and link here in due course.
Please Note: This article was written in 2019. My approach to building Jamstack sites has changed since this article was written, see here for my 2021 approach to eleventy.
Eleventy is a static site generator designed to be a Javascript alternative to Jekyll - it works with multiple languages and ships with it's own server for local development.
Gender roles in tech have been under the spotlight more than ever with articles ranging from sexual assault to the emotional effect this issue can have. According to The New Yorker men hold sixty to seventy percent of jobs at the major tech firms, including Google, Apple, Facebook, and Twitter. With the number of women in high profile roles even more sparse.
"Notwithstanding rock stars like Facebook’s Sheryl Sandberg and Yahoo’s Marissa Mayer, senior leadership is even more overwhelmingly male." @@ -141,20 +132,15 @@ Being a woman in tech sucks Share: Being a woman in tech sucks - - Share on Facebook + + Facebook - - - Share on Twitter + + Twitter - - + Buy me a Coffee -
"Notwithstanding rock stars like Facebook’s Sheryl Sandberg and Yahoo’s Marissa Mayer, senior leadership is even more overwhelmingly male."
After all the chaos and uncertainty in early 2020 it was nice to finally be able to get away to one of my favourite places in the world - the Lake District.
Although I didn't manage to get a complete break from work up there, hammering out two 10+ mile walks over the space of two days (including one very treacherous decline) and knocking back several pints in the afternoon sunshine certainly helped to clear the mind and offered a chance to re-focus on the rest of the year.
This is a follow-up to my 2019 article, A complete guide to Eleventy. Since then I've integrated webpack and created a boilerplate to help people get started with Eleventy in 2021, which I'll breakdown here so we can really understand what is going on.
The boilerplate can be found here, a blank version here, and the demo is at thisboilerplate.rocks.
Our eleventy site is configured in the eleventy.js file.
eleventy.js
const recentChanges = require('eleventy-plugin-recent-changes'); + +module.exports = function (eleventyConfig) { + eleventyConfig.addPlugin(recentChanges, { + commits: 30, // The maxmium number of commits to add to the collection, before filtering. + }); + + return { + dir: { + output: "docs", + input: "src/content" + } + }; +}; +
In this example, we're adding the eleventy-plugin-recent-changes plugin config which is not actually used by default on the boilerplate, but is used here. It's included as a starting point for anyone wanting to add config for a plugin.
We're also declaring that the site should be output to docs rather than the default _site dir and we're telling eleventy to compile from the src/content dir.
docs
_site
src/content
For those who are unsure webpack is a bundler built primarily for JS but which can be used for a variety of other tooling such as image bundling and css pre-processing.
Let's take a look at the complete webpack.config.js file and then work through it.
webpack.config.js
const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + entry: './src/index.js', + output: { + filename: 'bundle.js', + path: path.resolve(__dirname, 'docs/dist'), + }, + plugins: [ + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: 'boilerplate.css', + }), + ], + module: { + rules: [ + { + test: /\.s[ac]ss$/, + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + publicPath: (resourcePath, context) => { + // publicPath is the relative path of the resource to the context + // e.g. for ./css/admin/main.css the publicPath will be ../../ + // while for ./css/main.css the publicPath will be ../ + return path.relative(path.dirname(resourcePath), context) + '/'; + }, + }, + }, + 'css-loader', + { + loader: 'sass-loader', + options: { + sourceMap: true, + sassOptions: { + outputStyle: 'compressed', + }, + }, + }, + ], + }, + { + test: /\.(png|svg|jpg|gif|ico)$/, + loader: 'file-loader', + options: { + outputPath: 'images', + name: '[name].[ext]', + }, + }, + ], + }, + externals: { + jquery: 'jQuery', + vue: 'Vue', + } +}; +
Github pages allows you to host your site directly from the repo on an Apex domain - essentialy it's free hosting! Even better, you can configure your Eleventy site to output to the docs directory Github uses by making a simple config change.
Copy and paste the below into your eleventy.js file (if you don't have one create this file in the root of your project), all we're doing here is changing the output from the default _site directory to docs.
module.exports = { @@ -118,20 +109,15 @@ Some good extra reading Share: Host an Eleventy site on Github Pages - - Share on Facebook + + Facebook - - - Share on Twitter + + Twitter - - + Buy me a Coffee -
Slack exploded onto the scene declaring it would Kill ‘Company Email’ by 2026 and it seems it still has a long way to go as we sent more than 120 billion emails in 2018 alone. We all hate email, it's our never ending to do list and it's the thing that ruins your Sunday night and the last few days of your holiday as you start trying to clear the backlog.
However, I think email is great and we're just using it wrong. To try and help us all out I've come up with a few quick tips when you're emailing in the office that will make everyone happier.
Sometimes it can take a lot of doing the incorrect method to put you back on the right path. After taking a break and thinking it through I went back to the original #actionshackathon brief and found a few existing Actions I could add to .yml file such as Setup node. Then I can run the bash commands directly in the yml file, hook in the add commit action and pop the created Eleventy site back in the repo.
.yml
yml
I'm all about keeping things simple but often find myself being bogged down in the process as I have along this journey. However in the end I've got the process I was looking for in place by using two existing actions with my 11ty set up in the middle.
I've made some tweaks to the script in an attempt to get this working how I'd like it to and so far I've just hit errors, although they're always the same error so there's likely a singular issue causing this.
I've been reading up on the documentation again and I'm going to move my commands out of the .yml file and in a .sh file and call this from the action.
.sh
Despite using GitHub almost every day I've no real experience with GitHub actions, but this year I'm trying use each of the Dev hackathons to expand my skills and understanding of new technologies.
I decided once again to base this around Eleventy as it's a tool I'm using a lot at the moment and I love giving back and contributing to this community where I can.
Dev.to teamed up with GitHub to put on a hackathon based on building and sharing GitHub Actions, individual tasks that can be combined to create a custom workflow. The Hackathon ran from August the 14th 2020 through to September 17th 2020 with the opportunity to win some prizes at the end!
Despite using GitHub almost every day I've no real experience with GitHub actions, but this year I'm trying use each of the Dev hackathons to expand my skills and understanding of new technologies. I decided once again to base this around Eleventy as it's a tool I'm using a lot at the moment and I love giving back and contributing to this community where I can.
I logged my progress as I went along for this series.
So, NPM isn't found. That'll be because it's not installed - which isn't an issue, we need to install Node and that'll install it for us.
How do we install Node? Easy, apt install nodejs - except this throws the apt not found error. Why? Because I've not built a Javascript action... I've build a Docker Container action 🤦
apt install nodejs
apt not found
After the last error it was clear that it wasn't finding the .sh script in the Action. To resolve this I've amended the .yml and changed where to find the bash file - pointing it to the root instead.
After testing, the error had changed to say Can't find 'action.yml', 'action.yaml' or 'Dockerfile' under '[dir]'. Did you forget to run actions/checkout before running your local action?. As far as I know I'm running the checkout correctly but it's a new error to tackle... we seem to be getting somewhere.
Can't find 'action.yml', 'action.yaml' or 'Dockerfile' under '[dir]'. Did you forget to run actions/checkout before running your local action?
Just to make sure I've checked the logs and it is indeed checking out the Repo okay. I've read up some more and it seems like I might need a Dockerfile, which I've now created using this from the documentation which will run Linux. I've also renamed the main.yml to action.yml.
main.yml
action.yml
GitHub pages allows you to host your site directly from the repo. It'll build initially with a GitHub url which is great when creating staging or demo sites, but you can also set these up with an Apex domain and run as a live site.
Learn more about GitHub Pages.
GitLab is a git-repository manager with some differences to GitHub, although the recent GitHub announcements bring the two more in line with one another.
If you’re not aware of GitLab pages, they allow you to publish static websites directly from a repository in GitLab. There are some limitations, mainly that Pages do not support server-side languages such as PHP, but I mainly use them to host static HTML staging sites. Once set-up correctly pages are generated when the codebase is pushed onto the server and pages can be specific to a branch, for example I use the staging branch to generate the page.
Setting up a GitLab page is a relatively straightforward process. I’ll walk you through the process of setting up a standard HTML config and point out where I got stuck when first setting this up.
At the beginning of the year I started a new job as a junior designer taking on a different but potentially more fulfilling role, one of the main draws to this job was the ability to work under the Senior Web Designer & Developer there. This was an opportunity for me develop my skills further and learn much more about the industry from someone with greater experience than myself, perfect for someone who has been working in the industry for less that one year since graduating.
About three months in to the role and I have settled in, we’re working well together and pushing the work out quickly and to a high standard. I was very happy and every day I was learning new things about the industry, both to aid with my development in my current role and beyond. Then a bombshell, the senior designer & developer is leaving… he’s been offered a better position elsewhere and no one can argue that it wasn’t perfect for him. Four weeks later he’s gone and I have now been left in the position to take over the workload and keep on top of the everyday tasks as well as picking up some bigger projects.
Initially I’m a little concerned that I’m not experienced enough for this and I kept telling myself that there was a reason that I was brought in to help out as there is just too much work, however I quickly realised that this is the opportunity that I have been waiting for. I took a deep breath and looked at the workload from a different angle, learning new skills and increasing my organisational abilities along the way. I stepped up and emailed my mangers just to let them know that I will not let the workload go back to how it was and I will do my upmost to keep everything in order and on track which they really appreciated.
Although I'm a big fan of the Marvel MCU, I've never seen all the movies and I'm making it a goal of 2021 to see them all.
One of the changes I'm trying to make this year is to have more time outside of coding. Although I'm a big fan of the Marvel MCU, I've never seen all the movies and I'm making it a goal of 2021 to see them all.
Using the AugustoMarcelo/mcuapi I've quickly created a list so I can track which I've seen and which I need to watch.
Grand Designs has been one of the staple design and architecture shows on TV since I can remember and over the years there have been some truly incredible houses built. Here are some of my favourites.
Like many other I use Homestead when working on sites locally, typically with an Apache set-up as I’m usually working on WordPress sites. However I’ve recently looked at setting up Magento 2 with NGINX and ran into a few issues with loading css and js files.
This turned out to be because NGINX was ignoring the .htaccess file in the /pub/static/ directory. After some further examination I found that Magento 2 comes as standard with a sample NGINX config file and I simple need to point the site to it.
.htaccess
/pub/static/
I've gone through my fair share of project management tools in the past few years. This is, as memory serves, the tools I've used so far in order:
Developing at university and working in the real world is a big change, bigger than you may realize. Tighter deadlines, technical documentation, and fellow developers will all have a profound effect on the way you proceed after university and will help to shape you into a successful developer. The following three things will help the transition be a little smoother and may even improve your job prospects.
Version control is, or should be, used by all development teams. Although Git and Team Foundation are commonly used there us a huge number of version control systems available; fortunately they are one and the same, get used to one and you should be able to use any of them. Personally I would recommend learning to use Git as it has been a requirement for over half of the jobs I have applied for.
I've recently started to learn Laravel and pretty early on the course introduced me to local development, by local I mean directly off the machine, rather than using a tool or VM (Homestead) as I had been doing.
The tool introduced was Valet, it's described in their documentation as 'a Laravel development environment for Mac minimalists.' Naturally, my next thought was 'if I can run a Laravel application locally, why do I need MAMP or Homestead to run WordPress sites?' - and thus I set out to see if this was possible.
Yes, it is.
WordPressify is a modern workflow for your WordPress development, with an integrated web server, that ties into GitHub, BitBucket and GitLab via WP Pusher.
The easiest approach to setting up WordPressify is to have a local instance of MySQL installed, this runs on the Mac and can be controlled MySQL from System Preferences.
2020 is a year to forget in most aspects, however danielcanetti.com has seen some major improvements and I've learnt some valuable new skills along the way. You may have noticed a visual change with a simpler layout and cleaner colour pallete, but there's much more to the update and here I'll take a deeper dive into the techincal changes and advancements that have been made to the site.
Before these updates were made the site was still built on eleventy, a static site generator, having previously being built on WordPress for a number of years - if you're interested in making the switch, have a look at this Smashing Magazine article.
Capped at thirty (30) changes.
Capped at thirty (30) updates.
Reach out to start a project, see if I can help, or to just say hi.
' + parsedurl + '
' + parsedurl + '');\n $(\".website-list li a\").attr(\"target\", \"_blank\");\n });\n },\n error: function () {\n console.log('Error getting websites.');\n },\n});\n\n// Marvel Cinematic Universe\nvar today = new Date();\nvar dd = today.getDate();\nvar mm = today.getMonth() + 1;\nif (mm < 10) { mm = '0' + mm; }\nvar yyyy = today.getFullYear();\nvar tdate = yyyy + '-' + mm + '-' + dd;\n\n$.ajax({\n url: 'https://mcuapi.herokuapp.com/api/v1/movies/',\n type: 'GET',\n data: {},\n success: function (result) {\n var titles = result.data;\n var viewed = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 13, 14, 15, 12];\n\n $.each(titles, function (id, data) {\n // Append to list\n if (data.release_date < tdate) {\n // Set viewed status\n if ($.inArray(data.id, viewed) > -1) {\n var wstatus = 'watched';\n var wstatusval = 'watched';\n } else {\n var wstatus = 'nwatched';\n var wstatusval = 'pending';\n }\n // Get year\n var date = data.release_date;\n var dateparts = date.split('-');\n $('.mcu-list').append('' + '' + wstatusval + '' + '' + dateparts[0] + '' + '');\n }\n });\n },\n error: function () {\n console.log('Error getting movies.');\n },\n});\n\n// Slick Sliders\njQuery('.basic-slider').slick({\n dots: true,\n arrows: false,\n autoplay: false,\n fade: true,\n cssEase: 'linear',\n});\n\njQuery('.basic-slider-auto').slick({\n dots: true,\n arrows: false,\n autoplay: true,\n autoplaySpeed: 5000,\n fade: true,\n cssEase: 'linear',\n});\n\n//# sourceURL=webpack://daniel-canetti/./src/index.js?"); /***/ }), diff --git a/docs/dist/ctti.css b/docs/dist/ctti.css index 5ffec878a..ebf5ae9f9 100644 --- a/docs/dist/ctti.css +++ b/docs/dist/ctti.css @@ -1,4 +1,4 @@ @import url(https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap); -@import url(https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap); +@import url(https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap); @import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;800&display=swap); -*{box-sizing:border-box}html,body,ul,ol{margin:0;padding:0}p{margin:0px}*{box-sizing:border-box}html,body,ul,ol{margin:0;padding:0}p{margin:0px}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease-in-out}.fade-enter,.fade-leave-to{opacity:0}@keyframes fade-in{0%{opacity:0}25%{opacity:0}100%{opacity:1}}@keyframes fade-in-up{0%{opacity:0;margin-top:25px}25%{opacity:0;margin-top:25px}100%{opacity:1;margin-top:0px}}@keyframes fade-in-up-img{0%{opacity:0;margin-top:-125px}25%{opacity:0;margin-top:-125px}100%{opacity:1;margin-top:-150px}}html{background-color:#111}body{font-family:"Karla",sans-serif;font-weight:400;background-color:#111;padding-bottom:0px;max-width:1750px;margin:auto}@media screen and (prefers-reduced-motion: reduce){a[href*="#"]{scroll-behavior:auto}}#wrapper{background-color:#fff;color:#111;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}#wrapper a{color:#111;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}#wrapper .body__section--post-tag{background:#111;color:#fff}#wrapper hr{border:1px solid rgba(17,17,17,.4)}#wrapper code{background:rgba(0,0,0,.1)}#wrapper pre{background:rgba(0,0,0,.1)}#wrapper pre code{background:transparent}#wrapper.night{background-color:#111;color:#fff}#wrapper.night a{color:#fff}#wrapper.night a.l.alt{color:#f92a82}#wrapper.night .body__section--post-tag{background:#fff;color:#111}#wrapper.night hr{border:1px solid rgba(255,255,255,.4)}#wrapper.night code{background:rgba(255,255,255,.1)}#wrapper.night pre{background:rgba(255,255,255,.1)}#wrapper.night pre code{background:transparent}h1,h2,h3{font-size:4rem;text-align:left;text-transform:uppercase;padding:5vh 0;margin:0;line-height:1.25}@media(max-width: 576px){h1,h2,h3{font-size:3rem}}h1.--sub,h2.--sub,h3.--sub{position:absolute;top:0;left:0;font-size:0}h2,h3{font-family:"Karla",sans-serif;font-size:2.5rem;letter-spacing:.25rem;padding:0}h2.sml,h3.sml{font-size:1.6rem;margin-bottom:30px;letter-spacing:.05rem;text-transform:capitalize}h3{font-family:"Karla",sans-serif;font-weight:700;text-transform:unset;font-size:1.75rem;letter-spacing:.05rem}p{font-size:1.25rem;line-height:1.4;margin-top:30px}p img+strong{font-size:.75rem}a{text-decoration:none;position:relative}a:hover{cursor:pointer}a.l{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:1;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-decoration-thickness:.05em;text-underline-offset:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}a.l:hover{text-decoration-color:#f92a82}a.l.alt{color:#f92a82}button{background:transparent;border:none;box-shadow:none;padding:0 0 5px 0;margin-top:10px;font-size:1.25rem;color:#fff;text-decoration:none;position:relative;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:1}button:before{content:"";position:absolute;bottom:-1px;height:1px;width:100%;opacity:.3;background:#fff;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}button:hover{cursor:pointer}button:hover:before{opacity:1;background:#f92a82}.strong{font-weight:700}hr{box-shadow:none;height:0px;width:80%;margin:75px auto 25px 0}blockquote{font-family:"Roboto Slab",serif;margin:75px 75px 5px 75px}blockquote+p{margin:25px 75px 75px 75px !important;font-size:.7em}@media(max-width: 576px){blockquote{margin:75px 25px 5px 25px}blockquote+p{margin:25px 25px 75px 25px !important}}code{font-family:monospace;padding:5px}pre{padding:15px;margin-top:35px;width:100%;overflow-y:scroll}pre code{font-size:1rem;background:transparent}s{opacity:.5}.social-img{height:.9rem;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.social-img.hov-enabled:hover{fill:#f92a82}nav{background:#111;padding:50px 100px;position:relative;z-index:100;width:100%;left:0;top:0;display:flex;justify-content:space-between}@media(max-width: 576px){nav{padding:40px}}nav .logo{font-weight:700;animation:fade-in 3s ease-in-out 1}nav ul{list-style:none;display:flex;animation:fade-in 3s ease-in-out 1}nav ul li{margin-right:40px}nav ul li:last-of-type{margin-right:0}@media(max-width: 576px){nav ul li{margin-right:30px}nav ul li.hom{display:none}}nav ul li.toggle-nightMode input{display:none}nav ul li.toggle-nightMode label{position:relative;cursor:pointer;margin-top:3px;display:block}nav ul li.toggle-nightMode label img{height:1rem}.header{margin:0;padding:7.5% 25px;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}.header h1,.header h2,.header h3,.header p,.header a{position:relative;z-index:5}.header h1.title,.header h2.title,.header h3.title,.header p.title,.header a.title{padding-bottom:0px}.header h1.subtitle,.header h2.subtitle,.header h3.subtitle,.header p.subtitle,.header a.subtitle{margin:-5px 0px 50px 0px;font-size:1.5em}@media(max-width: 576px){.header h1.subtitle,.header h2.subtitle,.header h3.subtitle,.header p.subtitle,.header a.subtitle{margin-top:5px;font-size:1em}}.header::before{content:"";background:rgba(0,0,0,.5);position:absolute;z-index:1;top:0;left:0;width:100%;height:100%}.body{padding:120px 200px 0 200px}@media(max-width: 1025px){.body{padding:120px 100px 0 100px}}@media(max-width: 576px){.body{padding:40px 40px 0 40px}}.body.page-not-found{background-image:url("https://media.giphy.com/media/xTiTnHXbRoaZ1B1Mo8/source.gif");background-repeat:no-repeat;background-size:cover;background-position:center}.body.body--home{height:100%;padding:0 100px 0 100px}@media(max-width: 576px){.body.body--home{padding:40px 40px 0 40px}}.body.body--sub{padding:50px 100px 0 100px;display:flex;flex-direction:column;align-items:center}@media(max-width: 576px){.body.body--sub{padding:50px 40px 0 40px}}.body.body--sub.body--sub--404{background-image:url(https://media.giphy.com/media/nDMyoNRkCesJdZAuuL/giphy-downsized.gif);background-size:cover;background-repeat:no-repeat;min-height:700px;justify-content:center;margin-bottom:50px}.body .body__section{position:relative;z-index:3;display:flex;flex-direction:column;max-width:1000px;align-items:flex-start;padding:0 0 150px 0;opacity:1;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.body .body__section--project-part{padding-bottom:50px}.body .body__section.fade{opacity:.3}.body .body__section.body__section--fade{animation:fade-in 2s ease-in-out 1}.body .body__section.body__section--fade-up{animation:fade-in-up 2s ease-in-out 1}.body .body__section.body__section--narrow{max-width:750px}.body .body__section.body__section--intro{height:calc(90vh - 10px);max-width:750px;margin-bottom:100px;text-align:center;display:flex;align-items:flex-start;justify-content:center;margin:0 auto 0 0;padding:0}@media(max-width: 576px){.body .body__section.body__section--intro{height:auto;padding:200px 0}}.body .body__section.body__section--intro .body__section--intro__face{cursor:none}.body .body__section.body__section--intro .body__section--intro__face img{max-width:180px;width:100%;margin-bottom:25px;margin-top:-150px;margin-left:-55px}.body .body__section.body__section--intro h1,.body .body__section.body__section--intro h2,.body .body__section.body__section--intro h3{font-weight:400;text-align:left;width:100%;font-size:1.4rem;display:inline-block;text-transform:unset;letter-spacing:unset;padding:0;margin:0}@media(max-width: 576px){.body .body__section.body__section--intro{margin-bottom:0}}.body .body__section.body__section--case-study-items{padding-top:0;flex-direction:row;justify-content:space-between;flex-wrap:wrap}@media(max-width: 576px){.body .body__section.body__section--case-study-items{margin-top:0;flex-direction:column;width:100%}}.body .body__section.body__section--case-study-items.body__section--case-study-items--work,.body .body__section.body__section--case-study-items.body__section--case-study-items--blog{width:100%;max-width:1250px}@media(max-width: 576px){.body .body__section{padding:0px 0px 50px 0px}}.body .body__section.body__section--post{max-width:700px;margin:0 auto;animation:fade-in-up 2s ease-in-out 1}.body .body__section.body__section--post h1,.body .body__section.body__section--post h2,.body .body__section.body__section--post h3{font-family:"Karla",sans-serif;font-weight:700;font-size:3rem;margin-top:30px;margin-bottom:0px;padding-bottom:10px;text-align:left;width:100%}@media(max-width: 576px){.body .body__section.body__section--post h1,.body .body__section.body__section--post h2,.body .body__section.body__section--post h3{font-size:2.25rem;margin-top:0;padding-top:0}}.body .body__section.body__section--post .body__section--post-meta{width:100%;display:flex;flex-direction:row;justify-content:flex-start}.body .body__section.body__section--post .body__section--post-meta span{margin-right:25px}.body .body__section.body__section--post .body__section--post-meta span:last-of-type{margin-right:0}.body .body__section.body__section--post .body__section--post-tag{border:1px solid #111;padding:4px 10px;text-transform:uppercase;letter-spacing:1px;border-radius:5px;font-size:.7rem}.body .body__section.body__section--post h2,.body .body__section.body__section--post h3{width:80%;text-align:left;font-size:1.75rem;margin-bottom:0;padding-bottom:0px;margin:75px auto 0 0}@media(max-width: 576px){.body .body__section.body__section--post h2,.body .body__section.body__section--post h3{font-size:1.5rem}}.body .body__section.body__section--post h3{width:80%;text-align:left;font-size:1.25rem;margin:75px auto 0 0;padding-bottom:0px}.body .body__section.body__section--post p{max-width:80%;width:100%;margin:30px auto 0 0}@media(max-width: 1025px){.body .body__section.body__section--post p{max-width:95%}}.body .body__section.body__section--post a{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:1;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-decoration-thickness:.05em;text-underline-offset:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.body .body__section.body__section--post a:hover{text-decoration-color:#f92a82}.body .body__section.body__section--post ul,.body .body__section.body__section--post ol{padding-left:25px;max-width:80%;width:100%;margin:30px auto 0 0}.body .body__section.body__section--post ul.slick-dots,.body .body__section.body__section--post ol.slick-dots{margin-top:15px}.body .body__section.body__section--post ul li,.body .body__section.body__section--post ol li{font-size:1.25rem;margin-bottom:15px}.body .body__section.body__section--post img{width:100%;height:auto;margin:auto}.body .body__section.body__section--post img.body__section--post-feat-img{z-index:-1;margin-top:-10px;border-top:1px solid #f0f0f0}.body .body__section.body__section--post img.project-type-icon{width:18px;margin-right:7px;margin-bottom:-3px}footer{width:100%;z-index:0;text-align:left;font-size:1.75em;background-color:#111;color:#fff}footer .footer__content{position:relative;display:flex;flex-direction:row;justify-content:space-between;width:100%;height:100%;margin:auto;padding:50px 100px}@media(max-width: 576px){footer .footer__content{padding:50px 40px;align-items:flex-start;flex-direction:column}}footer .footer__content:before{content:"";position:absolute;top:0;left:0;right:0;margin:auto;height:.5px;width:calc(100% - 200px);background-color:#fff}@media(max-width: 576px){footer .footer__content:before{width:calc(100% - 80px)}}footer .footer__content a{color:#fff}footer .footer__content .footer__content__slinks{display:flex;flex-direction:row;align-items:center}@media(max-width: 576px){footer .footer__content .footer__content__slinks{margin-top:25px}}footer .footer__content .footer__content__slinks .sl{margin-right:15px}footer .footer__content .footer__content__slinks .sl img{height:1rem}footer .footer__content .footer__content__slinks .sl:last-of-type{margin-right:0}footer .copyright{font-size:.75rem;line-height:1.5rem}@media(max-width: 576px){footer .copyright{width:50%}}#tumblrfeed{position:relative;width:100%;line-height:0;-webkit-column-count:1;-webkit-column-gap:0px;-moz-column-count:1;-moz-column-gap:0px;column-count:1;column-gap:0px}@media(max-width: 576px){#tumblrfeed{-webkit-column-count:1;-moz-column-count:1;column-count:1}}#tumblrfeed:before{content:"Loading some inspiration 🔥🔥";position:absolute;top:10px;left:10px}.breadcrumbs{padding:25px 100px;margin-top:-5px;width:100%;display:flex;justify-content:flex-start;color:#fff;background-color:#171717}@media(max-width: 576px){.breadcrumbs{justify-content:center}}.breadcrumbs a{color:#fff;margin:0 10px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-decoration-thickness:.05em;text-underline-offset:5px}.breadcrumbs a:first-of-type{margin-left:0}.breadcrumbs span{margin-left:10px}.njs-toggle-menu{cursor:pointer;margin-left:-6px;margin-top:-2px}.njs-toggle-menu.njs-toggle-menu--mob-move{margin-top:-125px}.njs-toggle-menu .toggle-menu__toggle-menu-icon{display:inline-block;z-index:500;position:relative;margin-right:10px}@media(max-width: 576px){.njs-toggle-menu .toggle-menu__toggle-menu-icon{margin-left:-4px}}.njs-toggle-menu .toggle-menu__toggle-menu-icon .toggle-menu-icon__toggle-menu-icon-inner{margin-top:-2.5px;width:24px;height:1px;background:#fff;display:inline-block;vertical-align:middle;margin-left:7px;z-index:50;position:relative;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.njs-toggle-menu .toggle-menu__toggle-menu-icon .toggle-menu-icon__toggle-menu-icon-inner:before{display:none;content:"";position:absolute;top:-6px;left:0;width:24px;height:1px;background:#fff;opacity:1;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.njs-toggle-menu .toggle-menu__toggle-menu-icon .toggle-menu-icon__toggle-menu-icon-inner:after{content:"";position:absolute;bottom:-6px;left:0;width:24px;height:1px;background:#fff;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.njs-toggle-menu .toggle-menu__toggle-menu-icon.toggle-menu-icon--toggle .toggle-menu-icon__toggle-menu-icon-inner{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.njs-toggle-menu .toggle-menu__toggle-menu-icon.toggle-menu-icon--toggle .toggle-menu-icon__toggle-menu-icon-inner:before{opacity:0}.njs-toggle-menu .toggle-menu__toggle-menu-icon.toggle-menu-icon--toggle .toggle-menu-icon__toggle-menu-icon-inner:after{bottom:0;width:24px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg)}.njs-toggle-menu .toggle-menu__toggle-menu-icon.hideondesktop{display:none}@media(max-width: 576px){.njs-toggle-menu .toggle-menu__toggle-menu-icon.hideondesktop{display:block}}.njs-toggle-menu .njs-toggle-menu--toggle{display:none}.njs-toggle-menu .njs-toggle-menu--toggle+label{cursor:pointer;position:relative;z-index:5000000}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav{position:fixed;z-index:40000;height:100vh;overflow-y:auto;width:100%;text-align:center;background:#111;opacity:0;top:-100vh;left:0;padding:110px;font-weight:900;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@media(max-width: 576px){.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav{padding:55px}}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav ul{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;height:100%;max-width:1750px;margin:auto}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav ul li{text-align:right;width:100%;margin:0 0 25px 0}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav ul li a{font-size:2.5rem;letter-spacing:.25rem;text-transform:uppercase}@media(max-width: 576px){.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav ul li a{font-size:2rem;letter-spacing:.25rem}}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav.main-nav--toggle{opacity:1;top:0}@media(max-width: 576px){.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav.main-nav--toggle{top:0;left:0}}.njs-toggle-menu .njs-toggle-menu--toggle:checked+label .toggle-menu__toggle-menu-icon .toggle-menu-icon__toggle-menu-icon-inner{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.njs-toggle-menu .njs-toggle-menu--toggle:checked+label .toggle-menu__toggle-menu-icon .toggle-menu-icon__toggle-menu-icon-inner:before{opacity:0}.njs-toggle-menu .njs-toggle-menu--toggle:checked+label .toggle-menu__toggle-menu-icon .toggle-menu-icon__toggle-menu-icon-inner:after{bottom:0;width:24px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg)}.njs-toggle-menu .njs-toggle-menu--toggle:checked+label+.main-nav{opacity:1;top:0}@media(max-width: 576px){.njs-toggle-menu .njs-toggle-menu--toggle:checked+label+.main-nav{top:0;left:0}}.collection-list{position:relative;width:100%;max-width:1250px;margin:auto;padding:5px;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:flex-start;flex-wrap:wrap;opacity:1}.collection-list a{opacity:1;margin-bottom:75px}.collection-list a:hover h3{color:#f92a82}.collection-list h3{display:inline-block;vertical-align:middle;margin-bottom:0;opacity:1;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.collection-list picture{position:fixed;left:10px;top:0;z-index:-1}.collection-list picture img{width:auto;position:fixed;height:100%;width:100%;max-width:calc(100vw - 20px)}.collection-list .collection-list__description{background:#f0f0f0;padding:4px 10px;text-transform:uppercase;letter-spacing:1px;border-radius:5px;font-size:.7rem;margin:0 auto;color:#111;opacity:1}.collection-list.posts .collection-list__link .collection-list__link__post-date{color:#111;font-weight:400;opacity:.5;font-size:.75em}.collection-list.projects a{width:100%;padding-right:325px}@media(max-width: 576px){.collection-list.projects a{padding-right:0}}.collection-list.projects img{position:absolute;right:0;height:300px;width:300px;object-fit:cover}@media(max-width: 576px){.collection-list.projects img{display:none}}.case-study-items__wrap{display:flex;flex-direction:row;flex-wrap:wrap;margin-bottom:50px}@media(max-width: 576px){.case-study-items__wrap{flex-direction:column}}.case-study-items__wrap .case-study-item{width:35%;margin-bottom:0px}@media(max-width: 576px){.case-study-items__wrap .case-study-item{width:75%}}.case-study-items__wrap .case-study-item.case-study-item--post{margin-bottom:40px}.case-study-items__wrap .case-study-item:nth-of-type(odd){margin-right:7.5%}.case-study-items__wrap .case-study-item p{opacity:.7}.case-study-item{width:calc(50% - 15px);display:flex;flex-direction:column;margin-bottom:60px}.case-study-item--post--blog{order:3}.case-study-item--post--blog:first-of-type{order:1}@media(min-width: 576px){.case-study-item--post--blog:first-of-type{flex-direction:row;width:100%}.case-study-item--post--blog:first-of-type .case-study-item__img{width:70%;margin-right:30px}.case-study-item--post--blog:first-of-type .case-study-item__data{width:calc(30% - 25px)}.case-study-item--post--blog:first-of-type .case-study-item__data .case-study-item__data--content .case-study-item__meta,.case-study-item--post--blog:first-of-type .case-study-item__data .case-study-item__data--content .case-study-item__copy{justify-content:flex-start !important}.case-study-item--post--blog:first-of-type .case-study-item__data .case-study-item__data--content .case-study-item__meta h2,.case-study-item--post--blog:first-of-type .case-study-item__data .case-study-item__data--content .case-study-item__meta h3,.case-study-item--post--blog:first-of-type .case-study-item__data .case-study-item__data--content .case-study-item__copy h2,.case-study-item--post--blog:first-of-type .case-study-item__data .case-study-item__data--content .case-study-item__copy h3{width:100%}}@media(max-width: 576px){.case-study-item{width:75%}}.case-study-item.case-study-item--work{width:calc(50% - 7.5px);margin:0 0 15px;position:relative}.case-study-item.case-study-item--work:first-child,.case-study-item.case-study-item--work:nth-child(4n),.case-study-item.case-study-item--work:last-child{width:100%}@media(max-width: 576px){.case-study-item.case-study-item--work{width:100%;margin-bottom:25px}}.case-study-item.case-study-item--work .case-study-item__data{position:absolute;bottom:0;left:0;padding:15px 30px;background:-moz-linear-gradient(top, rgba(0, 1, 17, 0) 0%, rgba(0, 1, 17, 0.3) 100%);background:-webkit-linear-gradient(top, rgba(0, 1, 17, 0) 0%, rgba(0, 1, 17, 0.3) 100%);background:linear-gradient(to bottom, rgba(0, 1, 17, 0) 0%, rgba(0, 1, 17, 0.3) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#4d000111", endColorstr="#00000111",GradientType=0 );min-width:250px;height:100%;width:100%;align-items:flex-end}@media(max-width: 576px){.case-study-item.case-study-item--work .case-study-item__data{bottom:0;left:0;width:100%;height:100%}}.case-study-item.case-study-item--work .case-study-item__data a{text-align:left}.case-study-item.case-study-item--work .case-study-item__data .case-study-item__data--content .case-study-item__meta{justify-content:flex-start}.case-study-item.case-study-item--work .case-study-item__data .case-study-item__data--content .case-study-item__meta span{display:flex;align-items:center}.case-study-item.case-study-item--work .case-study-item__data .case-study-item__data--content .case-study-item__meta span:first-of-type{margin-right:15px}.case-study-item.case-study-item--work .case-study-item__data .case-study-item__data--content .case-study-item__meta span img{width:18px;margin-right:7px}.case-study-item.case-study-item--work .case-study-item__data .case-study-item__data--content .case-study-item__meta span img.Jamstack{width:20px;margin-right:5px}.case-study-item.case-study-item--work .case-study-item__data .case-study-item__data--content .case-study-item__copy{align-items:flex-start}.case-study-item.case-study-item--hover{opacity:1;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.case-study-item.case-study-item--hover:hover .case-study-item__img .case-study-item__img__image img,.case-study-item.case-study-item--hover:hover .case-study-item__img .case-study-item__img__image video{transform:scale(1.1)}@media(max-width: 576px){.case-study-item{width:calc(100% - 15px);margin-bottom:30px}}.case-study-item img{width:100%;height:auto}.case-study-item .case-study-item__img{width:100%;position:relative;overflow:hidden}.case-study-item .case-study-item__img:before{content:"";display:block;padding-top:65%}.case-study-item .case-study-item__img .case-study-item__img__image{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#f0f0f0;background-position:center;background-size:cover;background-repeat:no-repeat;overflow:hidden}.case-study-item .case-study-item__img .case-study-item__img__image img{object-fit:cover;height:100%;transform:scale(1);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.case-study-item .case-study-item__img .case-study-item__img__image video{width:auto;height:101%;transform:scale(1);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.case-study-item .case-study-item__data{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch}.case-study-item .case-study-item__data .case-study-item__data--content{width:100%;display:flex;flex-direction:column;justify-content:center;flex-wrap:wrap}.case-study-item .case-study-item__data .case-study-item__data--content .case-study-item__meta{width:100%;margin:25px 0 0;font-size:.75rem;display:flex;flex-direction:row;justify-content:center}.case-study-item .case-study-item__data .case-study-item__data--content .case-study-item__meta span{margin-right:30px}.case-study-item .case-study-item__data .case-study-item__data--content .case-study-item__meta span:last-of-type{margin-right:0}.case-study-item .case-study-item__data .case-study-item__data--content .case-study-item__copy{width:100%;display:flex;flex-direction:column;align-items:center}.case-study-item .case-study-item__data .case-study-item__data--content .case-study-item__copy h2,.case-study-item .case-study-item__data .case-study-item__data--content .case-study-item__copy h3{margin:25px 0;font-size:1.2rem;font-family:"Karla",sans-serif;text-transform:unset;letter-spacing:.05rem}.case-study-item .case-study-item__data .case-study-item__data--content .case-study-item__copy p{margin-top:0;margin-bottom:25px;font-size:1rem}.case-study-item.case-study-item--home h2,.case-study-item.case-study-item--home h3{margin:25px 0;font-size:1.2rem;font-family:"Karla",sans-serif;text-transform:unset;letter-spacing:.05rem}.case-study-item.case-study-item--home p{margin-top:0;margin-bottom:25px;font-size:1rem}.case-study-item.case-study-item--home a{align-self:flex-start}.case-study-item.moodboard{width:100%;margin:0;padding:5px;display:block}.case-study-item.moodboard:first-of-type,.case-study-item.moodboard:nth-last-of-type(2){padding-top:0}.case-study-item.moodboard p{display:none}.case-study-item.moodboard blockquote,.case-study-item.moodboard figure{margin:0}@media(max-width: 576px){.case-study-item.moodboard:nth-last-of-type(2){padding-top:5px}}.share__blog{display:flex;flex-direction:column;justify-content:start;width:100%;margin:50px auto 0 auto}@media(max-width: 576px){.share__blog{flex-direction:column;justify-content:center;width:100%;margin-top:20px}.share__blog a{margin-right:0px}}.share__blog .share__blog__links{width:100%;max-width:80%;margin:30px auto 0 0}@media(max-width: 576px){.share__blog .share__blog__links{margin-top:0;display:flex;flex-direction:column}}.share__blog .share__blog__links a{width:fit-content;margin-bottom:20px}.share__blog .share__blog__links a svg{margin-right:8px;color:#fff;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.share__blog .share__blog__links a:hover svg{color:#f92a82}.share__blog .share__blog__links a:not(:last-of-type){margin-right:20px}@media(max-width: 576px){.share__blog .share__blog__links a:not(:last-of-type){margin-right:0}}.share__blog h3{margin-top:0 !important;padding-bottom:25px !important}.post--bg-image{animation:fade-in-up 2s ease-in-out 1;width:100%;height:auto}.form{display:flex;flex-direction:column;width:100%;max-width:500px;margin-top:50px}.form .form-group{position:relative;display:flex;flex-direction:column;margin-bottom:20px}.form .form-group label{font-size:1rem;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.form .form-group input,.form .form-group textarea{height:50px;background:none;box-shadow:none;border:none;border-bottom:1px solid #fff;color:#fff;font-size:1rem;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.form .form-group input.parsley-error,.form .form-group textarea.parsley-error{border-bottom:1px solid #f92a82}.form .form-group input:disabled,.form .form-group textarea:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.form .form-group textarea{resize:vertical;padding:15px 0;font-family:"Karla",sans-serif}.form .form-group button{align-self:flex-end}.form .form-group button:disabled{cursor:not-allowed;pointer-events:none;color:#f92a82}.form .form-group ul.parsley-errors-list{list-style:none;padding:0;margin:0;position:absolute;right:0;bottom:0;opacity:1;animation:fade-in .3s 1}.form .form-group ul.parsley-errors-list li{font-size:.75rem;padding:.15rem .25rem;background:#f92a82;color:#fff}.form .content__gdprLegal{max-width:65%;margin-top:-55px}.form .content__gdprLegal p{font-size:1rem}.grid{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;margin-top:50px}.grid.social{max-width:500px}.grid.social img{height:.9rem !important;width:auto !important;margin-right:9px}.grid div{position:relative;width:calc(100% / 3);padding:45px 25px;border-bottom:1px solid #111;border-left:1px solid #111;text-align:center;background:transparent;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.grid div:nth-child(1),.grid div:nth-child(2),.grid div:nth-child(3){border-top:1px solid #111}.grid div:nth-child(3n),.grid div:last-child{border-right:1px solid #111}.grid div:hover{background:#f92a82}@media(max-width: 576px){.grid div{width:calc(100% / 2)}.grid div:nth-child(3){border-top:none}.grid div:nth-child(3n),.grid div:last-child{border-right:none}.grid div:nth-child(2n),.grid div:last-child{border-right:1px solid #111}}.grid a{position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center}.grid a:hover{border-bottom:1px solid #111}.grid a svg{margin-right:10px;fill:#111}.slick-slider{width:100%;margin-top:50px;position:relative}.slick-slider ul.slick-dots{display:flex;flex-direction:column;align-items:center;justify-content:center;list-style:none;margin:0 !important;position:absolute;z-index:1;width:40px !important;height:100%;padding-left:0px !important;left:0;top:0;background-color:rgba(17,17,17,0);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.slick-slider ul.slick-dots:hover{background-color:#111}.slick-slider ul.slick-dots button{display:none}.slick-slider ul.slick-dots li{width:8px;height:8px;border-radius:0px;margin:4px 0;background:#fff;border:1px solid #fff;opacity:.5;cursor:pointer;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.slick-slider ul.slick-dots li:hover{opacity:1}.slick-slider ul.slick-dots li.slick-active{opacity:1}.body .body__section.body__section--post .toc{max-width:80%;width:100%;margin:30px auto 0 0}.body .body__section.body__section--post .toc h3{width:100%}.body .body__section.body__section--post .toc ul{list-style:none;padding-left:0;counter-reset:toc-items;float:left}.body .body__section.body__section--post .toc ul li{position:relative;margin-left:0;padding-left:45px;counter-increment:toc-items}.body .body__section.body__section--post .toc ul li:before{content:counter(toc-items, decimal-leading-zero);position:absolute;left:0;font-size:1.25rem;font-weight:700}.body .body__section.body__section--post .toc ul li.toc__this:before{color:#f92a82}.website-list{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:100px;min-height:250px}@media(max-width: 576px){.website-list{margin-top:50px}}.website-list li{width:200px;display:flex;align-items:center;margin-bottom:30px;position:relative}.website-list li:before{content:"";background:#fff;width:26px;height:26px;position:absolute;top:-2px;left:-5px;border-radius:100%;z-index:-1}@media(max-width: 576px){.website-list li{flex-basis:50%}}.website-list li p{margin:0 0 0 15px;font-size:1rem}.website-list li p a{text-decoration:underline}.mcu-list{list-style:none;margin:100px 0 0 0 !important;padding:0 !important;max-width:100% !important;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}@media(max-width: 576px){.mcu-list{margin-top:50px !important}}.mcu-list li{position:relative;display:flex;flex-direction:column;width:48.5%;margin-bottom:30px !important;text-align:center}.mcu-list li img{border-radius:25px;margin-bottom:15px !important;box-shadow:0 4px 8px 0 rgba(0,0,0,0),0 6px 20px 0 rgba(0,0,0,0);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.mcu-list li img.nwatched{opacity:.5}.mcu-list li img:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.mcu-list li img:hover.nwatched{opacity:1}.mcu-list li span{position:absolute;right:18px;top:10px;background:#fff;color:#111;padding:4px 10px;text-transform:uppercase;letter-spacing:1px;border-radius:5px;font-size:.7rem}.mcu-list li span.status{right:auto;left:18px}.mcu-list li span.status--watched{background:#4caf50}.mcu-list li span.status--nwatched{background:#ff9800}@media(max-width: 576px){.mcu-list li{width:100%}}ul.changelog{margin-top:50px;padding-top:50px;border-top:1px solid #f0f0f0;list-style:none}ul.changelog li{margin-bottom:40px;display:flex;flex-wrap:wrap}ul.changelog li h3{width:100%;font-size:.75rem;text-transform:uppercase;margin-bottom:15px;font-family:"JetBrains Mono",monospace;font-weight:800}ul.changelog li time{width:40%}ul.changelog li span{width:60%}@media(max-width: 576px){ul.changelog li{flex-direction:column;margin-bottom:50px}ul.changelog li time,ul.changelog li span{width:100%}ul.changelog li h3{margin-bottom:30px}ul.changelog li time{margin-bottom:15px}}.twitter-tweet{margin-top:30px !important}.filter-posts{position:relative;display:flex;align-items:center;margin-bottom:30px;width:100%;order:2}@media(max-width: 576px){.filter-posts{width:calc(100% - 15px)}}.filter-posts:before{content:"";position:absolute;top:14px;left:145px;z-index:10;background-image:url(./images/filter-chevron.svg);background-size:12px;height:12px;width:12px;transform:rotate(180deg)}@media(max-width: 576px){.filter-posts:before{right:16px;left:auto}}.filter-posts select{width:170px;border:1px solid rgba(255,255,255,.4);border-radius:2px;padding:10px 16px;-webkit-appearance:none;background-color:#111;color:#fff;outline:none}@media(max-width: 576px){.filter-posts select{width:100%}}.project-image img{width:100vw;margin-left:-200px;margin-top:15px}@media(max-width: 1025px){.project-image img{margin-left:-100px}}@media(max-width: 576px){.project-image img{margin-left:-40px}}.gist{margin-top:30px;width:100%}.gist .blob-wrapper{padding:15px 0;background-color:#111}.gist .blob-wrapper .highlight{background-color:#111}.gist .blob-num:before{color:#fff !important}.gist .pl-kos{color:#fff !important}.gist .pl-smi{color:#e01a4f !important}.gist .pl-s1{color:#53b3cb !important}.gist .pl-pds,.gist .pl-s,.gist .pl-s .pl-pse .pl-s1,.gist .pl-sr,.gist .pl-sr .pl-cce,.gist .pl-sr .pl-sra,.gist .pl-sr .pl-sre{color:#f15946 !important}.gist .pl-en,.gist .pl-c1,.gist .pl-s3{color:#f9c22e !important}.gist .gist-meta{background:#111 !important;color:#fff !important}@media(max-width: 576px){.body__section--tool section{padding:0;margin:0}}@media(max-width: 576px){.body__section--tool .timeline-creation{flex-direction:column}}.body__section--tool .timeline-creation div{background-color:#000}.body__section--tool .timeline-creation div button:before{display:none}@media(max-width: 576px){.body__section--tool .timeline-creation div{width:100%;margin:10px 0}}.body__section--tool .preview h2,.body__section--tool .preview h3{color:#fff}.body__section--tool .event-agenda{max-width:100%}.body__section--tool .event-agenda h2,.body__section--tool .event-agenda h3{color:#fff;font-size:1.5rem}.body__section--tool .event-agenda table tr td{background-color:transparent}.body__section--tool .event-agenda table tr td:first-child:before,.body__section--tool .event-agenda table tr td:first-child:after{background:#fff}body.awesome-websites h2,body.awesome-websites h3{width:100%;text-align:center}@media(max-width: 576px){body.awesome-websites h2,body.awesome-websites h3{text-align:left}}.body.body--contact .body__section.body__section--post h2:first-of-type,.body.body--contact .body__section.body__section--post h3:first-of-type{margin-top:0}.body.post{padding-top:50px} +*{box-sizing:border-box}html,body,ul,ol{margin:0;padding:0}p{margin:0px}*{box-sizing:border-box}html,body,ul,ol{margin:0;padding:0}p{margin:0px}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease-in-out}.fade-enter,.fade-leave-to{opacity:0}@keyframes fade-in{0%{opacity:0}25%{opacity:0}100%{opacity:1}}@keyframes fade-in-up{0%{opacity:0;margin-top:25px}25%{opacity:0;margin-top:25px}100%{opacity:1;margin-top:0px}}@keyframes fade-in-up-img{0%{opacity:0;margin-top:-125px}25%{opacity:0;margin-top:-125px}100%{opacity:1;margin-top:-150px}}body{font-family:"Karla",sans-serif;font-weight:400;color:#111;padding-bottom:0px;max-width:1750px;margin:auto}@media screen and (prefers-reduced-motion: reduce){a[href*="#"]{scroll-behavior:auto}}h1,h2,h3{font-family:"Playfair Display",serif;font-size:4rem;text-align:left;padding:5vh 0;margin:0;line-height:1.25}@media(max-width: 576px){h1,h2,h3{font-size:3rem}}h1.--sub,h2.--sub,h3.--sub{position:absolute;top:0;left:0;font-size:0}h2,h3{font-size:2.5rem;letter-spacing:.25rem;padding:0}h2.sml,h3.sml{font-size:1.6rem;margin-bottom:30px;letter-spacing:.05rem;text-transform:capitalize}h3{text-transform:unset;font-size:1.75rem;letter-spacing:.05rem}h3.mt{margin-top:50px}p{font-size:1.25rem;line-height:1.4;margin-top:30px}p img+strong{font-size:.75rem}a{color:#111;text-decoration:none;position:relative}a:hover{cursor:pointer}a.l{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:1;text-decoration:underline;text-decoration-color:rgba(0,0,0,.5);text-decoration-thickness:.05em;text-underline-offset:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}a.l:hover{text-decoration-color:#f92a82}a.l.alt{color:#f92a82}button{background:transparent;border:none;box-shadow:none;padding:0 0 5px 0;margin-top:10px;font-size:1.25rem;color:#fff;text-decoration:none;position:relative;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:1}button:before{content:"";position:absolute;bottom:-1px;height:1px;width:100%;opacity:.3;background:#fff;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}button:hover{cursor:pointer}button:hover:before{opacity:1;background:#f92a82}.strong{font-weight:700}hr{box-shadow:none;height:0px;width:100%;border:none;border-top:1px solid #111;margin:75px auto 25px 0}blockquote{background:rgba(0,0,0,.05);font-family:"Playfair Display",serif;margin:75px 75px 5px 75px}blockquote+p{margin:25px 75px 75px 75px !important;font-size:.7em}@media(max-width: 576px){blockquote{margin:75px 25px 5px 25px}blockquote+p{margin:25px 25px 75px 25px !important}}code{background:rgba(0,0,0,.05);font-family:monospace;padding:5px}pre{background:rgba(0,0,0,.05);padding:15px;margin-top:35px;width:100%;overflow-y:scroll}pre code{font-size:1rem;background:transparent}ul,ol{padding-left:50px}ul li,ol li{font-size:1.25rem;margin-top:calc(75px / 2)}s{opacity:.5}video{width:100%;height:auto;margin-bottom:50px}.social-img{height:.9rem;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.social-img.hov-enabled:hover{fill:#f92a82}#wrapper{max-width:700px;margin:auto}nav{padding:50px 100px;position:relative;z-index:100;width:100%;left:0;top:0;display:flex;justify-content:space-between}@media(max-width: 576px){nav{padding:40px}}nav .logo{z-index:40001;font-weight:700;animation:fade-in 3s ease-in-out 1}nav ul{list-style:none;display:flex;animation:fade-in 3s ease-in-out 1}nav ul li{margin-right:40px;margin-top:0}nav ul li:last-of-type{margin-right:0}@media(max-width: 576px){nav ul li{margin-right:30px}nav ul li.hom{display:none}}nav ul li.toggle-nightMode input{display:none}nav ul li.toggle-nightMode label{position:relative;cursor:pointer;margin-top:3px;display:block}nav ul li.toggle-nightMode label img{height:1rem}.header{margin:0;padding:7.5% 25px;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}.header h1,.header h2,.header h3,.header p,.header a{position:relative;z-index:5}.header h1.title,.header h2.title,.header h3.title,.header p.title,.header a.title{padding-bottom:0px}.header h1.subtitle,.header h2.subtitle,.header h3.subtitle,.header p.subtitle,.header a.subtitle{margin:-5px 0px 50px 0px;font-size:1.5em}@media(max-width: 576px){.header h1.subtitle,.header h2.subtitle,.header h3.subtitle,.header p.subtitle,.header a.subtitle{margin-top:5px;font-size:1em}}.header::before{content:"";background:rgba(0,0,0,.5);position:absolute;z-index:1;top:0;left:0;width:100%;height:100%}.body{padding:75px 50px 0;max-width:700px}@media(max-width: 576px){.body{padding:40px 40px 0 40px}}.body.body--home{height:100%;padding:0 100px 0 100px}@media(max-width: 576px){.body.body--home{padding:40px 40px 0 40px}}.body.body--sub{padding:0 100px 0 100px;display:flex;flex-direction:column;align-items:center}@media(max-width: 576px){.body.body--sub{padding:40px 40px 0 40px}}.body .body__section{position:relative;z-index:3;display:flex;flex-direction:column;max-width:700px;width:100%;align-items:flex-start;padding:0 0 75px 0;opacity:1;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.body .body__section--project-part{padding-bottom:50px}.body .body__section.fade{opacity:.3}.body .body__section.body__section--fade{animation:fade-in 2s ease-in-out 1}.body .body__section.body__section--fade-up{animation:fade-in-up 2s ease-in-out 1}.body .body__section.body__section--narrow{max-width:750px}.body .body__section.body__section--intro{height:50vh;max-width:750px;margin-bottom:100px;text-align:center;display:flex;align-items:flex-start;justify-content:center;margin:0 auto 0 0;padding:0}@media(max-width: 576px){.body .body__section.body__section--intro{height:auto;padding:200px 0}}.body .body__section.body__section--intro h1,.body .body__section.body__section--intro h2,.body .body__section.body__section--intro h3{font-weight:400;text-align:left;width:100%;font-size:1.4rem;display:inline-block;text-transform:unset;letter-spacing:unset;padding:0;margin:0}@media(max-width: 576px){.body .body__section.body__section--intro{margin-bottom:0}}.body .body__section.body__section--case-study-items{padding-top:0;flex-direction:row;justify-content:space-between;flex-wrap:wrap}@media(max-width: 576px){.body .body__section.body__section--case-study-items{margin-top:0;flex-direction:column;width:100%}}.body .body__section.body__section--case-study-items.body__section--case-study-items--work,.body .body__section.body__section--case-study-items.body__section--case-study-items--blog{width:100%;max-width:700px}@media(max-width: 576px){.body .body__section{padding:0px 0px 50px 0px}}.body .body__section.body__section--post{margin:0 auto;animation:fade-in-up 2s ease-in-out 1}.body .body__section.body__section--post h1,.body .body__section.body__section--post h2,.body .body__section.body__section--post h3{font-family:"Playfair Display",serif;font-size:3rem;text-transform:unset;margin-bottom:0px;padding-bottom:10px;text-align:left;width:100%}@media(max-width: 576px){.body .body__section.body__section--post h1,.body .body__section.body__section--post h2,.body .body__section.body__section--post h3{font-size:2.25rem;margin-top:0;padding-top:0}}.body .body__section.body__section--post .body__section--post-meta{width:100%;display:flex;flex-direction:row;justify-content:flex-start}.body .body__section.body__section--post .body__section--post-meta span{margin-right:25px}.body .body__section.body__section--post .body__section--post-meta span:last-of-type{margin-right:0}.body .body__section.body__section--post .body__section--post-tag{border:1px solid #111;padding:4px 10px;text-transform:uppercase;letter-spacing:1px;border-radius:5px;font-size:.7rem}.body .body__section.body__section--post h2,.body .body__section.body__section--post h3{width:80%;text-align:left;font-size:1.75rem;letter-spacing:.05rem;margin-bottom:0;padding-bottom:0px;margin:75px auto 0 0}@media(max-width: 576px){.body .body__section.body__section--post h2,.body .body__section.body__section--post h3{font-size:1.5rem}}.body .body__section.body__section--post h3{width:80%;text-align:left;font-size:1.25rem;letter-spacing:.05rem;margin:75px auto 0 0;padding-bottom:0px}.body .body__section.body__section--post p{max-width:80%;width:100%;margin:30px auto 0 0}@media(max-width: 1025px){.body .body__section.body__section--post p{max-width:95%}}.body .body__section.body__section--post a{z-index:1;text-decoration:underline;text-decoration-color:rgba(0,0,0,.5);text-decoration-thickness:.05em;text-underline-offset:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.body .body__section.body__section--post a:hover{text-decoration-color:#f92a82}.body .body__section.body__section--post ul,.body .body__section.body__section--post ol{padding-left:25px;max-width:80%;width:100%;margin:30px auto 0 0}.body .body__section.body__section--post ul.slick-dots,.body .body__section.body__section--post ol.slick-dots{margin-top:15px}.body .body__section.body__section--post ul li,.body .body__section.body__section--post ol li{font-size:1.25rem;margin-bottom:15px}.body .body__section.body__section--post img{width:100%;height:auto;margin:auto}.body .body__section.body__section--post img.body__section--post-feat-img{z-index:-1;margin-top:-10px;border-top:1px solid #f0f0f0}.body .body__section.body__section--post img.project-type-icon{width:18px;margin-right:7px;margin-bottom:-3px}footer{max-width:700px;margin:auto;width:100%;z-index:0;text-align:left;font-size:1.75em;color:#111}footer .footer__content{position:relative;display:flex;flex-direction:row;justify-content:space-between;width:100%;height:100%;margin:auto;padding:50px 100px}@media(max-width: 576px){footer .footer__content{padding:50px 40px;align-items:flex-start;flex-direction:column}}footer .footer__content:before{content:"";position:absolute;top:0;left:0;right:0;margin:auto;height:.5px;width:calc(100% - 200px);background-color:#111}@media(max-width: 576px){footer .footer__content:before{width:calc(100% - 80px)}}footer .footer__content .l{position:relative;margin-right:10px;padding-right:13px}footer .footer__content .l:after{content:"•";position:absolute;right:0;top:-4px}footer .footer__content .l:last-of-type:after{display:none}footer .footer__content .footer__content__slinks{display:flex;flex-direction:row;align-items:center}@media(max-width: 576px){footer .footer__content .footer__content__slinks{margin-top:25px}}footer .footer__content .footer__content__slinks .sl{margin-right:15px}footer .footer__content .footer__content__slinks .sl img{height:1rem}footer .footer__content .footer__content__slinks .sl:last-of-type{margin-right:0}footer .copyright{font-size:.75rem;line-height:1.5rem}@media(max-width: 576px){footer .copyright{width:50%}}.grid4x4{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:50px}.grid4x4 a{overflow:hidden;width:49%}.grid4x4 a:first-of-type,.grid4x4 a:nth-of-type(2){margin-bottom:2%}.grid4x4 a img{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;width:100%;height:auto}.grid4x4 a:hover img{transform:scale(1.05)}.breadcrumbs{padding:25px 50px;margin-top:-5px;width:100%;display:flex;justify-content:flex-start;color:#111;border-bottom:1px solid #111;animation:fade-in-up 2s ease-in-out 1}.breadcrumbs--alt-position{padding:25px 0;margin-top:50px;border-top:1px solid #111;animation:none}@media(max-width: 576px){.breadcrumbs{padding:25px 40px}}.breadcrumbs a,.breadcrumbs span{margin:0 10px}.breadcrumbs a{text-decoration:underline;text-decoration-color:rgba(0,0,0,.5);text-decoration-thickness:.05em;text-underline-offset:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.breadcrumbs a:hover{text-decoration-color:#f92a82}.breadcrumbs a:first-of-type{margin-left:0}.njs-toggle-menu{cursor:pointer;margin-left:-6px;margin-top:-2px}.njs-toggle-menu.njs-toggle-menu--mob-move{margin-top:-125px}.njs-toggle-menu .toggle-menu__toggle-menu-icon{display:inline-block;z-index:500;position:relative;margin-right:10px}@media(max-width: 576px){.njs-toggle-menu .toggle-menu__toggle-menu-icon{margin-left:-4px}}.njs-toggle-menu .toggle-menu__toggle-menu-icon .toggle-menu-icon__toggle-menu-icon-inner{margin-top:-2.5px;width:24px;height:1px;background:#111;display:inline-block;vertical-align:middle;margin-left:7px;z-index:50;position:relative;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.njs-toggle-menu .toggle-menu__toggle-menu-icon .toggle-menu-icon__toggle-menu-icon-inner:before{display:none;content:"";position:absolute;top:-6px;left:0;width:24px;height:1px;background:#111;opacity:1;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.njs-toggle-menu .toggle-menu__toggle-menu-icon .toggle-menu-icon__toggle-menu-icon-inner:after{content:"";position:absolute;bottom:-6px;left:0;width:24px;height:1px;background:#111;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.njs-toggle-menu .toggle-menu__toggle-menu-icon.toggle-menu-icon--toggle .toggle-menu-icon__toggle-menu-icon-inner{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.njs-toggle-menu .toggle-menu__toggle-menu-icon.toggle-menu-icon--toggle .toggle-menu-icon__toggle-menu-icon-inner:before{opacity:0}.njs-toggle-menu .toggle-menu__toggle-menu-icon.toggle-menu-icon--toggle .toggle-menu-icon__toggle-menu-icon-inner:after{bottom:0;width:24px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg)}.njs-toggle-menu .njs-toggle-menu--toggle{display:none}.njs-toggle-menu .njs-toggle-menu--toggle+label{cursor:pointer;position:relative;z-index:5000000}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav{position:fixed;z-index:40000;height:100vh;overflow-y:auto;width:100%;text-align:center;background:#f0f0f0;opacity:0;top:-100vh;left:0;padding:110px;font-weight:900;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@media(max-width: 576px){.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav{padding:55px}}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav ul{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;height:100%;max-width:1750px;margin:auto}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav ul li{text-align:center;width:100%;margin:0 0 25px 0}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav ul li a{font-size:2.5rem;letter-spacing:.25rem;text-transform:uppercase}@media(max-width: 576px){.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav ul li a{font-size:2rem;letter-spacing:.25rem}}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav ul li.highlight{margin-bottom:50px}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav ul li.highlight a{text-decoration-color:#f92a82}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav ul li.highlight a:hover{text-decoration-color:#111}.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav.main-nav--toggle{opacity:1;top:0}@media(max-width: 576px){.njs-toggle-menu .njs-toggle-menu--toggle+label+.main-nav.main-nav--toggle{top:0;left:0}}.njs-toggle-menu .njs-toggle-menu--toggle:checked+label .toggle-menu__toggle-menu-icon .toggle-menu-icon__toggle-menu-icon-inner{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.njs-toggle-menu .njs-toggle-menu--toggle:checked+label .toggle-menu__toggle-menu-icon .toggle-menu-icon__toggle-menu-icon-inner:before{opacity:0}.njs-toggle-menu .njs-toggle-menu--toggle:checked+label .toggle-menu__toggle-menu-icon .toggle-menu-icon__toggle-menu-icon-inner:after{bottom:0;width:24px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg)}.njs-toggle-menu .njs-toggle-menu--toggle:checked+label+.main-nav{opacity:1;top:0}@media(max-width: 576px){.njs-toggle-menu .njs-toggle-menu--toggle:checked+label+.main-nav{top:0;left:0}}.blog-posts__wrap{display:flex;flex-direction:column;flex-wrap:wrap;margin-bottom:50px}.blog-posts__wrap--margin-top{margin-top:50px}@media(min-width: 576px){.blog-posts__wrap{flex-direction:row;justify-content:space-between}}.blog-posts__wrap .blog-post--thumb{width:100%;margin-bottom:40px}.blog-posts__wrap .blog-post--thumb h2,.blog-posts__wrap .blog-post--thumb h3{font-family:"Playfair Display",serif;text-transform:unset;font-size:1.3rem;letter-spacing:.05rem;margin:18px 0 0}.blog-posts__wrap .blog-post--thumb p{font-size:1rem;margin:12px 0;opacity:.7}.blog-posts__wrap .blog-post--thumb img{width:100%}@media(min-width: 576px){.blog-posts__wrap .blog-post--thumb{width:47%}.blog-posts__wrap .blog-post--thumb--home:first-of-type{flex-direction:row;width:100%}.blog-posts__wrap .blog-post--thumb--home:first-of-type .blog-post__img{width:70%;margin-right:30px}.blog-posts__wrap .blog-post--thumb--home:first-of-type .blog-post__data{width:calc(30% - 25px)}.blog-posts__wrap .blog-post--thumb--home:first-of-type .blog-post__data .blog-post__data--content .blog-post__meta,.blog-posts__wrap .blog-post--thumb--home:first-of-type .blog-post__data .blog-post__data--content .blog-post__copy{justify-content:flex-start !important}.blog-posts__wrap .blog-post--thumb--home:first-of-type .blog-post__data .blog-post__data--content .blog-post__meta h2,.blog-posts__wrap .blog-post--thumb--home:first-of-type .blog-post__data .blog-post__data--content .blog-post__meta h3,.blog-posts__wrap .blog-post--thumb--home:first-of-type .blog-post__data .blog-post__data--content .blog-post__copy h2,.blog-posts__wrap .blog-post--thumb--home:first-of-type .blog-post__data .blog-post__data--content .blog-post__copy h3{width:100%}}.blog-post{width:calc(50% - 15px);display:flex;flex-direction:column;margin-bottom:60px}.blog-post--post--blog{order:3}.blog-post--post--blog:first-of-type{order:1}@media(min-width: 576px){.blog-post--post--blog:first-of-type{flex-direction:row;width:100%}.blog-post--post--blog:first-of-type .blog-post__img{width:70%;margin-right:30px}.blog-post--post--blog:first-of-type .blog-post__data{width:calc(30% - 25px)}.blog-post--post--blog:first-of-type .blog-post__data .blog-post__data--content .blog-post__meta,.blog-post--post--blog:first-of-type .blog-post__data .blog-post__data--content .blog-post__copy{justify-content:flex-start !important}.blog-post--post--blog:first-of-type .blog-post__data .blog-post__data--content .blog-post__meta h2,.blog-post--post--blog:first-of-type .blog-post__data .blog-post__data--content .blog-post__meta h3,.blog-post--post--blog:first-of-type .blog-post__data .blog-post__data--content .blog-post__copy h2,.blog-post--post--blog:first-of-type .blog-post__data .blog-post__data--content .blog-post__copy h3{width:100%}}@media(max-width: 576px){.blog-post{width:75%}}.blog-post.blog-post--work{width:calc(50% - 7.5px);margin:0 0 15px;position:relative}.blog-post.blog-post--work:first-child,.blog-post.blog-post--work:nth-child(4n),.blog-post.blog-post--work:last-child{width:100%}@media(max-width: 576px){.blog-post.blog-post--work{width:100%;margin-bottom:25px}}.blog-post.blog-post--work .blog-post__data{position:absolute;bottom:0;left:0;padding:15px 30px;background:-moz-linear-gradient(top, rgba(0, 1, 17, 0) 0%, rgba(0, 1, 17, 0.3) 100%);background:-webkit-linear-gradient(top, rgba(0, 1, 17, 0) 0%, rgba(0, 1, 17, 0.3) 100%);background:linear-gradient(to bottom, rgba(0, 1, 17, 0) 0%, rgba(0, 1, 17, 0.3) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#4d000111", endColorstr="#00000111",GradientType=0 );min-width:250px;height:100%;width:100%;align-items:flex-end}@media(max-width: 576px){.blog-post.blog-post--work .blog-post__data{bottom:0;left:0;width:100%;height:100%}}.blog-post.blog-post--work .blog-post__data a{text-align:left}.blog-post.blog-post--work .blog-post__data .blog-post__data--content .blog-post__meta{justify-content:flex-start}.blog-post.blog-post--work .blog-post__data .blog-post__data--content .blog-post__meta span{display:flex;align-items:center}.blog-post.blog-post--work .blog-post__data .blog-post__data--content .blog-post__meta span:first-of-type{margin-right:15px}.blog-post.blog-post--work .blog-post__data .blog-post__data--content .blog-post__meta span img{width:18px;margin-right:7px}.blog-post.blog-post--work .blog-post__data .blog-post__data--content .blog-post__meta span img.Jamstack{width:20px;margin-right:5px}.blog-post.blog-post--work .blog-post__data .blog-post__data--content .blog-post__copy{align-items:flex-start}.blog-post.blog-post--hover{opacity:1;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.blog-post.blog-post--hover:hover .blog-post__img .blog-post__img__image img,.blog-post.blog-post--hover:hover .blog-post__img .blog-post__img__image video{transform:scale(1.1)}@media(max-width: 576px){.blog-post{width:calc(100% - 15px);margin-bottom:30px}}.blog-post img{width:100%;height:auto}.blog-post .blog-post__img{width:100%;position:relative;overflow:hidden}.blog-post .blog-post__img:before{content:"";display:block;padding-top:65%}.blog-post .blog-post__img .blog-post__img__image{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#f0f0f0;background-position:center;background-size:cover;background-repeat:no-repeat;overflow:hidden}.blog-post .blog-post__img .blog-post__img__image img{object-fit:cover;height:100%;transform:scale(1);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.blog-post .blog-post__img .blog-post__img__image video{width:auto;height:101%;transform:scale(1);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.blog-post .blog-post__data{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch}.blog-post .blog-post__data .blog-post__data--content{width:100%;display:flex;flex-direction:column;justify-content:center;flex-wrap:wrap}.blog-post .blog-post__data .blog-post__data--content .blog-post__meta{width:100%;margin:25px 0 0;font-size:.75rem;display:flex;flex-direction:row;justify-content:center}.blog-post .blog-post__data .blog-post__data--content .blog-post__meta span{margin-right:30px}.blog-post .blog-post__data .blog-post__data--content .blog-post__meta span:last-of-type{margin-right:0}.blog-post .blog-post__data .blog-post__data--content .blog-post__copy{width:100%;display:flex;flex-direction:column;align-items:center}.blog-post .blog-post__data .blog-post__data--content .blog-post__copy h2,.blog-post .blog-post__data .blog-post__data--content .blog-post__copy h3{margin:25px 0;font-size:1.2rem;font-family:"Karla",sans-serif;text-transform:unset;letter-spacing:.05rem}.blog-post .blog-post__data .blog-post__data--content .blog-post__copy p{margin-top:0;margin-bottom:25px;font-size:1rem}.blog-post.blog-post--home h2,.blog-post.blog-post--home h3{margin:25px 0;font-size:1.2rem;font-family:"Karla",sans-serif;text-transform:unset;letter-spacing:.05rem}.blog-post.blog-post--home p{margin-top:0;margin-bottom:25px;font-size:1rem}.blog-post.blog-post--home a{align-self:flex-start}.blog-post.moodboard{width:100%;margin:0;padding:5px;display:block}.blog-post.moodboard:first-of-type,.blog-post.moodboard:nth-last-of-type(2){padding-top:0}.blog-post.moodboard p{display:none}.blog-post.moodboard blockquote,.blog-post.moodboard figure{margin:0}@media(max-width: 576px){.blog-post.moodboard:nth-last-of-type(2){padding-top:5px}}.share__blog{display:flex;flex-direction:column;justify-content:start;width:100%;margin:50px auto 0 auto}@media(max-width: 576px){.share__blog{flex-direction:column;justify-content:center;width:100%;margin-top:20px}.share__blog a{margin-right:0px}}.share__blog .share__blog__links{width:100%;max-width:80%;margin:30px auto 0 0}@media(max-width: 576px){.share__blog .share__blog__links{margin-top:0;display:flex;flex-direction:column}}.share__blog .share__blog__links a{width:fit-content;margin-bottom:20px}.share__blog .share__blog__links a svg{margin-right:8px;color:#fff;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.share__blog .share__blog__links a:hover svg{color:#f92a82}.share__blog .share__blog__links a:not(:last-of-type){margin-right:20px}@media(max-width: 576px){.share__blog .share__blog__links a:not(:last-of-type){margin-right:0}}.share__blog h3{margin-top:0 !important;padding-bottom:25px !important}.post--bg-image{animation:fade-in-up 2s ease-in-out 1;width:100%;height:auto}.form{display:flex;flex-direction:column;width:100%;max-width:500px;margin-top:50px}.form .form-group{position:relative;display:flex;flex-direction:column;margin-bottom:20px}.form .form-group label{font-size:1rem;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.form .form-group input,.form .form-group textarea{height:50px;background:none;box-shadow:none;border:none;border-bottom:1px solid #fff;color:#fff;font-size:1rem;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.form .form-group input.parsley-error,.form .form-group textarea.parsley-error{border-bottom:1px solid #f92a82}.form .form-group input:disabled,.form .form-group textarea:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.form .form-group textarea{resize:vertical;padding:15px 0;font-family:"Karla",sans-serif}.form .form-group button{align-self:flex-end}.form .form-group button:disabled{cursor:not-allowed;pointer-events:none;color:#f92a82}.form .form-group ul.parsley-errors-list{list-style:none;padding:0;margin:0;position:absolute;right:0;bottom:0;opacity:1;animation:fade-in .3s 1}.form .form-group ul.parsley-errors-list li{font-size:.75rem;padding:.15rem .25rem;background:#f92a82;color:#fff}.form .content__gdprLegal{max-width:65%;margin-top:-55px}.form .content__gdprLegal p{font-size:1rem}.grid{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;margin-top:50px}.grid.social{max-width:500px}.grid.social img{height:.9rem !important;width:auto !important;margin-right:9px}.grid div{position:relative;width:calc(100% / 3);padding:45px 25px;border-bottom:1px solid #111;border-left:1px solid #111;text-align:center;background:transparent;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.grid div:nth-child(1),.grid div:nth-child(2),.grid div:nth-child(3){border-top:1px solid #111}.grid div:nth-child(3n),.grid div:last-child{border-right:1px solid #111}.grid div:hover{background:#f92a82}@media(max-width: 576px){.grid div{width:calc(100% / 2)}.grid div:nth-child(3){border-top:none}.grid div:nth-child(3n),.grid div:last-child{border-right:none}.grid div:nth-child(2n),.grid div:last-child{border-right:1px solid #111}}.grid a{position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center}.grid a:hover{border-bottom:1px solid #111}.grid a svg{margin-right:10px;fill:#111}.slick-slider{width:100%;margin-top:50px;position:relative}.slick-slider ul.slick-dots{display:flex;flex-direction:column;align-items:center;justify-content:center;list-style:none;margin:0 !important;position:absolute;z-index:1;width:40px !important;height:100%;padding-left:0px !important;left:0;top:0;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.slick-slider ul.slick-dots button{display:none}.slick-slider ul.slick-dots li{width:10px;height:10px;border-radius:10px;margin:4px 0;background:transparent;border:1px solid #fff;opacity:.5;cursor:pointer;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.slick-slider ul.slick-dots li:hover,.slick-slider ul.slick-dots li.slick-active{background:#fff;opacity:1}.body .body__section.body__section--post .toc{max-width:80%;width:100%;margin:30px auto 0 0}.body .body__section.body__section--post .toc h3{width:100%}.body .body__section.body__section--post .toc ul{list-style:none;padding-left:0;counter-reset:toc-items;float:left}.body .body__section.body__section--post .toc ul li{position:relative;margin-left:0;padding-left:45px;counter-increment:toc-items}.body .body__section.body__section--post .toc ul li:before{content:counter(toc-items, decimal-leading-zero);position:absolute;left:0;font-size:1.25rem;font-weight:700}.body .body__section.body__section--post .toc ul li.toc__this:before{color:#f92a82}.website-list{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:50px;min-height:250px}@media(max-width: 576px){.website-list{margin-top:50px}}.website-list li{width:auto;flex-basis:50%;display:flex;align-items:center;justify-content:flex-start;margin-bottom:30px;position:relative}.website-list li:before{content:"";background:#f0f0f0;width:26px;height:26px;position:absolute;top:-2px;left:-5px;border-radius:100%;z-index:-1}.website-list li p{margin:0 0 0 15px;font-size:1rem}.website-list li p a{text-decoration:underline;text-decoration-color:rgba(0,0,0,.5);text-decoration-thickness:.05em;text-underline-offset:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.website-list li p a:hover{text-decoration-color:#f92a82}.mcu-list{list-style:none;margin:100px 0 0 0 !important;padding:0 !important;max-width:100% !important;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}@media(max-width: 576px){.mcu-list{margin-top:50px !important}}.mcu-list li{position:relative;display:flex;flex-direction:column;width:48.5%;margin-bottom:30px !important;text-align:center}.mcu-list li img{border-radius:25px;margin-bottom:15px !important;box-shadow:0 4px 8px 0 rgba(0,0,0,0),0 6px 20px 0 rgba(0,0,0,0);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.mcu-list li img.nwatched{opacity:.5}.mcu-list li img:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.mcu-list li img:hover.nwatched{opacity:1}.mcu-list li span{position:absolute;right:18px;top:10px;background:#fff;color:#111;padding:4px 10px;text-transform:uppercase;letter-spacing:1px;border-radius:5px;font-size:.7rem}.mcu-list li span.status{right:auto;left:18px}.mcu-list li span.status--watched{background:#4caf50}.mcu-list li span.status--nwatched{background:#ff9800}@media(max-width: 576px){.mcu-list li{width:100%}}ul.changelog{margin-top:50px;padding-top:50px;padding-left:0;border-top:1px solid #f0f0f0;list-style:none}ul.changelog li{margin-bottom:40px;display:flex;flex-wrap:wrap;justify-content:space-between}ul.changelog li h3{width:100%;font-size:.75rem;text-transform:uppercase;margin-bottom:15px;font-family:"JetBrains Mono",monospace;font-weight:800}ul.changelog li time{width:50%}ul.changelog li span{width:40%}@media(max-width: 576px){ul.changelog li{flex-direction:column;margin-bottom:50px}ul.changelog li time,ul.changelog li span{width:100%}ul.changelog li h3{margin-bottom:30px}ul.changelog li time{margin-bottom:15px}}.twitter-tweet{margin-top:30px !important}.filter-posts{position:relative;display:flex;align-items:center;margin-bottom:30px;width:100%;order:2}@media(max-width: 576px){.filter-posts{width:calc(100% - 15px)}}.filter-posts:before{content:"";position:absolute;top:14px;left:145px;z-index:10;background-image:url(./images/filter-chevron.svg);background-size:12px;height:12px;width:12px;transform:rotate(180deg)}@media(max-width: 576px){.filter-posts:before{right:16px;left:auto}}.filter-posts select{width:170px;border:1px solid rgba(255,255,255,.4);border-radius:2px;padding:10px 16px;-webkit-appearance:none;background-color:#111;color:#fff;outline:none}@media(max-width: 576px){.filter-posts select{width:100%}}.project-image img{width:100%;height:auto}.gist{margin-top:30px;width:100%}.gist .blob-wrapper{padding:15px 0;background-color:#111}.gist .blob-wrapper .highlight{background-color:#111}.gist .blob-num:before{color:#fff !important}.gist .pl-kos{color:#fff !important}.gist .pl-smi{color:#e01a4f !important}.gist .pl-s1{color:#53b3cb !important}.gist .pl-pds,.gist .pl-s,.gist .pl-s .pl-pse .pl-s1,.gist .pl-sr,.gist .pl-sr .pl-cce,.gist .pl-sr .pl-sra,.gist .pl-sr .pl-sre{color:#f15946 !important}.gist .pl-en,.gist .pl-c1,.gist .pl-s3{color:#f9c22e !important}.gist .gist-meta{background:#111 !important;color:#fff !important}.body__section--tool h1,.body__section--tool h2,.body__section--tool h3{text-transform:unset;letter-spacing:0}@media(max-width: 576px){.body__section--tool section{padding:0;margin:0}}.body__section--tool .timeline-creation{margin-top:50px;flex-direction:column}.body__section--tool .timeline-creation div{width:100%}.body__section--tool .timeline-creation div p{margin-top:0}.body__section--tool .timeline-creation div button:before{display:none}@media(max-width: 576px){.body__section--tool .timeline-creation div{width:100%;margin:10px 0}}.body__section--tool .preview h2,.body__section--tool .preview h3{text-align:center}.body__section--tool .event-agenda{max-width:100%}.body__section--tool .event-agenda h2,.body__section--tool .event-agenda h3{font-size:1.5rem}.body__section--tool .event-agenda table tr td{background-color:transparent}body.post .footer__content{padding:50px}body.post .footer__content:before{width:calc(100% - 100px)}@media(max-width: 576px){body.post .footer__content{padding:50px 40px}body.post .footer__content:before{width:calc(100% - 80px)}} diff --git a/docs/dist/images/about.mp4 b/docs/dist/images/about.mp4 new file mode 100644 index 000000000..4b7c4590e Binary files /dev/null and b/docs/dist/images/about.mp4 differ diff --git a/docs/dist/images/about_01.jpg b/docs/dist/images/about_01.jpg new file mode 100644 index 000000000..a95507415 Binary files /dev/null and b/docs/dist/images/about_01.jpg differ diff --git a/docs/dist/images/about_02.jpg b/docs/dist/images/about_02.jpg new file mode 100644 index 000000000..1a3d200c9 Binary files /dev/null and b/docs/dist/images/about_02.jpg differ diff --git a/docs/dist/images/about_03.jpg b/docs/dist/images/about_03.jpg new file mode 100644 index 000000000..c92a33012 Binary files /dev/null and b/docs/dist/images/about_03.jpg differ diff --git a/docs/dist/images/about_04.jpg b/docs/dist/images/about_04.jpg new file mode 100644 index 000000000..d3679b3a8 Binary files /dev/null and b/docs/dist/images/about_04.jpg differ diff --git a/docs/dist/images/about_05.jpg b/docs/dist/images/about_05.jpg new file mode 100644 index 000000000..4c7e49d35 Binary files /dev/null and b/docs/dist/images/about_05.jpg differ diff --git a/docs/dist/images/about_06.jpg b/docs/dist/images/about_06.jpg new file mode 100644 index 000000000..9ed55e184 Binary files /dev/null and b/docs/dist/images/about_06.jpg differ diff --git a/docs/dist/images/android-icon-144x144.png b/docs/dist/images/android-icon-144x144.png index 296ce5ac1..c819d6872 100644 Binary files a/docs/dist/images/android-icon-144x144.png and b/docs/dist/images/android-icon-144x144.png differ diff --git a/docs/dist/images/android-icon-192x192.png b/docs/dist/images/android-icon-192x192.png index 05fffcc8c..16d0bbad5 100644 Binary files a/docs/dist/images/android-icon-192x192.png and b/docs/dist/images/android-icon-192x192.png differ diff --git a/docs/dist/images/android-icon-36x36.png b/docs/dist/images/android-icon-36x36.png index 894334f99..85dafe4c2 100644 Binary files a/docs/dist/images/android-icon-36x36.png and b/docs/dist/images/android-icon-36x36.png differ diff --git a/docs/dist/images/android-icon-48x48.png b/docs/dist/images/android-icon-48x48.png index 78bbe3764..b6f43901b 100644 Binary files a/docs/dist/images/android-icon-48x48.png and b/docs/dist/images/android-icon-48x48.png differ diff --git a/docs/dist/images/android-icon-72x72.png b/docs/dist/images/android-icon-72x72.png index afbc1a8db..f9be09188 100644 Binary files a/docs/dist/images/android-icon-72x72.png and b/docs/dist/images/android-icon-72x72.png differ diff --git a/docs/dist/images/android-icon-96x96.png b/docs/dist/images/android-icon-96x96.png index 3c9a3d532..faeed90d4 100644 Binary files a/docs/dist/images/android-icon-96x96.png and b/docs/dist/images/android-icon-96x96.png differ diff --git a/docs/dist/images/apple-icon-114x114.png b/docs/dist/images/apple-icon-114x114.png index 857987dc8..6daecb8ca 100644 Binary files a/docs/dist/images/apple-icon-114x114.png and b/docs/dist/images/apple-icon-114x114.png differ diff --git a/docs/dist/images/apple-icon-120x120.png b/docs/dist/images/apple-icon-120x120.png index 5863562b4..4de696e9c 100644 Binary files a/docs/dist/images/apple-icon-120x120.png and b/docs/dist/images/apple-icon-120x120.png differ diff --git a/docs/dist/images/apple-icon-144x144.png b/docs/dist/images/apple-icon-144x144.png index 296ce5ac1..c819d6872 100644 Binary files a/docs/dist/images/apple-icon-144x144.png and b/docs/dist/images/apple-icon-144x144.png differ diff --git a/docs/dist/images/apple-icon-152x152.png b/docs/dist/images/apple-icon-152x152.png index 079f6e61e..abae89a32 100644 Binary files a/docs/dist/images/apple-icon-152x152.png and b/docs/dist/images/apple-icon-152x152.png differ diff --git a/docs/dist/images/apple-icon-180x180.png b/docs/dist/images/apple-icon-180x180.png index 4dea7d745..f448d153d 100644 Binary files a/docs/dist/images/apple-icon-180x180.png and b/docs/dist/images/apple-icon-180x180.png differ diff --git a/docs/dist/images/apple-icon-57x57.png b/docs/dist/images/apple-icon-57x57.png index 75cb0a3be..34e89eb48 100644 Binary files a/docs/dist/images/apple-icon-57x57.png and b/docs/dist/images/apple-icon-57x57.png differ diff --git a/docs/dist/images/apple-icon-60x60.png b/docs/dist/images/apple-icon-60x60.png index dec9ff718..3930897bc 100644 Binary files a/docs/dist/images/apple-icon-60x60.png and b/docs/dist/images/apple-icon-60x60.png differ diff --git a/docs/dist/images/apple-icon-72x72.png b/docs/dist/images/apple-icon-72x72.png index afbc1a8db..f9be09188 100644 Binary files a/docs/dist/images/apple-icon-72x72.png and b/docs/dist/images/apple-icon-72x72.png differ diff --git a/docs/dist/images/apple-icon-76x76.png b/docs/dist/images/apple-icon-76x76.png index af65436cf..6176d61b1 100644 Binary files a/docs/dist/images/apple-icon-76x76.png and b/docs/dist/images/apple-icon-76x76.png differ diff --git a/docs/dist/images/apple-icon-precomposed.png b/docs/dist/images/apple-icon-precomposed.png index 211da85e5..ccb50ad87 100644 Binary files a/docs/dist/images/apple-icon-precomposed.png and b/docs/dist/images/apple-icon-precomposed.png differ diff --git a/docs/dist/images/apple-icon.png b/docs/dist/images/apple-icon.png index 211da85e5..ccb50ad87 100644 Binary files a/docs/dist/images/apple-icon.png and b/docs/dist/images/apple-icon.png differ diff --git a/docs/dist/images/brow-guide-mobile.jpg b/docs/dist/images/brow-guide-mobile.jpg index a266812d0..4656ee58b 100644 Binary files a/docs/dist/images/brow-guide-mobile.jpg and b/docs/dist/images/brow-guide-mobile.jpg differ diff --git a/docs/dist/images/brow-guide.jpg b/docs/dist/images/brow-guide.jpg index b3bc3d6d4..eff64f8a7 100644 Binary files a/docs/dist/images/brow-guide.jpg and b/docs/dist/images/brow-guide.jpg differ diff --git a/docs/dist/images/brow-guide@2x.jpg b/docs/dist/images/brow-guide@2x.jpg index 7d2feafdd..97e8f1202 100644 Binary files a/docs/dist/images/brow-guide@2x.jpg and b/docs/dist/images/brow-guide@2x.jpg differ diff --git a/docs/dist/images/favicon-16x16.png b/docs/dist/images/favicon-16x16.png index 841dfd548..8cdce70ca 100644 Binary files a/docs/dist/images/favicon-16x16.png and b/docs/dist/images/favicon-16x16.png differ diff --git a/docs/dist/images/favicon-32x32.png b/docs/dist/images/favicon-32x32.png index 333f5b1ac..7d44633d2 100644 Binary files a/docs/dist/images/favicon-32x32.png and b/docs/dist/images/favicon-32x32.png differ diff --git a/docs/dist/images/favicon-96x96.png b/docs/dist/images/favicon-96x96.png index 3c9a3d532..faeed90d4 100644 Binary files a/docs/dist/images/favicon-96x96.png and b/docs/dist/images/favicon-96x96.png differ diff --git a/docs/dist/images/favicon.ico b/docs/dist/images/favicon.ico index 5dbd6d8ca..5eaef979f 100644 Binary files a/docs/dist/images/favicon.ico and b/docs/dist/images/favicon.ico differ diff --git a/docs/dist/images/forms-mobile.jpg b/docs/dist/images/forms-mobile.jpg index ff043f45d..a8503374b 100644 Binary files a/docs/dist/images/forms-mobile.jpg and b/docs/dist/images/forms-mobile.jpg differ diff --git a/docs/dist/images/forms.jpg b/docs/dist/images/forms.jpg index a209de3e5..e9f1cac3d 100644 Binary files a/docs/dist/images/forms.jpg and b/docs/dist/images/forms.jpg differ diff --git a/docs/dist/images/forms@2x.jpg b/docs/dist/images/forms@2x.jpg index 5fd4dcbf3..fd99df1e6 100644 Binary files a/docs/dist/images/forms@2x.jpg and b/docs/dist/images/forms@2x.jpg differ diff --git a/docs/dist/images/mn-builder-mobile.jpg b/docs/dist/images/mn-builder-mobile.jpg index cbd9cdee9..1b506b404 100644 Binary files a/docs/dist/images/mn-builder-mobile.jpg and b/docs/dist/images/mn-builder-mobile.jpg differ diff --git a/docs/dist/images/mn-builder.jpg b/docs/dist/images/mn-builder.jpg index 64aa89a2f..273390fb3 100644 Binary files a/docs/dist/images/mn-builder.jpg and b/docs/dist/images/mn-builder.jpg differ diff --git a/docs/dist/images/mn-builder@2x.jpg b/docs/dist/images/mn-builder@2x.jpg index 7e0b9a382..03875443b 100644 Binary files a/docs/dist/images/mn-builder@2x.jpg and b/docs/dist/images/mn-builder@2x.jpg differ diff --git a/docs/dist/images/ms-icon-144x144.png b/docs/dist/images/ms-icon-144x144.png index 296ce5ac1..c819d6872 100644 Binary files a/docs/dist/images/ms-icon-144x144.png and b/docs/dist/images/ms-icon-144x144.png differ diff --git a/docs/dist/images/ms-icon-150x150.png b/docs/dist/images/ms-icon-150x150.png index 95ce78c60..0e10c0426 100644 Binary files a/docs/dist/images/ms-icon-150x150.png and b/docs/dist/images/ms-icon-150x150.png differ diff --git a/docs/dist/images/ms-icon-310x310.png b/docs/dist/images/ms-icon-310x310.png index 4ab52efc2..e8909b8e5 100644 Binary files a/docs/dist/images/ms-icon-310x310.png and b/docs/dist/images/ms-icon-310x310.png differ diff --git a/docs/dist/images/ms-icon-70x70.png b/docs/dist/images/ms-icon-70x70.png index 8de64acd4..46103bb4a 100644 Binary files a/docs/dist/images/ms-icon-70x70.png and b/docs/dist/images/ms-icon-70x70.png differ diff --git a/docs/dist/images/timeline-parser.jpg b/docs/dist/images/timeline-parser.jpg new file mode 100644 index 000000000..7b6eb4071 Binary files /dev/null and b/docs/dist/images/timeline-parser.jpg differ diff --git a/docs/dist/images/timeline-parser@2x.jpg b/docs/dist/images/timeline-parser@2x.jpg new file mode 100644 index 000000000..82a5b37f7 Binary files /dev/null and b/docs/dist/images/timeline-parser@2x.jpg differ diff --git a/docs/dist/images/training-dates-widget-mobile.jpg b/docs/dist/images/training-dates-widget-mobile.jpg index 53e96d987..1bb04674d 100644 Binary files a/docs/dist/images/training-dates-widget-mobile.jpg and b/docs/dist/images/training-dates-widget-mobile.jpg differ diff --git a/docs/dist/images/training-dates-widget.jpg b/docs/dist/images/training-dates-widget.jpg index cd3a0984e..a876146a5 100644 Binary files a/docs/dist/images/training-dates-widget.jpg and b/docs/dist/images/training-dates-widget.jpg differ diff --git a/docs/dist/images/training-dates-widget@2x.jpg b/docs/dist/images/training-dates-widget@2x.jpg index d40ecf27c..6ddcb0e1c 100644 Binary files a/docs/dist/images/training-dates-widget@2x.jpg and b/docs/dist/images/training-dates-widget@2x.jpg differ diff --git a/docs/dist/images/treatment-calculator-mobile.jpg b/docs/dist/images/treatment-calculator-mobile.jpg index b4b45ff2c..5a283cf9f 100644 Binary files a/docs/dist/images/treatment-calculator-mobile.jpg and b/docs/dist/images/treatment-calculator-mobile.jpg differ diff --git a/docs/dist/images/treatment-calculator.jpg b/docs/dist/images/treatment-calculator.jpg index 0fce5b57f..0ee26731f 100644 Binary files a/docs/dist/images/treatment-calculator.jpg and b/docs/dist/images/treatment-calculator.jpg differ diff --git a/docs/dist/images/treatment-calculator@2x.jpg b/docs/dist/images/treatment-calculator@2x.jpg index d9bd788ea..bca37860f 100644 Binary files a/docs/dist/images/treatment-calculator@2x.jpg and b/docs/dist/images/treatment-calculator@2x.jpg differ diff --git a/docs/index.html b/docs/index.html index 42b39dd5d..957fc7aba 100644 --- a/docs/index.html +++ b/docs/index.html @@ -32,26 +32,26 @@ - - Daniel Canetti • A Yorkshire based Front-end Web Developer. - + + Daniel Canetti • A Yorkshire based front-end developer + - - + + - - + + @@ -63,8 +63,6 @@ Dan. - Work - Blog @@ -75,10 +73,8 @@ - Work - Blog + About Tools - Contact Inspiration @@ -88,114 +84,227 @@ +Daniel Canetti. Operations Manager and hobbying developer + - - - + + + + + + + A 2021 guide to Eleventy + + A follow-up to my 2019 article, A complete guide to Eleventy, with updates about webpack and my boilerplate. + + Read post - A Front-end Web Developer living and working in Yorkshire, England. Currently the front-end developer for Nouveau HD Beauty Group, a permanent makeup training company. - - - Work. - - - - - - Nouveau Lashes - A series of updates across the site to bring in a design and update the build. - - - + + + + Marvel Cinematic Universe - - - - K.B Pro - A ground-up rebuild on the latest version of WordPress wrapped around a recently re-skinned Magento store. - - - + Although I'm a big fan of the Marvel MCU, I've ... - - - - Emerald Kitchens - I took up the challenge to redesign and rebuild the site, focussing on encouraging users to get in touch or pick up the phone. - - - + Read post + + + + + A year in review - - - - Align Growth Summit - This annual event had a facelift for 2020 as well as some last minute changes due to the Covid-19 Pandemic. - - - + 2020 is a year to forget in most aspects, howev... + Read post - View All - - - Blog. - - - - - - - Marvel Cinematic Universe - Although I'm a big fan of the Marvel MCU, I've never seen all the movies and I'm making it a goal of 2021 to see them all. - - - + + + + GitHub Actions Hackathon - - - - A year in review - 2020 is a year to forget in most aspects, however danielcanetti.com has seen some major improvements and I've learnt some valuable new skills along the way. - - - + Dev.to teamed up with GitHub to put on a hackat... - - - - GitHub Actions Hackathon - Dev.to teamed up with GitHub to put on a hackathon based on building and sharing GitHub Actions. I took part and logged my progress as I went along for this series. - - - + Read post + + + + + Host an Eleventy site on Github Pages - - - - Host an Eleventy site on Github Pages - Host your Eleventy site for free on Github pages. - - - + Host your Eleventy site for free on Github pages. + + Read post + + + + + Coniston Water + + After all the chaos and uncertainty in early 20... + + Read post + + + + + How to run WordPress locally on Mac using Valet + + Create and run WordPress websites directly from... + + Read post + + + + + Github Pages + + Github pages allows you to host your site direc... + + Read post + + + + + Project Management Tools + + To try and save some people mucking about as I ... + + Read post + + + + + 0 to WordPress in 4 minutes + + Go from nothing to a working local WordPress si... + + Read post + + + + + A complete guide to Eleventy + + From installation to continuous deployment - ev... + Read post - View All + + + + Installing Craft CMS in Homestead + + An extract from a larger guide I’m working on f... + + Read post + + + + + No CSS or JS on Magento 2 + + I’ve recently looked at setting up Magento 2 wi... + + Read post + + + + + 2019 Reading List + + I'm really into business and start-up books at ... + + Read post + + + + + 2019 Setup + + Everyone works differently and I love it. I fol... + + Read post + + + + + My Favourite Grand Designs + + Grand Designs is one of the staple design and a... + + Read post + + + + + Email Isn't Broken + + We all hate email, it's our never ending to do ... + + Read post + + + + + Wordpressify + + A step-by-step guide to setting up WordPressify... + + Read post + + + + + GitLab Pages + + GitLab pages allow you to publish static websit... + + Read post + + + + + How a mentor leaving can inspire you + + Rather than letting the loss of a mentor hinder... + + Read post + + + + + Being a woman in tech sucks + + I’m a man and in 2015 I tried to find out what ... + + Read post + + + + + Advice for web development students + + The following three things will help the transi... + + Read post + + + diff --git a/docs/netlify.toml b/docs/netlify.toml new file mode 100644 index 000000000..47912c9d9 --- /dev/null +++ b/docs/netlify.toml @@ -0,0 +1,6 @@ +... + +[[redirects]] + from = "https://analytics.danielcanetti.com/*" + to = "https://dan-canetti-analytics.herokuapp.com/:splat" + status = 200 \ No newline at end of file diff --git a/docs/sitemap.xml b/docs/sitemap.xml index b6c916fb8..ffe70693a 100644 --- a/docs/sitemap.xml +++ b/docs/sitemap.xml @@ -9,10 +9,18 @@ /blog/being-a-woman-in-tech-sucks/ + + /work/marketing-news-builder/ + + /blog/how-a-mentor-leaving-can-inspire-you/ + + /work/emerald-kitchens/ + + /blog/gitlab-pages/ @@ -49,6 +57,10 @@ /blog/a-complete-guide-to-eleventy/ + + /work/kb-pro/ + + /blog/0-to-wordpress-in-4-minutes/ @@ -77,71 +89,43 @@ /blog/github-actions-hackathon/ - - /404.html - - - - /blog/ - - - - /contact/ - - - - / - - - - /work/ - - /work/nouveau-lashes/ - /work/kb-pro/ - - - - /work/townscaper-community/ - - - - /work/emerald-kitchens/ + /404.html - /work/align-growth-summit/ + / - /work/canetti-codes/ + /awesome-sites/ - /work/marketing-news-builder/ + /changelog/ - /awesome-sites/ + /blog/year-in-review-2020/ - /changelog/ + /blog/marvel-cinematic-universe/ - /blog/year-in-review-2020/ + /tools/ - /blog/marvel-cinematic-universe/ + /blog/eleventy-2021/ - /tools/ + /about/ \ No newline at end of file diff --git a/docs/tools/agenda-csv-parser/index.html b/docs/tools/agenda-csv-parser/index.html index 5a9f7d816..f5fb02438 100644 --- a/docs/tools/agenda-csv-parser/index.html +++ b/docs/tools/agenda-csv-parser/index.html @@ -1,26 +1,8 @@ - - + + - Daniel Canetti • Tools • Agenda/Time Parser - - - - - - - - - - - - - - - - - - + @@ -30,7 +12,7 @@ - + @@ -38,20 +20,76 @@ + + + + + + + + + + + Daniel Canetti • Tools • Agenda/Time Parser + + + + + + + + + + + + + + + - + - Dan's Tools. - - Home - Back to tools + Dan. + + + + + + + + + + + + About + Tools + Inspiration + + + + - + + + Timeline Parser - - Timeline Parser + + Timeline Parser + A responsive event agenda/timeline CVS parser. + + Home / Tools / Timeline Parser + @@ -72,14 +110,15 @@ Timeline Parser - + - Agenda/Timeline Preview + Preview Your Agenda/Timeline Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit dui nec facilisis porttitor. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit dui nec + facilisis porttitor. @@ -90,6 +129,7 @@ Your Agenda/Timeline Name + @@ -97,14 +137,19 @@ Your Agenda/Timeline Name diff --git a/docs/tools/index.html b/docs/tools/index.html index 5756d7489..e04aac8aa 100644 --- a/docs/tools/index.html +++ b/docs/tools/index.html @@ -23,14 +23,14 @@ - + Daniel Canetti • Tools @@ -52,10 +52,8 @@ - Dan's Tools. + Dan. - Work - Blog @@ -66,10 +64,8 @@ - Work - Blog + About Tools - Contact Inspiration @@ -80,26 +76,18 @@ Tools - - - - - - - - - - - - Tool - 2021 - - - Agenda/Timeline Parser - - + + + Tools + Useful development tools I've built over the years. + + + + Agenda/Timeline Parser + A responsive event agenda/timeline CVS parser. + View tool - + @@ -107,14 +95,14 @@ Agenda/Timeline Parser diff --git a/docs/work/align-growth-summit/index.html b/docs/work/align-growth-summit/index.html index e3c391fbe..6b7bcf9ab 100644 --- a/docs/work/align-growth-summit/index.html +++ b/docs/work/align-growth-summit/index.html @@ -23,7 +23,7 @@ @@ -31,31 +31,31 @@ + Daniel Canetti • - Daniel Canetti • Align Growth Summit - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - + Dan. - Work - Blog @@ -66,10 +66,8 @@ - Work - Blog + About Tools - Contact Inspiration @@ -78,21 +76,18 @@ - - + - Home / Work / Align Growth Summit + Home / Blog / - - - Align Growth Summit - + + - Jamstack - Visit Repo + December 05, 2020 + + - As part of my freelance work I created this site for the Annual Align Growth Summit event, this 2020 version had a facelift as well as some last minute changes due to the Covid-19 Pandemic. Registration was handled by a third-party and this brochure site just linked away to that. Agenda The agenda is very similar to a timeline, so much so that I'm currently working on open-sourcing so a CSV can be parsed into an agenda or timeline. It's still early days and there's much to do. @@ -103,18 +98,17 @@ Speakers - Share: Align Growth Summit + Share: - - Share on Facebook + + Facebook + + + Twitter - - - Share on Twitter + + Buy me a Coffee - @@ -124,14 +118,14 @@ Share: Align Growth Summit diff --git a/docs/work/canetti-codes/index.html b/docs/work/canetti-codes/index.html index 2b9200009..d6bfa34ff 100644 --- a/docs/work/canetti-codes/index.html +++ b/docs/work/canetti-codes/index.html @@ -23,7 +23,7 @@ @@ -31,31 +31,31 @@ + Daniel Canetti • - Daniel Canetti • Canetti Codes - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - + Dan. - Work - Blog @@ -66,10 +66,8 @@ - Work - Blog + About Tools - Contact Inspiration @@ -78,38 +76,34 @@ - - + - Home / Work / Canetti Codes + Home / Blog / - - - Canetti Codes - + + - Jamstack - Visit Repo + December 06, 2020 + + - A little Jamstack site I built to try and expand my freelance work, at the moment I've decided to pause any freelance and focus on upskilling and enjoying my time outside of work on non-work related activities. As such, the site is currently offline and domain redirects back here (danielcanetti.com). - Share: Canetti Codes + Share: - - Share on Facebook + + Facebook + + + Twitter - - - Share on Twitter + + Buy me a Coffee - @@ -119,14 +113,14 @@ Share: Canetti Codes diff --git a/docs/work/eleventy-barebones/index.html b/docs/work/eleventy-barebones/index.html deleted file mode 100644 index e69de29bb..000000000 diff --git a/docs/work/emerald-kitchens/index.html b/docs/work/emerald-kitchens/index.html index 83d483fab..8ca0a8941 100644 --- a/docs/work/emerald-kitchens/index.html +++ b/docs/work/emerald-kitchens/index.html @@ -23,39 +23,39 @@ - + + Daniel Canetti • Emerald Kitchens - Daniel Canetti • Emerald Kitchens - - - - - - - - - - - - - + + + + + + + + + + + + + + + - + Dan. - Work - Blog @@ -66,10 +66,8 @@ - Work - Blog + About Tools - Contact Inspiration @@ -79,20 +77,20 @@ - - Home / Work / Emerald Kitchens + Home / About / Work / Emerald Kitchens - - + Emerald Kitchens - - WordPress - Visit Site + October 10, 2018 + WordPress + + Visit + + - Emerald Kitchens was due a website update to fit with it's new branding and diversified product offerings. I took up the challenge to redesign and rebuild the site, focussing on encouraging users to get in touch or pick up the phone. What's been done The previous design was dark, difficult to navigate and hid some of the most interesting areas of the site on the secondary pages. For the new site the emphasis is now on kitchen installation, with Emerald Kitchens' unique three option approach clearly visible on the homepage and a brighter more inviting colour pallete. Continuing with the simplistic theme, the navigation focusses on the key areas the company offers and the use of a burger menu allows for more options to be added in future without compromising the design of the site. @@ -102,16 +100,15 @@ What's been done Share: Emerald Kitchens - - Share on Facebook + + Facebook + + + Twitter - - - Share on Twitter + + Buy me a Coffee - @@ -121,14 +118,14 @@ Share: Emerald Kitchens diff --git a/docs/work/index.html b/docs/work/index.html deleted file mode 100644 index a8fda2b36..000000000 --- a/docs/work/index.html +++ /dev/null @@ -1,256 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Daniel Canetti • Work - - - - - - - - - - - - - - - - - - - - - Dan's Work. - - Work - Blog - - - - - - - - - - - Work - Blog - Tools - Contact - Inspiration - - - - - - - - Work - - - - - - - - - - - - - - - - Wordpress - Live - - - Nouveau Lashes - - - - - - - - - - - - - - - - - - - Wordpress - Live - - - K.B Pro - - - - - - - - - - - - - - - - - WordPress - Live - - - Townscaper Community - - - - - - - - - - - - - - - - - WordPress - Live - - - Emerald Kitchens - - - - - - - - - - - - - - - - - - - Jamstack - Archived - - - Align Growth Summit - - - - - - - - - - - - - - - - - Jamstack - Archived - - - Canetti Codes - - - - - - - - - - - - - - - - - Javascript - Archived - - - Marketing News Builder - - - - - - - - - - - diff --git a/docs/work/kb-pro/index.html b/docs/work/kb-pro/index.html index f81e5dc8d..66ceae522 100644 --- a/docs/work/kb-pro/index.html +++ b/docs/work/kb-pro/index.html @@ -23,39 +23,39 @@ - + + Daniel Canetti • K.B Pro - Daniel Canetti • K.B Pro - - - - - - - - - - - - - + + + + + + + + + + + + + + + - + Dan. - Work - Blog @@ -66,10 +66,8 @@ - Work - Blog + About Tools - Contact Inspiration @@ -79,20 +77,20 @@ - - Home / Work / K.B Pro + Home / About / Work / K.B Pro - - + K.B Pro - - Wordpress - Visit Site + January 10, 2020 + WordPress + + Visit + + - A ground-up rebuild on the latest version of WordPress wrapped around a recently re-skinned Magento store. The site was built working closely with the designers at every stage of the build. Training Dates The training dates page pulls from an api endpoint, this is essentially the full-page version of the Nouveau Lashes Training Dates Widget. @@ -131,16 +129,15 @@ Glider Launch Share: K.B Pro - - Share on Facebook + + Facebook + + + Twitter - - - Share on Twitter + + Buy me a Coffee - @@ -150,14 +147,14 @@ Share: K.B Pro diff --git a/docs/work/marketing-news-builder/index.html b/docs/work/marketing-news-builder/index.html index 869988b8c..4f5a6dd99 100644 --- a/docs/work/marketing-news-builder/index.html +++ b/docs/work/marketing-news-builder/index.html @@ -23,39 +23,39 @@ - + + Daniel Canetti • Marketing News Builder - Daniel Canetti • Marketing News Builder - - - - - - - - - - - - - + + + + + + + + + + + + + + + - + Dan. - Work - Blog @@ -66,10 +66,8 @@ - Work - Blog + About Tools - Contact Inspiration @@ -79,20 +77,20 @@ - - Home / Work / Marketing News Builder + Home / About / Work / Marketing News Builder - - + Marketing News Builder - - Javascript - Visit Repo + June 07, 2016 + Javascript - Archived + + Visit + + - A tool quickly developed in jQuery to allow the marketing team to create the weekly newsletter by adding standard sections in order and exporting the code. The newsletter consisted of the same content blocks each week which were almost all always a title section followed by a text section and some buttons. It was dropped together into a template each week so to save time I quickly created the MN (Marketing News) Builder to allow the marketing team to put this together themselves. @@ -103,26 +101,25 @@ Marketing News Builder - + How it works The builder just uses jQuery to append each option into a table and the newsletter is built up row by row. The header and footer didn't change so the content was dropped within these elements. Once complete the user can generate and then copy the code for the newsleter and drop it into ICM, the tool we used to send out our maketing emails, here the text can be updated for the week and images/links changed for the buttons. - + Share: Marketing News Builder - - Share on Facebook + + Facebook + + + Twitter - - - Share on Twitter + + Buy me a Coffee - @@ -132,14 +129,14 @@ Share: Marketing News Builder diff --git a/docs/work/nouveau-lashes/index.html b/docs/work/nouveau-lashes/index.html index 979cba23c..465af6ae7 100644 --- a/docs/work/nouveau-lashes/index.html +++ b/docs/work/nouveau-lashes/index.html @@ -23,39 +23,39 @@ - + + Daniel Canetti • Nouveau Lashes - Daniel Canetti • Nouveau Lashes - - - - - - - - - - - - - + + + + + + + + + + + + + + + - + Dan. - Work - Blog @@ -66,10 +66,8 @@ - Work - Blog + About Tools - Contact Inspiration @@ -79,20 +77,20 @@ - - Home / Work / Nouveau Lashes + Home / About / Work / Nouveau Lashes - - + Nouveau Lashes - - Wordpress - Visit Site + October 05, 2020 + WordPress + + Visit + + - Following the successful release of the new e-commerce store, Nouveau Lashes began to update the WordPress end of the website. The site is being worked on section by section and by working closeley with the designers the changes are clearly a vast improvement. @@ -132,16 +130,15 @@ Webforms Share: Nouveau Lashes - - Share on Facebook + + Facebook + + + Twitter - - - Share on Twitter + + Buy me a Coffee - @@ -151,14 +148,14 @@ Share: Nouveau Lashes diff --git a/docs/work/townscaper-community/index.html b/docs/work/townscaper-community/index.html index f7efeaf99..06ec80cf4 100644 --- a/docs/work/townscaper-community/index.html +++ b/docs/work/townscaper-community/index.html @@ -23,7 +23,7 @@ @@ -31,31 +31,31 @@ + Daniel Canetti • - Daniel Canetti • Townscaper Community - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - + Dan. - Work - Blog @@ -66,10 +66,8 @@ - Work - Blog + About Tools - Contact Inspiration @@ -78,21 +76,18 @@ - - + - Home / Work / Townscaper Community + Home / Blog / - - - Townscaper Community - + + - WordPress - Visit Site + December 03, 2020 + + - A simple Wordpress site built to allow users to save and share their Townscaper builds with one another. Recent changes include a redesign of the homepage to incorporate a Twitter feed and moving the community submissions to a sub-page. Community Submissions In the early days of Townscaper there was no option to save or share towns. Once created a user could copy some code which was the town and would have to save it in a text doc and share via the forums on Steam. I had the idea to create a simple site which would allow users to upload the code and a screenshot and share their site with others, additionally allowing them to come back and grab the code whenever they like. @@ -100,18 +95,17 @@ Community Submissions - Share: Townscaper Community + Share: - - Share on Facebook + + Facebook + + + Twitter - - - Share on Twitter + + Buy me a Coffee - @@ -121,14 +115,14 @@ Share: Townscaper Community diff --git a/docs/work/wordpress-plugin-icons/index.html b/docs/work/wordpress-plugin-icons/index.html deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/_redirects b/src/_redirects new file mode 100755 index 000000000..89dff4a9a --- /dev/null +++ b/src/_redirects @@ -0,0 +1,112 @@ +# These rules will change if you change your site’s custom domains or HTTPS settings + +# Redirect default Netlify subdomain to primary domain +https://danielcanetti.netlify.com/* https://danielcanetti.com/:splat 301! + +# Redirect beta subdomain to primary domain +https://beta.danielcanetti.com/* https://danielcanetti.com/:splat 301! + +# Simplified design +https://danielcanetti.com/blog/ https://danielcanetti.com/ 302! +https://danielcanetti.com/contact/ https://danielcanetti.com/blog/ 302! +https://danielcanetti.com/work/ https://danielcanetti.com/about/ 302! +https://danielcanetti.com/work/townscaper-community/ https://danielcanetti.com/about/ 302! +https://danielcanetti.com/case-studies/emerald-kitchens/ https://danielcanetti.com/work/emerald-kitchens/ 301! +https://danielcanetti.com/work/align-growth-summit/ https://danielcanetti.com/about/ 302! +https://danielcanetti.com/work/canetti-codes/ https://danielcanetti.com/about/ 302! + +# 2020 Redirects +https://danielcanetti.com/current-setup/ https://danielcanetti.com/blog/2019-setup/ 301! +https://danielcanetti.com/recommended-reading/ https://danielcanetti.com/blog/2019-reading-list/ 301! +https://danielcanetti.com/moodboard/ https://danielcanetti.com/blog/ 301! + +# Historical Redirects +https://danielcanetti.com/wordpressify https://danielcanetti.com/blog/wordpressify/ 301! +https://danielcanetti.com/gitlab-pages https://danielcanetti.com/blog/gitlab-pages/ 301! +https://danielcanetti.com/weekly-creative-inspiration/ https://danielcanetti.com/blog/ 301! +https://danielcanetti.com/no-access https://danielcanetti.com/ 301! +https://danielcanetti.com/books https://danielcanetti.com/blog/recommended-reading/ 301! +https://danielcanetti.com/contact https://danielcanetti.com/ 301! +https://danielcanetti.com/case-studies https://danielcanetti.com/ 301! +https://danielcanetti.com/work/fit4it-fitness https://danielcanetti.com/ 301! +http://danielcanetti.com/case_studies/qconnect/ https://danielcanetti.com/ 301! +http://danielcanetti.com/web-design-inspiration-15/ https://danielcanetti.com/blog/ 301! +https://danielcanetti.com/Gear https://danielcanetti.com/blog/current-setup/ 301! +https://danielcanetti.com/about https://danielcanetti.com/ 301! +https://danielcanetti.com/asr.html https://danielcanetti.com/ 301! +https://danielcanetti.com/being-a-woman-in-tech-sucks https://danielcanetti.com/blog/being-a-woman-in-tech-sucks/ 301! +https://danielcanetti.com/case-studies/fit4it-fitness/ https://danielcanetti.com/ 301! +https://danielcanetti.com/case-studies/green-light-event-ireland/ https://danielcanetti.com/ 301! +https://danielcanetti.com/case-studies/k-b-pro-shop https://danielcanetti.com/case-studies/kbpro-shop/ 301! +https://danielcanetti.com/case-studies/k-b-pro-shop/ https://danielcanetti.com/case-studies/kbpro-shop/ 301! +https://danielcanetti.com/case-studies/q-connect https://danielcanetti.com/ 301! +https://danielcanetti.com/case_studies/wharncliffe/ https://danielcanetti.com/case-studies/wharncliffe-business-systems/ 301! +https://danielcanetti.com/category/coding-tips-and-tutorials https://danielcanetti.com/blog/ 301! +https://danielcanetti.com/category/coding-tips-and-tutorials/feed https://danielcanetti.com/blog/ 301! +https://danielcanetti.com/email-isnt-broken https://danielcanetti.com/blog/email-isnt-broken/ 301! +https://danielcanetti.com/how-a-mentor-leaving-can-inspire-you https://danielcanetti.com/blog/how-a-mentor-leaving-can-inspire-you/ 301! +https://danielcanetti.com/my-favourite-grand-designs https://danielcanetti.com/blog/my-favourite-grand-designs/ 301! +https://danielcanetti.com/no-access//feed/ https://danielcanetti.com/ 301! +https://danielcanetti.com/privacy-policy https://danielcanetti.com/ 301! +https://danielcanetti.com/privacy-policy/ https://danielcanetti.com/ 301! +https://danielcanetti.com/privacy-policy/feed https://danielcanetti.com/ 301! +https://danielcanetti.com/projects https://danielcanetti.com/work/ 301! +https://danielcanetti.com/tag/architecture https://danielcanetti.com/ 301! +https://danielcanetti.com/tag/architecture/feed https://danielcanetti.com/ 301! +https://danielcanetti.com/tag/ci-cd https://danielcanetti.com 301! +https://danielcanetti.com/tag/ci-cd/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/coding https://danielcanetti.com 301! +https://danielcanetti.com/tag/coding/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/email https://danielcanetti.com 301! +https://danielcanetti.com/tag/email/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/equality https://danielcanetti.com 301! +https://danielcanetti.com/tag/equality/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/etiquette https://danielcanetti.com 301! +https://danielcanetti.com/tag/etiquette/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/girls-who-code https://danielcanetti.com 301! +https://danielcanetti.com/tag/girls-who-code/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/git https://danielcanetti.com 301! +https://danielcanetti.com/tag/git/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/graduation https://danielcanetti.com 301! +https://danielcanetti.com/tag/graduation/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/grand-designs https://danielcanetti.com 301! +https://danielcanetti.com/tag/grand-designs/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/houses https://danielcanetti.com 301! +https://danielcanetti.com/tag/houses/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/interior-design https://danielcanetti.com 301! +https://danielcanetti.com/tag/interior-design/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/mentor https://danielcanetti.com 301! +https://danielcanetti.com/tag/mentor/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/mentorship https://danielcanetti.com 301! +https://danielcanetti.com/tag/mentorship/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/office https://danielcanetti.com 301! +https://danielcanetti.com/tag/office/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/sexism https://danielcanetti.com 301! +https://danielcanetti.com/tag/sexism/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/skills https://danielcanetti.com 301! +https://danielcanetti.com/tag/skills/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/university https://danielcanetti.com 301! +https://danielcanetti.com/tag/university/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/version-control https://danielcanetti.com 301! +https://danielcanetti.com/tag/version-control/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/web-development https://danielcanetti.com 301! +https://danielcanetti.com/tag/web-development/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/women-in-tech https://danielcanetti.com 301! +https://danielcanetti.com/tag/women-in-tech/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/wordpress https://danielcanetti.com 301! +https://danielcanetti.com/tag/wordpress/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/work https://danielcanetti.com 301! +https://danielcanetti.com/tag/work-life https://danielcanetti.com 301! +https://danielcanetti.com/tag/work-life/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/work/feed https://danielcanetti.com 301! +https://danielcanetti.com/tag/workflow https://danielcanetti.com 301! +https://danielcanetti.com/tag/workflow/feed https://danielcanetti.com 301! +https://danielcanetti.com/three-things-web-development-students-should-learn-before-graduation https://danielcanetti.com/blog/three-things-web-development-students-should-learn-before-graduation/ 301! +https://danielcanetti.com/web-design-inspiration-31/ https://danielcanetti.com/blog/ 301! +https://danielcanetti.com/web-design-inspiration-34/ https://danielcanetti.com/blog/ 301! +https://danielcanetti.com/work-with-me https://danielcanetti.com/ 301! +https://danielcanetti.com/work/emerald-kitchens https://danielcanetti.com/case-studies/emerald-kitchens/ 301! +https://danielcanetti.com/work/green-light-event-ireland https://danielcanetti.com/ 301! +https://danielcanetti.com/work/k-b-pro-shop https://danielcanetti.com/case-studies/kbpro-shop/ 301! +https://danielcanetti.com/work/q-connect https://danielcanetti.com/ 301! +https://danielcanetti.com/work/wharncliffe-business-systems https://danielcanetti.com/case-studies/wharncliffe-business-systems/ 301! diff --git a/src/content/blog.html b/src/archive/blog.html similarity index 100% rename from src/content/blog.html rename to src/archive/blog.html diff --git a/src/content/contact.html b/src/archive/contact.html similarity index 100% rename from src/content/contact.html rename to src/archive/contact.html diff --git a/src/content/_includes/moodboard.liquid b/src/archive/moodboard.liquid similarity index 100% rename from src/content/_includes/moodboard.liquid rename to src/archive/moodboard.liquid diff --git a/src/content/work.html b/src/archive/work.html similarity index 100% rename from src/content/work.html rename to src/archive/work.html diff --git a/src/content/work/align-growth-summit.md b/src/archive/work/align-growth-summit.md similarity index 100% rename from src/content/work/align-growth-summit.md rename to src/archive/work/align-growth-summit.md diff --git a/src/content/work/canetti-codes.md b/src/archive/work/canetti-codes.md similarity index 100% rename from src/content/work/canetti-codes.md rename to src/archive/work/canetti-codes.md diff --git a/src/content/work/townscaper-community.md b/src/archive/work/townscaper-community.md similarity index 100% rename from src/content/work/townscaper-community.md rename to src/archive/work/townscaper-community.md diff --git a/src/assets/icon.png b/src/assets/icon.png new file mode 100644 index 000000000..045aef607 Binary files /dev/null and b/src/assets/icon.png differ diff --git a/src/content/404.html b/src/content/404.html index 51adab872..6f735cedc 100755 --- a/src/content/404.html +++ b/src/content/404.html @@ -1,14 +1,15 @@ --- layout: sub.liquid -pageTitle: Missing +pageTitle: 404 • Page Not Found pageClass: sub pageExcerpt: Looks like you're a bit lost permalink: 404.html --- - - - Looks like this page is away having a beer. - Show me the way to go home + + + + That doesn't exsist! +
A follow-up to my 2019 article, A complete guide to Eleventy, with updates about webpack and my boilerplate.
A series of updates across the site to bring in a design and update the build.
A ground-up rebuild on the latest version of WordPress wrapped around a recently re-skinned Magento store.
Although I'm a big fan of the Marvel MCU, I've ...
I took up the challenge to redesign and rebuild the site, focussing on encouraging users to get in touch or pick up the phone.
This annual event had a facelift for 2020 as well as some last minute changes due to the Covid-19 Pandemic.
2020 is a year to forget in most aspects, howev...
2020 is a year to forget in most aspects, however danielcanetti.com has seen some major improvements and I've learnt some valuable new skills along the way.
Dev.to teamed up with GitHub to put on a hackat...
Dev.to teamed up with GitHub to put on a hackathon based on building and sharing GitHub Actions. I took part and logged my progress as I went along for this series.
Host your Eleventy site for free on Github pages.
After all the chaos and uncertainty in early 20...
Create and run WordPress websites directly from...
Github pages allows you to host your site direc...
To try and save some people mucking about as I ...
Go from nothing to a working local WordPress si...
From installation to continuous deployment - ev...
An extract from a larger guide I’m working on f...
I’ve recently looked at setting up Magento 2 wi...
I'm really into business and start-up books at ...
Everyone works differently and I love it. I fol...
Grand Designs is one of the staple design and a...
We all hate email, it's our never ending to do ...
A step-by-step guide to setting up WordPressify...
GitLab pages allow you to publish static websit...
Rather than letting the loss of a mentor hinder...
I’m a man and in 2015 I tried to find out what ...
The following three things will help the transi...
A responsive event agenda/timeline CVS parser.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit dui nec facilisis porttitor. +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit dui nec + facilisis porttitor.
Useful development tools I've built over the years.
As part of my freelance work I created this site for the Annual Align Growth Summit event, this 2020 version had a facelift as well as some last minute changes due to the Covid-19 Pandemic. Registration was handled by a third-party and this brochure site just linked away to that.
The agenda is very similar to a timeline, so much so that I'm currently working on open-sourcing so a CSV can be parsed into an agenda or timeline. It's still early days and there's much to do.
A little Jamstack site I built to try and expand my freelance work, at the moment I've decided to pause any freelance and focus on upskilling and enjoying my time outside of work on non-work related activities. As such, the site is currently offline and domain redirects back here (danielcanetti.com).
Emerald Kitchens was due a website update to fit with it's new branding and diversified product offerings. I took up the challenge to redesign and rebuild the site, focussing on encouraging users to get in touch or pick up the phone.
The previous design was dark, difficult to navigate and hid some of the most interesting areas of the site on the secondary pages. For the new site the emphasis is now on kitchen installation, with Emerald Kitchens' unique three option approach clearly visible on the homepage and a brighter more inviting colour pallete. Continuing with the simplistic theme, the navigation focusses on the key areas the company offers and the use of a burger menu allows for more options to be added in future without compromising the design of the site.
A ground-up rebuild on the latest version of WordPress wrapped around a recently re-skinned Magento store. The site was built working closely with the designers at every stage of the build.
The training dates page pulls from an api endpoint, this is essentially the full-page version of the Nouveau Lashes Training Dates Widget.
A tool quickly developed in jQuery to allow the marketing team to create the weekly newsletter by adding standard sections in order and exporting the code.
The newsletter consisted of the same content blocks each week which were almost all always a title section followed by a text section and some buttons. It was dropped together into a template each week so to save time I quickly created the MN (Marketing News) Builder to allow the marketing team to put this together themselves.
The builder just uses jQuery to append each option into a table and the newsletter is built up row by row. The header and footer didn't change so the content was dropped within these elements.
Once complete the user can generate and then copy the code for the newsleter and drop it into ICM, the tool we used to send out our maketing emails, here the text can be updated for the week and images/links changed for the buttons.
Following the successful release of the new e-commerce store, Nouveau Lashes began to update the WordPress end of the website. The site is being worked on section by section and by working closeley with the designers the changes are clearly a vast improvement.
A simple Wordpress site built to allow users to save and share their Townscaper builds with one another. Recent changes include a redesign of the homepage to incorporate a Twitter feed and moving the community submissions to a sub-page.
In the early days of Townscaper there was no option to save or share towns. Once created a user could copy some code which was the town and would have to save it in a text doc and share via the forums on Steam. I had the idea to create a simple site which would allow users to upload the code and a screenshot and share their site with others, additionally allowing them to come back and grab the code whenever they like.