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

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
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/App.css
View file

@ -21,24 +21,6 @@ html {
animation: fade-down-anim 2s forwards 3s;
}
/* we do this because scroll snapping is broken on moz://a for some reason */
@supports (-moz-appearance:none){
html {
scroll-snap-type: none !important;
}
}
/* mobile won't play with snapping too well so we need to make it prox not mandatory */
@media only screen and (max-width: 600px) {
html {
scroll-snap-type: none !important;
}
.child {
scroll-snap-align: none !important;
}
}
h1 {
font-weight: bolder;
}
@ -160,17 +142,6 @@ h1 {
animation: move-left-atx-anim 1s forwards;
}
html {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: center;
}
.pfp {
border-radius: 100%;
width: 25%

6
src/Main.tsx
View file

@ -1,7 +1,6 @@
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Blog from "./pages/Blog";
import SingleBlog from "./pages/SingleBlog";
import Navbar from "./components/navbar/Navbar";
import Hero from "./components/hero/Hero";
@ -9,6 +8,7 @@ import AboutMe from "./components/about-me/AboutMe";
import Contact from "./components/contact/Contact";
import Hobbies from "./components/hobbies/Hobbies";
import Projects from "./components/projects/Projects";
import Blogs from "./components/blogs/Blogs";
const NavBarView = (props: {children: any}) => {
@ -35,8 +35,8 @@ const Main = () => {
<Route element={<NavBarView><Contact/></NavBarView>} path='/contact'/>
<Route element={<NavBarView><Hobbies/></NavBarView>} path='/hobbies'/>
<Route element={<NavBarView><Projects/></NavBarView>} path='/projects'/>
<Route element={<NavBarView><Blog/></NavBarView>} path='/blogs'/>
<Route element={<SingleBlog/>} path='/blog'/>
<Route element={<NavBarView><Blogs/></NavBarView>} path='/blogs'/>
<Route element={<SingleBlog/>} path='/blog/*'/>
</Routes>
</div>
);

20
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"
height: "95vh"
}}>
<h1 style={{marginBottom: 20}}>About Me</h1>
<div style={{width: "100vw", justifyContent: "center", display: "flex"}}>
<p style={{maxWidth: 600}}>
<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;
}

14
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>
</Link>
</div>
</ScrollAnimation>
);
}

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

@ -5,18 +5,17 @@ import {AllBlogs} from "../../static/data/Blogs";
export default function Blogs() {
let blogId = 0;
return (
<div className={"child"}>
<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.reverse().map((blog, i) => {
blogId++;
if(!blog.private) {
return <BlogCard num={AllBlogs.length - blogId} className={"col-md-4"} blog={blog}/>
}
{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}}>

15
src/pages/Blog.tsx
View file

@ -1,15 +0,0 @@
import React, {useState} from 'react';
import './Home.css';
import Blogs from "../components/blogs/Blogs";
function Blog() {
return (
<div className="Blog" style={{padding: 20}}>
<h1>Blog</h1>
<Blogs/>
</div>
);
}
export default Blog;

25
src/pages/Home.css
View file

@ -20,23 +20,7 @@ html {
background-color: black;
}
/* we do this because scroll snapping is broken on moz://a for some reason */
@supports (-moz-appearance:none){
html {
scroll-snap-type: none !important;
}
}
/* mobile won't play with snapping too well so we need to make it prox not mandatory */
@media only screen and (max-width: 600px) {
html {
scroll-snap-type: none !important;
}
.child {
scroll-snap-align: none !important;
}
}
h1 {
font-weight: bolder;
@ -154,15 +138,6 @@ ul {
}
html {
scroll-snap-type: y proximity;
}
.child {
scroll-snap-align: center;
}
.pfp {
border-radius: 100%;
width: 25%

27
src/pages/SingleBlog.tsx
View file

@ -5,30 +5,34 @@ import {AllBlogs} from "../static/data/Blogs";
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {a11yDark as theme} from "react-syntax-highlighter/dist/esm/styles/prism";
import {Link} from "react-router-dom";
import Blog from "../types/Blog";
function SingleBlog() {
const [blog, setBlog] = useState('');
const [blogId, setBlogId] = useState(0);
const [blog, setBlog] = useState<Blog | undefined>(undefined);
const [blogText, setBlogText] = useState<string>('');
useEffect(()=> {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
setBlogId(parseInt(urlParams.get('id') || ''));
let blogName = window.location.pathname.split('/').at(-1);
setBlog(AllBlogs.find(b => b.uri == blogName));
}, [])
fetch(AllBlogs[blogId].mdfile)
useEffect(()=> {
if(blog === undefined) return;
fetch(blog.mdfile)
.then(response => {
return response.text()
})
.then(text => {
setBlog(text)
setBlogText(text)
})
}, [blog]);
return (
blog === undefined ? <div></div> :
<div className="Blog" style={{paddingTop: 30}}>
<h1>{AllBlogs[blogId].title}</h1>
<p>{AllBlogs[blogId].date.toLocaleDateString()}</p>
<h1>{blog.title}</h1>
<p>{blog.date.toLocaleDateString()}</p>
<p><Link to={"/blogs"}>Back</Link></p>
<div style={{width: "100%", display: 'flex', justifyContent: 'center'}}>
<div className={"d-md-none d-block"} style={{textAlign: "left", margin: 20}}>
@ -52,7 +56,7 @@ function SingleBlog() {
}
}}
>
{blog}
{blogText}
</ReactMarkdown>
</div>
<div className={"d-none d-md-block"} style={{textAlign: "left", margin: 20, maxWidth: "80vw"}}>
@ -76,11 +80,12 @@ function SingleBlog() {
}
}}
>
{blog}
{blogText}
</ReactMarkdown>
</div>
</div>
</div>
);
}

6
src/static/data/Blogs.ts
View file

@ -8,6 +8,7 @@ import SP2023 from "./blogs/spring-break-projects-2023.md";
import SPLG1 from "./blogs/side-project-log-3-20-2023.md";
const CSharpBlog: Blog = {
uri: "c-assignments-in-csharp",
title: "Doing C assignments in C#",
date: new Date(2022, 2, 18, 14, 15, 0),
image: VrboImage,
@ -16,6 +17,7 @@ const CSharpBlog: Blog = {
}
const TestBlog: Blog = {
uri: "there-is-a-blog",
title: "There's a Blog!",
date: new Date(2022, 7, 6, 12, 0, 0),
image: VrboImage,
@ -24,6 +26,7 @@ const TestBlog: Blog = {
}
const PrivateBlog: Blog = {
uri: "private-blog",
title: "This blog can only be accessed via the direct URI",
date: new Date(2022, 7, 6, 12, 0, 0),
image: VrboImage,
@ -32,6 +35,7 @@ const PrivateBlog: Blog = {
}
const NWSSSLBlog: Blog = {
uri: "ssl-in-nws-cds",
title: "Implementing SSL in NWS CDS",
date: new Date(2023, 0, 20, 12, 0, 0),
image: VrboImage,
@ -40,6 +44,7 @@ const NWSSSLBlog: Blog = {
}
const SpringBreak2023Blog: Blog = {
uri: "spring-break-2023",
title: "Spring Break 2023",
date: new Date(2023, 2, 11, 12, 0, 0),
image: VrboImage,
@ -49,6 +54,7 @@ const SpringBreak2023Blog: Blog = {
const SideProjectLogOne: Blog = {
uri: "side-project-log-3-20-2023",
title: "Side Project Log 3/20/23",
date: new Date(2023, 2, 20, 12, 0, 0),
image: VrboImage,

14
src/static/data/Projects.ts
View file

@ -24,7 +24,7 @@ const RoomyProject: ProjectCardProps = {
const CavCashProject: ProjectCardProps = {
title: "CavCash",
description: "CavCash started as a project in 2017 as a way to pay with flashdrives. After recruiting a few friends to help me, we build ourselves into a PayPal competitor but shutdown due to funding. I continued to re-write the platform as a cryptocurrency.",
shortDescription: "Functional Venmo-like service",
shortDescription: "Like Venmo, but better",
techUsed: ["C#", "Kubernetes", "mongoDB", "MSSQL", "Docker", "nginx", "Azure DevOps", "React", "Cloudflare"],
link: "https://cavcash.com",
linkTitle: "Project Website",
@ -61,5 +61,15 @@ const NWSProject: ProjectCardProps = {
imageUrl: ""
}
export const AllProjects: ProjectCardProps[] = [WebsiteProject, NWSProject, RoomyProject, XenMapProject, CavCashProject, SPONODEProject];
const Mahantongo: ProjectCardProps = {
title: "Mahantongo",
description: "I'm one of the members of the Community Team that runs some UT Computer Science community Discord servers. Currently, a Discord bot called Carlbot provides us a star-board, which is a specific channel where messages that 5 or more people react to with a star emoji get posted. It's supposed to be a collection of the funniest and best messages sent on the server. One of the things our server members have wanted is the addition of more '*-board' channels where you can create multiple star-board like channels but with custom emojis. \n\n I wrote this bot in Rust using Serenity to interact with the Discord API and it helped me gain a better understanding of Rust. It is hosted on NWS.",
shortDescription: "A Discord bot to show off the best (or worst) of your server.",
link: "https://github.com/nickorlow/mahantongo",
linkTitle: "Github Repo",
techUsed: ["Discord API", "Rust"],
imageUrl: ""
}
export const AllProjects: ProjectCardProps[] = [WebsiteProject, NWSProject, Mahantongo, RoomyProject, XenMapProject, CavCashProject, SPONODEProject];

1
src/types/Blog.ts
View file

@ -1,4 +1,5 @@
export default interface Blog {
uri: string,
title: string,
date: Date
image: string,