migrated to nextjs

.drone.yml

@@ -22,13 +22,15 @@ steps:
       port: 1312
       target: /srv/web/home
       sources:
-        - ./dist
-        - ./docker-compose.prod.yml
-        - ./nginx.conf
-      commands:
-        - docker-compose -f docker-compose.prod.yml pull
-        - docker-compose -f docker-compose.prod.yml down
-        - docker-compose -f docker-compose.prod.yml up -d
+        - ./Dockerfile
+        - ./package.json
+        - ./yarn.lock
+        - ./next.config.js
+        - ./.next
+        - ./public
+        commands:
+          - docker-compose -f docker-compose.prod.yml build
+          - docker-copmose -f docker-compose.prod.yml restart front
     when:
       event: push
       branch: master

.gitignore

@@ -1,9 +1,10 @@
+# Node
 node_modules
-package-lock.json
-yarn.lock
-public
-.cache
-dist
 
+# Build
+.cache
+.next
+
+# Editor
 .idea
 .vscode

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:alpine
+
+WORKDIR /app
+
+COPY package.json .
+COPY yarn.lock .
+RUN yarn
+
+CMD [ "yarn", "run", "start" ]

components/AnimatedBackground.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useState } from 'react'
-import { Duration } from '../App'
-import { GoldenRatio, Rand } from '../util'
+
+import { Duration } from '../utils/config'
+import { GoldenRatio, Rand } from '../utils/utils'
+import '../styles/AnimatedBackground.styl'
+
+
 
 type Color = [number, number, number]
 
@@ -32,7 +36,7 @@ const AnimatedBackground: React.FC = () => {
 
 	return <div className={'animated-background'} style={{
 		backgroundImage: valuesToGradient(direction, start, end),
-	}}/>
+	}} />
 }
 
 export default AnimatedBackground

components/Cursor.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { useIsMousePresent, useMousePosition } from '../util'
+
+import { useIsMousePresent, useMousePosition } from '../utils/hooks'
+
+
 
 const Cursor: React.FC = () => {
 	const mouse = useMousePosition()
@@ -15,7 +18,7 @@ const Cursor: React.FC = () => {
 			borderRadius: '1em',
 			transform: 'translate(-50%, -50%)',
 			backgroundColor: '#000000',
-		}}/>
+		}} />
 		: null
 }
 

components/LetterAnimation.tsx

@@ -1,6 +1,9 @@
 import anime from 'animejs'
 import React, { useEffect, useRef } from 'react'
-import { Duration } from '../App'
+
+import { Duration } from '../utils/config'
+
+
 
 export type LettersProps = {
 	text: string

components/Parallax.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { useMousePosition, useOrientation } from '../util'
+
+import { useMousePosition, useOrientation } from '../utils/hooks'
+
+
 
 type RenderProps = {
 	x: string,

components/staticText.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import '../styles/static.styl'
+
+
+
+const StaticText: React.FC = ({ children }) => {
+	return <div className={'static'}>
+		<div className={'content'}>
+			{children}
+		</div>
+	</div>
+}
+
+export default StaticText

docker-compose.prod.yml

@@ -1,19 +1,18 @@
 version: '3.7'
 
 services:
-  home:
-    image: cupcakearmy/static
+  front:
+    build: .
     restart: always
-    ports:
-      - 80
     volumes:
-      - ./nginx.conf:/usr/local/nginx/conf/sites/default.conf:ro
-      - ./dist:/srv:ro
+      - ./.next:/app/.next:ro
+      - ./public:/app/public:ro
+      - ./next.config.js:/app/next.config.js:ro
     networks:
       - traefik
     labels:
       - traefik.enable=true
-      - traefik.port=80
+      - traefik.port=3000
       - traefik.docker.network=traefik
       - traefik.backend=home
       - traefik.frontend.rule=Host:nicco.io

docker-compose.yml

@@ -1,11 +1,14 @@
 version: '3.7'
 
+volumes:
+  data:
+
 services:
-  home:
-    image: cupcakearmy/static
-    restart: always
+  front:
+    build: .
     ports:
-      - 3000:80
+      - 80:3000
     volumes:
-      - ./nginx.conf:/usr/local/nginx/conf/sites/default.conf:ro
-      - ./dist:/srv:ro
+      - ./.next:/app/.next:ro
+      - ./public:/app/public:ro
+      - ./next.config.js:/app/next.config.js:ro

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,6 @@
+const withStylus = require('@zeit/next-stylus')
+const withCss = require('@zeit/next-css')
+
+module.exports = withCss(withStylus({
+    // cssModules: true,
+}))

package.json

@@ -1,22 +1,24 @@
 {
   "private": true,
   "scripts": {
-    "build": "parcel build ./src/index.html",
-    "dev": "parcel ./src/index.html"
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
   },
   "dependencies": {
     "animejs": "3.x",
-    "parcel-bundler": "1.x",
+    "next": "9.x",
     "react": "16.12.x",
-    "react-dom": "16.12.x",
-    "react-router-dom": "5.x"
+    "react-dom": "16.12.x"
   },
   "devDependencies": {
     "@types/animejs": "3.x",
+    "@types/node": "^13.1.4",
     "@types/react": "16.9.x",
     "@types/react-dom": "16.9.x",
-    "@types/react-router-dom": "5.x",
-    "stylus": "0.54.x",
+    "@zeit/next-css": "^1.0.1",
+    "@zeit/next-stylus": "^1.0.1",
+    "stylus": "^0.54.7",
     "typescript": "3.7.x"
   }
-}
+}

pages/_app.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import App from 'next/app'
+import Head from 'next/head'
+
+import '../styles/fonts.css'
+import '../styles/global.styl'
+
+
+
+export default class extends App {
+	render() {
+		const { Component, pageProps } = this.props
+		return (
+			<React.Fragment>
+				<Head>
+					<title>Alessandra Marten</title>
+					<meta name="viewport" content="width=device-width, initial-scale=1" />
+					<meta charSet="utf-8" />
+				</Head>
+				<Component {...pageProps} />
+			</React.Fragment>
+		)
+	}
+}

pages/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import dynamic from 'next/dynamic'
+
+import AnimatedBackground from '../components/AnimatedBackground'
+import Parallax from '../components/Parallax'
+import Letters from '../screens/Letters'
+import { useInnerWindowSize } from '../utils/hooks'
+
+import '../styles/Home.styl'
+
+
+
+const Cursor = dynamic(() => import('../components/Cursor'), { ssr: false })
+
+const Home: React.FC = () => {
+
+	const size = useInnerWindowSize()
+
+	return <div id="home" style={size}>
+		<header className={'fixed'}>
+			<span><a target='_blank' href={'https://blog.nicco.io'}>blog</a></span>
+			<span><a target='_blank' href={'https://github.com/cupcakearmy'}>github</a></span>
+		</header>
+
+		<Parallax>
+			<section id={'letters-container'}>
+				<h1>
+					<Letters />
+				</h1>
+			</section>
+		</Parallax>
+
+		<div id={'bg'}>
+			<AnimatedBackground />
+		</div>
+
+		<Cursor />
+
+		<footer className={'fixed'}>
+			<span>developer.</span>
+			<br />
+			<span><a href={'mailto:hi@nicco.io'}>say <b>hi@nicco.io</b></a></span>
+			<br />
+			<span>
+				<small>
+					<a href={'/privacy'}>privacy</a> - <a href={'/tos'}>terms of service</a>
+				</small>
+			</span>
+		</footer>
+	</div>
+}
+
+export default Home

pages/privacy.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import StaticText from '../components/staticText'
+
+
+
+const Privacy: React.FC = () => {
+	return <StaticText>
+		<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="https://nicco.io">https://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><b>We don’t share any personally identifying information publicly or with third-parties</b>, 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>
+	</StaticText>
+}
+
+export default Privacy

pages/tos.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+
+import StaticText from '../components/staticText'
+
+
+
+const TOS: React.FC = () => {
+	return <StaticText>
+		<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>
+	</StaticText>
+}
+
+export default TOS

src/App.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
-
-import Suspend from './Components/Suspend'
-
-const Home = React.lazy(() => import('./Screens/Home'))
-const Privacy = React.lazy(() => import('./Screens/Privacy'))
-const TOS = React.lazy(() => import('./Screens/TermsOfService'))
-
-export const Duration = 4000
-
-const App: React.FC = () => {
-
-	return <Router>
-		<Switch>
-			<Route exact path={'/privacy'} component={Suspend(Privacy)}/>
-			<Route exact path={'/terms-of-service'} component={Suspend(TOS)}/>
-			<Route component={Suspend(Home)}/>
-		</Switch>
-	</Router>
-}
-
-export default App

src/Screens/Home.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-
-import AnimatedBackground from '../Components/AnimatedBackground'
-import Cursor from '../Components/Cursor'
-import Parallax from '../Components/Parallax'
-import Letters from '../Screens/Letters'
-import { useInnerWindowSize } from '../util'
-
-const Home: React.FC = () => {
-
-	const { height, width } = useInnerWindowSize()
-
-	return <div id="home" style={{ width: width + 'px', height: height + 'px' }}>
-		<header className={'fixed'}>
-			<span><a href={'https://blog.nicco.io'}>blog</a></span>
-			<span><a href={'https://github.com/cupcakearmy'}>github</a></span>
-		</header>
-
-		<Parallax>
-			<section id={'letters-container'}>
-				<h1>
-					<Letters/>
-				</h1>
-			</section>
-		</Parallax>
-
-		<div id={'bg'}>
-			<AnimatedBackground/>
-		</div>
-
-		<Cursor/>
-
-		<footer className={'fixed'}>
-			<span>developer.</span>
-			<br/>
-			<span><a href={'mailto:hi@nicco.io'}>say <b>hi@nicco.io</b></a></span>
-			<br/>
-			<span>
-				<small>
-					<a href={'/privacy'}>privacy</a> - <a href={'/terms-of-service'}>terms of service</a>
-				</small>
-			</span>
-		</footer>
-	</div>
-}
-
-export default Home

src/Screens/Privacy.tsx

@@ -1,31 +0,0 @@
-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="https://nicco.io">https://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><b>We don’t share any personally identifying information publicly or with third-parties</b>, 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

@@ -1,72 +0,0 @@
-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/index.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <title>cupcakearmy 👋</title>
-    <meta charset="utf-8">
-    <meta content="width=device-width, initial-scale=1" name="viewport">
-    <meta name="Description" content="Author: cupcakearmy, Design: cupcakearmy">
-
-    <link rel="apple-touch-icon" sizes="180x180" href="./Assets/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="./Assets/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="./Assets/favicon-16x16.png">
-    <link rel="manifest" href="./Assets/site.webmanifest">
-    <link rel="mask-icon" href="./Assets/safari-pinned-tab.svg" color="#16b4e9">
-    <meta name="apple-mobile-web-app-title" content="nicco.io">
-    <meta name="application-name" content="nicco.io">
-    <meta name="theme-color" content="#16b4e9">
-</head>
-
-<body>
-    <div id="root"></div>
-    <script src="./index.tsx"></script>
-    <script type="text/javascript">
-        var _paq = window._paq || [];
-        _paq.push(['trackPageView']);
-        _paq.push(['enableLinkTracking']);
-        (function () {
-            var u = "//stats.nicco.io/";
-            _paq.push(['setTrackerUrl', u + 'p_unicorns']);
-            _paq.push(['setSiteId', '1']);
-            var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-            g.type = 'text/javascript'; g.async = true; g.defer = true; g.src = u + 'j_unicorns'; s.parentNode.insertBefore(g, s);
-        })();
-    </script>
-</body>
-
-</html>

src/index.styl

@@ -1,2 +0,0 @@
-@require './vendor/fonts/import'
-@require './styles/*'

src/index.tsx

@@ -1,8 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-import App from './App'
-import './index.styl'
-
-
-ReactDOM.render(<App />, document.getElementById('root'))

styles/Home.styl

@@ -1,4 +1,4 @@
-@require './Breakpoints.styl'
+@require 'Breakpoints.styl'
 
 #home
   height 100vh
@@ -20,19 +20,11 @@
   #letters-wrapper
     display inline-block
     text-align center
-    font-size 1em
+    font-size 16vw
     font-weight bold
-    +is-phone()
-      font-size 2.5em
-    +is-tablet()
-      font-size 3em
     +is-netbook()
-      font-size 3.5em
-    +is-laptop()
-      font-size 4em
-    +is-desktop()
-      font-size 4.5em
-
+      font-size 16vmin
+    
   footer
     bottom 0
     flex-direction column

styles/fonts.css

@@ -1,6 +1,6 @@
 @font-face {
     font-family: 'Inconsolata';
-    src: url('vendor/fonts/Inconsolata-Regular.woff2') format('woff2');
+    src: url('/static/Inconsolata-Regular.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
@@ -8,7 +8,7 @@
 
 @font-face {
     font-family: 'Merriweather';
-    src: url('vendor/fonts/Merriweather-Regular.woff2') format('woff2');
+    src: url('/static/Merriweather-Regular.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
@@ -16,7 +16,7 @@
 
 @font-face {
     font-family: 'Inconsolata';
-    src: url('vendor/fonts/Inconsolata-Bold.woff2') format('woff2');
+    src: url('/static/Inconsolata-Bold.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
     font-display: swap;

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
-    "jsx": "react",
+    "jsx": "preserve",
     "rootDir": "./src",
     "removeComments": true,
     "strict": true,
@@ -14,6 +14,25 @@
     "noImplicitThis": true,
     "alwaysStrict": true,
     "moduleResolution": "node",
-    "esModuleInterop": true
-  }
-}
+    "esModuleInterop": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}

utils/config.ts

@@ -0,0 +1 @@
+export const Duration = 4000

utils/hooks.ts

@@ -2,11 +2,17 @@ import { useEffect, useState } from 'react'
 
 
 
-type Size = { width: number, height: number }
+type Size = { width: string, height: string }
 export const useInnerWindowSize = (): Size => {
+
+	if (typeof window === 'undefined') return {
+		width: '100vw',
+		height: '100vh',
+	}
+
 	const getCurrentSize = (): Size => ({
-		height: window.innerHeight,
-		width: window.innerWidth,
+		height: window.innerHeight + 'px',
+		width: window.innerWidth + 'px',
 	})
 
 	let [size, setSize] = useState<Size>(getCurrentSize)
@@ -104,9 +110,4 @@ export const useMousePosition = () => {
 	return position
 }
 
-export const Rand = (from: number = 0, to: number = 1, float: boolean = false) => {
-	const rand = (Math.random() * (to - from)) + from
-	return float ? rand : rand | 0
-}
 
-export const GoldenRatio: number = (1 + Math.sqrt(5)) / 2

utils/utils.ts

@@ -0,0 +1,6 @@
+export const Rand = (from: number = 0, to: number = 1, float: boolean = false) => {
+	const rand = (Math.random() * (to - from)) + from
+	return float ? rand : rand | 0
+}
+
+export const GoldenRatio: number = (1 + Math.sqrt(5)) / 2