After several years of using the same simple, static website, I realized it was high time for a
change. My website, SykeBen, showcases my work as an electrical engineer, software developer, and
photographer, but it was in dire need of an overhaul to reflect my personal growth and evolving
skill-set. In this inaugural article, I'll take you behind the curtain of this whole website
redesign, discussing the various challenges, goals, and technologies I used to make SykeBen faster,
more interactive, and visually appealing.
Archived under the archive/old-master tag in the source tree, the old website was "fine"
by most respects, but it's development had stagnated. Keep in mind, I had written the overwhelming majority
of the original website while still attending high school. But it has been almost four years since I've
graduated, so it was time for a change.
I may be qualified enough to review my own code, but I wanted an honest opinion on the previous state of the
website, so I defaulted to everyone's favorite new tool: ChatGPT. I spun up a new instance, making sure to fill the model in on
what I was up to, and asked it to review the source code for the old homepage...
"The old SykeBen homepage had a solid structure but relied heavily on static content and legacy
frameworks. The Bootstrap 4-based design ensured a responsive layout, but the use of multiple
external CSS libraries, jQuery, and animated effects resulted in some performance overhead. While
the site had a visually appealing card-based navigation system and clear branding, there was room
for improvement in code maintainability and efficiency. For example, reducing dependencies on
external scripts, modernizing animations with CSS instead of JS, and implementing a more modular
JavaScript approach would have streamlined performance."
A specifically-prompted ChatGPT instance
Honestly, it was totally right. While there was a solid structure here, the original website had a
lot going on. There were a lot of external references present which really increased the load time
on slower networks (which I noticed during development on the school WiFi), not to mention my obsession with
animating practically everything I could. Don't get me wrong, it looked great, but it was a little
much as I strung these animations together to the point where some sequences reached almost 10 seconds in
length. And, as it mentioned, this did end up inhibiting my ability to maintain the code to the point where
I just gave up and redid the whole thing.
And in With the New
I had put off the redesign for the first few years of college as I didn't think I had enough time to tackle
it outside classes. But I decided to bite the bullet after meeting with our galleries director to discuss
possible outlets for my photographic work as they suggested I put up a portfolio to better showcase my
creations, which I thought was a great idea. In the end, the whole ordeal only took a week in between
classes and homework, invalidating the original reasoning I had for not taking care of it.
For the sake of being thorough, I ran the new homepage's source code through the same review process in
comparison to its original release and here's what I got back...
"The new SykeBen homepage isn't just a redesign, it's a transformation. What was once a static and
functional space has evolved into a dynamic, interactive experience. The minimal yet bold hero
section, complete with an animated cursor, sets the tone for a modern and engaging interface. The
structured content cards make navigation effortless, and the refined typography enhances
readability. With a clean layout, subtle animations, and a modernized structure, the site now
reflects both technical expertise and creative expression. This redesign not only improves
aesthetics but also reinforces the identity of SykeBen as a hub for innovation, engineering, and
artistic vision."
The same specifically-prompted ChatGPT instance
While I don't like tooting my own horn, I'd have to agree with it once again. I had something I could be
proud of again that more accurately reflected my skills and personality as an electrical engineer,
developer, and photographer. I'm really happy with my decision to overhaul it as it has shown me the true
scope of how much my skills as a developer have improved over the last few years.
Behind the Scenes
While I could have consulted professional web designers during the whole process, I wanted to be able to get
honest opinions and suggestions on what I could add to the site. So, once again, I turned to ChatGPT for
assistance. "If it's good enough to sanity-check my homework solution processes and catch errors, why
shouldn't I use it to scaffold my new website," I thought. And I believe I thought right.
Of course, as with any other literary or analytical work, I made a point to prompt the model's responses
to be restrained to those an assistant or editor may provide. This is actually the same process I
employ when using ChatGPT to complete homework assignments (outside of literally telling it to act like a
TA) as it prevents me from developing a reliance on its provided responses and ensures I actually learn or
create the content under my own power.
Final Thoughts
I'm really happy with how everything turned out here. I believe that redoing my website, as an exercise and
a side-project, allowed me to better reflect on the major improvements in my skill-set that I may have not
noticed before. It also allowed me to experiment with an ethical use for LLMs like ChatGPT in the process of rapid prototyping and content
creation, a topic I'll be covering in my next blog post.
