Adding fonts and changing tailwind config.

src/components/pages/Front.page.js

@@ -11,6 +11,7 @@ import React from 'react';
 import AppearText from '../text/AppearText';
 import Cdiv from '../core/Cdiv';
 import FadeComponent from '../core/FadeComponent';
+import Introduction from '../sections/Introduction';
 
 //============================================================
 // Component
@@ -67,8 +68,10 @@ const FrontPage = () => {
               d="M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,101.3C1120,107,1280,85,1360,74.7L1440,64L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
           </svg>
         </FadeComponent>
+        <FadeComponent delay={2500}>
+          <Introduction />
+        </FadeComponent>
       </div>
-      <Cdiv className="bg-frost-200"></Cdiv>
     </>
   );
 };

src/components/sections/Introduction.js

@@ -0,0 +1,25 @@
+//============================================================
+// Essential Imports
+//============================================================
+
+import React from 'react';
+
+//============================================================
+// Component
+//============================================================
+
+const Introduction = () => {
+  return (
+    <div className="w-full flex justify-center bg-frost-200">
+      <div className="w-full max-w-5xl flex flex-col">
+        <h1 className="text-7xl font-display font-bold text-polar-night-400">Hi, I'm John</h1>
+        <br />
+        <p className="text-xl text-polar-night-400">
+          Eu eu laborum in ea enim. Anim reprehenderit quis magna sint nulla aliquip ullamco aliquip
+          ad cillum nisi tempor id. Ea eu et irure cupidatat. Amet duis in id cupidatat.
+        </p>
+      </div>
+    </div>
+  );
+};
+export default Introduction;

tailwind.config.js

@@ -1,35 +1,35 @@
 module.exports = {
   content: ['./src/**/*.{js, jsx}'],
   theme: {
-    colors: {
-      'polar-night': {
-        100: '#4C566A',
-        200: '#434C5E',
-        300: '#3B4252',
-        400: '#2E3440',
-      },
-      'snow-storm': {
-        100: '#ECEFF4',
-        200: '#E5E9F0',
-        300: '#D8DEE9',
-      },
-      frost: {
-        100: '#8FBCBB',
-        200: '#88C0D0',
-        300: '#81A1C1',
-        400: '#5E81AC',
-      },
-      aurora: {
-        red: '#BF616A',
-        orange: '#D08770',
-        yellow: '#EBCB8B',
-        green: '#A3BE8C',
-        purple: '#B48EAD',
-      },
-    },
     extend: {
+      colors: {
+        'polar-night': {
+          100: '#4C566A',
+          200: '#434C5E',
+          300: '#3B4252',
+          400: '#2E3440',
+        },
+        'snow-storm': {
+          100: '#ECEFF4',
+          200: '#E5E9F0',
+          300: '#D8DEE9',
+        },
+        frost: {
+          100: '#8FBCBB',
+          200: '#88C0D0',
+          300: '#81A1C1',
+          400: '#5E81AC',
+        },
+        aurora: {
+          red: '#BF616A',
+          orange: '#D08770',
+          yellow: '#EBCB8B',
+          green: '#A3BE8C',
+          purple: '#B48EAD',
+        },
+      },
       fontFamily: {
-        display: ['Open Sans'],
+        display: ['Calibre'],
       },
     },
   },

webpack.config.js

@@ -27,6 +27,18 @@ module.exports = {
         include: path.resolve(__dirname, 'src'),
         use: ['style-loader', 'css-loader', 'postcss-loader'],
       },
+      {
+        test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+            },
+          },
+        ],
+      },
     ],
   },
   plugins: [