feat: add experience logos

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

src/components/Container.tsx

@@ -82,11 +82,6 @@ const Container: React.FC<{
 					child.style.removeProperty("transform");
 				}, 100 * idx);
 			});
-
-			timer(() => {
-				document.body.style.maxHeight = "auto";
-				document.body.style.overflow = "auto";
-			}, containerChildren.length * 100);
 		}
 
 		// cleanup
@@ -118,8 +113,7 @@ const Container: React.FC<{
 				child.style.opacity = "0";
 			});
 		}
-		document.body.style.maxHeight = "100vh";
-		document.body.style.overflow = "hidden";
+
 		try {
 			const target = e.currentTarget! as HTMLButtonElement;
 			target.style.width = "0";
@@ -167,11 +161,12 @@ const Container: React.FC<{
 				padding-block-start: 15rem;
 				padding-block-end: 8rem;
 				padding-inline: calc(100vw / 8);
-				overflow-x: hidden;
+				overflow: hidden;
 				min-height: 100vh;
 				position: relative;
 			`}>
 			<div
+				aria-hidden
 				className={cx(
 					"fog",
 					css`

src/index.css

@@ -6,6 +6,9 @@
 	--primary-colour: rgb(255, 85, 85);
 	--text-colour: rgb(211, 207, 201);
 	--text-subdued: rgb(150, 150, 150);
+	--card-active: rgb(45, 45, 45);
+	--card-active-border: rgb(60, 60, 60);
+	--card-hover: rgb(15, 15, 15);
 	font-weight: 500;
 	font-size: max(16px, 0.8vw);
 }
@@ -13,19 +16,15 @@
 * {
 	box-sizing: border-box;
 	scroll-behavior: smooth;
-}
-
-body {
-	margin: 0;
 	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
 		"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 		sans-serif;
-	color: var(--text-colour);
-	height: 100vh;
 }
 
-#root {
-	height: 100%;
+body {
+	margin: 0;
+	color: var(--text-colour);
+	overflow-x: hidden;
 }
 
 code {
@@ -77,7 +76,6 @@ h4 {
 a {
 	color: var(--text-colour);
 	text-decoration: none;
-	font-family: Inter;
 	font-weight: 800;
 	transition: all 200ms;
 }

src/pages/main/data/experience.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+
+const sampleText = `
+This is gonna have some text, probably a story about what I did here.
+Apollonius of Perga rich in heavy atoms great turbulent clouds citizens of distant epochs the only home we've ever known hydrogen atoms?
+Bits of moving fluff two ghostly white figures in coveralls and helmets are softly dancing a still more glorious dawn awaits hearts of the stars extraordinary claims require extraordinary evidence a very small stage in a vast cosmic arena.
+`;
+
+export const experience = [
+	{
+		title: "The Feathers",
+		location: "Chennai (formerly Tirunelveli, Ooty)",
+		position: "Founder (Creative Collective)",
+		year: "2011-19",
+		description: (
+			<>
+				<li>
+					The Feathers was a creative collective, comprising mostly of students
+					and amateur artists and entertainers pursuing various creative
+					endeavours.
+				</li>
+				<li>
+					This varied from photography, typography, graphic design, short films,
+					music, to ad films and event coverage.
+				</li>
+				<li>
+					It was an early attempt at creating something out of pure passion, and
+					gave rise to such projects as StudioFlicks, OutFocus, and the like.
+				</li>
+				<li>
+					It gives me immense pride and joy to see former members go on to build
+					amazing careers.
+				</li>
+			</>
+		),
+		logo: "TheFeathers.png",
+	},
+	{
+		title: "StudioFlicks",
+		location: "Remote (Coimbatore)",
+		position: "Co-founder & Creative Head",
+		year: "2013-15",
+		description: sampleText,
+		logo: "StudioFlicks.png",
+	},
+	{
+		title: "Vinzas",
+		location: "Chennai",
+		position: "Architectural Intern",
+		year: "2014",
+		description: sampleText,
+		logo: "Vinzas.png",
+	},
+	{
+		title: "Blue Cube",
+		location: "Chennai",
+		position: "Architectural Intern",
+		year: "2015",
+		description: sampleText,
+		logo: "BlueCube.png",
+	},
+	{
+		title: "OutFocus Magazine",
+		location: "Ooty",
+		position: "Editor / Developer",
+		year: "2014-17",
+		description: sampleText,
+		logo: "OutFocus.png",
+	},
+	{
+		title: "Zoho",
+		location: "Chennai",
+		position: "Technical Content Writer",
+		year: "2017",
+		description: sampleText,
+		logo: "Zoho.png",
+	},
+	{
+		title: "Manoj Exports",
+		location: "Chennai",
+		position: "Designer & Web Dev",
+		year: "2017",
+		description: sampleText,
+		logo: "ManojExports.png",
+	},
+	{
+		title: "Klenty",
+		location: "Chennai",
+		position: "Full Stack Developer",
+		year: "2018",
+		description: sampleText,
+		logo: "Klenty.png",
+	},
+	{
+		title: "Hugo's Way",
+		location: "Remote (Dublin)",
+		position: "Full Stack Developer",
+		year: "2018-19",
+		description: sampleText,
+		logo: "Hugosway.png",
+	},
+	{
+		title: "Navana Tech",
+		location: "Remote (Mumbai)",
+		position: "Lead Web Dev & Architect",
+		year: "2021-22",
+		description: sampleText,
+		logo: "NavanaTech.png",
+	},
+	{
+		title: "Feathers Studio",
+		location: "Chennai",
+		position: "Chief Maker",
+		year: "2019-present",
+		description: sampleText,
+		logo: "FeathersStudio.png",
+	},
+].reverse();
+
+const getAge = (date: string) => {
+	var today = new Date();
+	var birthDate = new Date(date);
+	var age = today.getFullYear() - birthDate.getFullYear();
+	var m = today.getMonth() - birthDate.getMonth();
+	if (m < 0) return age - 1;
+	if (m === 0 && today.getDate() < birthDate.getDate()) return age - 1;
+	return age;
+};
+
+export const age = getAge("27 May 1995");

src/util/dynamic-gradient.css

@@ -0,0 +1,47 @@
+.dynamic-gradient {
+	position: absolute;
+	font-size: 1.2rem;
+	border: none;
+	color: white;
+	cursor: pointer;
+	outline: none;
+	width: 100%;
+	height: 100%;
+	inset: 0;
+	overflow: hidden;
+	border-radius: inherit;
+	z-index: -10 !important;
+}
+
+.dynamic-gradient::before {
+	--size: 500%;
+	content: "";
+	position: absolute;
+	left: var(--x);
+	top: 50%;
+	z-index: -1;
+	width: var(--size);
+	height: var(--size);
+	transform-origin: --size, --size;
+	scale: 0;
+	opacity: 0;
+	background: radial-gradient(
+		circle closest-side,
+		rgba(0, 0, 0, 0),
+		transparent
+	);
+	transform: translate(-50%, -50%);
+	background: radial-gradient(
+		circle closest-side,
+		var(--card-active) 0%,
+		transparent 100%
+	);
+	transition: opacity 300ms ease;
+}
+
+/* @media (hover: hover) { */
+button:hover .dynamic-gradient::before {
+	scale: 1;
+	opacity: 1;
+}
+/* } */

src/util/index.ts

@@ -55,3 +55,17 @@ export const get = {
 		return xs.at((i - 1) % xs.length)!;
 	},
 };
+
+import "./dynamic-gradient.css";
+
+export function setupDynamicGradient(el: HTMLElement | null) {
+	if (!el) return;
+
+	el.addEventListener("mousemove", e => {
+		const rect = el.getBoundingClientRect();
+		const x = e.clientX - rect.left;
+		const y = e.clientY - rect.top;
+		el.style.setProperty("--x", x + "px");
+		el.style.setProperty("--y", y + "px");
+	});
+}