diff --git a/public/fonts/quicksand-v24-latin-regular.eot b/public/fonts/quicksand-v24-latin-regular.eot new file mode 100644 index 0000000..3190620 Binary files /dev/null and b/public/fonts/quicksand-v24-latin-regular.eot differ diff --git a/public/fonts/quicksand-v24-latin-regular.svg b/public/fonts/quicksand-v24-latin-regular.svg new file mode 100644 index 0000000..16f9b4e --- /dev/null +++ b/public/fonts/quicksand-v24-latin-regular.svg @@ -0,0 +1,446 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/fonts/quicksand-v24-latin-regular.ttf b/public/fonts/quicksand-v24-latin-regular.ttf new file mode 100644 index 0000000..4e69cf5 Binary files /dev/null and b/public/fonts/quicksand-v24-latin-regular.ttf differ diff --git a/public/fonts/quicksand-v24-latin-regular.woff b/public/fonts/quicksand-v24-latin-regular.woff new file mode 100644 index 0000000..859973c Binary files /dev/null and b/public/fonts/quicksand-v24-latin-regular.woff differ diff --git a/public/fonts/quicksand-v24-latin-regular.woff2 b/public/fonts/quicksand-v24-latin-regular.woff2 new file mode 100644 index 0000000..528baa7 Binary files /dev/null and b/public/fonts/quicksand-v24-latin-regular.woff2 differ diff --git a/public/fonts/roboto-mono-v13-latin-regular.eot b/public/fonts/roboto-mono-v13-latin-regular.eot new file mode 100644 index 0000000..8c56483 Binary files /dev/null and b/public/fonts/roboto-mono-v13-latin-regular.eot differ diff --git a/public/fonts/roboto-mono-v13-latin-regular.svg b/public/fonts/roboto-mono-v13-latin-regular.svg new file mode 100644 index 0000000..1864328 --- /dev/null +++ b/public/fonts/roboto-mono-v13-latin-regular.svg @@ -0,0 +1,405 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/fonts/roboto-mono-v13-latin-regular.ttf b/public/fonts/roboto-mono-v13-latin-regular.ttf new file mode 100644 index 0000000..d5dee83 Binary files /dev/null and b/public/fonts/roboto-mono-v13-latin-regular.ttf differ diff --git a/public/fonts/roboto-mono-v13-latin-regular.woff b/public/fonts/roboto-mono-v13-latin-regular.woff new file mode 100644 index 0000000..f319fbf Binary files /dev/null and b/public/fonts/roboto-mono-v13-latin-regular.woff differ diff --git a/public/fonts/roboto-mono-v13-latin-regular.woff2 b/public/fonts/roboto-mono-v13-latin-regular.woff2 new file mode 100644 index 0000000..ed384d2 Binary files /dev/null and b/public/fonts/roboto-mono-v13-latin-regular.woff2 differ diff --git a/public/fonts/roboto-v29-latin-regular.eot b/public/fonts/roboto-v29-latin-regular.eot new file mode 100644 index 0000000..6dd5e3a Binary files /dev/null and b/public/fonts/roboto-v29-latin-regular.eot differ diff --git a/public/fonts/roboto-v29-latin-regular.svg b/public/fonts/roboto-v29-latin-regular.svg new file mode 100644 index 0000000..627f5a3 --- /dev/null +++ b/public/fonts/roboto-v29-latin-regular.svg @@ -0,0 +1,308 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/fonts/roboto-v29-latin-regular.ttf b/public/fonts/roboto-v29-latin-regular.ttf new file mode 100644 index 0000000..637971a Binary files /dev/null and b/public/fonts/roboto-v29-latin-regular.ttf differ diff --git a/public/fonts/roboto-v29-latin-regular.woff b/public/fonts/roboto-v29-latin-regular.woff new file mode 100644 index 0000000..86b3863 Binary files /dev/null and b/public/fonts/roboto-v29-latin-regular.woff differ diff --git a/public/fonts/roboto-v29-latin-regular.woff2 b/public/fonts/roboto-v29-latin-regular.woff2 new file mode 100644 index 0000000..ebe1795 Binary files /dev/null and b/public/fonts/roboto-v29-latin-regular.woff2 differ diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.test.tsx b/src/App.test.tsx deleted file mode 100644 index 2a68616..0000000 --- a/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/App.tsx b/src/App.tsx index a53698a..9945376 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,14 @@ import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import './fonts.css'; +import Navbar from './Navbar'; function App() { return (
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+ +
+

test

+ amogus
); } diff --git a/src/Navbar.tsx b/src/Navbar.tsx new file mode 100644 index 0000000..bfa9fc1 --- /dev/null +++ b/src/Navbar.tsx @@ -0,0 +1,27 @@ +import { FunctionComponent } from 'react'; +import { useState, useEffect } from 'react'; +import './navbar.css'; +import NavbarText from './NavbarText'; + +const Navbar: FunctionComponent = () => { + const [hidden, setHidden] = useState(window.scrollY > 64); + + useEffect(() => { + const handleScroll = () => { + setHidden(window.scrollY > 64); + } + + window.addEventListener('scroll', handleScroll); + return () => { + window.removeEventListener('scroll', handleScroll); + } + }, []); + + return ( +
+ +
+ ) +} + +export default Navbar; diff --git a/src/NavbarText.tsx b/src/NavbarText.tsx new file mode 100644 index 0000000..64b705a --- /dev/null +++ b/src/NavbarText.tsx @@ -0,0 +1,67 @@ +import { FunctionComponent, useCallback } from 'react'; +import { useState, useEffect } from 'react'; +import './navbar.css'; + +const Texts: string[] = [ + '~/jan.sh', + 'jan://', + './jan', + '/usr/bin/jan', +]; + +const randomText = (excludeNum?: number): number => { + if (excludeNum === undefined || Texts.length === 1) return Math.floor(Math.random() * Texts.length); + else { + const texts = [ ...Texts ]; + texts.splice(excludeNum, 1); + let i = Math.floor(Math.random() * texts.length); + if (i >= excludeNum) i++; + return i; + } +} + +const NavbarText: FunctionComponent = () => { + const [text, setText] = useState(''); + const [underscore, setUnderscore] = useState(false); + const [timer, setTimer] = useState(0); + const [selectedText, setSelectedText] = useState(randomText()); + + const updateText = useCallback(() => { + if (text.length < Texts[selectedText].length) { + setText(text + Texts[selectedText].charAt(text.length)); + } + + if (timer % 5 === 0) { + setUnderscore(!underscore); + } + + if (timer >= 80) { + if (text.length > 0) { + setText(text.substring(0, text.length - 1)); + } else { + setText(''); + setTimer(0); + setSelectedText(randomText(selectedText)); + return; + } + } + + setTimer(timer + 1); + }, [selectedText, text, timer, underscore]); + + useEffect(() => { + const interval = setInterval(updateText, 100); + + return () => clearInterval(interval); + }); + + return ( +
+ window.location.href = '/'}> + {'> '}{text}{underscore ? '_' : ''} + +
+ ); +} + +export default NavbarText; diff --git a/src/fonts.css b/src/fonts.css new file mode 100644 index 0000000..82d5b4a --- /dev/null +++ b/src/fonts.css @@ -0,0 +1,43 @@ +/* https://google-webfonts-helper.herokuapp.com/fonts */ + +/* roboto-mono-regular - latin */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + src: url('../public/fonts/roboto-mono-v13-latin-regular.eot'); /* IE9 Compat Modes */ + src: local(''), + url('../public/fonts/roboto-mono-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../public/fonts/roboto-mono-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('../public/fonts/roboto-mono-v13-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('../public/fonts/roboto-mono-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../public/fonts/roboto-mono-v13-latin-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */ + } + +/* roboto-regular - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: url('../public/fonts/roboto-v29-latin-regular.eot'); /* IE9 Compat Modes */ + src: local(''), + url('../public/fonts/roboto-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../public/fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('../public/fonts/roboto-v29-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('../public/fonts/roboto-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../public/fonts/roboto-v29-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ + } + +/* quicksand-regular - latin */ +@font-face { + font-family: 'Quicksand'; + font-style: normal; + font-weight: 400; + src: url('../public/fonts/quicksand-v24-latin-regular.eot'); /* IE9 Compat Modes */ + src: local(''), + url('../public/fonts/quicksand-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../public/fonts/quicksand-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('../public/fonts/quicksand-v24-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('../public/fonts/quicksand-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../public/fonts/quicksand-v24-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */ +} diff --git a/src/index.css b/src/index.css index ec2585e..482d7a4 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,22 @@ +:root { + --primary-bg: #121212; + --secondary-bg: #232323; +} + body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: var(--primary-bg); } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + color: #fff; + font-family: 'Roboto Mono', source-code-pro, Menlo, Monaco, Consolas, + 'Courier New', monospace; +} + +span, p, h1, h2, h3, h4, h5, h6 { + color: #fff; } diff --git a/src/index.tsx b/src/index.tsx index ef2edf8..6832e78 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; -import reportWebVitals from './reportWebVitals'; ReactDOM.render( @@ -10,8 +9,3 @@ ReactDOM.render( , document.getElementById('root') ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/navbar.css b/src/navbar.css new file mode 100644 index 0000000..beaaad4 --- /dev/null +++ b/src/navbar.css @@ -0,0 +1,29 @@ +.navbar { + width: 100%; + height: 64px; + top: 0; + position: fixed; + background-color: var(--secondary-bg); + border-radius: 0 0 15px 15px; + text-shadow: 0 0 3px rgba(255, 255, 255, 0.85), 0 0 6px rgba(255, 255, 255, 0.45), 0 0 9px rgba(255, 255, 255, 0.3); + user-select: none; + cursor: pointer; + + transition: top 0.2s, text-shadow 0.3s; +} + +.navbar:hover { + text-shadow: 0 0 5px rgba(255, 255, 255, 0.85), 0 0 10px rgba(255, 255, 255, 0.45), 0 0 15px rgba(255, 255, 255, 0.3); +} + +.navbar-collapsed { + top: -64px; +} + +.navbar-text { + font-family: 'Quicksand', sans-serif; + font-size: 32px; + position: relative; + top: 8px; + left: 12px; +} diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts deleted file mode 100644 index 49a2a16..0000000 --- a/src/reportWebVitals.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ReportHandler } from 'web-vitals'; - -const reportWebVitals = (onPerfEntry?: ReportHandler) => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.ts b/src/setupTests.ts deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.ts +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom';