SM-Index-Redesign (#55)

* styling: remove distracting background image

* chore: Remove stalled projects from index

* chore: Clean formatting

* styling: Use local fonts

* refactor: Add help txt+styling to scrolldown hint

* feat: Index Redesign - Stage 1

* chore: Change blog post summary
* chore: Rename modules and move to proper location
* refactor: Clarify element classes
* refactor: Add container to button element

* build: Update react types

frontend/package.json

@@ -42,7 +42,7 @@
 		"@semantic-release/npm": "^10.0.3",
 		"@semantic-release/release-notes-generator": "^11.0.1",
 		"@types/node": "18.11.9",
-		"@types/react": "18.0.24",
+		"@types/react": "^18.2.51",
 		"@types/react-dom": "18.0.8",
 		"@vercel/analytics": "^1.0.2",
 		"animate.css": "^4.1.1",

frontend/src/components/blog/articles.module.scss

@@ -210,43 +210,3 @@
 .link {
 	color: var(--accent);
 }
-
-.list {
-
-	&__section {
-		padding: 1rem 0;
-	}
-
-	&__section div {
-		display: flex;
-		flex-wrap: wrap;
-	}
-
-	&__date {
-		display: flex;
-		align-items: center;
-		margin-right: 0.5rem;
-	}
-
-	&__date:nth-of-type(odd) {
-		color: var(--primary);
-	}
-
-	&__date:nth-of-type(even) {
-		color: var(--secondary);
-	}
-
-	&__title {
-		font-weight: 400;
-		font-size: 1rem;
-		margin: 0;
-	}
-
-	&__description {
-		margin: 0;
-		font-weight: 400;
-		font-size: 00.9rem;
-		padding-top: 0.5rem;
-		opacity: 0.75;
-	}
-}

frontend/src/components/hero/hero.tsx

@@ -2,46 +2,41 @@ import Link from 'next/link';
 import { HeroModel } from '@components/threeJS/HeroModel';
 import HeroName from '@components/hero/heroName/heroName';
 import { ScrollDown } from '@components/scrollDown';
-import styles from '@styles/modules/hero.module.scss';
-import button from '@styles/modules/button.module.scss';
+import hero from '@styles/modules/Hero.module.scss';
+import button from '@styles/modules/Button.module.scss';
 
 const Hero = () => {
 	return (
 		<section>
-			<div className={styles.container}>
-				<div className={styles.heroSection}>
+			<div className={hero.container}>
+				<div className={hero.cta}>
 					<HeroName name={'sabrina'} />
-					<div className={`${styles['text-container']} `}>
+					<div className={hero.text}>
 						<center>
 							<p>
 								<b>Web developer</b><br/> based in Kingston, Jamaica.
 							</p>
 						</center>
-
-						{/* <p>
-							An ongoing journey of exploration drives me to constantly embrace novel technologies and refine my
-							skillset.
-						</p> */}
-						{/* TODO: rewrite cringe paragraph */}
 					</div>
 
-					<div className={styles['button-container']}>
+					<div className={button.container}>
 						<Link
-							title="Email me at sabrinamedwinter@gmail.com"
+							title="Professional Services"
 							className={button.primary}
 							href="/services"
 						>
 							Need a service?
 						</Link>
 						<Link
+							title="Blog Posts"
 							className={button.secondary + ` glassmorphic`}
 							href="/blog"
 						>
 							Check out the blog
 						</Link>
 					</div>
 				</div>
-				<div className={styles.heroSection}>
+				<div className={hero.model}>
 					<HeroModel />
 				</div>
 			</div>

frontend/src/components/projects/latestProjects.tsx

@@ -2,7 +2,7 @@ import Projects from '@data/projectsData';
 import styled from '@emotion/styled';
 import { FaToolbox, FaLanguage, FaGithub } from 'react-icons/fa6';
 import Link from 'next/link';
-import button from '@styles/modules/button.module.scss';
+import button from '@styles/modules/Button.module.scss';
 
 // TODO convert to scss modules
 const ProjectCard = styled.div`

frontend/src/components/projects/projectsList.tsx

@@ -138,7 +138,7 @@ export const LatestProject = () => {
 				loader={({ src, width }) => `${src}?w=${width}`}
 				sizes="100vw"
 				style={{
-					width: 'clamp(250px, 100%, 1080px)',
+					width: 'clamp(250px, 100%, 480px)',
 					height: 'clamp(200px, 100%, 500px)',
 					margin: '0 auto',
 					display: 'flex',

frontend/src/components/scrollDown.tsx

@@ -1,8 +1,10 @@
-import styles from '@styles/modules/ScrollDown.module.scss';
+import mouse from '@styles/modules/ScrollDown.module.scss';
+
 export const ScrollDown = () => {
 	return (
-		<div className={styles.field}>
-				<div className={styles.mouse} />
-			</div>
+		<div className={mouse.field}>
+			<span className={mouse.label}>scroll down</span>
+			<div className={mouse.mouse} />
+		</div>
 	);
 };

frontend/src/pages/blog.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import styles from '@components/blog/articles.module.scss';
 import { useMemo } from 'react';
 import { LatestProject } from '@components/projects';
+import blog from '@styles/modules/BlogSummary.module.scss'
 
 export type PostType = {
 	[x: string]: any;
@@ -133,24 +134,8 @@ export const BlogPage = ({ posts }: PostType): JSX.Element => {
 	);
 };
 
-export const BlogList = ({ posts }: PostType): JSX.Element => {
-	return (
-		<>
-			{posts.length > 0 && (
-				<section id="blog">
-					<div className="pancake">
-						<h2 className="section-title">Latest Posts</h2>
-						<div className="pancake section-content">
-							{posts.slice(0, 4).map(
-								(post) =>
-									!post.tags.includes('log') && (
-										<Link
-											as={`/posts/${post.slug}`}
-											key={post.slug}
-											href={`/posts/[slug]`}
-											className={`${styles.article} pancake-child`}
-										>
-											{/* {post.coverImage && (
+
+{/* {post.coverImage && (
 									<div className={'image__wrapper'}>
 										<Image
 											height={0}
@@ -164,12 +149,8 @@ export const BlogList = ({ posts }: PostType): JSX.Element => {
 										/>
 									</div>
 								)} */}
-											<div className={styles.article__section}>
-												<h2 className={styles.article__title}>{post.title}</h2>
 
-												<p className={styles.article__description}>{post.description}</p>
-
-												{/* {post.tags && (
+								{/* {post.tags && (
 										<div className={styles.article__tags}>
 											{post.tags.slice(0, 2).map((tag) => (
 												<Link className={styles.article__tag} key={tag} href={'/tags/' + tag.replace(/\s+/g, '+')}>
@@ -178,17 +159,102 @@ export const BlogList = ({ posts }: PostType): JSX.Element => {
 											))}
 										</div>
 									)} */}
+
+export const BlogList = ({ posts }: PostType): JSX.Element => {
+	useMemo(() => {
+		const removeDupicates = (data) => {
+			return data.filter((value, i) => data.indexOf(value) === i);
+		};
+
+		posts.forEach((post) => {
+			const [yearDate, monthDate, dayDate] = post.date.split(' ')[0].split('-');
+
+			let year: Year | undefined = years.find((year) => year.date === yearDate);
+			if (!year) {
+				year = {
+					date: yearDate,
+					months: [],
+				};
+				years.push(year);
+			}
+
+			let month = year.months.find((month) => month.date === monthDate);
+			if (!month) {
+				const monthIndex = parseInt(monthDate) - 1;
+				const monthName = monthNames[monthIndex];
+				month = {
+					date: monthDate,
+					name: monthName,
+					posts: [],
+				};
+				year.months.push(month);
+			}
+
+			month.posts.push({
+				...post,
+				date: dayDate,
+			});
+		});
+
+		years
+			.sort((a, b) => parseInt(b.date) - parseInt(a.date))
+			.forEach((year) => {
+				year.months
+					.sort((a, b) => parseInt(b.date) - parseInt(a.date))
+					.forEach((month) => {
+						month.posts.sort((a, b) => parseInt(b.date) - parseInt(a.date));
+					});
+			});
+
+		years.forEach((year) => {
+			year.months.forEach((month) => {
+				year.months.forEach((month) => {
+					removeDupicates(month.posts);
+				});
+			});
+		});
+	}, [posts]);
+
+	return (
+		<>
+			{posts.length > 0 && (
+				<section id="blog">
+					<div className="pancake">
+						<h2 className="section-title">Latest Posts</h2>
+						<div className="pancake section-content">
+						{years.map((year) => (
+						<ul key={year.date}>
+						<li className={blog.nolist} key={year.date}>
+							{year.months.map((month, i) => (
+								<ul key={i}>
+									<li className={blog.nolist}>
+										<h2 className={blog.month}>
+											<span>{month.name}</span> <span>{i === 0 && year.date}</span>
+										</h2>
+									</li>
+									{month.posts.map((post,i) => (
+										<Link className={blog.link} href={`/posts/${post.slug}`} key={i}>
+											<div className={blog.list__section}>
+												<div>
+													<span className={blog.list__date}>{post.date}</span>
+													<h3 className={blog.list__title}>{post.title}</h3>
+												</div>
+												<p className={blog.list__description}>{post.description}</p>
 											</div>
 										</Link>
-									),
-							)}
+									))}
+								</ul>
+							))}
+						</li>
+						</ul>
+					))}
 						</div>
 						{posts.length > 4 && <Link href={`/blog`}>More Posts ⟶</Link>}
 					</div>
-					<div>
+					{/* <div>
 						<h2 className="section-title">Latest Creation</h2>
 						<LatestProject />
-					</div>
+					</div> */}
 				</section>
 			)}
 		</>

frontend/src/pages/index.tsx

@@ -1,7 +1,7 @@
 import Page from '@containers/layout/page';
 import Hero from '@components/hero/hero';
 // import { SiteBackground } from '@components/threeJS/scene';
-import ProjectList, { OtherProjects } from '@components/projects/projectsList';
+import ProjectList from '@components/projects/projectsList';
 import { BlogList, PostType } from './blog';
 import { getAllPosts } from '@utils/api';
 import { GetStaticProps } from 'next/types';
@@ -14,7 +14,6 @@ export const Home = ({ posts }: PostType): JSX.Element => {
 			<Hero />
 			{/* TODO: move blog posts to Sanity} */}
 			<BlogList posts={posts} />
-			<OtherProjects />
 			<ProjectList />
 			{/* <ProjectSlider /> */}
 		</Page>