Add initial version of the site

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8

.gitignore

@@ -1,4 +1,5 @@
+.DS_Store
 .build
 build
 web_modules
-node_modules
+node_modules

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": true,
+  "eslint.enable": true,
+  "javascript.validate.enable": false,
+  "css.validate": false
+}

package.json

@@ -10,8 +10,13 @@
     "@snowpack/app-scripts-svelte": "^0.6.1",
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/svelte": "^3.0.0",
+    "autoprefixer": "^9.8.0",
+    "cssnano": "^4.1.10",
     "jest": "^25.4.0",
+    "parcel-bundler": "^1.12.4",
+    "postcss-cli": "^7.1.1",
     "snowpack": "^2.0.0-0",
-    "svelte": "^3.21.0"
+    "svelte": "^3.21.0",
+    "tailwindcss": "^1.4.6"
   }
 }

postcss.config.js

@@ -0,0 +1,9 @@
+const tailwind = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+
+const plugins = process.env.NODE_ENV === 'production'
+	? [tailwind, autoprefixer, cssnano]
+	: [tailwind, autoprefixer];
+
+module.exports = { plugins };

snowpack.config.json

@@ -1,6 +1,8 @@
 {
   "extends": "@snowpack/app-scripts-svelte",
-  "scripts": {},
+  "scripts": {
+    "build:css": "postcss"
+  },
   "devOptions": {},
   "installOptions": {}
 }

src/App.svelte

@@ -1,57 +1,49 @@
 <script>
-	const message = 'Learn Svelte';
+  import { fade } from "svelte/transition";
+  import One from "./steps/One";
+  import Two from "./steps/Two";
+  import "./main.css";
+  let step = 0;
+
+  setTimeout(() => {
+    step = 1;
+  });
+
+  const handleClick = () => {
+    step = 1;
+  };
 </script>
 
 <style>
-	:global(body) {
-		margin: 0;
-		font-family: Arial, Helvetica, sans-serif;
-	}
-	.App {
-		text-align: center;
-	}
-	.App-header {
-		background-color: #F9F6F6;
-		color: #333;
-		min-height: 100vh;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		font-size: calc(10px + 2vmin);
-	}
-	.App-link {
-		color: #ff3e00;
-	}
-	.App-logo {
-		height: 40vmin;
-		pointer-events: none;
-		margin-bottom: 1.0rem;
-		animation: App-logo-spin infinite 1.6s ease-in-out alternate;
-	}
-	@keyframes App-logo-spin {
-		from {
-			transform: scale(1);
-		}
-		to {
-			transform: scale(1.06);
-		}
-	}
+  header {
+    margin-top: 2rem;
+  }
+
+  header img {
+    display: block;
+    width: 3rem;
+  }
 </style>
 
-<div class="App">
-	<header class="App-header">
-		<img src="/logo.svg" class="App-logo" alt="logo" />
-		<p>
-			Edit <code>src/App.svelte</code> and save to reload.
-		</p>
-		<a
-			class="App-link"
-			href="https://svelte.dev"
-			target="_blank"
-			rel="noopener noreferrer"
-		>
-			{message}
-		</a>
-	</header>
-</div>
+<svelte:head>
+  <link
+    rel="stylesheet"
+    type="text/css"
+    href="https://cloud.typography.com/6916494/7728412/css/fonts.css" />
+</svelte:head>
+<div class="container mx-auto px-4 text-lg text-yellow-black-dark">
+  <header on:click={handleClick}>
+    <img src="/logo.svg" class="App-logo" alt="logo" />
+  </header>
+  <div class="mt-64 text-yellow-black-light" transition:fade>
+    {#if step === 1}
+      <div in:fade={{ delay: 300 }} out:fade={{ duration: 200 }}>
+        <One onNext={() => (step = 2)} />
+      </div>
+    {:else if step === 2}
+      <div in:fade={{ delay: 300 }} out:fade={{ duration: 200 }}>
+        <Two onNext={() => (step = 3)} onPrev={() => (step = 1)} />
+      </div>
+    {/if}
+  </div>
+</div>

src/main.css

@@ -0,0 +1,18 @@
+@tailwind base;
+
+@font-face {
+  font-family: Sohne;
+  src: url('/sohne.woff2') format('woff2'), url('/sohne.woff') format('woff');
+}
+
+body {
+  font-family: Sohne, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  -webkit-font-smoothing: antialiased;
+  font-size: 1em;
+  line-height: 1.75;
+}
+
+@tailwind components;
+@tailwind utilities;

src/steps/One.svelte

@@ -0,0 +1,42 @@
+<script>
+  export let onNext;
+</script>
+
+<style>
+  h1 {
+    font-family: "Sentinel A", "Sentinel B";
+    font-weight: 700;
+    font-size: 3em;
+    letter-spacing: -0.01em;
+    line-height: 1.1;
+  }
+
+  p {
+    max-width: 33em;
+  }
+</style>
+
+<h1 class="mb-24 text-yellow-black-dark">What the future looks like to me?</h1>
+<p class="mb-8 ml-24">
+  In the recent years there's been an boom of tools, ideas and methodologies
+  that helps us move forward. I specifically refer to stuff like:
+</p>
+<ul class="mb-8 ml-24 list-disc">
+  <li class="mb-2">Shared best practices</li>
+  <li class="mb-2">More robust algorithms</li>
+  <li class="mb-2">Better starting points</li>
+  <li class="mb-2">More complex user experiences</li>
+  <li class="mb-2">Faster delivery times</li>
+</ul>
+<p class="mb-8 ml-24">
+  All the above is truly beneficial, only if we are able to do all that without
+  having to force the end user to to pay a penalty tax, for our own DX.
+</p>
+<p class="mb-8 ml-24">
+  The future to me looks more like deepening this initial wave of thinking, in
+  order to make our work a more enjoyable, professional and shared practice,
+  while delivering the kind of websites that the end user needs.
+</p>
+<p class="mt-16 ml-24">
+  <button type="button" on:click={onNext}>Next</button>
+</p>

src/steps/Two.svelte

@@ -0,0 +1,42 @@
+<script>
+  export let onPrev;
+  export let onNext;
+</script>
+
+<style>
+  h1 {
+    font-family: "Sentinel A", "Sentinel B";
+    font-weight: 700;
+    font-size: 3em;
+    letter-spacing: -0.01em;
+    line-height: 1.1;
+  }
+
+  p {
+    max-width: 33em;
+  }
+</style>
+
+<h1 class="mb-24 text-yellow-black-dark">What’s my working experience?</h1>
+<p class="mb-8 ml-24">
+  One of the most common challenges teams face when executing an incremental
+  migration is handling the transition between the new and old systems.
+  Fortunately, with Next.js there was never an issue with running both versions
+  at once. With out-of-the-box support for prefetching new pages while jumping
+  into the legacy app when needed, Zack and the team were able to easily migrate
+  pages one-by-one. And since the intermediary hybrid-site was intelligently
+  routed by Next.js, there was no need to maintain the overhead of explicitly
+  tracking the migration's progress in the code itself.
+</p>
+<p class="mb-8 ml-24">
+  In fact, throughout the migration, the ability of Next.js to make the
+  extraction of common issues and patterns as easy as possible was a recurring
+  theme. With each new version of Next.js, Zack and the team found they were
+  constantly deleting internal code in favor of framework integrated tooling.
+  Whenever the team needed to incorporate a new technology, Next.js had either
+  first-class support or an endorsed example for them to follow.
+</p>
+<p class="mt-16 ml-24">
+  <button type="button" on:click={onPrev}>Prev</button>
+  <button type="button" on:click={onNext}>Next</button>
+</p>

tailwind.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  purge: ['./src/**/*.svelte', './public/*.html'],
+  theme: {
+    extend: {
+      colors: {
+        'yellow-black-dark': '#10100f',
+        'yellow-black-light': '#767573'
+      }
+    }
+  },
+  variants: {},
+  plugins: []
+};