init: new react website base
This commit is contained in:
z / alex
+24
-2
@@ -1,2 +1,24 @@
|
|||||||
api/node_modules
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
old
|
|
||||||
|
# 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