Brianne de Deugd, Creative Frontend Developer, Portfolio 2024

  • Third year Communication & Multimedia Design student
  • Completed propaedeutic year Cum Laude
  • Nominated for a Golden Dot Award (2024)
  • With internship experience abroad
  • Programmed for clients such as the Naturalis Biodiversity Center
  • Third year Communication & Multimedia Design student
  • Completed propaedeutic year Cum Laude
  • Nominated for a Golden Dot Award (2024)
  • With internship experience abroad
  • Programmed for clients such as the Naturalis Biodiversity Center

About Me

My name is Brianne 👋🏽 I'm an aspiring creative frontend developer with an 👁️ for detail, who's keen on taking on new challenges. One of them being this very portfolio, where I used GSAP and ThreeJS for the first time! See my skills below 😁.

Hard skills

  • HTML/CSS
  • 🧮 Javascript
  • NodeJS
  • EJS
  • NPM
  • Svelte
  • 📈 D3
  • Express
  • 🍃 MongoDB
  • Github
  • Git
  • Terminal/CLI
  • JSON
  • 🪞 Plesk

Soft skills

  • 🤸🏽‍♀️ Adaptability
  • Attention to detail
  • Multidisciplinary collaboration
  • ⏳ Time management
  • Critical thinking
  • Evaluating and iterating
  • 💬 Giving, receiving and implementing feedback

Works

Discover my works 🎨 sorted by relevance.

0/9
Brassicaceae Tree of Life: Naturalis Biodiversity Center
Web Design and Development Blog: Weekly Nerd
Ravematch: Backend and Frontend
Think Volunteer: Design Research and CMS
Bol.com: Frontend Development
KozyKorner: API's and Websocket
Female Representation in Cinema: D3, SvelteKit, Vercel
Lofi Driver: First ever Javascript project
Je Kan Meer: First ever HTML and CSS project

Achievements

Though I stand at the very beginning of my career 💼, I've had the pleasure of achieving some great things already and having my works be recognized by some great names in various fields 🌱. Here's what I am proud to tell you:

2024

  • Nominated for a Golden Dot Award with my Naturalis webapp.

  • (Hopefully) landed an amazing internship!

2023

  • Finished an web design internship at a nonprofit in Bali, Indonesia.

  • Made a webapp for the biologists Biodiversity Center of the Naturalis museum.

  • Was selected to have my work be featured at the international 2023 Information Design Conference.

2022

  • Received a cum laude designation in my propaedeutic year.

Hello World!

BrassiTol

  • D3
  • Svelte
  • Vercel
  • Vite

The Brassicaceae Tree of Life

For my first minor I chose to do Information Design, which was all about understanding and processing data in a tech-project. For the end assessment, I was selected to channel all of my newfound D3 and Svelte skills into a project for the Naturalis Biodiversity Center. Kasper Hendriks had facilitated a research into the Brassicaceae-family, a plant family that ages back millions of years. He had a big data-file available on all of the hundredths of plants in this family, and wished to see his data visualized in an interactive phylogenetic tree.


I was paired up with two Visual Design students and as the sole 'techie' in our team of three, I had six weeks to build the application of Kasper's dreams. And somehow, I did! It was my first time working on a component-based application by myself, and it was a ginormeous responsibility to realize my teammates' vision while also incoorporating Kasper's ideas, but if this project has taught me anything, it's that with hard work, great things can be achieved!

Web Design & Development Blog

  • NodeJS
  • Express
  • EJS

A blog for the minor Web Design & Development

In the second semester of my third year, I got to enroll in the (for me) long-awaited minor Web Design and Development. I was particularly excited for this minor as I'd heard from other students that it was the minor where they learned the most about tech - and I can now happily confirm that.


One of the assignments for this minor was to build a blog for its duration. Every wednesday afternoon someone from the workforce would come in and give a lecture on something in the tech-world, whether it be emerging technologies or the principles of web accessibility. All of the lessons learned during these talks, which our teachers called the Weekly Nerd, were to be logged in a blog, and that's what this is. I used EJS and Markdown to create one dynamic blog page, where I then loaded in the correct data based on the URL parameters. It's still a work in progress, but feel free to check it out!

Ravematch

  • NodeJS
  • Express
  • EJS
  • MongoDB

My first backend web development project

In my second year at AUAS, I diverged onto the path to become a frontend web developer for the first time, and one of the courses during this path was the course Backend Development. Here I learned all about servers, localhost and databases, and it was up to me to apply all that newfound knowledge in a dynamic app.


Ravematch was actually a team effort, in which I built a music-matching system. I had a database of songs, their album covers and artists, as well as information I added myself: what the most distinctive feature of the song is (vocals, instrumentals, backing vocals, overall vibe), what 'vibe' it fits (calm, frustrated, happy) and what language it's in. Based on the user's input, I match them to a set of six songs sorted by best match. They can then listen to each song and find it on Spotify! Unfortunately, this app is not available online yet, but the source code is up on my Github.

Think Volunteer

  • Design Research
  • Wordpress
  • International Client Communications

A research-based website for a nonprofit in Indonesia

After my first year at college, I knew I liked frontend development, but I wasn't yet sure if it was definitely the direction I was going to pick. I got approached by a friend who told me about the opportunity to do our internship in Indonesia. We spoke to a recruitment agency who, by chance, had a website that needed some TLC, and from there on we took the jump.


My internship in Indonesia is worth mentioning because of what I've learned about the websites we make. Although by the time I went I did know that I was planning to become a frontend developer, not coding during this internship didn't hinder me in my growth as a programmer at all. My fellow intern and I lived in a guesthouse for three months and spent every day user testing, sketching, brainstorming, and finally building the website that best fit Think Volunteer's audience in Wordpress. I will take this experience with me as I think about the sites I build and who they're for -- a priceless addition to my passion for web development.

Bol.com

  • Frontend Development
  • CSS

Imitating an existing site to develop frontend skills

Did you see that image and think that I actually worked on the very real bol.com? If you did, that's a huge compliment. For my first frontend development course I was given the assignment to rebuild an existing site using no classes or ID's. If you're wondering, yes, this meant that my CSS was a big spaghetti bowl of :nth-of-type's. I do have to say that it was a fun assignment. At this point in my college career and frontend journey, I had only ever learned the very basics of HTML and CSS (getting to know the HTML-elements, using flexbox to position an icon next to a header), so unlearning the things that made it so easy before to actually understand the DOM structure and the way browsers read the information given to them, was quite a challenge.


However, my counterfeit bol.com will always be one of my greatest prides. Therefore, voilà!

KozyKorner

  • Frontend Development
  • API's
  • Websocket
  • Socket.io

Creating a chat application using Web API's

During the Web Design & Development minor, an important skill to have was of course knowing how to use API's. I decided that I wanted to learn how to make a chat application where two end users can send and receive messages in realtime, regardless of their locations and how far apart they are. This led me straight to Socket.io, which allowed me to set up endpoints and offer that exact feature to my users.


But one thing you must know about me is that I rarely leave it that. I am currently working on utilizing cookies and databases to save user preferences and add a login and saved chats feature to my app, KozyKorner. A work in progress worth coming back for later, if you ask me!

Female Rep. in Cinema

  • Frontend Development
  • Svelte
  • D3
  • Data Handling

Creating data visualization with a big numerical database

This project was the precessor to the Brassicaceae Tree of Life. This is where I first got acquainted with D3, a library for visualizing data. I was fairly surprised with how easy and intuitive this library was to use, more so in handling data and the extent to which it can be customized. But the star of this project is the styling and the computing that happens behind the scenes.


I am also extremely proud of my usage of SvelteKit and component-based programming. I've succesfully been able to seperate the computing from the static files, while seamlessly combining them in the frontend and allowing for communication between different components!

Lofi Driver

  • Frontend Development
  • CSS

My first ever Javascript project

Lofi Driver was an absolute joy to make. Not only because I got to unleash my creativity on a school project, but also because it was the first time that I'd ever make something work. I will never forget the excitement over something as simple as changing an image on the click of a button and translating another to the left when hitting the spacebar.


I have to admit: whenever I feel particularly stuck on one of the projects I'm working on, I return to Lofi Driver. To humble myself, sure, but also to remind myself that sometimes things being hard means things are hard, and not I am incompetent. In that sense, Lofi Driver is a beacon of encouragement.

Je Kan Meer

  • Frontend Development
  • CSS

My first ever HTML/CSS project

Envision it: a first-year college student, fresh out of high school, wide-eyed and slightly intimidated at the sight of the dark interface of VSCode. That was me. When I first started my life as a college student, the very idea of creating something like a website from scratch was insanely cool to me. Even more so since I got to make a website about anything I wanted.


Je Kan Meer translates to You Can Do More, and it's a website that's supposed to help people with disabilities find aids for any area of their life. Someone with motor issues might benefit from a button-hook, for example, something to help them button their shirts when their hands won't work as intended. My original idea was to implement categories to cover any and all areas in life, but with my deadline and limited skills at the time, I had to let that go. But who knows - I might revamp this website some day!