⊱⋆ Creating an interactive web-mag: Castle Magazine ⊱⋆

Valentina

Valentina Velázquez

♖ Castle WebMag ♖ (creative programming project)

CLICK HERE --> castlemag.xyz <-- CLICK HERE

𓃗 Overview 𓃗

Castle Magazine is an ongoing personal project that brings together everything I’ve been learning in my creative programming journey over the past year. As a student at LABASAD in Barcelona, I’ve been learning how to build websites from the ground up using HTML, CSS, and JavaScript. Plus, experimenting with creative tools like p5.js, GSAP, and other libraries for interactive design.
This web magazine is a space where I can put all of that into practice. It’s not just about design or development, it’s about creating something expressive, experimental, and fun. I’ll be using it to write about topics I find interesting, connect with people, and push my skills forward. I see it as a long-term creative outlet that I’ll keep updating and evolving over time.

𓃗 Moodboard 𓃗

𓃗 Design Process 𓃗

I began by creating a moodboard and researching and brainstorming keywords to find the name of the project. Since I've always been super drawn to everything medieval, and its been a topic that I always go back to for inspiration, I settled on the name CASTLE.
I had written down what interactions I wanted my website to have, so keeping this in mind, it was time to decide on the content.
I then moved on to deciding what topics I wanted to write about, what artists I wanted to feature, and who I wanted to interview. Once this was all clear, I finally began creating on this digital realm

𓃗 Writing / Content Creating 𓃗

It took me a couple of weeks to research and shape the content for the articles. I spent time looking into artists, conducting interviews, taking videos, you name it. This stage had me doing a bit of everything, and I loved it. Writing again felt like reconnecting with a part of myself I hadn’t tapped into in years. I’d been looking forward to reactivating that side of me, and it was incredibly rewarding to do so through this project.
Brainstorming Topics / Ideas
Brainstorming Topics / Ideas

𓃗 Programming Process 𓃗

Even-though I already had a great base of programming thanks to my course, I taught myself how to use tools like Three.js, GSAP, and even did 3D scans of my friends to make the experience more immersive. On the backend, I built a working Node.js contact form, fully custom and functional. Every element you see, animations, transitions, interactions, was hand-coded to match the design and feel I originally had in mind.
Along the way, I hit plenty of roadblocks. Whether it was debugging 3D asset loading, learning backend logic for the first time, or making the site responsive across devices, I problem solved my way through all of it.

𓃗 Takeaways 𓃗

This project has been one of the most rewarding learning experiences I’ve had so far. I created everything from the ground up, starting with the visual identity (colors, typography, logo), crafting the content, designing the layout, building the site from scratch, and even learning a bit about backend development to make sure everything worked seamlessly. I taught myself new tools and libraries along the way and faced plenty of challenges, but each one pushed me to grow.
More than anything, this project reminded me how much I enjoy creating something fully my own, from concept to execution. I'm so excited to keep it evolving over time: writing more, experimenting with design and interaction, and collaborating with artists and interesting people. It’s a space that grows alongside me, and I can’t wait to see where it goes next.
Like this project

Posted Jul 24, 2025

As a final creative programming project I created my own web magazine. Doing everything from graphic design, writing, interviewing, programming and launching :)

Likes

0

Views

12

Timeline

Feb 15, 2025 - Jul 22, 2025