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

Carousels for mobile!

Browse source
This commit is contained in:
Nicholas Orlowsky 2022-07-29 00:42:23 -05:00
parent a71217d54b
commit b99b1c4f74
No known key found for this signature in database
GPG key ID: 3845F78A73B14100
8 changed files with 78 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -24,6 +24,7 @@
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-markdown": "^8.0.3",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "^6.3.0",
"react-scripts": "4.0.3",
"react-slick": "^0.28.1",
@ -32,6 +33,7 @@
"react-tabs": "^3.2.2",
"react-typing-animation": "^1.6.2",
"remarkable": "^2.0.1",
"style-loader": "^3.3.1",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},

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

@ -1,7 +1,7 @@
@media only screen and (max-width: 768px) {
.blog-card {
margin-top: 100px;
margin-top: 10px;
}
}

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

@ -9,7 +9,7 @@ export default function Blogs() {
return (
<div className={"child"}>
<div className={"row"} style={{alignContent: "center", padding: 50}}>
<div className={"row"} style={{alignContent: "center"}}>
{AllBlogs.reverse().map((blog, i) => {
blogId++;
if(!blog.private) {

4
src/components/footer/Footer.tsx
View file

@ -4,8 +4,8 @@ export default function Footer() {
return (
<footer>
<div style={{height: 12, marginTop: -50}}>
<p style={{color: "grey"}} className={"m-0"}>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>Hosting provided by <a href={"https://nws.nickorlow.com"}>Nick Web Services (NWS)</a></p>
<p style={{color: "grey"}} className={"m-0 small"}>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>
</footer>
)

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

@ -1,8 +1,12 @@
import {AllHobbies} from "../../static/data/Hobbies";
import InfoCard from "../info-card/InfoCard";
import React from "react";
import React, {useState} from "react";
import {AllJobs} from "../../static/data/Jobs";
import {Carousel} from "react-bootstrap";
import JobCard from "../job-card/JobCard";
export default function Hobbies () {
const [cur, setCur] = useState(1);
return (
<div className={"child"} style={{minHeight: "100vh"}}>
<div style={{
@ -10,14 +14,31 @@ export default function Hobbies () {
justifyContent: "center",
flexDirection: "column",
width: "96vw",
height: "100vh",
minHeight: "100vh",
alignContent: "center",
alignItems: "center"
}}>
<div className={"d-md-block d-none"}>
<h1>Other Hobbies</h1>
{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>
)
}

8
src/components/job-card/JobCard.tsx
View file

@ -5,10 +5,10 @@ import "./JobCard.css";
export default function JobCard(props: {style?: any, className?: string, job: Job}){
return (
<ScrollAnimation className={"job-card "+(props.className || "")} style={props.style} animateIn="fade-up" duration={2} animateOnce={true} offset={50} delay={200}>
<ScrollAnimation className={"job-card "+(props.className || "")} style={props.style} animateIn={"no-fade-up"} initiallyVisible={true} duration={2} animateOnce={true} offset={50} delay={200}>
<div className={"row"} style={{paddingTop: 40}}>
<div className={"col-md-4"}>
<img className={"float-left float-md-none"} alt={props.job.company+" company logo"} src={props.job.image} style={{paddingLeft: 20, objectFit: "contain" ,height: "auto", maxWidth: 300}}/>
<img className={"float-left float-md-none"} alt={props.job.company+" company logo"} src={props.job.image} style={{objectFit: "contain" ,height: "auto", width: "300px", maxWidth: '100%'}}/>
</div>
<div className={"col-md-8 row"}>
<div className={"col-md-6 text-left"}>
@ -17,9 +17,9 @@ export default function JobCard(props: {style?: any, className?: string, job: Jo
{props.job.uri != null && <a href={props.job.uri}><h5>{props.job.company}</h5></a>}
<p>{props.job.timespan}</p>
</div>
<ul className={"col-md-6 text-left"}>
<div className={"col-md-6 text-left"}>
{props.job.items.map((s) => <li>{s}</li>)}
</ul>
</div>
</div>
</div>
</ScrollAnimation>

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

@ -1,15 +1,30 @@
import {AllJobs} from "../../static/data/Jobs";
import JobCard from "../job-card/JobCard";
import React from "react";
import React, {useState} from "react";
import "./Jobs.css";
import {Carousel} from "react-bootstrap";
export default function Jobs() {
const [cur, setCur] = useState(1);
return (
<div className={"child"} style={{minHeight: "100vh"}}>
<div style={{alignContent: "center", padding: 50}}>
<div className={"align-content-center d-md-block d-none"}>
<h1 style={{marginBottom: 40}}>Work</h1>
{AllJobs.map((job, i) =><JobCard job={job}/>)}
</div>
<div className={"align-content-center d-md-none"}>
<h1 className={"mb-4"}>Work</h1>
<p>{cur}/{AllJobs.length}</p>
<Carousel controls={false} interval={null} onSlide={(e)=>{setCur(e+1)}} indicators={false} wrap={false}>
{AllJobs.map((job, i) =>
<Carousel.Item>
<JobCard job={job}/>
</Carousel.Item>
)}
</Carousel>
</div>
</div>
)
}

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

@ -1,8 +1,11 @@
import {AllProjects} from "../../static/data/Projects";
import InfoCard from "../info-card/InfoCard";
import React from "react";
import React, {useState} from "react";
import {AllHobbies} from "../../static/data/Hobbies";
import {Carousel} from "react-bootstrap";
export default function Projects() {
const [cur, setCur] = useState(1);
return (
<div className={"child"} style={{minHeight: "100vh"}}>
@ -15,6 +18,8 @@ export default function Projects() {
alignContent: "center",
alignItems: "center"
}}>
<div className={"align-content-center d-md-block d-none"}>
<h1>Projects</h1>
<p>(writing code is my biggest hobby)</p>
<div className={"row m-0"} style={{justifyContent: "center", padding: 20}}>
@ -22,8 +27,21 @@ export default function Projects() {
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>
)
}