From b99b1c4f745e4501985e9f28194b42ee56a378f6 Mon Sep 17 00:00:00 2001 From: Nicholas Orlowsky Date: Fri, 29 Jul 2022 00:42:23 -0500 Subject: [PATCH] Carousels for mobile! --- package.json | 2 ++ src/components/blog-card/BlogCard.css | 2 +- src/components/blogs/Blogs.tsx | 2 +- src/components/footer/Footer.tsx | 4 ++-- src/components/hobbies/Hobbies.tsx | 29 +++++++++++++++++++---- src/components/job-card/JobCard.tsx | 8 +++---- src/components/jobs/Jobs.tsx | 19 +++++++++++++-- src/components/projects/Projects.tsx | 34 ++++++++++++++++++++------- 8 files changed, 78 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 20dded9..ee34480 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/src/components/blog-card/BlogCard.css b/src/components/blog-card/BlogCard.css index 2248be6..896a903 100644 --- a/src/components/blog-card/BlogCard.css +++ b/src/components/blog-card/BlogCard.css @@ -1,7 +1,7 @@ @media only screen and (max-width: 768px) { .blog-card { - margin-top: 100px; + margin-top: 10px; } } diff --git a/src/components/blogs/Blogs.tsx b/src/components/blogs/Blogs.tsx index 08e51a5..5cd4640 100644 --- a/src/components/blogs/Blogs.tsx +++ b/src/components/blogs/Blogs.tsx @@ -9,7 +9,7 @@ export default function Blogs() { return (
-
+
{AllBlogs.reverse().map((blog, i) => { blogId++; if(!blog.private) { diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 150ee32..24050c7 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -4,8 +4,8 @@ export default function Footer() { return (
-

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

-

Hosting provided by Nick Web Services (NWS)

+

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/hobbies/Hobbies.tsx b/src/components/hobbies/Hobbies.tsx index b4c3e91..6035a5a 100644 --- a/src/components/hobbies/Hobbies.tsx +++ b/src/components/hobbies/Hobbies.tsx @@ -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 (
-

Other Hobbies

- {AllHobbies.map((hobby) => )} +
+

Other Hobbies

+ {AllHobbies.map((hobby) => )} +
+ +
+

Other Hobbies

+

{cur}/{AllHobbies.length}

+ {setCur(e+1)}} indicators={false} wrap={false}> + {AllHobbies.map((hobby, i) => + + + + )} + + +
) diff --git a/src/components/job-card/JobCard.tsx b/src/components/job-card/JobCard.tsx index 800b9db..e750148 100644 --- a/src/components/job-card/JobCard.tsx +++ b/src/components/job-card/JobCard.tsx @@ -5,10 +5,10 @@ import "./JobCard.css"; export default function JobCard(props: {style?: any, className?: string, job: Job}){ return ( - +
- {props.job.company+" + {props.job.company+"
@@ -17,9 +17,9 @@ export default function JobCard(props: {style?: any, className?: string, job: Jo {props.job.uri != null &&
{props.job.company}
}

{props.job.timespan}

-
    +
    {props.job.items.map((s) =>
  • {s}
  • )} -
+
diff --git a/src/components/jobs/Jobs.tsx b/src/components/jobs/Jobs.tsx index 1094e11..3254839 100644 --- a/src/components/jobs/Jobs.tsx +++ b/src/components/jobs/Jobs.tsx @@ -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 (
-
+

Work

{AllJobs.map((job, i) =>)}
+
+

Work

+

{cur}/{AllJobs.length}

+ {setCur(e+1)}} indicators={false} wrap={false}> + {AllJobs.map((job, i) => + + + + )} + + +
) } diff --git a/src/components/projects/Projects.tsx b/src/components/projects/Projects.tsx index b8c08fb..de52921 100644 --- a/src/components/projects/Projects.tsx +++ b/src/components/projects/Projects.tsx @@ -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 (
@@ -15,14 +18,29 @@ export default function Projects() { alignContent: "center", alignItems: "center" }}> -

Projects

-

(writing code is my biggest hobby)

-
- {AllProjects.map((project) => )} -
- More on GitHub +
+

Projects

+

(writing code is my biggest hobby)

+
+ {AllProjects.map((project) => )} +
+ More on GitHub +
+
+

Projects

+

{cur}/{AllProjects.length}

+ {setCur(e+1)}} indicators={false} wrap={false}> + {AllProjects.map((project, i) => + + + + )} + + +
)