Hey everyone! Just wrapped up my coding IT school (shoutout to Clarusway!) a few months back. Instead of jumping right into job hunting, I really wanted to make my portfolio mine – digging deeper with the tools and tackling stuff beyond what they taught us. Here’s a quick look at what I’ve been up to.
DevTools: My Go-To for Making it My Own
I started with a template, but pretty fast, I was tearing apart and rebuilding most of it. Seriously, not just tweaking colors. I had to dig deep, wrestle with some tricky JavaScript, and basically remake huge chunks. Honestly, sometimes I figured it’d be easier to just build from scratch! Anyway, Chrome DevTools was my best friend through all this. Constantly in the 'Elements' panel, and using 'Computed' and 'Styles' to test things live. Really helped me get why stuff worked (or didn't) and how to fix it.
Performance & User Experience Were Key
A smooth, fast site was a big deal for me:
- Better Images: Switched some images to compressed PNGs and added lazy loading to speed things up. Compressed PNGs Free until 5MB
- No More Blank Stares: Popped in react-loader-spinner so users aren't just waiting around.
React Loader Spinner
3. Cutting the Fat: The template had some heavy stuff like Isotope.js that was overkill and slowed things down. So, I ripped it out and refactored what needed it. Great learning experience in analyzing code and boosting efficiency.
Building What I Needed (And Learning a Ton)
If something was missing or could be better, I tried to build it:
- A Real 404 Page: The template didn't have one, so I built it.
- A Smarter Contact Form: This was fun! Added reCAPTCHA to stop spam. Then, for a better user experience, when you hit 'Send,' the button disables, and you see status messages like 'Sending...' then 'Got it!'. Used a switch-case for this – first time, cool stuff! All powered by FormsPree.
- (Work in Progress) Dynamic Content: Working on pulling my blog posts from DEV.to/Medium and repos from GitHub with their APIs. Good practice with async/await.
- SVG Icon Tweaks: Needed specific icons, so I found some SVGs and tweaked their code before using them. Pretty neat.
Deeper Dives into React (And Fighting With Template Code)
IT school gave a good start, but I wanted more:
- Using Hooks Wisely: Made sure to use React hooks like useRef and useMemo where they actually helped.
- Battling Complex Code: The template had some super advanced (like, senior-level!) JavaScript, especially for stuff like the navbar color changing on scroll. Spent ages figuring it out. Can't say I nailed every line, but definitely learned a LOT about unraveling tricky existing code and making changes.
The Journey Goes On
These last four months weren’t just about code. It was all about problem-solving on the fly, figuring out how to learn on my own, and not being scared to try new things. That never-stop-learning vibe is what I love about frontend, and it’s definitely helped me level up.
So, with these experiences and a portfolio I’m actually proud of, I’m pumped for the job hunt!
You can check out my portfolio here: caneryesiltas.com And connect with me on LinkedIn: Caner Yesiltas on LinkedIn