diff --git a/components/about/backlogGraph.tsx b/components/about/backlogGraph.tsx index 83f4ebb34..747a4359c 100644 --- a/components/about/backlogGraph.tsx +++ b/components/about/backlogGraph.tsx @@ -1,4 +1,3 @@ -import styled from "@emotion/styled"; import { FC, useEffect, useState } from "react"; import { BarChart, @@ -7,35 +6,12 @@ import { YAxis, Tooltip, CartesianGrid, - Legend + Legend, } from "recharts"; -import { BookContainer, Book } from "./currentReads"; import Books from "@data/books"; import { WindowWidth } from ".."; +import { getMonthName } from '@components/home/projectsList'; -export const CumulativeBookContainer = styled.div` - margin: 0 auto; - place-items: center; - justify-content: center; - - & > * > h3 { - margin-bottom: 1rem; - font-weight: 500; - text-align: center; - } - - @media (max-width: 768px) { - margin-top: 2rem; - display: flex; - } - - @media (min-width: 768px) { - display: flex; - flex-direction: row; - flex-wrap: wrap; - max-width: 90%; - } -`; export interface BooksProps { title: string; @@ -59,56 +35,48 @@ export interface BookData { month: string; Started: number; Finished: number; - Added: number; } export const BacklogGraph: FC = () => { const [Data, setData] = useState([]); useEffect(() => { - const bookData: Record = {}; + const bookData: Record = {}; let today = new Date(); - let RelativeLastYearAgo = new Date(today.getFullYear() - 1, today.getMonth() + 1, today.getDate()); + let RelativeLastYearAgo = new Date( + today.getFullYear() - 1, + today.getMonth() + 1, + today.getDate() + ); Books.forEach((book) => { - let addMonth = null; let startMonth = null; let finishMonth = null; - if (book.added && new Date(book.added) > RelativeLastYearAgo) { - addMonth = new Date(book.added).getMonth(); - } - if (book.started && new Date(book.started) > RelativeLastYearAgo) { startMonth = new Date(book.started).getMonth(); - if (startMonth = addMonth) { - addMonth = null; - } } if (book.finished && new Date(book.finished) > RelativeLastYearAgo) { finishMonth = new Date(book.finished).getMonth(); - if (finishMonth = startMonth) { + if (finishMonth === startMonth) { startMonth = null; } } - - if (addMonth !== null) { - bookData[addMonth] = bookData[addMonth] || { Started: 0, Finished: 0, Added: 0 }; - bookData[addMonth].Added += 1; - } if (startMonth !== null) { - bookData[startMonth] = bookData[startMonth] || { Started: 0, Finished: 0, Added: 0 }; + bookData[startMonth] = bookData[startMonth] || { + Started: 0, + Finished: 0, + }; bookData[startMonth].Started += 1; - - if (addMonth !== null) { - bookData[startMonth].Added -= 1; - } } if (finishMonth !== null) { - bookData[finishMonth] = bookData[finishMonth] || { Started: 0, Finished: 0, Added: 0 }; + bookData[finishMonth] = bookData[finishMonth] || { + Started: 0, + Finished: 0, + }; bookData[finishMonth].Finished += 1; if (startMonth !== null) { bookData[finishMonth].Started -= 1; @@ -118,21 +86,26 @@ export const BacklogGraph: FC = () => { // Prepare for the snowball effect! const cumulativeData: BookData[] = []; - let cumulative = { Started: 0, Finished: 0, Added: 0 }; + let cumulative = { Started: 0, Finished: 0 }; let monthIndex = RelativeLastYearAgo.getMonth(); for (let month = 0; month < 12; month++) { if (bookData[monthIndex]) { - cumulative = { - Started: bookData[monthIndex]?.Started + cumulative.Started || cumulative.Started, - Finished: bookData[monthIndex]?.Finished + cumulative.Finished || cumulative.Finished, - Added: bookData[monthIndex]?.Added + cumulative.Added || cumulative.Added, + Started: + bookData[monthIndex]?.Started + cumulative.Started || + cumulative.Started, + Finished: + bookData[monthIndex]?.Finished + cumulative.Finished || + cumulative.Finished, }; } cumulativeData.push({ - month: new Date(RelativeLastYearAgo.getFullYear(), RelativeLastYearAgo.getMonth() + month).toLocaleString('default', { month: 'long' }), + month: new Date( + RelativeLastYearAgo.getFullYear(), + RelativeLastYearAgo.getMonth() + month + ).toLocaleString("default", { month: "long" }), ...cumulative, }); @@ -145,22 +118,21 @@ export const BacklogGraph: FC = () => { const width = WindowWidth() - 150; return ( - - 1000 ? 950 : width} height={200} data={Data}> + <> + 1000 ? 950 : width} height={350} data={Data}> - + - + } /> - - + ); }; @@ -188,90 +160,87 @@ const CustomerBarLabel: FC = (props) => { // TODO: Combine books and add filters through a form. -export const Shelf = styled.div` - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - width: 100%; - margin: 0 auto; -`; - export const BookShelf: FC = () => { - const readBooks = Books.filter((book) => book.status === "Read"); + const readBooks = Books.filter((book) => book.status === "Read").sort((a, b) => new Date(b.finished).getTime() - new Date(a.finished).getTime()); const wantToReadBooks = Books.filter( (book) => book.status === "Want to Read" - ); + ).sort((a, b) => new Date(b.added).getTime() - new Date(a.added).getTime()); return ( - -
-

Next Reads ({wantToReadBooks.length})

- + <> +
+ {wantToReadBooks.length} Books I'm excited to read next +
{wantToReadBooks.map((book) => ( - - - {book.title} - - + // + // + // {book.title} + // + // +

{book.title}
by {book.author}

))} - -

Read ({readBooks.length})

- +
+
+
+ {readBooks.length} Read Books +
{readBooks.map((book) => ( - - - {book.cover ? ( - {book.title} - // {book.title} - ) : ( -
{book.title} -
- ) } - - + // + // + // {book.cover ? ( + // {book.title} + // ) : ( + // // {book.title} + //
+ // {" "} + // {book.title} + //
+ // )} + // + // +

{book.title} {book.rating && book.rating >= 4 ? (book.rating >= 5 ? ♥ : '♥') : book.rating <= 2.5 && book.rating != 0 ? '×' : ''}
by {book.author}
{getMonthName(book.finished)} {book.finished.split("-", 1)}

))} - -
- +
+ + ); }; diff --git a/components/home/projectsList.tsx b/components/home/projectsList.tsx index 7df62563d..2b46a800d 100644 --- a/components/home/projectsList.tsx +++ b/components/home/projectsList.tsx @@ -12,14 +12,7 @@ export const extractCategories = () => { return Array.from(categoriesSet); }; -const ProjectList: React.FC = () => { - const [activeCategory, setActiveCategory] = useState("All"); - - const handleTabChange = (category: string) => { - setActiveCategory(category); - }; - - const getMonthName = (dateString) => { +export const getMonthName = (dateString) => { const months = [ 'January ', 'February ', 'March ', 'April ', 'May ', 'June ', 'July ', 'August ', 'September ' , 'October ' , 'November ', 'December ' @@ -33,11 +26,20 @@ const ProjectList: React.FC = () => { } else { return null } }; + +const ProjectList: React.FC = () => { + const [activeCategory, setActiveCategory] = useState("All"); + + const handleTabChange = (category: string) => { + setActiveCategory(category); + }; + + const categories = extractCategories(); const filteredProjects = activeCategory === 'All' ? [...Projects].sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime()) - : Projects.filter((project) => project.category === activeCategory).sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime());; + : Projects.filter((project) => project.category === activeCategory).sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime()); return (
diff --git a/data/books.ts b/data/books.ts index f1fd0fd63..20a20a585 100644 --- a/data/books.ts +++ b/data/books.ts @@ -2,8 +2,9 @@ const Books = [ { title: "Salt: A World History", author: ["Mark Kurlansky"], + rating: 3.5, genre: ["Non-Fiction", "History", "Cooking"], - status: "Want to Read", + status: "Read", summary: "A history of salt and its role in civilization.", added: "2023-03-01", started: "2023-07-20", @@ -63,7 +64,7 @@ const Books = [ author: "Tim Lebbon", series: "The Relics #1", genre: ["Fiction", "Horror", "Fantasy", "Thriller", "Science Fiction"], - rating: 0, + rating: 2.8, published: "2017-03-21", format: "Audiobook", pages: 0, @@ -82,7 +83,7 @@ const Books = [ author: "Stephen King", series: "", genre: ["Fiction", "Horror", "Fantasy", "Thriller", "Mystery", "Anthology"], - rating: 0, + rating: 3.5, published: "1978-02-17", format: "Paperback", pages: 409, @@ -100,7 +101,7 @@ const Books = [ author: "Mark Bittman", series: "How to Cook Everything", genre: ["Non-Fiction", "Cookbook"], - rating: 0, + rating: 4.5, published: "2003-03-04", format: "Hardcover", pages: 496, @@ -138,7 +139,7 @@ const Books = [ author: "Paul Bogard", series: "", genre: ["Non-Fiction", "Nature", "Science"], - rating: 0, + rating: 2.8, published: "2013-07-09", format: "Paperback", pages: 336, @@ -307,21 +308,6 @@ const Books = [ added: "2023-05-14", cover: "https://cdn.thestorygraph.com/t5cw6kpcyqeip0aghwvqg1ynji14", }, - { - title: - "Bitch: A Revolutionary Guide to Sex, Evolution and the Female Animal", - author: "Lucy Cooke", - series: "", - genre: ["Non-Fiction", "Nature", "Science"], - rating: 0, - published: "2022-01-01", - format: "Paperback", - pages: 400, - minutes: 0, - status: "Want to Read", - added: "2023-04-01", - cover: "https://cdn.thestorygraph.com/8qqh5zur09r85rjjq2tk7jx4p17t", - }, { title: "The Revenant", author: "Michael Punke", @@ -368,7 +354,7 @@ const Books = [ author: "Jennifer McLagan", series: "", genre: ["Non-Fiction", "Cooking", "Food"], - rating: 0, + rating: 4.5, published: "2011-10-01", format: "Hardcover", pages: 256, @@ -384,7 +370,7 @@ const Books = [ author: "Marlon James", series: "", genre: ["Fiction", "Fantasy"], - rating: 0, + rating: 4, published: "2019-02-05", format: "Hardcover", pages: 640, @@ -400,7 +386,7 @@ const Books = [ author: "Stephen King", series: "", genre: ["Fiction", "Horror"], - rating: 0, + rating: 3.8, published: "2009-11-10", format: "Hardcover", pages: 1074, @@ -416,7 +402,7 @@ const Books = [ author: "Douglas Adams", series: "Hitchhiker's Guide to the Galaxy", genre: ["Fiction", "Science Fiction"], - rating: 0, + rating: 3, published: "2005-04-26", format: "Paperback", pages: 250, @@ -432,7 +418,7 @@ const Books = [ author: "Josh Malerman", series: "Birdbox", genre: ["Fiction", "Horror"], - rating: 0, + rating: 3.3, published: "2014-05-13", format: "Paperback", pages: 262, @@ -448,7 +434,7 @@ const Books = [ author: "Richard Templar", series: "", genre: ["Non-Fiction", "Self Help"], - rating: 0, + rating: 3, published: "2005-01-01", format: "Paperback", pages: 240, @@ -464,7 +450,7 @@ const Books = [ author: "Karl Marx", series: "", genre: ["Non-Fiction", "Politics"], - rating: 0, + rating: 3, published: "1848-02-21", format: "Paperback", pages: 80, @@ -480,7 +466,7 @@ const Books = [ author: "Douglas Adams", series: "Hitchhiker's Guide to the Galaxy", genre: ["Fiction", "Science Fiction"], - rating: 0, + rating: 3.5, published: "2005-04-26", format: "Paperback", pages: 250, @@ -496,7 +482,7 @@ const Books = [ author: "George S. Clason", series: "", genre: ["Non-Fiction", "Self Help"], - rating: 0, + rating: 3, published: "1926-01-01", format: "Paperback", pages: 194, @@ -512,7 +498,7 @@ const Books = [ author: "Yuval Noah Harari", series: "", genre: ["Non-Fiction", "History"], - rating: 0, + rating: 3.8, published: "2014-04-01", format: "Paperback", pages: 498, @@ -528,7 +514,7 @@ const Books = [ author: "Terry Pratchett", series: "Discworld", genre: ["Fiction", "Fantasy"], - rating: 0, + rating: 4, published: "1992-01-01", format: "Paperback", pages: 288, @@ -544,7 +530,7 @@ const Books = [ author: "Steven Johnson", series: "", genre: ["Non-Fiction", "History"], - rating: 4, + rating: 4.5, published: "2006-10-19", format: "Paperback", pages: 299, @@ -576,7 +562,7 @@ const Books = [ author: "Albert Camus", series: "", genre: ["Fiction", "Philosophy"], - rating: 0, + rating: 3.5, published: "1942-01-01", format: "Paperback", pages: 123, @@ -778,6 +764,67 @@ const Books = [ added: "2023-06-01", started: "2023-06-02", finished: "2023-06-02", + }, + { + title: "Culinary Reactions: The Everyday Chemistry of Cooking", + author: "Simon Quellen Fielde", + series: "", + genre: ["Non-Fiction","Cooking"], + rating: 3.5, + published: "2011-01-01", + format: "Paperback", + pages: 237, + minutes: 0, + status: "Read", + added: "2023-08-01", + started: "2023-08-02", + finished: "2023-8-13", + }, + { + title: "Your Inner Fish: a Journey into the 3.5-Billion-Year History of the Human Body", + author: "Neil Shubin", + genre: ["Non-Fiction", "Science"], + status: "Read", + rating: 4.2, + pages: 229, + format: "Paperback", + added: "2022-01-16", + started: "2022-01-16", + finished: "2023-03-03", + }, + { + title: "Frankenstein: Or the Modern Prometheus", + author: "Mary Shelley", + genre: ["Fiction", "Classics","Horror", "Science-Fiction"], + status: "Read", + rating: 4.5, + pages: 239, + format: "Paperback", + started: "2023-05-27", + added: "2023-05-31", + finished: "2023-05-31", + }, + { + title: "The Unexpected Guest", + author: "Agatha Christie", + genre: ["Fiction", "Crime", "Mystery", "Play", "Who-dunn-it"], + status: "Read", + rating: 4, + pages: 100, + started: "2023-06-21", + added: "2023-06-21", + finished: "2023-06-21", + }, + { + title: "AI Superpowers: China, Silicon Valley, and the New World Order", + author: "Kai-Fu Lee", + genre: ["Non-Fiction", "Business", "Technology", "AI"], + status: "Read", + rating: 4, + pages: 272, + started: "2023-03-25", + added: "2022-01-28", + finished: "2023-07-20" } ]; diff --git a/pages/about.tsx b/pages/about.tsx index a6fc8f523..70fb89956 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -4,20 +4,9 @@ import { Section } from "@components/global"; import CurrentReads from "@components/about/currentReads"; import { BacklogGraph } from "@components/about/backlogGraph"; import Books from "@data/books"; -import { use, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import PhotoGalley from "./gallery"; -import { WindowWidth } from "@components/global"; - -const AboutParagraph = styled.div` -margin: 0 auto; -max-width: 45rem; -text-align: justify; - -& > h2 { - margin-top: 2rem; - text-align: center; -} -`; +import { BookShelf } from "@components/about/backlogGraph"; export const About = () => { const [Percentage, setPercentage] = useState([0, 0]); @@ -66,7 +55,7 @@ export const About = () => {

About

- +

Hey there, internet wanderer! I'm Sabrina aka KaleCream, but you can call me whatever floats your digital boat.

You see, my story begins in the near ancient times of the internet, crafting Tumblr pages and forum themes. Yep, you heard right! I was chiseling away at code blocks when cat videos were the pinnacle of online entertainment.

@@ -84,10 +73,11 @@ export const About = () => {

I like to read to learn about the world around me or get laughs. I have {Books.length} books in my library (digital and non-digital), and I'm always looking for more. I prefer { Percentage[0] > Percentage[1] ? "Fiction" : "Non-Fiction" }, so I read about {Percentage[0].toFixed(0)}% fiction and {Percentage[1].toFixed(0)}% non-fiction. I'm currently reading {Books.filter((book) => book.status === "Reading").length} books, which you can see below. My most frequently read book tags are: {topGenres}.

-

This graph below is my book status backlog for the past year. This is relative to this month and ignores book from before then to ensure that I'm keeping my desired reading pace.

-

Grey is all the books I added, Dark grey is the books that I've started and green are finished books! The number per month is number of finished + started books in my Library.

+

This graph below is my book status backlog for the past year. This is relative to this month and ignores books from before then to ensure that I'm keeping up my desired reading pace of 24 books for every 12 months.

+

Grey is all the books I added, Dark grey is the books that I've started and Green are finished books! The number per month is number of finished + started books in my Library.

- + +
); diff --git a/styles/globals.css b/styles/globals.css index 57a2fd5bf..d205469ac 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -105,6 +105,31 @@ body { } } +details { + display: block; +} + +details > summary { + position: relative; + cursor: pointer; + user-select: none; + padding: 1rem; + margin: 0 2rem; +} + +details > summary::before { + content: '📕'; /* Unicode right-pointing triangle */ + position: absolute; + left: 8px; + transform: rotate(0deg); + transition: transform 0.3s ease; +} + +details[open] > summary::before { + content: '📖'; + transform: rotate(25deg); +} + section { display: flex; flex-direction: column; @@ -223,9 +248,44 @@ li { img, image { - border-radius: 15px; + border-radius: var(--border-radius); } +/* ABOUT */ + +.paragraph { + font-size: 1.2rem; + line-height: 1.6; + max-width: 55rem; + margin-bottom: 1rem; + margin: 0 auto; +} + +.bookshelf { + gap: 0.1rem; +} + +.book-list { + font-size: 0.7rem; +} + +.book-list a { + text-decoration: none !important; + color: var(--primary); + border: none;; +} + +.book-author { + font-style: italic; +} + +.book-finished { + font-size: 0.7rem; +} + +/* */ + + .head3 { margin-left: 10px; list-style-type: circle;