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

added showcase alignment, columns, 404 page

Browse Source
This commit is contained in:
alex 3
2022-10-03 21:07:17 -04:00
parent 74fda8a1d1
commit ea8418e034
7 changed files with 196 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+11 -3
View File
@@ -6,8 +6,16 @@
<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"
name="og:description"
content="welcome to my website! here, you can find my portfolio and stuff about me along with any links to my socials!"
/>
<meta
name="og:title"
content="thatalex.dev"
/>
<meta
name="og:url"
content="https://thatalex.dev"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
@@ -29,7 +37,7 @@
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>
<title>alex!</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
src/components/App.jsx
+2 -1
View File
@@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom';
// components/resources
import { NavBar } from './Nav';
import { Footer } from './PageComponents'
import { Footer, NotFound } from './PageComponents'
// pages
import { Home } from './Pages/Home';
@@ -17,6 +17,7 @@ export class App extends React.Component {
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/contact" element={<Contact />}></Route>
<Route path={"*"} element={<NotFound />}></Route>
</Routes>
<Footer/>
</div>
src/components/MedalPlayer.jsx
-2
View File
@@ -7,8 +7,6 @@ export class MedalPlayer extends React.Component {
this.state = {
clip: null
}
// this.state.bind(this);
}
componentDidMount() {
src/components/PageComponents.jsx
+99 -15
View File
@@ -4,13 +4,54 @@ import React from 'react';
import { MedalPlayer } from "./MedalPlayer";
import { Href } from "./Utils";
export class TopBar extends React.Component {
export class ShowcaseBar extends React.Component {
render() {
return (
<div id={"topbar"}>
<div className={"topbarcontent"}>
<h1>{this.props.headline}</h1>
<p>{this.props.subheading}</p>
<div id={"bar"}>
<div
className={this.props.align === "right" ? "showcase_content align-showcase-right" : "showcase_content align-showcase-left"}>
{this.props.image ? <React.Fragment>
<span id={"bar-img"} style={{verticalAlign:"right", display: "inline-block", float:this.props.alignImage}}>
<img src={this.props.image} alt={"Showcase"} />
</span>
</React.Fragment> : <React.Fragment></React.Fragment>}
<h1 style={{display:"inline-block"}}>{this.props.headline}</h1>
<span id={"subheading"}><p>{this.props.subheading}</p></span>
</div>
</div>
)
}
}
export class ShowcaseColumns extends React.Component {
render() {
return (
<div style={{ paddingLeft: "19vw" }}>
<div style={{ height:"100vh", paddingRight:"0 50vw" }} id={"bar-column"} className={"row"}>
<div className={"column"}>
<p className={"column-header"}>
{this.props.column1.title}
</p>
<p className={"column-subheader"}>
{this.props.column1.description}
</p>
</div>
<div className={"column"}>
<p className={"column-header"}>
{this.props.column2.title}
</p>
<p className={"column-subheader"}>
{this.props.column2.description}
</p>
</div>
<div className={"column"}>
<p className={"column-header"}>
{this.props.column3.title}
</p>
<p className={"column-subheader"}>
{this.props.column3.description}
</p>
</div>
</div>
</div>
)
@@ -22,7 +63,7 @@ export class Footer extends React.Component {
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>
<p>Made with &lt;3 by <Href url={"https://github.com/zevhr"} blank={true} content={"Alex"} /></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>} />
@@ -34,17 +75,11 @@ export class Footer extends React.Component {
}
}
export class ClipShowcase extends React.Component {
render() {
return (
<div id={"clip"}>
<MedalPlayer />
</div>
)
}
export class ContactForm extends React.Component {
sendResponse() {
// todo: logic to send message via api endpoint
}
export class ContactForm extends React.Component {
render() {
return (
<div className={"form"}>
@@ -63,3 +98,52 @@ export class ContactForm extends React.Component {
)
}
}
export class NotFound extends React.Component {
componentDidMount() {
let keys = [];
let count = 0;
document.addEventListener("keydown", (e) => {
if (e.keyCode <= 90 && e.keyCode >= 48) {
keys.push(e.key);
}
if (e.key.toLowerCase() === "backspace") {
keys.pop();
} else if (keys.join('') === "thisisnotadrill") {
if (count >= 5) {
window.location.href = "/capy";
} else {
document.getElementById("lawd").style.display = "block";
document.getElementById("anim").style.display = "block";
setTimeout(() => {
document.getElementById("lawd").style.display = "none";
document.getElementById("anim").style.display = "none";
keys = [];
count++;
console.log("count: " + count)
}, 4000)
}
}
})
}
render() {
return (
<div style={{ backgroundColor: "black", height:"100vh", textAlign: "center", color:"white" }} id={"404"}>
<img width={"350"} alt={"jeremi"} src={"https://im3.ezgif.com/tmp/ezgif-3-b699b91275.gif"}/>
<span style={{ fontSize: "20px" }}>
<h3>well that's not good.</h3>
<p>this page doesn't exist. you should get outta here pal, before things get bad</p>
</span>
<span id={"lawd"} style={{ display: "none" }}><p>oh lawd... oh lawd he comin!</p></span>
<div id={"anim"} style={{ display: "none" }}>
<img style={{ transform: "scaleX(-1)" }} alt={"capy"} src={"https://c.tenor.com/AMMqaJ99koYAAAAC/capybara-walk.gif"} />
</div>
</div>
)
}
}
src/components/Pages/Contact.jsx
+2 -2
View File
@@ -1,12 +1,12 @@
import React from 'react';
import { TopBar, ContactForm } from "../PageComponents";
import { ShowcaseBar, 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"} />
<ShowcaseBar 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 />
src/components/Pages/Home.jsx
+23 -3
View File
@@ -1,14 +1,34 @@
import React from 'react';
// components
import { TopBar, ClipShowcase } from '../PageComponents';
import { ShowcaseBar,ShowcaseColumns } 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 />
<ShowcaseBar headline={"hi, i'm alex!"} subheading={"professional smooth brain, nodejs buillier, medal.tv whiffer"} align={"left"} />
<ShowcaseBar headline={"lotta cool stuff"} subheading={"what am i doin? well, workin at Medal + making stuff like this"} align={"right"} image={"https://cdn.medal.tv/assets/img/new-medal-logo-small.png"} alignImage={"left"} />
<ShowcaseColumns
column1={
{
title: "wow cool stuff i've been workin on extra long too",
description: "look at me go"
}
}
column2={
{
title: "hooooly this is cool stuff",
description: "wow why am i offcentered"
}
}
column3={
{
title: "columns! pog pog pog pog pog pog pog pog pog pog pog pogpo ogpogpogpggpogogp'oi",
description: "The Tsunami wave crashed against the raised houses and broke the pilings as if they were toothpicks."
}
}
/>
</div>
)
}
src/styling/main.css
+58 -8
View File
@@ -3,6 +3,7 @@ html, body {
padding:0;
background-color:#3E3E3E;
font-family: 'IBM Plex Sans', sans-serif;
overflow-x:hidden;
}
/* nav styling */
@@ -28,8 +29,7 @@ html, body {
animation-duration:0.5s;
}
/* home */
#topbar {
#bar {
background-color:black;
position:relative;
max-height:40vh;
@@ -38,20 +38,58 @@ html, body {
vertical-align:top;
}
.topbarcontent {
.showcase_content {
padding:50px 15vw !important;
}
.topbarcontent p {
.showcase_content p {
font-size:20px;
}
#topbar * {
#subheading {
max-width:100px;
}
.align-showcase-left {
text-align:left;
}
.align-showcase-right {
text-align:right;
}
#anim {
animation-duration: 5s;
animation-name: goRight;
animation-iteration-count: initial;
left: -200px;
position: absolute;
}
#bar * {
padding:0;
margin:0;
}
/* home - clip showcase */
.column {
width:25%;
height:55vh;
background-color:gray;
border:3px black solid;
float:left;
}
.column-header {
float:left;
width:90%;
font-size:25px;
padding:0 1vw;
}
.column-subheader {
padding: 0 1vw;
}
@media screen and (min-width:900px) {
#clip {
padding:10vh 15vw;
@@ -75,8 +113,6 @@ html, body {
padding-bottom:50px;
}
/* global type stuff */
a {
color:white;
text-decoration:none;
@@ -95,6 +131,10 @@ a:hover {
vertical-align:top;
text-align:center;
padding:10px;
bottom:0;
position:fixed;
width:100%;
z-index:10;
}
.fcontent {
@@ -105,3 +145,13 @@ a:hover {
font-size:30px;
padding:0 10px;
}
@keyframes goRight {
from {
transform: translate(0,0);
}
to {
transform: translate(150vw,0);
}
}