privacy, tos and lazy loading

.drone.yml

@@ -25,6 +25,7 @@ steps:
       sources:
         - ./public
         - ./docker-compose.prod.yml
+        - ./nginx.conf
       commands:
         - docker-compose -f docker-compose.prod.yml down
         - docker-compose -f docker-compose.prod.yml up -d

docker-compose.prod.yml

@@ -8,6 +8,7 @@ services:
       - 80
     volumes:
       - ./public:/usr/share/nginx/html:ro
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
     networks:
       - traefik
     labels:

docker-compose.yml

@@ -3,8 +3,8 @@ version: '3'
 services:
   home:
     image: nginx:alpine
-    restart: always
     ports:
-      - 80
+      - 80:80
     volumes:
       - ./public:/usr/share/nginx/html:ro
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro

nginx.conf

@@ -0,0 +1,9 @@
+server {
+	listen       80;
+	server_name  _;
+
+	location / {
+		root   /usr/share/nginx/html;
+		try_files $uri /index.html;
+	}
+}

package.json

@@ -2,18 +2,21 @@
   "private": true,
   "scripts": {
     "build:dev": "webpack -d",
+    "build:dev:watch": "webpack -d -w",
     "build:prod": "webpack -p",
     "dev": "webpack-dev-server -d"
   },
   "dependencies": {
     "animejs": "^3.0.1",
     "react": "^16.8",
-    "react-dom": "^16.8"
+    "react-dom": "^16.8",
+    "react-router-dom": "^5.0.0"
   },
   "devDependencies": {
     "@types/animejs": "^2.0.1",
     "@types/react": "^16.8",
     "@types/react-dom": "^16.8",
+    "@types/react-router-dom": "^4.3.1",
     "awesome-typescript-loader": "^5",
     "css-loader": "^2",
     "file-loader": "^3",

src/App.tsx

@@ -1,35 +1,23 @@
 import React from 'react'
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 
-import AnimatedBackground from './Components/AnimatedBackground'
+import Suspend from './Components/Suspend'
-import Cursor from './Components/Cursor'
+
-import Parallax from './Components/Parallax'
+const Home = React.lazy(() => import('./Screens/Home'))
-import Letters from './Screens/Letters'
+const Privacy = React.lazy(() => import('./Screens/Privacy'))
+const TOS = React.lazy(() => import('./Screens/TermsOfService'))
 
 export const Duration = 4000
 
 const App: React.FC = () => {
 
-	return <div id="App">
+	return <Router>
-		<Parallax>
+		<Switch>
-			<section id={'letters-container'}>
+			<Route exact path={'/privacy'} component={Suspend(Privacy)}/>
-				<h1>
+			<Route exact path={'/terms-of-service'} component={Suspend(TOS)}/>
-					<Letters/>
+			<Route component={Suspend(Home)}/>
-				</h1>
+		</Switch>
-			</section>
+	</Router>
-		</Parallax>
-
-		<div id={'bg'}>
-			<AnimatedBackground/>
-		</div>
-
-		<Cursor/>
-
-		<footer>
-			<span>developer.</span>
-			<br/>
-			<span>say <a href={'mailto:hi@nicco.io'}>hi@nicco.io</a></span>
-		</footer>
-	</div>
 }
 
 export default App

src/Components/Suspend.tsx

@@ -0,0 +1,8 @@
+import React, { Suspense } from 'react'
+
+
+const Suspend: (C: React.ComponentType) => React.ComponentType = (C) => () => {
+	return <Suspense fallback={<span>...</span>} children={<C/>}/>
+}
+
+export default Suspend

src/Screens/Home.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import AnimatedBackground from '../Components/AnimatedBackground'
+import Cursor from '../Components/Cursor'
+import Parallax from '../Components/Parallax'
+import Letters from '../Screens/Letters'
+
+const Home: React.FC = () => {
+	return <div id="home">
+		<Parallax>
+			<section id={'letters-container'}>
+				<h1>
+					<Letters/>
+				</h1>
+			</section>
+		</Parallax>
+
+		<div id={'bg'}>
+			<AnimatedBackground/>
+		</div>
+
+		<Cursor/>
+
+		<footer>
+			<span>developer.</span>
+			<br/>
+			<span>say <a href={'mailto:hi@nicco.io'}>hi@nicco.io</a></span>
+		</footer>
+	</div>
+}
+
+export default Home

src/Screens/Privacy.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+const Privacy: React.FC = () => {
+	return <div className={'static'}>
+		<div className={'content'}>
+			<h2>Privacy Policy</h2>
+			<p>Your privacy is important to us. It is Nicco IO's policy to respect your privacy regarding any
+				information we may collect from you across our website, <a href="http://nicco.io">http://nicco.io</a>,
+				and other sites we own and operate.</p>
+			<p>We only ask for personal information when we truly need it to provide a service to you. We collect it by
+				fair and lawful means, with your knowledge and consent. We also let you know why we’re collecting it and
+				how it will be used.</p>
+			<p>We only retain collected information for as long as necessary to provide you with your requested service.
+				What data we store, we’ll protect within commercially acceptable means to prevent loss and theft, as
+				well as unauthorised access, disclosure, copying, use or modification.</p>
+			<p>We don’t share any personally identifying information publicly or with third-parties, except when
+				required to by law.</p>
+			<p>Our website may link to external sites that are not operated by us. Please be aware that we have no
+				control over the content and practices of these sites, and cannot accept responsibility or liability for
+				their respective privacy policies.</p>
+			<p>You are free to refuse our request for your personal information, with the understanding that we may be
+				unable to provide you with some of your desired services.</p>
+			<p>Your continued use of our website will be regarded as acceptance of our practices around privacy and
+				personal information. If you have any questions about how we handle user data and personal information,
+				feel free to contact us.</p>
+			<p>This policy is effective as of 1 January 2019.</p>
+		</div>
+	</div>
+}
+
+export default Privacy

src/Screens/TermsOfService.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+
+const TOS: React.FC = () => {
+	return <div className={'static'}>
+		<div className={'content'}>
+			<h2>Nicco IO Terms of Service</h2>
+			<h3>1. Terms</h3>
+			<p>By accessing the website at <a href="http://nicco.io">http://nicco.io</a>, you are agreeing to be bound
+				by these terms of service, all applicable laws and regulations, and agree that you are responsible for
+				compliance with any applicable local laws. If you do not agree with any of these terms, you are
+				prohibited from using or accessing this site. The materials contained in this website are protected by
+				applicable copyright and trademark law.</p>
+			<h3>2. Use License</h3>
+			<ol type="a">
+				<li>Permission is granted to temporarily download one copy of the materials (information or software) on
+					Nicco IO's website for personal, non-commercial transitory viewing only. This is the grant of a
+					license, not a transfer of title, and under this license you may not:
+					<ol type="i">
+						<li>modify or copy the materials;</li>
+						<li>use the materials for any commercial purpose, or for any public display (commercial or
+							non-commercial);
+						</li>
+						<li>attempt to decompile or reverse engineer any software contained on Nicco IO's website;</li>
+						<li>remove any copyright or other proprietary notations from the materials; or</li>
+						<li>transfer the materials to another person or "mirror" the materials on any other server.</li>
+					</ol>
+				</li>
+				<li>This license shall automatically terminate if you violate any of these restrictions and may be
+					terminated by Nicco IO at any time. Upon terminating your viewing of these materials or upon the
+					termination of this license, you must destroy any downloaded materials in your possession whether in
+					electronic or printed format.
+				</li>
+			</ol>
+			<h3>3. Disclaimer</h3>
+			<ol type="a">
+				<li>The materials on Nicco IO's website are provided on an 'as is' basis. Nicco IO makes no warranties,
+					expressed or implied, and hereby disclaims and negates all other warranties including, without
+					limitation, implied warranties or conditions of merchantability, fitness for a particular purpose,
+					or non-infringement of intellectual property or other violation of rights.
+				</li>
+				<li>Further, Nicco IO does not warrant or make any representations concerning the accuracy, likely
+					results, or reliability of the use of the materials on its website or otherwise relating to such
+					materials or on any sites linked to this site.
+				</li>
+			</ol>
+			<h3>4. Limitations</h3>
+			<p>In no event shall Nicco IO or its suppliers be liable for any damages (including, without limitation,
+				damages for loss of data or profit, or due to business interruption) arising out of the use or inability
+				to use the materials on Nicco IO's website, even if Nicco IO or a Nicco IO authorized representative has
+				been notified orally or in writing of the possibility of such damage. Because some jurisdictions do not
+				allow limitations on implied warranties, or limitations of liability for consequential or incidental
+				damages, these limitations may not apply to you.</p>
+			<h3>5. Accuracy of materials</h3>
+			<p>The materials appearing on Nicco IO's website could include technical, typographical, or photographic
+				errors. Nicco IO does not warrant that any of the materials on its website are accurate, complete or
+				current. Nicco IO may make changes to the materials contained on its website at any time without notice.
+				However Nicco IO does not make any commitment to update the materials.</p>
+			<h3>6. Links</h3>
+			<p>Nicco IO has not reviewed all of the sites linked to its website and is not responsible for the contents
+				of any such linked site. The inclusion of any link does not imply endorsement by Nicco IO of the site.
+				Use of any such linked website is at the user's own risk.</p>
+			<h3>7. Modifications</h3>
+			<p>Nicco IO may revise these terms of service for its website at any time without notice. By using this
+				website you are agreeing to be bound by the then current version of these terms of service.</p>
+			<h3>8. Governing Law</h3>
+			<p>These terms and conditions are governed by and construed in accordance with the laws of Germany and you
+				irrevocably submit to the exclusive jurisdiction of the courts in that State or location.</p>
+		</div>
+	</div>
+}
+
+export default TOS

src/styles/Home.styl

@@ -1,12 +1,13 @@
 @require './Breakpoints.styl'
 
-#App
+#home
 	height 100vh
 	width 100vw
 	display flex
 	align-items center
 	justify-content center
 	perspective 1em
+	cursor none
 
 	#bg
 		position absolute

src/styles/Static.styl

@@ -0,0 +1,12 @@
+.static
+  padding: 1em
+  overflow: auto
+  width: 100vw
+  height: 100vh
+  font-family: monospace
+  font-size: 1rem
+
+  .content
+    margin: auto
+    width: 100%
+    max-width: 32em

src/styles/global.styl

@@ -4,7 +4,6 @@
 
 *
 	box-sizing border-box
-	cursor none
 
 html,
 body,