alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: utils, contact page + form, medalplayer etc

Browse Source
This commit is contained in:
z / alex
2022-09-08 22:18:23 -04:00
parent ba5cacd742
commit 74fda8a1d1
12 changed files with 265 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+2
View File
@@ -15,6 +15,8 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<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=IBM+Plex+Sans&display=swap" rel="stylesheet">
src/components/App.jsx
+6 -2
View File
@@ -3,8 +3,11 @@ import { Route, Routes } from 'react-router-dom';
// components/resources
import { NavBar } from './Nav';
import { Home } from './Home';
import { Contact } from './Contact';
import { Footer } from './PageComponents'
// pages
import { Home } from './Pages/Home';
import { Contact } from './Pages/Contact';
export class App extends React.Component {
render() {
@@ -15,6 +18,7 @@ export class App extends React.Component {
<Route path="/" element={<Home />}></Route>
<Route path="/contact" element={<Contact />}></Route>
</Routes>
<Footer/>
</div>
)
}
src/components/Contact.jsx
-11
View File
@@ -1,11 +0,0 @@
import React from 'react';
export class Contact extends React.Component {
render() {
return (
<div id={"contact"}>
<p>Contact works!</p>
</div>
)
}
}
src/components/Home.jsx
-14
View File
@@ -1,14 +0,0 @@
import React from 'react';
export class Home extends React.Component {
render() {
return (
<div id={"home"}>
<div className={"homecontent"}>
<h1>hi, i'm alex!</h1>
<p>professional smooth brain, nodejs buillier, medal.tv whiffer</p>
</div>
</div>
)
}
}
src/components/MedalPlayer.jsx
+62
View File
@@ -0,0 +1,62 @@
import React from 'react';
export class MedalPlayer extends React.Component {
constructor(props) {
super(props);
this.state = {
clip: null
}
// this.state.bind(this);
}
componentDidMount() {
fetch("https://developers.medal.tv/v1/latest?userId=215577&limit=1", {
method: 'get',
headers: {
'content-type': "application/json",
'accept': "application/json",
'authorization': 'pub_RwznDA6FJLbPmRMSBH57iJetpujJUu6a'
}
}).then(async response => {
let j = await response.json();
await this.setState({
clip: j.contentObjects[0]
})
})
}
playerRenderer() {
if (this.state.clip) {
return (
<div id={"player"}>
<div id={"iframe"}>
<iframe
width={"640"}
height={"360"}
style={{maxWidth: "100vw"}}
title={"MedalPlayer"}
src={this.state.clip.directClipUrl}
frameBorder={"0"}
allow={"autoplay"}
allowFullScreen
>
</iframe>
</div>
<p className={"cliptitle"}>{this.state.clip.contentTitle} -- recorded with <span className={"medaltv"}>Medal.tv</span></p>
</div>
)
} else {
return (
<div id={"player"}>
<p>wasn't able to get response</p>
</div>
)
}
}
render() {
if (this.state.clip !== null) return this.playerRenderer()
}
}
src/components/PageComponents.jsx
+65
View File
@@ -0,0 +1,65 @@
import React from 'react';
// components
import { MedalPlayer } from "./MedalPlayer";
import { Href } from "./Utils";
export class TopBar extends React.Component {
render() {
return (
<div id={"topbar"}>
<div className={"topbarcontent"}>
<h1>{this.props.headline}</h1>
<p>{this.props.subheading}</p>
</div>
</div>
)
}
}
export class Footer extends React.Component {
render() {
return (
<div id={"footer"}>
<div className={"fcontent"}>
<p>Made with &lt;3 by <Href url={"https://github.com/zevhr"} blank={true} content={"Alex"}></Href></p>
<div className={"socials"}>
<Href url={"https://github.com/zevhr"} blank={true} content={<i className="fa fa-github item" aria-hidden="true"></i>} />
<Href url={"https://twitter.com/zstreamss"} blank={true} content={<i className="fa fa-twitter item" aria-hidden="true"></i>} />
<Href url={"https://github.com/zevhr"} blank={true} content={<i className="fa fa-spotify item" aria-hidden="true"></i>} />
</div>
</div>
</div>
)
}
}
export class ClipShowcase extends React.Component {
render() {
return (
<div id={"clip"}>
<MedalPlayer />
</div>
)
}
}
export class ContactForm extends React.Component {
render() {
return (
<div className={"form"}>
<span className={"field-item"}>
<input type={"text"} className={"fields"} name={"name"} placeholder={"Name.."} />
</span>
<span className={"field-item"}>
<input type={"email"} className={"fields"} name={"email"} placeholder={"Email.."} />
</span>
<br />
<br />
<span>
<textarea name={"message"} style={{ textAlign: "center", }} className={"fields message"} placeholder={"Message.."}></textarea>
</span>
</div>
)
}
}
src/components/Pages/Contact.jsx
+17
View File
@@ -0,0 +1,17 @@
import React from 'react';
import { TopBar, ContactForm } from "../PageComponents";
export class Contact extends React.Component {
render() {
return (
<div id={"container"}>
<TopBar headline={"you want to contact me?"} subheading={"at least take me to dinner first"} />
<div id={"contact"}>
<h1 style={{ textAlign: "center", color: "white" }}>hit my line, like the cool kids say</h1>
<ContactForm />
</div>
</div>
)
}
}
src/components/Pages/Home.jsx
+15
View File
@@ -0,0 +1,15 @@
import React from 'react';
// components
import { TopBar, ClipShowcase } from '../PageComponents';
export class Home extends React.Component {
render() {
return (
<div id={"home_page"}>
<TopBar headline={"hi, i'm alex!"} subheading={"professional smooth brain, nodejs buillier, medal.tv whiffer"} />
<ClipShowcase />
</div>
)
}
}
src/components/Utils.jsx
+13
View File
@@ -0,0 +1,13 @@
import React from 'react';
export class Href extends React.Component {
render() {
return (
<a
href={this.props.url}
target={this.props.blank ? "_blank" : "_self"}
rel={"noreferrer"}
>{this.props.content}</a>
)
}
}
src/index.jsx
+1
View File
@@ -6,6 +6,7 @@ import { BrowserRouter } from 'react-router-dom'
import { App } from './components/App';
import './styling/anims.css';
import './styling/main.css';
import './styling/forms.css';
// "sitemap" for react components
export const pages = [
src/styling/forms.css
+36
View File
@@ -0,0 +1,36 @@
.form {
display:table;
text-align:center;
margin:auto;
padding:20px;
background-color:#cfcfcf;
border-radius:30px;
}
.fields {
display: table-cell;
background-color:black;
border-radius:50px;
outline:none;
caret-color:white;
color:white;
}
.fields::placeholder {
color:white;
}
.fields input[type=text] {
padding:0 50px;
}
.message {
/*max-width:50%;*/
resize:vertical;
width:100%;
max-height:200px;
}
.field-item {
padding:0 20px;
}
src/styling/main.css
+48 -4
View File
@@ -29,27 +29,52 @@ html, body {
}
/* home */
#home {
#topbar {
background-color:black;
position:relative;
max-height:40vh;
max-width:100vw;
color:white;
vertical-align:top;
}
.homecontent {
.topbarcontent {
padding:50px 15vw !important;
}
.homecontent p {
.topbarcontent p {
font-size:20px;
}
#home * {
#topbar * {
padding:0;
margin:0;
}
/* home - clip showcase */
@media screen and (min-width:900px) {
#clip {
padding:10vh 15vw;
}
}
#iframe {
position:relative;
}
.cliptitle {
color:white;
}
.medaltv {
color:orange;
}
#contact {
padding-bottom:50px;
}
/* global type stuff */
a {
@@ -61,3 +86,22 @@ a:hover {
color:#81A2A1;
animation:fadein;
}
#footer {
background-color:black;
max-height:40vh;
max-width:100vw;
color:white;
vertical-align:top;
text-align:center;
padding:10px;
}
.fcontent {
padding-bottom:10px;
}
.item {
font-size:30px;
padding:0 10px;
}