Building my career timeline
I just added a career timeline to my About page. Not because it's a resume requirement, but because the process of building it taught me something unexpected about both code and career.
Why I Even Started This
I've spent years helping people solve complex technical problems. My job is to take something complicated and make it make sense. But I realized I'd never applied that same principle to my own career story.
Looking back at 10+ years in tech support and technical leadership, it's easy to just see it as "a bunch of jobs." But when you stop and actually write down what you learned at each stage, you might notice some patterns emerge.
So I decided to build a timeline component for my About page. Not just to list where I worked but to capture the real lessons from each role and the things I wish I'd known at the time.
First Attempt: The Inline Approach
I started by just writing the timeline directly in my About page component. Bad move. I had this massive chunk of JSX mixed with my page layout:
// This got messy FAST
<div className="space-y-8">
<div className="border-l-4 border-quantum-violet pl-6">
<div className="flex items-center gap-2 mb-2">
<span className="bg-quantum-violet text-white px-3 py-1 rounded-full text-sm">
2014-2016
</span>
<h3 className="font-semibold">Technical Support Engineer</h3>
<span className="text-neural-silver">@ Dell EMC</span>
</div>
<!-- ... way more content ... -->
</div>
<!-- ... repeat for every job ... -->
</div>After a while of copying and pasting, I realized this was going to be a nightmare to maintain. Every change would require digging through this nested structure, and the About page component was already getting long.
Second Attempt: Extract to Component
Okay, let's make this a proper React component. I created src/components/Journey.tsx and moved the timeline logic there:
export default function Journey() {
return (
<section className="space-y-8">
<h2 className="text-2xl font-bold text-quantum-violet">My Journey</h2>
<div className="space-y-8">
{/* Timeline entries here */}
</div>
</section>
);
}
// In src/app/about/page.tsx
import Journey from '@/components/Journey'
export default function AboutPage() {
return (
<main className="max-w-4xl mx-auto px-6 py-12">
<Journey />
</main>
)
}Better, but now I had another problem. How do I pass job data? I could hardcode it.. but that felt wrong. I spent some time debating whether to create a separate data file, use props, or just keep it simple.
I ended up hardcoding it first because I wanted to see if the component would even work.
The Grid Layout Problem
The timeline needed to be responsive. On mobile, everything should stack vertically. On desktop, I wanted the date and title on the left, content on the right.
My first attempt with Tailwind's grid system:
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
<div className="lg:col-span-4">
{/* Date and title */}
</div>
<div className="lg:col-span-8">
{/* Content */}
</div>
</div>This worked, but the alignment was weird. The date badge was floating, and the content didn't line up properly. I spent too long trying flex-grow, gap-4, mt-4, switching between items-start and items-center before realizing I needed to structure it differently.
// Second attempt - tried flexbox
<div className="flex flex-col lg:flex-row gap-4">
<div className="lg:w-1/3">
{/* Date and title */}
</div>
<div className="lg:w-2/3">
{/* Content */}
</div>
</div>This got the horizontal layout right but broke the vertical timeline effect. The border-left I was using for the timeline line wouldn't span the full height of the entry anymore - it got chopped off at the first child element.
The alignment was weird because the date badge sat awkwardly in the left column, disconnected from the timeline border, and there was no way to make it overlap properly without complex positioning.
What finally worked:
// Full entry structure
<div className="border-l-4 border-quantum-violet pl-6 relative">
<div className="absolute -left-3 top-0">
<span className="bg-quantum-violet text-white px-3 py-1 rounded-full text-sm">
2014-2016
</span>
</div>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mt-2">
<div className="lg:col-span-4">
<h3 className="font-semibold">Technical Support Engineer</h3>
<span className="text-neural-silver">@ Dell EMC</span>
</div>
<div className="lg:col-span-8">
<p className="text-code-carbon mb-3">
Learned systematic troubleshooting under pressure through the GSAP program.
</p>
<div className="border-l-2 border-automation-amber pl-4">
<p className="text-sm text-automation-amber font-medium">
Key Learning: Part of career growth is knowing when you're ready for the next challenge.
</p>
</div>
</div>
</div>
</div>The absolute -left-3 positions the badge 0.75rem (3 * 0.25rem) to the left of the border. Since the border is border-l-4 (1rem), this pulls the badge halfway across the border, creating that centered overlap effect I was going for.
The key insight was using the border-left as the timeline line and positioning the date badge to overlap it. Obvious in hindsight, but it took me a couple of attempts to get there.
What I'd Do Differently (Looking Back)
If I were starting this component again, knowing what I know now:
- Start with a clear data structure. Don't overthink it but have a mental model of what job entries look like before writing JSX
- Use CSS custom properties more consistently instead of bouncing between semantic tokens and hardcoded values
- Build a proper prop interface from the beginning instead of refactoring later when I realized I needed more flexibility
That said, the messy approach worked. It let me iterate quickly and focus on the content rather than getting stuck in architecture. A previous manager of mine once said "Don't let perfect block the road to progress" and that still resonates with me today. That was the approach I took here.
The component finally worked. The layout was responsive, the date badges aligned, everything rendered correctly. I could have stopped there.
The Harder Part: Writing It
Building the component took a few hours including all the debugging. Writing the actual content took significantly more reflection.
Looking back at each role, patterns I hadn't noticed before started to emerge.
Dell EMC (2014-2016)
This was my first proper job, and the GSAP program laid the essential foundation for my entire career. I learned systematic troubleshooting, how to communicate clearly when things are broken and someone's waiting on you. But the role also helped me understand my own value and my drive to take on more. Looking back, I was frustrated that there wasn't more room to grow. That's when I realized: I needed to find a culture that would let me meet that ambition head-on. Past-me was ready for the next challenge—I just hadn't figured out how to ask for it yet.
Nuix (2016-2020)
This job completely reshaped my definition of what technical support can be. I became a dedicated support resource for one of our largest customers in EMEA, working on-site with them, running demos for the sales team, and diving into the Engine APIs to write my own scripts. Great. But then I hit a wall—my passion and responsibilities had expanded, but the role hadn't. I spent way too long thinking I should just be grateful before realizing: no, I needed to find a place that would recognize that contribution. The irony was not lost on me that I'd outgrown the role that had taught me so much.
Cohesity - TSE (2020-2021)
I joined Cohesity in March 2020. Two weeks later, the world shut down. Starting a new job remotely, on a new product, after years of being the go-to person at Nuix—the imposter syndrome was real. I spent that year proving to myself that I could do it again. Learning a complex product from scratch, building new relationships through a screen, finding my footing in a company I'd never set foot in. Here's what I learned the hard way: your reputation doesn't transfer. Your ability to build one does.
Cohesity - Senior TSE (2021-2022)
The imposter syndrome from joining during Covid hadn't fully faded, but something had shifted. Management started routing the harder cases my way—complex database and backup issues that needed more than a standard playbook. I also knew early on that I wanted Tech Lead, so I stopped waiting for the title and started doing the job. Mentoring new hires, sharing what I knew, making myself useful beyond my own ticket queue. Honestly, I was surprised how quickly I stopped caring about the title once I started the actual work.
Cohesity - Technical Lead (2022-Present)
My title is Technical Lead, which in practice means I'm the person the team comes to when something doesn't make sense. As much as I love getting my hands on a weird, messy, complex problem, the real win for me isn't fixing it. It's turning around and showing my team how they can solve it too. I've also started noticing patterns beyond individual cases. Gaps in how we worked, how we shared knowledge. One change started as a tool I built without asking permission, shared with the team, and watched quietly become the new standard. I'm still facepalming that this worked so well—sometimes the best way to drive change is to build the thing first and ask for forgiveness later.
What I'm Taking From This
Writing this timeline forced me to articulate lessons I'd internalized but never expressed. I thought I knew what I learned at each job, but putting it on paper revealed patterns I hadn't seen.
My path definitely wasn't a straight shot up. Lateral moves, expanded roles, finding opportunities to take on more - that was my actual growth. Growth is rarely linear.
The technical skills matter (I can build the component), but understanding WHY I'm building it makes it meaningful. That's the part that sticks with you.
I started writing this thinking I was just documenting where I'd been. I ended up learning something about where I'm going.