Initial Commit

2021-12-14 19:09:03 +00:00
commit 0419c73f01
15 changed files with 13767 additions and 0 deletions
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -0,0 +1,23 @@
+//============================================================
+// Essential Imports
+//============================================================
+
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+//============================================================
+// Pages
+//============================================================
+
+import FrontPage from './pages/Front.page';
+
+const App = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<FrontPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+export default App;
--- a/src/components/pages/Front.page.js
+++ b/src/components/pages/Front.page.js
@@ -0,0 +1,27 @@
+//============================================================
+// Essential Imports
+//============================================================
+
+import React from 'react';
+
+//============================================================
+// Imported Components
+//============================================================
+
+import AppearText from '../text/AppearText';
+
+//============================================================
+// Component
+//============================================================
+
+const FrontPage = () => {
+  return (
+    <div className="w-full h-screen flex justify-center items-center bg-polar-night-400">
+      <div className="flex flex-col justify-center items-center">
+        <AppearText className="font-mono text-7xl text-frost-400" text="JOHN COSTA" delay={100} />
+        <AppearText className="font-mono text-5xl text-frost-200" text="DEVELOPER" delay={1200} />
+      </div>
+    </div>
+  );
+};
+export default FrontPage;
--- a/src/components/text/AppearText.js
+++ b/src/components/text/AppearText.js
@@ -0,0 +1,33 @@
+//============================================================
+// Essential Imports
+//============================================================
+
+import React, { useState, useEffect } from 'react';
+import clsx from 'clsx';
+
+//============================================================
+// Component
+//============================================================
+
+const AppearText = ({ text, delay, className }) => {
+  const [showText, setShowText] = useState('');
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowText('opacity-100');
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
+  return (
+    <>
+      <h1 className={clsx('transition-all ease-in-out delay-1000 opacity-0', className, showText)}>
+        {text}
+      </h1>
+    </>
+  );
+};
+export default AppearText;
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/index.html
+++ b/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
+
+import './index.css';
+
+ReactDOM.render(<App />, document.getElementById('root'));