feat: update experience content and minor improvements

src/components/Exp/Story.tsx

@@ -29,7 +29,7 @@ const story = css`
 			}
 
 			& > p + p {
-				margin-block-start: 0.5em;
+				margin-block-start: 1.4em;
 			}
 		}
 	}
@@ -117,6 +117,7 @@ const story = css`
 			& > div {
 				column-count: unset;
 				padding-inline: 4rem;
+				padding-block-end: 3rem;
 				height: 100%;
 				overflow-y: auto;
 

src/components/Exp/Unit.tsx

@@ -6,7 +6,7 @@ import { Content } from "./Content";
 import { offscreenWidth } from "../constants";
 
 const expUnit = css`
-	--final-height: 20rem;
+	--final-height: 24rem;
 	--unit-height: 9rem;
 	--story-height: calc(var(--final-height) - var(--unit-height));
 	--transition-time: 200ms;

src/pages/main/Exp.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { css, cx } from "@emotion/css";
 import Container from "../../components/Container";
 import { ExpUnit } from "../../components/Exp/Unit";
@@ -9,6 +9,7 @@ import useSearchParams from "../../util/useSearchParams";
 import useLocation from "wouter/use-location";
 
 const exp_route = /^\/experience\/?[^\/]*$/;
+const slug_replace = /^\/experience\/?/;
 
 const Exp: React.FC = () => {
 	const [location, navigate] = useLocation();
@@ -19,10 +20,13 @@ const Exp: React.FC = () => {
 		return null;
 	}
 
-	const slug = location.replace(/^\/experience\/?/, "").replace("/", "");
+	const slug = location.replace(slug_replace, "").replace("/", "");
 
 	useEffect(() => {
 		const handler = (e: KeyboardEvent) => {
+			const slug = window.location.pathname
+				.replace(slug_replace, "")
+				.replace("/", "");
 			if (slug) if (e.key === "Escape") window.history.back();
 		};
 
@@ -80,11 +84,21 @@ const Exp: React.FC = () => {
 							key={i}
 							active={slug === unit.slug}
 							{...unit}
-							onClick={() => {
+							onClick={e => {
 								if (slug === unit.slug) return navigate("/experience");
 								if (slug)
 									navigate(`/experience/${unit.slug}`, { replace: true });
 								else navigate(`/experience/${unit.slug}`);
+
+								// setTimeout(() => {
+								// 	console.log("dping");
+								// 	(
+								// 		(e.target as HTMLElement).nextSibling as HTMLElement
+								// 	)?.scrollIntoView?.({
+								// 		behavior: "smooth",
+								// 		block: "center",
+								// 	});
+								// }, 300);
 							}}
 						/>
 					))}

src/pages/main/Projects.tsx

@@ -47,11 +47,19 @@ const exp = [
 		cat: "tool",
 		tags: ["minecraft", "node"],
 	},
+	{
+		title: "Storymap",
+		description:
+			"Reverse-engineered thirdparty map renderer for Vintage Story in Zig ⚡️.",
+		// url: "https://github.com/MadrasMC/storymap",
+		cat: "tool",
+		tags: ["vintage-story", "zig"],
+	},
 ];
 
 type Project = {
 	title: string;
-	url: string;
+	url?: string;
 	description: string;
 	cat: string;
 	tags: string[];
@@ -86,6 +94,7 @@ const ProjectUnit: React.FC<Project> = ({
 				className={css`
 					display: block;
 					text-decoration: none;
+					font-weight: 500;
 				`}
 				href={url}
 				target="_blank"
@@ -133,7 +142,6 @@ const ProjectUnit: React.FC<Project> = ({
 						position: absolute;
 						right: 1rem;
 						bottom: 1rem;
-						font-weight: bold;
 						color: #bbbbbb;
 						font-size: 0.8rem;
 					`}>
@@ -147,19 +155,18 @@ const ProjectUnit: React.FC<Project> = ({
 const Exp: React.FC = () => {
 	return (
 		<Container>
-			<h2>What else have I built?</h2>
+			<h2>Things I've built</h2>
 			<p>Some tools, libraries, and apps over time:</p>
 			<div
 				className={css`
 					display: flex;
 					width: 100%;
 					flex-wrap: wrap;
+					gap: 2rem;
 
 					& > * {
 						flex-basis: 15rem;
 						flex-grow: 1;
-						margin-top: 2rem;
-						margin-right: 3%;
 					}
 				`}>
 				{exp.map(unit => (

src/pages/main/data/experience.tsx

@@ -1,16 +1,5 @@
 import React from "react";
 
-const sampleText = (
-	<div>
-		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.
-	</div>
-);
-
 export const experience = [
 	{
 		title: "The Feathers",
@@ -20,25 +9,27 @@ export const experience = [
 		year: "2011-19",
 		tags: ["Programming", "Film", "Photography", "Design", "Writing"],
 		description: (
-			<div>
+			<>
-				<p>
-					The Feathers was a creative collective, comprising mostly of students
-					and amateur artists and entertainers pursuing various creative
-					endeavours.
-				</p>
 				<p>
-					This varied from photography, typography, graphic design, short films,
+					The Feathers was a creative collective primarily consisting of
-					music, to ad films and event coverage.
+					students and amateur artists and entertainers who were exploring a
+					diverse range of creative fields. These fields spanned from
+					photography, typography, and graphic design to short films, music,
+					writing, programming, advertising films, and event coverage.
 				</p>
 				<p>
-					It was an early attempt at creating something out of pure passion, and
+					This collective represented an early and earnest attempt at creating
-					gave rise to such projects as StudioFlicks, OutFocus, and the like.
+					something driven purely by passion. It led to the development of
+					various projects, including StudioFlicks and OutFocus, among others.
 				</p>
 				<p>
-					It gives me immense pride and joy to see former members go on to build
+					The collaborative spirit and shared dedication among members fostered
-					amazing careers and pursue interests.
+					a nurturing environment for growth and innovation. I feel immense
+					pride and joy in seeing former members go on to build remarkable
+					careers and continue to pursue their creative interests with such
+					enthusiasm and success.
 				</p>
-			</div>
+			</>
 		),
 		logo: "TheFeathers.png",
 	},
@@ -49,7 +40,23 @@ export const experience = [
 		position: "Co-founder & Creative Head",
 		year: "2013-15",
 		tags: ["Design", "Writing"],
-		description: sampleText,
+		description: (
+			<>
+				<p>
+					I co-founded StudioFlicks with Suresh after working together in
+					writing for another cinema news website that has since went down. I
+					was involved in the design and content creation for the website. We
+					covered movie reviews, news, and interviews.
+				</p>
+				<p>
+					We had a small team of writers and photographers who contribute to the
+					website. We had a good run for a couple of years before I moved on to
+					other projects. I designed the logo and stationery, and wrote a lot of
+					the content for the website. I also managed the social media accounts
+					and the community.
+				</p>
+			</>
+		),
 		logo: "StudioFlicks.png",
 	},
 	{
@@ -59,7 +66,31 @@ export const experience = [
 		position: "Architectural Intern",
 		year: "2014",
 		tags: ["Architecture"],
-		description: sampleText,
+		description: (
+			<>
+				<p>
+					I interned at Vinzas Solutions, a small but dynamic architectural firm
+					in Chennai, where I was involved in the design and execution of
+					several residential and commercial projects. This experience allowed
+					me to gain invaluable insights into the practical aspects of
+					architecture, working on projects from concept to completion.
+				</p>
+
+				<p>
+					This was my first experience working in a professional setting, and it
+					proved to be an exceptional learning opportunity. I learned
+					extensively about the design process, client interactions, and project
+					management, which significantly enhanced my understanding of the
+					industry.
+				</p>
+
+				<p>
+					Additionally, I became proficient in using various design software and
+					tools to create detailed drawings and presentations, further honing my
+					technical skills and creative abilities.
+				</p>
+			</>
+		),
 		logo: "Vinzas.png",
 	},
 	{
@@ -69,7 +100,29 @@ export const experience = [
 		position: "Architectural Intern",
 		year: "2015",
 		tags: ["Architecture"],
-		description: sampleText,
+		description: (
+			<>
+				<p>
+					I interned at Blue Cube, a leading architectural firm in Chennai,
+					where I worked on a variety of projects ranging from residential
+					buildings to commercial complexes. During my time there, I gained
+					hands-on experience in architectural design, drafting, and project
+					management, which significantly deepened my understanding of the
+					architectural process.
+				</p>
+				<p>
+					I also had the opportunity to collaborate with a team of experienced
+					architects and designers, learning from their expertise and
+					contributing to real-world projects. This experience was invaluable in
+					shaping my skills and preparing me for a career in architecture.
+				</p>
+				<p>
+					We worked on several notable projects, including A.R. Rahman's YM
+					Studios, a luxury spa in Tower Park, and various residential projects
+					in and around Chennai.
+				</p>
+			</>
+		),
 		logo: "BlueCube.png",
 	},
 	{
@@ -79,7 +132,27 @@ export const experience = [
 		position: "Editor / Developer",
 		year: "2014-17",
 		tags: ["Design", "Programming", "Writing"],
-		description: sampleText,
+		description: (
+			<>
+				<p>
+					OutFocus Magazine was a diverse publication dedicated to exploring
+					arts, culture, lifestyle, and science. As the editor and developer, I
+					curated content, designed the layout, and managed the website.
+					OutFocus covered a wide range of topics, including visual arts, music,
+					literature, science, and emerging cultural trends.
+				</p>
+				<p>
+					This broad approach allowed us to engage a wide audience and provide a
+					platform for various voices and perspectives. Through this
+					exploration, we celebrated creativity, innovation, and intellectual
+					curiosity. I founded OutFocus with friends from The Feathers, and
+					together we created a unique and engaging publication that offered a
+					fresh perspective on contemporary culture and society. One of our
+					notable achievements was raising international awareness about the
+					Chennai floods through our social presence.
+				</p>
+			</>
+		),
 		logo: "OutFocus.png",
 	},
 	{
@@ -89,7 +162,27 @@ export const experience = [
 		position: "Technical Content Writer",
 		year: "2017",
 		tags: ["Writing"],
-		description: sampleText,
+		description: (
+			<>
+				<p>
+					At Zoho, I served as a technical content writer, reporting directly to
+					the product manager. This role tasked me with creating documentation
+					and user guides for diverse software products. Under the product
+					manager's guidance, I ensured the content I produced aligned
+					seamlessly with each product's vision and objectives.
+				</p>
+				<p>
+					Working closely with the product manager streamlined collaboration and
+					decision-making processes. This direct line of communication
+					facilitated efficient feedback loops, allowing for the creation of
+					documentation that met both the product manager's standards and the
+					needs of end-users. Reporting solely to the product manager fostered a
+					strong sense of ownership and accountability, enabling me to deliver
+					high-quality technical content tailored to the specific requirements
+					of each software product.
+				</p>
+			</>
+		),
 		logo: "Zoho.png",
 	},
 	{
@@ -99,7 +192,24 @@ export const experience = [
 		position: "Designer & Web Dev",
 		year: "2017",
 		tags: ["Design", "Programming"],
-		description: sampleText,
+		description: (
+			<>
+				<p>
+					Based in Chennai, Manoj Exports is an established company with a long
+					history. They've been exporting fruits and other goods to countries
+					around the world for many years. When they wanted to start selling
+					locally, they asked me to help them update their website and create a
+					new look for their brand. I worked closely with the company's owners
+					to understand what they wanted their business to be about.
+				</p>
+				<p>
+					Getting to know Manoj Exports well, I carefully designed a new website
+					and brand style that matched their values. Everything from the website
+					to the brand logo was made to show off the company's past while also
+					looking fresh and modern.
+				</p>
+			</>
+		),
 		logo: "ManojExports.png",
 	},
 	{
@@ -109,7 +219,30 @@ export const experience = [
 		position: "Full Stack Developer",
 		year: "2018",
 		tags: ["Programming"],
-		description: sampleText,
+		description: (
+			<>
+				<p>
+					Klenty is a vibrant sales engagement platform crafted to streamline
+					communication processes for sales teams. It marked my debut in a
+					full-time programming role.
+				</p>
+				<p>
+					Joining during a period of rapid expansion, I encountered challenges
+					and opportunities for personal and professional growth. As a
+					full-stack developer, my responsibilities encompassed the development
+					and upkeep of the company's web applications. Working closely with the
+					product team, I spearheaded the integration of new features and
+					enhancements, ensuring a cohesive user experience across all
+					platforms.
+				</p>
+				<p>
+					Furthermore, I played a pivotal role in addressing challenges related
+					to scaling the system to accommodate the growing user base. I worked
+					to ensure the platform maintained optimal performance and reliability
+					even amidst increased usage and demand.
+				</p>
+			</>
+		),
 		logo: "Klenty.png",
 	},
 	{
@@ -119,7 +252,28 @@ export const experience = [
 		position: "Full Stack Developer",
 		year: "2018-19",
 		tags: ["Programming"],
-		description: sampleText,
+		description: (
+			<>
+				<p>
+					At Hugo's Way, I played a key role in stabilising their currency
+					exchange platform, ensuring smooth and reliable operations.
+					Recognising the imperative for scalability and adaptability, I
+					spearheaded the transition from a monolithic architecture to a more
+					agile and modular service-oriented one to achieve flexibility to
+					deploy as whitelabelled services. This structural overhaul not only
+					bolstered performance but also streamlined development cycles and
+					maintenance.
+				</p>
+
+				<p>
+					Additionally, I established standards for comprehensive documentation,
+					ensuring clarity and consistency in our processes. Through effective
+					communication and mentorship, I fostered a culture of collaboration,
+					innovation, and continuous improvement within the team, driving our
+					collective efforts towards achieving greater success.
+				</p>
+			</>
+		),
 		logo: "Hugosway.png",
 	},
 	{
@@ -129,7 +283,27 @@ export const experience = [
 		position: "Lead Web Dev & Architect",
 		year: "2021-22",
 		tags: ["Programming", "Design"],
-		description: sampleText,
+		description: (
+			<>
+				<p>
+					During my time leading a team at Navana, I directed important projects
+					that shaped our path. Initially, I worked on building Zabaan, a
+					single-line import to make localisation easier in mobile apps. When
+					the company pivoted to sayl.ai, a cutting-edge WhatsApp marketing
+					platform for direct-to-consumer use, I played a big role in
+					architecting and leading the team in building this innovative product.
+				</p>
+				<p>
+					As team lead, I focused on building a strong team spirit. I encouraged
+					everyone to share ideas and work together. This made us more
+					productive and committed to our goals. I also made sure our processes
+					were well-documented, which helped us work smoothly and welcome new
+					team members easily. We organised weekly events to foster team bonding
+					and continuous learning, complemented by insightful blog posts
+					detailing our development journey.
+				</p>
+			</>
+		),
 		logo: "NavanaTech.png",
 	},
 	{
@@ -139,7 +313,25 @@ export const experience = [
 		position: "Chief Maker",
 		year: "2019-present",
 		tags: ["Programming", "Design", "Writing"],
-		description: sampleText,
+		description: (
+			<>
+				<p>
+					At Feathers Studio, our transition from a creative collective to a
+					formally registered company has provided us with a platform for
+					innovation and experimentation. This shift allows us to explore
+					open-source initiatives and pursue ambitious moonshot ideas that
+					challenge conventional norms.
+				</p>
+				<p>
+					In addition to our exploration of cutting-edge concepts, we engage in
+					compelling projects aimed at redefining industry standards and
+					addressing critical user experience (UX) challenges. By pushing the
+					boundaries of creativity and technology, we continuously strive to
+					make meaningful contributions to our field while embracing a culture
+					of collaboration and innovation.
+				</p>
+			</>
+		),
 		logo: "FeathersStudio.png",
 	},
 ].reverse();