project updates and blog
This commit is contained in:
parent
261a4fcacd
commit
dec88e2842
12 changed files with 344 additions and 76 deletions
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue