nickorlow/personal-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design changes and project updates

Browse source
This commit is contained in:
Nicholas Orlowsky 2023-03-21 11:26:01 -05:00
parent 6ad19a8bfa
commit e375cbe23d
21 changed files with 174 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/about-me/AboutMe.tsx
View file

@ -2,32 +2,30 @@ import React from "react";
export default function AboutMe() {
return (
<div className={"child"} style={{minHeight: "100vh"}}>
<div style={{
display: "flex",
flexDirection:"column",
alignItems: "center",
alignContent: "center",
justifyContent: "center",
minHeight: "50rem"
}}>
<h1 style={{marginBottom: 20}}>About Me</h1>
<div style={{width: "100vw", justifyContent: "center", display: "flex"}}>
<p style={{maxWidth: 600}}>
<div style={{
display: "flex",
flexDirection:"column",
alignItems: "center",
alignContent: "center",
justifyContent: "center",
height: "95vh"
}}>
<div style={{maxWidth: 600}}>
<h1>About</h1>
<p>
I'm from Austin, Texas. I've been writing code for nearly 9 years and I'm
currently going to <b>The University of Texas at Austin</b>
</p>
</div>
<div style={{width: "100vw", justifyContent: "center", display: "flex"}}>
<p style={{maxWidth: 600}}>
<p>
I'm interested in infra and backend engineering.
</p>
</div>
<p style={{maxWidth: 600}}>If you would like to contact me, you can reach me at:</p>
<p className={"mb-0"}>If you would like to contact me, you can reach me at:</p>
<a href={"mailto:nickorlow@nickorlow.com"}>nickorlow@nickorlow.com</a>
<p style={{color: "grey"}} className={"mb-0 mt-4 small"}>Website originally created by Nicholas Orlowsky - Licensed under GNU General Public License v3 - Original source available <a href={"https://github.com/nickorlow/personal-site"}>here</a></p>
<p className={"small"}>Hosting provided by <a href={"https://nws.nickorlow.com"}>Nick Web Services (NWS)</a></p>
</div>
</div>
);

6
src/components/blog-card/BlogCard.css
View file

@ -25,12 +25,14 @@
.blog-card-int {
border-radius: 7px;
background-color: #1a1a1e;
font-family: monospace;
transition: 1s;
color: #FFFFFF;
}
.blog-card-int:hover {
transform: translateY(-5px);
color: #F38020;
transition: .5s;
cursor: pointer;
text-decoration: none;
}

16
src/components/blog-card/BlogCard.tsx
View file

@ -1,19 +1,19 @@
import ScrollAnimation from "react-animate-on-scroll";
import React from "react";
import {Link} from "react-router-dom";
import Job from "../../types/Job";
import "./BlogCard.css";
import Blog from "../../types/Blog";
export default function BlogCard(props: {style?: any, className?: string, blog: Blog, num: number}){
export default function BlogCard(props: {style?: any, className?: string, blog: Blog}){
return (
<ScrollAnimation className={"blog-card "+(props.className || "")} style={props.style} animateIn="fade-up" duration={2} animateOnce={true} offset={50} delay={200}>
<div onClick={()=>{window.location.href="/blog?id="+props.num}} className={"blog-card-int"}>
{/*<img className={"blog-card-img"} src={props.blog.image}/>*/}
<div className={"blog-card "+(props.className || "")} style={props.style}>
<Link to={"/blog/"+props.blog.uri} className={"blog-card-int"}>
<div className={"blog-card-info"}>
<h3>{props.blog.title}</h3>
<p>{props.blog.date.toLocaleDateString()}</p>
<h4 className={"font-weight-bold"}>{props.blog.title}</h4>
<p className={"font-weight-lighter"}>{props.blog.date.toLocaleDateString()}</p>
</div>
</div>
</ScrollAnimation>
</Link>
</div>
);
}

19
src/components/blogs/Blogs.tsx
View file

@ -5,17 +5,16 @@ import {AllBlogs} from "../../static/data/Blogs";
export default function Blogs() {
let blogId = 0;
return (
<div className={"child"}>
<div className={"row"} style={{alignContent: "center"}}>
{AllBlogs.reverse().map((blog, i) => {
blogId++;
if(!blog.private) {
return <BlogCard num={AllBlogs.length - blogId} className={"col-md-4"} blog={blog}/>
}
})}
<div className={"h-100 d-md-flex justify-content-center align-items-center"}>
<div>
<h1 className={"mt-4"}>Blogs</h1>
<div className={"row"} style={{alignContent: "center"}}>
{AllBlogs.sort((a, b)=> b.date.getTime() - a.date.getTime()).map((blog) => {
if(blog.private) return;
return <BlogCard className={"col-md-4"} blog={blog}/>
})}
</div>
</div>
</div>
)

2
src/components/contact/Contact.tsx
View file

@ -2,7 +2,7 @@ import React from "react";
export default function Contact() {
return (
<div className={"child"} style={{minHeight: "90vh"}}>
<div style={{minHeight: "90vh"}}>
<div style={{minHeight: "90vh", display: "flex", alignItems: "center", justifyContent: "center"}}>
<div>
<h1>Contact</h1>

2
src/components/hero/Hero.tsx
View file

@ -5,7 +5,7 @@ import React from "react";
export default function Hero() {
return (
<div>
<div className={"child"} style={{
<div style={{
height: "95vh",
display: "flex",
alignContent: "center",

5
src/components/hobbies/Hobbies.tsx
View file

@ -8,14 +8,11 @@ import JobCard from "../job-card/JobCard";
export default function Hobbies () {
const [cur, setCur] = useState(1);
return (
<div className={"child"} style={{minHeight: "100vh"}}>
<div style={{minHeight: "100vh"}}>
<div>
{AllHobbies.map((hobby) => <InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
info={hobby}/>)}
</div>
</div>
)
}

2
src/components/info-card/InfoCard.tsx
View file

@ -12,7 +12,7 @@ export default function InfoCard(props: {style?: any, className?: string, info:
<div>
<h4>{props.info.listTitle}</h4>
<div className={"row"} style={{color: "green", fontFamily: "monospace"}}>
{props.info.list.map(s => <p className={"col-6 "+(props.info.listClassName || "col-md-4")} style={{fontSize: 16}}>{s}</p>)}
{props.info.list.map(s => <p className={"col-4"} style={{fontSize: 16}}>{s}</p>)}
</div>
</div>
{props.info.link != null && <a href={props.info.link}>{props.info.linkTitle || "Relevant Link"}</a>}

2
src/components/jobs/Jobs.tsx
View file

@ -8,7 +8,7 @@ import {Carousel} from "react-bootstrap";
export default function Jobs() {
const [cur, setCur] = useState(1);
return (
<div className={"child"} style={{minHeight: "100vh"}}>
<div style={{minHeight: "100vh"}}>
<div className={"align-content-center d-md-block d-none"}>
<h1 style={{marginBottom: 40}}>Work</h1>
{AllJobs.map((job, i) =><JobCard job={job}/>)}

9
src/components/navbar/Navbar.tsx
View file

@ -24,10 +24,11 @@ export default function Navbar() {
<Link to={"/projects"} className={"mb-0 no-blue-link"}>Projects</Link>
<div className={"navbar-selected-pill " + (location.pathname === "/projects" ? "" : "navbar-unselected-pill")}/>
</div>
<div className={"d-flex flex-column justify-content-center align-items-center"}>
<Link to={"/hobbies"} className={"mb-0 no-blue-link"}>Hobbies</Link>
<div className={"navbar-selected-pill " + (location.pathname === "/hobbies" ? "" : "navbar-unselected-pill")}/>
</div>
{/*Disabling this page for now*/}
{/*<div className={"d-flex flex-column justify-content-center align-items-center"}>*/}
{/* <Link to={"/hobbies"} className={"mb-0 no-blue-link"}>Hobbies</Link>*/}
{/* <div className={"navbar-selected-pill " + (location.pathname === "/hobbies" ? "" : "navbar-unselected-pill")}/>*/}
{/*</div>*/}
</div>
</div>
)

31
src/components/project-card/ProjectCard.css
View file

@ -4,17 +4,15 @@
}
.project-card-int {
background-color: #222;
font-family: monospace;
padding: 2px;
background-size: cover;
background-position: center;
transition: .5s;
border-radius: 10px;
}
.project-card-int:hover {
transform: translateY(-5px);
transition: .5s;
color: #F38020;
cursor: pointer;
}
@ -48,6 +46,7 @@
}
.lang-card {
color: white;
border-radius: 5px;
font-family: monospace;
background-color: #00AA00;
@ -79,7 +78,7 @@
}
.react {
background-color: #61DAFB;
background-color: #0cc4f6;
}
.typescript {
@ -130,11 +129,11 @@
background-color: #1572B6;
}
.xenhtml {
.xenhtmlframework {
background-color: #3A6A81;
}
.xeninfo {
.xeninfoapi {
background-color: #3E4E57;
}
@ -142,15 +141,15 @@
background-color: #007396;
}
.apple-script {
background-color: #D9D9D9;
.applescript {
background-color: #a8a8a8;
}
.spotify {
.spotifyapi {
background-color: #1DB954;
}
.nodejs {
.node\.js {
background-color: #339933;
}
@ -158,7 +157,7 @@
background-color: #0075A8;
}
.azure-devops {
.azuredevops {
background-color: #0078D7;
}
@ -169,3 +168,11 @@
.mssql {
background-color: #CC2927;
}
.rust {
background-color: #CE412B;
}
.discordapi {
background-color: #7289DA;
}

28
src/components/project-card/ProjectCard.tsx
View file

@ -8,20 +8,20 @@ export default function ProjectCard(props: {info: ProjectCardProps}) {
return (
<div className={"project-card col-md-4 p-2"}>
<div className={"project-card-int pb-2"} style={{backgroundImage: "linear-gradient(to bottom, rgba(0, 0, 0, .60) 50%, rgba(0, 0, 0, 0.75) 100%), url(\""+props.info.imageUrl+"\")"}} onClick={()=>{setModalOpen(true)}}>
<h3>{props.info.title}</h3>
<p>{props.info.shortDescription}</p>
<div>
<div className={"row"} style={{fontFamily: "monospace"}}>
{props.info.techUsed.slice(0, 3).map(s =>
<div className={"col-md-4 col-12 mt-2"}>
<div className={"lang-card "+s.toLowerCase().replace(" ", "")}>
<p style={{fontSize: 16, margin: 0}}>{s}</p>
</div>
</div>
)}
</div>
</div>
<div className={"project-card-int pb-2 justify-content-center align-items-center d-flex flex-column"} style={{backgroundImage: "linear-gradient(to bottom, rgba(0, 0, 0, .60) 50%, rgba(0, 0, 0, 0.75) 100%), url(\""+props.info.imageUrl+"\")"}} onClick={()=>{setModalOpen(true)}}>
<h4 className={"font-weight-bold"}>{props.info.title}</h4>
<p className={"font-weight-lighter w-75"}>{props.info.shortDescription}</p>
{/*<div>*/}
{/* <div className={"row"} style={{fontFamily: "monospace"}}>*/}
{/* {props.info.techUsed.slice(0, 3).map(s =>*/}
{/* <div className={"col-md-4 col-12 mt-2"}>*/}
{/* <div className={"lang-card "+s.toLowerCase().replace(" ", "")}>*/}
{/* <p style={{fontSize: 16, margin: 0}}>{s}</p>*/}
{/* </div>*/}
{/* </div>*/}
{/* )}*/}
{/* </div>*/}
{/*</div>*/}
</div>
<Modal className={"project-card-modal"} isOpen={isModalOpen}>
<p className={"back-button"} onClick={()=>{setModalOpen(false)}}>Back</p>

4
src/components/projects/Projects.tsx
View file

@ -8,7 +8,7 @@ import ProjectCard from "../project-card/ProjectCard";
export default function Projects() {
const [cur, setCur] = useState(1);
return (
<div className={"child"} style={{minHeight: "100vh"}}>
<div style={{minHeight: "100vh"}}>
<div style={{
display: "flex",
@ -20,7 +20,7 @@ export default function Projects() {
alignItems: "center"
}}>
<div className={"align-content-center"}>
<div className={"align-content-center mb-4 mt-4"}>
<h1>Projects</h1>
<p>Click to learn more about each project</p>
<div className={"row m-0"} style={{justifyContent: "center", padding: 50}}>