project updates and blog
This commit is contained in:
parent
261a4fcacd
commit
dec88e2842
|
|
@ -12,6 +12,7 @@
|
|||
"@types/react": "^17.0.0",
|
||||
"@types/react-animate-on-scroll": "^2.1.2",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
"@types/react-modal": "^3.13.1",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"@types/react-slick": "^0.23.4",
|
||||
"@types/react-syntax-highlighter": "^13.5.2",
|
||||
|
|
@ -24,6 +25,7 @@
|
|||
"react-bootstrap": "^1.6.1",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-markdown": "^8.0.3",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-responsive-carousel": "^3.2.23",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "4.0.3",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
|
||||
.blog-card-int {
|
||||
border-radius: 10px;
|
||||
border-radius: 7px;
|
||||
background-color: #1a1a1e;
|
||||
transition: 1s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,36 +9,13 @@ export default function Hobbies () {
|
|||
const [cur, setCur] = useState(1);
|
||||
return (
|
||||
<div className={"child"} style={{minHeight: "100vh"}}>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
width: "96vw",
|
||||
height: "100vh",
|
||||
minHeight: "100vh",
|
||||
alignContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<div className={"d-md-block d-none"}>
|
||||
<h1>Hobbies</h1>
|
||||
|
||||
<div>
|
||||
|
||||
{AllHobbies.map((hobby) => <InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
|
||||
info={hobby}/>)}
|
||||
</div>
|
||||
|
||||
<div className={"align-content-center d-md-none"}>
|
||||
<h1 className={"mb-4"}>Other Hobbies</h1>
|
||||
<p>{cur}/{AllHobbies.length}</p>
|
||||
<Carousel controls={false} interval={null} onSlide={(e)=>{setCur(e+1)}} indicators={false} wrap={false}>
|
||||
{AllHobbies.map((hobby, i) =>
|
||||
<Carousel.Item>
|
||||
<InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
|
||||
info={hobby}/>
|
||||
</Carousel.Item>
|
||||
)}
|
||||
</Carousel>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export default function Navbar() {
|
|||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<div style={{maxWidth:"100%", marginTop: 10}} className={"d-flex justify-content-center align-items-center " + (location.pathname === "/" ? "fade-down-d3s" : "")} >
|
||||
<div style={{maxWidth:"100%", marginTop: 10, maxHeight: "5vh"}} className={"d-flex justify-content-center align-items-center " + (location.pathname === "/" ? "fade-down-d3s" : "")} >
|
||||
<div className={"d-flex flex-row justify-content-around"} style={{width: 700}}>
|
||||
<div className={"d-flex flex-column justify-content-center align-items-center"}>
|
||||
<Link to={"/home"} className={"mb-0 no-blue-link"}>Home</Link>
|
||||
|
|
|
|||
171
src/components/project-card/ProjectCard.css
Normal file
171
src/components/project-card/ProjectCard.css
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
.project-card {
|
||||
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.project-card-int {
|
||||
background-color: #222;
|
||||
padding: 2px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
transition: .5s;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.project-card-int:hover {
|
||||
transform: translateY(-5px);
|
||||
transition: .5s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-card-modal {
|
||||
background-color: #000000;
|
||||
color: #FFFFFF;
|
||||
width: 100vmin;
|
||||
height: max-content;
|
||||
position: absolute;
|
||||
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
outline: none;
|
||||
padding: 5vmin;
|
||||
}
|
||||
|
||||
.ReactModal__Overlay {
|
||||
background-color: rgba(20,20,20,.8) !important;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.back-button {
|
||||
color: #2F74C0;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lang-card {
|
||||
border-radius: 5px;
|
||||
font-family: monospace;
|
||||
background-color: #00AA00;
|
||||
}
|
||||
|
||||
.lang-card-modal {
|
||||
border-radius: 5px;
|
||||
font-family: monospace;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
margin: 2px;
|
||||
width: max-content;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: #00AA00;
|
||||
}
|
||||
|
||||
.kubernetes {
|
||||
background-color: #326ce5;
|
||||
}
|
||||
|
||||
.c\# {
|
||||
background-color: #800080FF;
|
||||
}
|
||||
|
||||
.html {
|
||||
background-color: #e34c26;
|
||||
}
|
||||
|
||||
.react {
|
||||
background-color: #61DAFB;
|
||||
}
|
||||
|
||||
.typescript {
|
||||
background-color: #2F74C0;
|
||||
}
|
||||
|
||||
.bootstrap {
|
||||
background-color: #7952B3;
|
||||
}
|
||||
|
||||
.nws {
|
||||
background-color: #DB4437;
|
||||
}
|
||||
|
||||
.docker {
|
||||
background-color: #2496ED;
|
||||
}
|
||||
|
||||
.dotnet {
|
||||
background-color: #5C2D91;
|
||||
}
|
||||
|
||||
.nosql {
|
||||
background-color: #4EA94B;
|
||||
}
|
||||
|
||||
.nginx {
|
||||
background-color: #269539;
|
||||
}
|
||||
|
||||
.react-native {
|
||||
background-color: #61DBFB;
|
||||
}
|
||||
|
||||
.cloudflare {
|
||||
background-color: #F38020;
|
||||
}
|
||||
|
||||
.html {
|
||||
background-color: #E44D26;
|
||||
}
|
||||
|
||||
.javascript {
|
||||
background-color: #b9a617;
|
||||
}
|
||||
|
||||
.css {
|
||||
background-color: #1572B6;
|
||||
}
|
||||
|
||||
.xenhtml {
|
||||
background-color: #3A6A81;
|
||||
}
|
||||
|
||||
.xeninfo {
|
||||
background-color: #3E4E57;
|
||||
}
|
||||
|
||||
.java {
|
||||
background-color: #007396;
|
||||
}
|
||||
|
||||
.apple-script {
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
|
||||
.spotify {
|
||||
background-color: #1DB954;
|
||||
}
|
||||
|
||||
.nodejs {
|
||||
background-color: #339933;
|
||||
}
|
||||
|
||||
.rancher {
|
||||
background-color: #0075A8;
|
||||
}
|
||||
|
||||
.azure-devops {
|
||||
background-color: #0078D7;
|
||||
}
|
||||
|
||||
.mongodb {
|
||||
background-color: #47A248;
|
||||
}
|
||||
|
||||
.mssql {
|
||||
background-color: #CC2927;
|
||||
}
|
||||
44
src/components/project-card/ProjectCard.tsx
Normal file
44
src/components/project-card/ProjectCard.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import React, {useState} from "react";
|
||||
import "./ProjectCard.css";
|
||||
import ProjectCardProps from "../../types/ProjectCardProps";
|
||||
import Modal from "react-modal";
|
||||
|
||||
export default function ProjectCard(props: {info: ProjectCardProps}) {
|
||||
const [isModalOpen, setModalOpen] = useState(false);
|
||||
|
||||
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>
|
||||
<Modal className={"project-card-modal"} isOpen={isModalOpen}>
|
||||
<p className={"back-button"} onClick={()=>{setModalOpen(false)}}>Back</p>
|
||||
<h1>{props.info.title}</h1>
|
||||
<a href={props.info.link}>{props.info.linkTitle}</a>
|
||||
<p>{props.info.description}</p>
|
||||
<h3>All technologies used:</h3>
|
||||
<div className={"d-flex flex-wrap mw-100"}>
|
||||
{props.info.techUsed.map(s =>
|
||||
<div className={""}>
|
||||
<div className={"lang-card-modal "+s.toLowerCase().replace(" ", "")}>
|
||||
<p style={{fontSize: 16, margin: 0}}>{s}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import InfoCard from "../info-card/InfoCard";
|
|||
import React, {useState} from "react";
|
||||
import {AllHobbies} from "../../static/data/Hobbies";
|
||||
import {Carousel} from "react-bootstrap";
|
||||
import ProjectCard from "../project-card/ProjectCard";
|
||||
|
||||
export default function Projects() {
|
||||
const [cur, setCur] = useState(1);
|
||||
|
|
@ -19,28 +20,14 @@ export default function Projects() {
|
|||
alignItems: "center"
|
||||
}}>
|
||||
|
||||
<div className={"align-content-center d-md-block d-none"}>
|
||||
<div className={"align-content-center"}>
|
||||
<h1>Projects</h1>
|
||||
<p>(writing code is my biggest hobby)</p>
|
||||
<div className={"row m-0"} style={{justifyContent: "center", padding: 20}}>
|
||||
{AllProjects.map((project) => <InfoCard className={"col-md-6"} style={{textAlign: "left",marginTop: 35, paddingLeft: 20, paddingRight: 20}}
|
||||
info={project}/>)}
|
||||
<p>Click to learn more about each project</p>
|
||||
<div className={"row m-0"} style={{justifyContent: "center", padding: 50}}>
|
||||
{AllProjects.map((project) => <ProjectCard info={project}/>)}
|
||||
</div>
|
||||
<a href={"https://github.com/nickorlow"}>More on GitHub</a>
|
||||
</div>
|
||||
<div className={"align-content-center d-md-none"}>
|
||||
<h1 className={"mb-4"}>Projects</h1>
|
||||
<p>{cur}/{AllProjects.length}</p>
|
||||
<Carousel controls={false} interval={null} onSlide={(e)=>{setCur(e+1)}} indicators={false} wrap={false}>
|
||||
{AllProjects.map((project, i) =>
|
||||
<Carousel.Item>
|
||||
<InfoCard className={"col-md-6"} style={{textAlign: "left",marginTop: 35, paddingLeft: 20, paddingRight: 20}}
|
||||
info={project}/>
|
||||
</Carousel.Item>
|
||||
)}
|
||||
</Carousel>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -26,12 +26,36 @@ function SingleBlog() {
|
|||
})
|
||||
|
||||
return (
|
||||
<div className="Blog" style={{padding: 20}}>
|
||||
<div className="Blog" style={{paddingTop: 30}}>
|
||||
<h1>{AllBlogs[blogId].title}</h1>
|
||||
<p>{AllBlogs[blogId].date.toLocaleDateString()}</p>
|
||||
<p><Link to={"/blogs"}>Back</Link></p>
|
||||
<div style={{width: "100%", display: 'flex', justifyContent: 'center'}}>
|
||||
<div style={{textAlign: "left", margin: 20, maxWidth: "80vw"}}>
|
||||
<div className={"d-md-none d-block"} style={{textAlign: "left", margin: 20}}>
|
||||
<ReactMarkdown
|
||||
components={{
|
||||
code({node, inline, className, children, ...props}) {
|
||||
const match = /language-(\w+)/.exec(className || '')
|
||||
return !inline && match ? (
|
||||
<SyntaxHighlighter
|
||||
children={String(children).replace(/\n$/, '')}
|
||||
style={theme}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
{...props}
|
||||
/>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{blog}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
<div className={"d-none d-md-block"} style={{textAlign: "left", margin: 20, maxWidth: "80vw"}}>
|
||||
<ReactMarkdown
|
||||
components={{
|
||||
code({node, inline, className, children, ...props}) {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import TAB from "./blogs/there-is-a-blog.md";
|
|||
import HID from "./blogs/hidden-blog.md";
|
||||
import NWSSSL from "./blogs/nws-how-to-do-ssl.md";
|
||||
import SP2023 from "./blogs/spring-break-projects-2023.md";
|
||||
import SPLG1 from "./blogs/side-project-log-3-20-2023.md";
|
||||
|
||||
const CSharpBlog: Blog = {
|
||||
title: "Doing C assignments in C#",
|
||||
|
|
@ -47,5 +48,14 @@ const SpringBreak2023Blog: Blog = {
|
|||
}
|
||||
|
||||
|
||||
export const AllBlogs: Blog[] = [CSharpBlog, PrivateBlog, TestBlog, NWSSSLBlog, SpringBreak2023Blog];
|
||||
const SideProjectLogOne: Blog = {
|
||||
title: "Side Project Log 3/20/23",
|
||||
date: new Date(2023, 2, 20, 12, 0, 0),
|
||||
image: VrboImage,
|
||||
mdfile: SPLG1,
|
||||
private: false
|
||||
}
|
||||
|
||||
|
||||
export const AllBlogs: Blog[] = [CSharpBlog, PrivateBlog, TestBlog, NWSSSLBlog, SpringBreak2023Blog, SideProjectLogOne];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,49 +1,65 @@
|
|||
import InfoCardProps from "../../types/InfoCardProps";
|
||||
import ProjectCardProps from "../../types/ProjectCardProps";
|
||||
|
||||
const WebsiteProject: InfoCardProps = {
|
||||
title: "personal-site (this website)",
|
||||
description: "As a primairly backend guy, I wrote my last website as a JSON file (imitating a webAPI). Feedback showed that that was a bad idea so I made this pretty neat site (in my opinion). If you like it, feel free to use it yourself! The backend is run in a homemade datacenter (a few Dell Poweredges on a rack) running on Kubernetes.",
|
||||
listTitle: "Technologies & Resources used",
|
||||
list:["React", "Typescript", "Bootstrap", "NWS", "Docker", "Kubernetes"],
|
||||
const WebsiteProject: ProjectCardProps = {
|
||||
title: "Personal Site",
|
||||
description: "As a primarily backend guy, I wrote my last website as a JSON file (imitating a webAPI). Feedback showed that that was a bad idea so I made this pretty neat site (in my opinion). If you like it, feel free to use it yourself! The backend is run in a homemade datacenter (a few Dell Poweredges on a rack) running on Kubernetes.",
|
||||
shortDescription: "My personal website.",
|
||||
techUsed:["React", "Typescript", "Bootstrap", "NWS", "Docker", "Kubernetes"],
|
||||
link: "https://github.com/nickorlow/personal-site",
|
||||
linkTitle: "GitHub Repo"
|
||||
linkTitle: "GitHub Repo",
|
||||
imageUrl: ""
|
||||
}
|
||||
|
||||
const RoomyProject: InfoCardProps = {
|
||||
title: "roomy-sentry",
|
||||
const RoomyProject: ProjectCardProps = {
|
||||
title: "Roomy Sentry",
|
||||
description: "Built software to monitor the presence of a person based on sniffing the wi-fi packets of their mobile devices. Practically used in order to tell if my roommate is home.",
|
||||
listTitle: "Technologies Used",
|
||||
list: ["C#", ".NET 6", "NoSQL", "Docker", "nginx", "React Native", "Cloudflare"],
|
||||
shortDescription: "Find out when your roommate is home",
|
||||
techUsed: ["C#", ".NET 6", "NoSQL", "Docker", "nginx", "React Native", "Cloudflare"],
|
||||
link: "https://github.com/nickorlow/roomy-sentry",
|
||||
linkTitle: "Github Repo"
|
||||
linkTitle: "Github Repo",
|
||||
imageUrl: ""
|
||||
}
|
||||
|
||||
const CavCashProject: InfoCardProps = {
|
||||
title: "cavcash",
|
||||
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.",
|
||||
listTitle: "Technologies Used",
|
||||
list: ["C#", ".NET 5", "MSSQL", "mongoDB", "Kubernetes", "Docker", "nginx", "Azure DevOps", "React", "Cloudflare"],
|
||||
shortDescription: "Functional Venmo-like service",
|
||||
techUsed: ["C#", "Kubernetes", "mongoDB", "MSSQL", "Docker", "nginx", "Azure DevOps", "React", "Cloudflare"],
|
||||
link: "https://cavcash.com",
|
||||
linkTitle: "Project Website"
|
||||
linkTitle: "Project Website",
|
||||
imageUrl: ""
|
||||
}
|
||||
|
||||
const XenMapProject: InfoCardProps = {
|
||||
title: "xenmap",
|
||||
const XenMapProject: ProjectCardProps = {
|
||||
title: "XenMap",
|
||||
description: "I wanted to use an old iPad as a HUD in my car similar to tesla and it needed a map to complete it. I made this widget to show your current location as a XenHTML widget.",
|
||||
listTitle: "Technologies Used",
|
||||
list: ["HTML", "JavaScript", "CSS", "XenHTML Framework", "XenInfo API"],
|
||||
shortDescription: "Your live location as an iPhone wallpaper",
|
||||
techUsed: ["HTML", "JavaScript", "CSS", "XenHTML Framework", "XenInfo API"],
|
||||
link: "https://github.com/nickorlow/MapXenHTML",
|
||||
linkTitle: "GitHub Repo"
|
||||
linkTitle: "GitHub Repo",
|
||||
imageUrl: ""
|
||||
}
|
||||
|
||||
const SPONODEProject: InfoCardProps = {
|
||||
title: "sponode",
|
||||
const SPONODEProject: ProjectCardProps = {
|
||||
title: "SPONODE",
|
||||
description: "App for Android & macOS that added songs people sent you to a playlist. Made so we could have a jukebox type setup during track workouts.",
|
||||
listTitle: "Technologies Used",
|
||||
list: ["Java", "Apple Script", "Spotify API", "node.js"],
|
||||
shortDescription: "Spotify queue management via iMessage",
|
||||
techUsed: ["Java", "Apple Script", "Spotify API", "node.js"],
|
||||
link: "https://github.com/nickorlow/sponode",
|
||||
linkTitle: "GitHub Repo"
|
||||
linkTitle: "GitHub Repo",
|
||||
imageUrl: ""
|
||||
}
|
||||
|
||||
export const AllProjects: InfoCardProps[] = [WebsiteProject, RoomyProject, XenMapProject, SPONODEProject];
|
||||
const NWSProject: ProjectCardProps = {
|
||||
title: "Nick Web Services",
|
||||
description: "App for Android & macOS that added songs people sent you to a playlist. Made so we could have a jukebox type setup during track workouts.",
|
||||
shortDescription: "My own cloud provider",
|
||||
techUsed: ["Kubernetes", "Rancher", "C#"],
|
||||
link: "https://nws.nickorlow.com",
|
||||
linkTitle: "Project Website",
|
||||
imageUrl: ""
|
||||
}
|
||||
|
||||
export const AllProjects: ProjectCardProps[] = [WebsiteProject, NWSProject, RoomyProject, XenMapProject, CavCashProject, SPONODEProject];
|
||||
|
||||
|
|
|
|||
28
src/static/data/blogs/side-project-log-3-20-2023.md
Normal file
28
src/static/data/blogs/side-project-log-3-20-2023.md
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
Spring break just wrapped up. I wrote a [blog]() last week about the side projects that I was planning on
|
||||
doing. I wanted to provide an update on what I got done, and figured I'd turn it into a recurring thing.
|
||||
|
||||
This side project log covers work done from 3/13/2023 - 3/20/2023
|
||||
|
||||
## Personal Website Facelift
|
||||
|
||||
I managed to move my website over to tab-based navigation pretty early on in the break. It just involved setting
|
||||
up a navbar component and then using react-navigation to navigate between pages. I also managed to
|
||||
update my projects page to be more compact and readable.
|
||||
|
||||
There is still work to be done on making it look better, but I mostly believe that
|
||||
it's just going to be somewhat minor tweaks.
|
||||
|
||||
## Mahantongo
|
||||
|
||||
I managed to finish this one. I learned a lot about Rust and I've gained an appreciation for
|
||||
Rust's enforcement of good programming habits, and I really like how error handling is done.
|
||||
|
||||
|
||||
Working with Serenity was pretty easy as it mirrored some of the other Discord SDKs I've used
|
||||
before.
|
||||
|
||||
---
|
||||
|
||||
**The below projects had minimal/no work done on them:** RingGold, NWS Container Deployment Service, and VerifiedBot
|
||||
|
||||
|
||||
9
src/types/ProjectCardProps.ts
Normal file
9
src/types/ProjectCardProps.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default interface ProjectCardProps {
|
||||
title: string,
|
||||
description: string,
|
||||
shortDescription: string,
|
||||
techUsed: string[],
|
||||
linkTitle?: string,
|
||||
link?: string,
|
||||
imageUrl: string
|
||||
}
|
||||
Loading…
Reference in a new issue