Justinconabree.com

I first made a "resume" site around 2015. I built it in a few months using a template as a starting point. As a dev, this was a bit shameful so I had always planned to remake it. I've been remaking this site for the past like 6 years. I've restarted too many times to count with varying progress each iteration. I would start with an idea in mind, get through the base set up, hit a major roadblock and my motivation would fade away or I'd jump onto another passion project. But this is the one. Built from the ground up with the latest tech. A site I can be proud of. There's loads of issues and things I need to fix, but it's working, looks pretty cool, and is a solid platform I can build on.

The site is served using the latest NextJS 15.x, React 19 with server components and actions all hosted on Vercel for quick and easy deployments. The code itself is Typescript (v5).

Since it's my site and I have no issues updating the code to change the content, most of the content on the site is directly in code. All of the projects, skills and a few other data points are fetched from Contentful through GraphQL server side during the build. The project pages are all built dynamically from that data.

The pages are styled with a mix of TailwindCSS and CSS Modules. At the moment I'm using TailwindCSS v3, though I have plans to update to v4 post launch.

Email is handled through a server action which then sends the message through Sendgrid. Easy, free, and spam-free. The contact form (or any future forms) is protected with ReCAPTCHA to prevent blowing up my free-tier sending limits.

Fonts are hosted on the server through NextJS. All images are rendered through NextJS's Image component so they're optimized and served from Vercel's CDN.

The repo is available here if you want to take a deeper dive and/or judge my code.

I think the above-the-fold content of the homepage is probably the most important content you have on a site. It instantly sets the vibe for the rest of the experience. As this site has been restarted so many times, there's been a range hero designs.

At one point I worked out a proof of concept in ThreeJS for a scrollable site. There were tons of dots that formed the shape of a brain and would explode as you scrolled. Performance was shit and it didn't look very good so that was scrapped.

More recently when taking a break from developing the Momentiv site I decided to got a bit more simple but I still wanted something punchy and 3D. I've always been mesmerized by those interactive sites you find on Awwwards but at least at work I've never had the opportunity to develop one. As it turns out... it ain't easy! I decided the inspiration for my site was going to be Into The Spider-Verse. Specifically the scene in the reactor. In my opinion it's one of the sickest bits of animation out there. The anaglyphs, the spreading of those black blobs, the glitching. 😙🤌. I wanted to base my site on that. I started trying to recreate something similar in SplineJS but the best I could come up with was this colourful turd and this janky chinese-fingertrap looking thing. This was not the vibe I was going for. I pushed on a bit more and developed a cool scroll-based anaglyph. To me it was interesting, to my partner, it hurt her eyes.. physically. You can see for yourself here. It was an interesting idea but I didn't have the energy to execute it properly. The project went on the backburner again.

Some time later, on April 8th, 2024 I had my mind blown by the eclipse. Look at this video. The electricity of that white ring. Awe inspiring.

On the way back, after picking my jaw up off the floor, I decided to pivot the theme of my site to what I had just seen. I also figured it'd be much easier to create a damn circle animation that anything else I had tried. I was partially correct. I managed to make something that looked quite good. But the performance.. You can see it here, but be warned that your computer isn't going to be happy with you. It's almost as bad as scrapping your composer vendor folder multiple times in PHPStorm, or screensharing with Teams.

I hit the point where I needed to start treating my time as I would the clients. Enough dicking around with "cool" projects that drain all my energy and motivation and in with the "MVP" mindset. Out with the poor performing 3D rendering. In with the pre-rendered video. Reworking the red and blue anaglyph hurting peoples eyes into the only-slightly-better eclipse-inspired anaglyph that you see on any of the main headers. "Good enough" was what's gonna get this thing across the finish line. Improvements can and will come later but only if it actually launches. This is an approach that I'm starting to learn to take with myself. It's probably the ADHD, but I frequently sink myself into personal projects until it drains me and I never want to touch it again. Reserving that energy for later is what's making this project see the light of day.

Overall I'm happy with it! I'm using really cool tech that's honestly been a pleasure to work with. I've implemented some awesome features across the site, and it's only the beginning.

Also, 100 across the board! 🎉

_{Okay, 93 on mobile, but I'll fix that another day 🙂}