diff --git a/src/components/Exp/Story.tsx b/src/components/Exp/Story.tsx index e094900..2d5ae82 100644 --- a/src/components/Exp/Story.tsx +++ b/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; diff --git a/src/components/Exp/Unit.tsx b/src/components/Exp/Unit.tsx index 151d88f..f2d3bb9 100644 --- a/src/components/Exp/Unit.tsx +++ b/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; diff --git a/src/pages/main/Exp.tsx b/src/pages/main/Exp.tsx index c61bf31..44a29e2 100644 --- a/src/pages/main/Exp.tsx +++ b/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); }} /> ))} diff --git a/src/pages/main/Projects.tsx b/src/pages/main/Projects.tsx index 1805244..8bb8522 100644 --- a/src/pages/main/Projects.tsx +++ b/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 = ({ className={css` display: block; text-decoration: none; + font-weight: 500; `} href={url} target="_blank" @@ -133,7 +142,6 @@ const ProjectUnit: React.FC = ({ position: absolute; right: 1rem; bottom: 1rem; - font-weight: bold; color: #bbbbbb; font-size: 0.8rem; `}> @@ -147,19 +155,18 @@ const ProjectUnit: React.FC = ({ const Exp: React.FC = () => { return ( -

What else have I built?

+

Things I've built

Some tools, libraries, and apps over time:

* { flex-basis: 15rem; flex-grow: 1; - margin-top: 2rem; - margin-right: 3%; } `}> {exp.map(unit => ( diff --git a/src/pages/main/data/experience.tsx b/src/pages/main/data/experience.tsx index 5272eca..aa7b888 100644 --- a/src/pages/main/data/experience.tsx +++ b/src/pages/main/data/experience.tsx @@ -1,16 +1,5 @@ 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", @@ -20,25 +9,27 @@ export const experience = [ year: "2011-19", tags: ["Programming", "Film", "Photography", "Design", "Writing"], description: ( -
-

- The Feathers was a creative collective, comprising mostly of students - and amateur artists and entertainers pursuing various creative - endeavours. -

+ <>

- This varied from photography, typography, graphic design, short films, - music, to ad films and event coverage. + The Feathers was a creative collective primarily consisting of + 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.

- It was an early attempt at creating something out of pure passion, and - gave rise to such projects as StudioFlicks, OutFocus, and the like. + This collective represented an early and earnest attempt at creating + something driven purely by passion. It led to the development of + various projects, including StudioFlicks and OutFocus, among others.

- It gives me immense pride and joy to see former members go on to build - amazing careers and pursue interests. + The collaborative spirit and shared dedication among members fostered + 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.

-
+ ), logo: "TheFeathers.png", }, @@ -49,7 +40,23 @@ export const experience = [ position: "Co-founder & Creative Head", year: "2013-15", tags: ["Design", "Writing"], - description: sampleText, + description: ( + <> +

+ 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. +

+

+ 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. +

+ + ), logo: "StudioFlicks.png", }, { @@ -59,7 +66,31 @@ export const experience = [ position: "Architectural Intern", year: "2014", tags: ["Architecture"], - description: sampleText, + description: ( + <> +

+ 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. +

+ +

+ 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. +

+ +

+ 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. +

+ + ), logo: "Vinzas.png", }, { @@ -69,7 +100,29 @@ export const experience = [ position: "Architectural Intern", year: "2015", tags: ["Architecture"], - description: sampleText, + description: ( + <> +

+ 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. +

+

+ 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. +

+

+ 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. +

+ + ), logo: "BlueCube.png", }, { @@ -79,7 +132,27 @@ export const experience = [ position: "Editor / Developer", year: "2014-17", tags: ["Design", "Programming", "Writing"], - description: sampleText, + description: ( + <> +

+ 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. +

+

+ 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. +

+ + ), logo: "OutFocus.png", }, { @@ -89,7 +162,27 @@ export const experience = [ position: "Technical Content Writer", year: "2017", tags: ["Writing"], - description: sampleText, + description: ( + <> +

+ 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. +

+

+ 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. +

+ + ), logo: "Zoho.png", }, { @@ -99,7 +192,24 @@ export const experience = [ position: "Designer & Web Dev", year: "2017", tags: ["Design", "Programming"], - description: sampleText, + description: ( + <> +

+ 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. +

+

+ 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. +

+ + ), logo: "ManojExports.png", }, { @@ -109,7 +219,30 @@ export const experience = [ position: "Full Stack Developer", year: "2018", tags: ["Programming"], - description: sampleText, + description: ( + <> +

+ 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. +

+

+ 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. +

+

+ 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. +

+ + ), logo: "Klenty.png", }, { @@ -119,7 +252,28 @@ export const experience = [ position: "Full Stack Developer", year: "2018-19", tags: ["Programming"], - description: sampleText, + description: ( + <> +

+ 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. +

+ +

+ 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. +

+ + ), logo: "Hugosway.png", }, { @@ -129,7 +283,27 @@ export const experience = [ position: "Lead Web Dev & Architect", year: "2021-22", tags: ["Programming", "Design"], - description: sampleText, + description: ( + <> +

+ 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. +

+

+ 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. +

+ + ), logo: "NavanaTech.png", }, { @@ -139,7 +313,25 @@ export const experience = [ position: "Chief Maker", year: "2019-present", tags: ["Programming", "Design", "Writing"], - description: sampleText, + description: ( + <> +

+ 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. +

+

+ 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. +

+ + ), logo: "FeathersStudio.png", }, ].reverse();