chore(blog): specific transitions to improve perf

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>

src/pages/blog/Home.tsx

@@ -76,7 +76,7 @@ const BlogHome: React.FC = () => {
 				{ "article-open": isArticleOpen, "aside-closed": isAsideClosed },
 				css`
 					display: flex;
-					background: #1d1d1d;
+					background: #1a1a1a;
 					height: 100%;
 					width: 100vw;
 					overflow: hidden;
@@ -100,17 +100,21 @@ const BlogHome: React.FC = () => {
 						}
 					}
 
-					& > aside {
+					& > aside,
-						transition: all 350ms;
+					& > aside .blog-list {
+						transition: transform 300ms, min-width 300ms, max-width 300ms;
 					}
 
 					&:is(.aside-closed) {
-						aside {
+						& aside {
 							overflow: hidden;
-							transform: translateX(-500%);
 							min-width: 0;
 							max-width: 0;
 						}
+
+						& aside .blog-list {
+							transform: translateX(-1000%);
+						}
 					}
 				`,
 			)}>
@@ -126,7 +130,7 @@ const BlogHome: React.FC = () => {
 						min-width: 3.6rem;
 						max-width: 3.6rem;
 						transition: background-color 100ms;
-						background-color: #262626;
+						background-color: #151515;
 						position: absolute;
 						width: 100%;
 						height: 100%;
@@ -134,7 +138,7 @@ const BlogHome: React.FC = () => {
 						z-index: 1000;
 
 						&:hover {
-							background-color: #323232;
+							background-color: #0c0c0c;
 						}
 					`,
 					!isArticleOpen &&
@@ -163,23 +167,25 @@ const BlogHome: React.FC = () => {
 					width: 100%;
 					flex: 2;
 					max-width: 45rem;
+					overflow-y: auto;
 				`}>
 				<div
-					className={css`
+					className={classNames(
-						height: 100%;
+						"blog-list",
-						width: 100%;
+						css`
-						overflow-y: auto;
+							width: 100%;
-						display: flex;
+							display: flex;
-						flex-direction: column;
+							flex-direction: column;
-						gap: 1rem;
+							gap: 1rem;
-						padding: 8vw;
+							padding: 8vw;
-						min-width: min(30rem, 100vw);
+							min-width: min(30rem, 100vw);
 
-						@media screen and (max-width: 50rem) {
+							@media screen and (max-width: 50rem) {
-							padding-block-start: 4rem;
+								padding-block-start: 4rem;
-							padding-block-end: 6rem;
+								padding-block-end: 6rem;
-						}
+							}
-					`}>
+						`,
+					)}>
 					<Header />
 					<Spacer y={2} />
 					{articles.map(article => {
@@ -196,10 +202,10 @@ const BlogHome: React.FC = () => {
 									gap: 0.25rem;
 									padding: 1rem;
 									border-radius: 0.5rem;
-									transition: all 300ms;
+									transition: background 300ms;
 
 									&:hover {
-										background: #262626;
+										background: #111111;
 									}
 
 									& h3 {
@@ -242,9 +248,9 @@ const BlogHome: React.FC = () => {
 					key="blog-content"
 					className={classNames(
 						css`
-							background-color: #262626;
+							background: #111111;
 							position: absolute;
-							transition: all 300ms;
+							transition: transform 300ms;
 							transform: translateX(100%);
 							overflow-y: auto;
 							overflow-x: hidden;

src/pages/blog/components/BlogContent.tsx

@@ -172,6 +172,7 @@ export const BlogPost: React.FC = () => {
 					className={css`
 						max-width: 100%;
 						height: 100%;
+						border-radius: 0.5rem;
 					`}
 					src={"/blog/assets/" + article["featured-img"]}
 					alt="Featured"

src/pages/main/Exp.tsx

@@ -3,27 +3,47 @@ import { css } from "@emotion/css";
 import Container from "../../components/Container";
 
 const exp = [
-	{ title: "BlueCube", location: "Chennai", position: "Architectural Intern", year: "2015" },
+	{
-	{ title: "Zoho", location: "Chennai", position: "Technical Content Writer", year: "2017" },
+		title: "BlueCube",
+		location: "Chennai",
+		position: "Architectural Intern",
+		year: "2015",
+	},
+	{
+		title: "Zoho",
+		location: "Chennai",
+		position: "Technical Content Writer",
+		year: "2017",
+	},
 	{
 		title: "Manoj Exports",
 		location: "Chennai",
 		position: "Designer & web developer",
 		year: "2017",
 	},
-	{ title: "Klenty", location: "Chennai", position: "Full stack developer", year: "2018" },
+	{
+		title: "Klenty",
+		location: "Chennai",
+		position: "Full stack developer",
+		year: "2018",
+	},
 	{
 		title: "Hugo's Way",
 		location: "Remote",
 		position: "Full stack developer",
 		year: "2018-19",
 	},
-	{ title: "Feathers Studio", location: "Chennai", position: "Founder", year: "2019-present" },
 	{
 		title: "Navana Tech",
 		location: "Remote",
-		position: "Lead web dev",
+		position: "Lead web dev / architect",
-		year: "2021-present",
+		year: "2021-22",
+	},
+	{
+		title: "Feathers Studio",
+		location: "Chennai",
+		position: "Founder",
+		year: "2019-present",
 	},
 ];
 
@@ -90,7 +110,8 @@ const getAge = (date: string) => {
 	var birthDate = new Date(date);
 	var age = today.getFullYear() - birthDate.getFullYear();
 	var m = today.getMonth() - birthDate.getMonth();
-	if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) return age - 1;
+	if (m < 0) return age - 1;
+	if (m === 0 && today.getDate() < birthDate.getDate()) return age - 1;
 	return age;
 };