Gathering inspiration

When I began designing my portfolio, I wanted to create something that shows who I am, and I wanted it to give off a professional vibe. To start the process, I explored different websites to find elements that I liked. Among the many sites I visited, two stood out as particularly inspiring: PRISM and Franco Bollimonti Lessini.

From PRISM, I liked the use of big, playful links that lead to different pages. These bold links brought fun and excitement to the site, making navigation feel like a modern web-experience rather than a basic professional design. I also liked how this approach was different from traditional web designs, so I wanted to make something like this way of navigation in my website.

For Franco Bollimonti I liked all the animations, but particularly the text animation. I did some research about these animations, and it is part of the GSAP club program, so I am not going to be able to use this in my final portfolio. But here they also made use of the zoom scroll which I really like.

At the end, my goal was to merge the aspects I loved from these two websites—PRISM’s interactivity and Franco Bollimonti’s aesthetic with my own vision. By doing so, I made a portfolio that not only displays my skills but also shows my personality in an authentic and engaging way.

Choosing my Colors

Next, I chose colours for my website. Picking the right colours is important because they can make people feel different things when they look at my work. Here you see the colors I picked and why i picked them.

Designing the layout

I started designing my portfolio in a program called Figma. At first, I just made a rough design of where everything would go. you can find this I showed it to my teacher for feedback. They told me it was a good start, but I should focus on the structure for now because I didn’t have all my content ready. That made sense, so I kept it simple.

When I shared my design with another teacher, Dirk, he gave me a helpful tip. He said, “You should start with a wireframe.” (feedpulse 2)
A wireframe is like a simple sketch of your website that shows how people will move through it. This helps you focus on the layout before adding colours and details.

Making a wireframe

To follow Dirk’s advice, I made a wireframe on paper first. Drawing it on paper was fun and let me try different ideas quickly. I could move things around, erase parts I didn’t like, and find the best way to organise my website. It was like solving a puzzle! Once I was happy with my paper version, I updated my design in Figma to match. It felt much better now that I had thought about how people would use my site.

Playing with Colors

After the structure was done, I started experimenting with my colour palette. I wasn’t sure which colour should go where, so I made a few versions with different combinations. Then I asked my classmates and friends for their opinions through a Survey. I made the colour combinations I thought look good and put all of them in a survey. You can see these color combinations in the Figma, Their feedback really helped me pick the final design

After I finished the design, I started doing research for coding, like which java script libraries were used in the websites I used for inspirations. I Fastly found out that both sites, PRISM and Franco Bollimonti Lessini, use GSAP. I searched for the GSAP documentation for what it is and how to use this in my portfolio. I found out that GSAP is a animation library and you can do a lot with it. You can animate anything with GSAP from really easy animation to more complicated animations.

Coding the website

When i was finisched with my small research about the GSAP, I started coding my Design. I started with making the landing page and animating the Big Text.

For the code i will show you a part of the GSAP code here, and further you can see the full code in the GITLAB repository that i made. You see a code snipet of my GSAP code here. Her i animated the P from the landing page to scale and become the bacground., at first this was quite the challenge but after some messing around with the code i got it to work.