From e375cbe23d96cd3d58cf28b40260a0e7a3ce6e19 Mon Sep 17 00:00:00 2001 From: Nicholas Orlowsky Date: Tue, 21 Mar 2023 11:26:01 -0500 Subject: [PATCH] design changes and project updates --- src/App.css | 29 ----- src/Main.tsx | 6 +- src/components/about-me/AboutMe.tsx | 34 +++-- src/components/blog-card/BlogCard.css | 6 +- src/components/blog-card/BlogCard.tsx | 16 +-- src/components/blogs/Blogs.tsx | 19 ++- src/components/contact/Contact.tsx | 2 +- src/components/hero/Hero.tsx | 2 +- src/components/hobbies/Hobbies.tsx | 5 +- src/components/info-card/InfoCard.tsx | 2 +- src/components/jobs/Jobs.tsx | 2 +- src/components/navbar/Navbar.tsx | 9 +- src/components/project-card/ProjectCard.css | 31 +++-- src/components/project-card/ProjectCard.tsx | 28 ++-- src/components/projects/Projects.tsx | 4 +- src/pages/Blog.tsx | 15 --- src/pages/Home.css | 25 ---- src/pages/SingleBlog.tsx | 135 ++++++++++---------- src/static/data/Blogs.ts | 6 + src/static/data/Projects.ts | 14 +- src/types/Blog.ts | 1 + 21 files changed, 174 insertions(+), 217 deletions(-) delete mode 100644 src/pages/Blog.tsx diff --git a/src/App.css b/src/App.css index 9a68d1c..b8e8d5c 100644 --- a/src/App.css +++ b/src/App.css @@ -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% diff --git a/src/Main.tsx b/src/Main.tsx index e373602..508e8a1 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -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 = () => { } path='/contact'/> } path='/hobbies'/> } path='/projects'/> - } path='/blogs'/> - } path='/blog'/> + } path='/blogs'/> + } path='/blog/*'/> ); diff --git a/src/components/about-me/AboutMe.tsx b/src/components/about-me/AboutMe.tsx index d16fb01..d97cca7 100644 --- a/src/components/about-me/AboutMe.tsx +++ b/src/components/about-me/AboutMe.tsx @@ -2,32 +2,30 @@ import React from "react"; export default function AboutMe() { return ( -
-
-

About Me

-
-

+

+
+

About

+

I'm from Austin, Texas. I've been writing code for nearly 9 years and I'm currently going to The University of Texas at Austin

-
- -
-

+

I'm interested in infra and backend engineering.

-
-

If you would like to contact me, you can reach me at:

+

If you would like to contact me, you can reach me at:

nickorlow@nickorlow.com + +

Website originally created by Nicholas Orlowsky - Licensed under GNU General Public License v3 - Original source available here

+

Hosting provided by Nick Web Services (NWS)

); diff --git a/src/components/blog-card/BlogCard.css b/src/components/blog-card/BlogCard.css index 3e3b47a..8b8b63a 100644 --- a/src/components/blog-card/BlogCard.css +++ b/src/components/blog-card/BlogCard.css @@ -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; } diff --git a/src/components/blog-card/BlogCard.tsx b/src/components/blog-card/BlogCard.tsx index 5ed2004..342b688 100644 --- a/src/components/blog-card/BlogCard.tsx +++ b/src/components/blog-card/BlogCard.tsx @@ -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 ( - -
{window.location.href="/blog?id="+props.num}} className={"blog-card-int"}> - {/**/} +
+
-

{props.blog.title}

-

{props.blog.date.toLocaleDateString()}

+

{props.blog.title}

+

{props.blog.date.toLocaleDateString()}

-
- + +
); } diff --git a/src/components/blogs/Blogs.tsx b/src/components/blogs/Blogs.tsx index 5cd4640..02fd265 100644 --- a/src/components/blogs/Blogs.tsx +++ b/src/components/blogs/Blogs.tsx @@ -5,17 +5,16 @@ import {AllBlogs} from "../../static/data/Blogs"; export default function Blogs() { - let blogId = 0; - return ( -
-
- {AllBlogs.reverse().map((blog, i) => { - blogId++; - if(!blog.private) { - return - } - })} +
+
+

Blogs

+
+ {AllBlogs.sort((a, b)=> b.date.getTime() - a.date.getTime()).map((blog) => { + if(blog.private) return; + return + })} +
) diff --git a/src/components/contact/Contact.tsx b/src/components/contact/Contact.tsx index bb89814..d0542b5 100644 --- a/src/components/contact/Contact.tsx +++ b/src/components/contact/Contact.tsx @@ -2,7 +2,7 @@ import React from "react"; export default function Contact() { return ( -
+

Contact

diff --git a/src/components/hero/Hero.tsx b/src/components/hero/Hero.tsx index 1133c41..ba666aa 100644 --- a/src/components/hero/Hero.tsx +++ b/src/components/hero/Hero.tsx @@ -5,7 +5,7 @@ import React from "react"; export default function Hero() { return (
-
- +
- {AllHobbies.map((hobby) => )}
-
) } diff --git a/src/components/info-card/InfoCard.tsx b/src/components/info-card/InfoCard.tsx index 1b03a40..bbb71b1 100644 --- a/src/components/info-card/InfoCard.tsx +++ b/src/components/info-card/InfoCard.tsx @@ -12,7 +12,7 @@ export default function InfoCard(props: {style?: any, className?: string, info:

{props.info.listTitle}

- {props.info.list.map(s =>

{s}

)} + {props.info.list.map(s =>

{s}

)}
{props.info.link != null && {props.info.linkTitle || "Relevant Link"}} diff --git a/src/components/jobs/Jobs.tsx b/src/components/jobs/Jobs.tsx index 70e2d5d..cc54c81 100644 --- a/src/components/jobs/Jobs.tsx +++ b/src/components/jobs/Jobs.tsx @@ -8,7 +8,7 @@ import {Carousel} from "react-bootstrap"; export default function Jobs() { const [cur, setCur] = useState(1); return ( -
+

Work

{AllJobs.map((job, i) =>)} diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index f7a6bd0..4663fed 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -24,10 +24,11 @@ export default function Navbar() { Projects
-
- Hobbies -
-
+ {/*Disabling this page for now*/} + {/*
*/} + {/* Hobbies*/} + {/*
*/} + {/*
*/}
) diff --git a/src/components/project-card/ProjectCard.css b/src/components/project-card/ProjectCard.css index 0a1fe1e..437bc66 100644 --- a/src/components/project-card/ProjectCard.css +++ b/src/components/project-card/ProjectCard.css @@ -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; +} diff --git a/src/components/project-card/ProjectCard.tsx b/src/components/project-card/ProjectCard.tsx index 0913df3..d367297 100644 --- a/src/components/project-card/ProjectCard.tsx +++ b/src/components/project-card/ProjectCard.tsx @@ -8,20 +8,20 @@ export default function ProjectCard(props: {info: ProjectCardProps}) { return (
-
{setModalOpen(true)}}> -

{props.info.title}

-

{props.info.shortDescription}

-
-
- {props.info.techUsed.slice(0, 3).map(s => -
-
-

{s}

-
-
- )} -
-
+
{setModalOpen(true)}}> +

{props.info.title}

+

{props.info.shortDescription}

+ {/*
*/} + {/*
*/} + {/* {props.info.techUsed.slice(0, 3).map(s =>*/} + {/*
*/} + {/*
*/} + {/*

{s}

*/} + {/*
*/} + {/*
*/} + {/* )}*/} + {/*
*/} + {/*
*/}

{setModalOpen(false)}}>Back

diff --git a/src/components/projects/Projects.tsx b/src/components/projects/Projects.tsx index 1e5deb5..1781717 100644 --- a/src/components/projects/Projects.tsx +++ b/src/components/projects/Projects.tsx @@ -8,7 +8,7 @@ import ProjectCard from "../project-card/ProjectCard"; export default function Projects() { const [cur, setCur] = useState(1); return ( -
+
-
+

Projects

Click to learn more about each project

diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx deleted file mode 100644 index 7efff65..0000000 --- a/src/pages/Blog.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, {useState} from 'react'; -import './Home.css'; -import Blogs from "../components/blogs/Blogs"; - -function Blog() { - - return ( -
-

Blog

- -
- ); -} - -export default Blog; diff --git a/src/pages/Home.css b/src/pages/Home.css index e30c786..3e7a946 100644 --- a/src/pages/Home.css +++ b/src/pages/Home.css @@ -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% diff --git a/src/pages/SingleBlog.tsx b/src/pages/SingleBlog.tsx index f9f57a9..9187c5a 100644 --- a/src/pages/SingleBlog.tsx +++ b/src/pages/SingleBlog.tsx @@ -5,82 +5,87 @@ 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(undefined); + const [blogText, setBlogText] = useState(''); 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) - .then(response => { - return response.text() - }) - .then(text => { - setBlog(text) - }) + useEffect(()=> { + if(blog === undefined) return; + fetch(blog.mdfile) + .then(response => { + return response.text() + }) + .then(text => { + setBlogText(text) + }) + }, [blog]); return ( -
-

{AllBlogs[blogId].title}

-

{AllBlogs[blogId].date.toLocaleDateString()}

-

Back

-
-
- - ) : ( - - {children} - - ) - } - }} - > - {blog} - -
-
- - ) : ( - - {children} - - ) - } - }} - > - {blog} - + blog === undefined ?
: +
+

{blog.title}

+

{blog.date.toLocaleDateString()}

+

Back

+
+
+ + ) : ( + + {children} + + ) + } + }} + > + {blogText} + +
+
+ + ) : ( + + {children} + + ) + } + }} + > + {blogText} + +
-
+ ); } diff --git a/src/static/data/Blogs.ts b/src/static/data/Blogs.ts index 355870a..fae5161 100644 --- a/src/static/data/Blogs.ts +++ b/src/static/data/Blogs.ts @@ -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, diff --git a/src/static/data/Projects.ts b/src/static/data/Projects.ts index 50cc759..6b86597 100644 --- a/src/static/data/Projects.ts +++ b/src/static/data/Projects.ts @@ -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]; diff --git a/src/types/Blog.ts b/src/types/Blog.ts index 1ceca86..71391b4 100644 --- a/src/types/Blog.ts +++ b/src/types/Blog.ts @@ -1,4 +1,5 @@ export default interface Blog { + uri: string, title: string, date: Date image: string,