init: new react website base
This commit is contained in:
z / alex
+24
-2
@@ -1,2 +1,24 @@
|
||||
api/node_modules
|
||||
old
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.idea
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
# thatalex.dev
|
||||
This is th repository for [my website](https://thatalex.dev). Feel free to browse the code! (not live yet, so if you can read you get a sneak peak ;))
|
||||
-48
@@ -1,48 +0,0 @@
|
||||
<!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">
|
||||
<meta content="hi, i'm alex!" title="og:title">
|
||||
<meta content="alex!" title="site_name">
|
||||
<meta content="welcome to my website! here, you can contact me & find my github account!" title="og:description">
|
||||
<meta content="https://thatalex.dev" title="og:url">
|
||||
<link rel="stylesheet" href="static/main.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@500&display=swap" rel="stylesheet">
|
||||
<title>z // alex</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="textDiv"><p>hi, i'm <span id="name">alex</span>!</p></div><span id="box"></span>
|
||||
<div id="extraInfo">
|
||||
<p style="display:block; margin:auto; float:left;">i work part-time at <span style="color:yellow">medal.tv</span> & do backend development in my offtime</p><br>
|
||||
<a style="display:block; margin:auto; float:left;" href="https://github.com/zevhr" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
<a href="#" onclick="addClass()"><i class="fa fa-address-book-o" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
|
||||
<div id="contact">
|
||||
<form method="post" action="https://api.thatalex.dev/v1/web/contact">
|
||||
<p>contact me !</p>
|
||||
<input type="text" name="name" id="name" placeholder="your name.."><br>
|
||||
<input type="text" name="email" id="email" placeholder="your email.."><br>
|
||||
<input type="text" name="subject" id="subject" placeholder="subject.."><br>
|
||||
<input type="text" name="message" id="message" placeholder="your message..">
|
||||
<button type="submit">submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function addClass() {
|
||||
var element = document.getElementById("contact");
|
||||
element.classList.add("contactFade");
|
||||
document.querySelector(".contactFade").style.animationPlayState = "running";
|
||||
document.querySelector(".contactFade").style.display = "block";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+28723
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "web",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4",
|
||||
"eslint": "8.22.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"short_name": "thatalex.dev",
|
||||
"name": "Alex / Zeph - my portfolio, about me & how to contact me",
|
||||
"icons": [],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#525459"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@@ -1,52 +0,0 @@
|
||||
<!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">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
|
||||
<title>Spotify Widget</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div style="text-align:center;" class="image">
|
||||
<img width="150" id="cover-img">
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;" id="content">
|
||||
<p id="cover-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.socket.io/4.5.0/socket.io.min.js" integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k" crossorigin="anonymous"></script>
|
||||
<script src="static/js/spotify_widget.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
const string = window.location.search;
|
||||
const params = new URLSearchParams(string);
|
||||
|
||||
if (params.has('dark') && params.get('dark') == "true") {
|
||||
console.log('[ws-iframe] received dark mode override');
|
||||
document.body.style.backgroundColor = "black";
|
||||
document.getElementById("content").style.color = "white";
|
||||
} else if (params.has('light') && params.get("light") == "true") {
|
||||
console.log('[ws-iframe] received light mode override');
|
||||
document.body.style.backgroundColor = "white";
|
||||
document.getElementById("content").style.color = "black";
|
||||
} else {
|
||||
console.log('[ws-iframe] no override, defaulting to dark');
|
||||
document.body.style.backgroundColor = "black";
|
||||
document.getElementById("content").style.color = 'white';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
background-color:black;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
// components/resources
|
||||
import { NavBar } from './Nav';
|
||||
|
||||
export class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div id={"container"}>
|
||||
<NavBar/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import { pages } from '../index';
|
||||
|
||||
export class NavBar extends React.Component {
|
||||
list = pages.map((page, i) => {
|
||||
return <li className={"listitem button"} key={"page_" + page.key}><a href={page.path}>{page.display}</a></li>
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="navbar">
|
||||
<ul className="pagelist">
|
||||
{this.list}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
|
||||
// components/global styling
|
||||
import { App } from './components/App';
|
||||
import './styling/anims.css';
|
||||
import './styling/main.css';
|
||||
|
||||
// "sitemap" for react components
|
||||
export const pages = [
|
||||
{
|
||||
"display": "Home",
|
||||
"path": "/",
|
||||
"key": "home"
|
||||
},
|
||||
{
|
||||
"display": "Contact",
|
||||
"path": "/contact",
|
||||
"key": "contact"
|
||||
}
|
||||
]
|
||||
|
||||
// react 18 compliance
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"))
|
||||
root.render(<App d={pages} />)
|
||||
@@ -0,0 +1,4 @@
|
||||
@keyframes hover {
|
||||
75% { opacity: 0.5 }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
background-color:#3E3E3E;
|
||||
}
|
||||
|
||||
/* nav styling */
|
||||
#navbar {
|
||||
text-align:center;
|
||||
background-color:#525459;
|
||||
}
|
||||
|
||||
#navbar li {
|
||||
display:inline-block;
|
||||
padding: 10px 10px;
|
||||
font-size:20px;
|
||||
}
|
||||
|
||||
#navbar ul {
|
||||
margin: 0;
|
||||
padding:0;
|
||||
list-style-type:none;
|
||||
}
|
||||
|
||||
a {
|
||||
color:white;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color:#81A2A1;
|
||||
animation:fadein;
|
||||
}
|
||||
|
||||
.listitem:hover {
|
||||
animation-name: hover;
|
||||
animation-duration:0.5s;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
const socket = io("https://api.thatalex.dev")
|
||||
|
||||
// divs used
|
||||
var div = document.getElementById("container");
|
||||
var image = div.querySelector("#cover-img");
|
||||
var text = div.querySelector("#cover-text");
|
||||
var content = div.querySelector(".cover-text");
|
||||
|
||||
console.log("[ws-iframe] asked server to initiate connection..")
|
||||
socket.emit("spotify_status", "listen");
|
||||
socket.on("api_update", (song_data) => {
|
||||
if (!song_data.position) {
|
||||
image.src = "https://thatalex.dev/static/bad.png"
|
||||
text.innerHTML = "Uh oh!<br>There isn't an active song.<br><span style='font-size:10px;'><i>Try again later.</i></span>"
|
||||
} else {
|
||||
image.src = song_data.cover
|
||||
text.innerHTML = `${song_data.title} - ${song_data.album}<br>${song_data.artist}<br>${song_data.position}/${song_data.duration}`;
|
||||
}
|
||||
});
|
||||
|
||||
// on connect + error events
|
||||
socket.on("connect", () => {
|
||||
console.log('[ws-iframe] hello dear friend! connected successfully to backend, formatting page')
|
||||
})
|
||||
|
||||
socket.on("error", (e) => {
|
||||
console.log(e)
|
||||
})
|
||||
@@ -1,90 +0,0 @@
|
||||
body {
|
||||
font-family: 'Cairo', sans-serif;
|
||||
font-size:30px;
|
||||
background-color:black;
|
||||
color:white;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-left:25px;
|
||||
}
|
||||
|
||||
i {
|
||||
color:white;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color:gray;
|
||||
border-radius:15px;
|
||||
color:rgb(226, 226, 226);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color:white;
|
||||
padding-left:5px;
|
||||
}
|
||||
|
||||
#container {
|
||||
/* margin: 0 auto; */
|
||||
top:50%;
|
||||
left:50%;
|
||||
position:absolute;
|
||||
transform: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
#textDiv {
|
||||
display:inline-block;
|
||||
animation: typingEffect 2s forwards;
|
||||
width:0%;
|
||||
border-width:1px;
|
||||
overflow:hidden;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
#box {
|
||||
background-color:gray;
|
||||
width:15px;
|
||||
opacity:0%;
|
||||
height:35px;
|
||||
border: 1px solid gray;
|
||||
animation-name: cursorBlink;
|
||||
animation-duration:0.5s;
|
||||
animation-iteration-count: infinite;
|
||||
margin: -25;
|
||||
z-index:1;
|
||||
position:absolute;
|
||||
transform: translate(-65%, 100%);
|
||||
}
|
||||
|
||||
#extraInfo {
|
||||
opacity:0;
|
||||
overflow:hidden;
|
||||
animation:fadeIn 1s forwards;
|
||||
animation-delay:2s;
|
||||
}
|
||||
|
||||
#contact {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.contactFade {
|
||||
display:block;
|
||||
animation: fadeIn 1s forwards;
|
||||
animation-play-state:paused;
|
||||
}
|
||||
|
||||
@keyframes cursorBlink {
|
||||
0% {opacity:0%;}
|
||||
25% {opacity:50%;}
|
||||
75% {opacity:0%;}
|
||||
}
|
||||
|
||||
@keyframes typingEffect {
|
||||
from {width:0%;}
|
||||
to {width:22%;}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {opacity:0;}
|
||||
to {opacity:1;}
|
||||
}
|
||||
Reference in New Issue
Block a user