How I Built this
Website
Context: You wanted a portfolio that brings together both sides of what you study, IT and graphic design, and feels personal rather than templated.
Problem: Many portfolios use the same layouts and look alike. The challenge was to make something clean and easy to navigate while still showing your personality and story. You also had to balance decorative illustration and animation with a site that stays readable and loads well.
Process:
- Research and inspiration: Explain what drew you to Elaine Yu's site, especially the info on the left with the nav on top, and how you adapted that structure.
- Mood board: Show the colors, textures, and folk-art references you gathered in Figma.
- Personal meaning: Explain what the motifs mean. The tulips come from the ones in your front yard growing up. The hot air balloon comes from your love of balloons and your collection of antique balloon photos. The birds are a connection to Palestine. This is what makes the project yours, so give it room.
- Design iterations: Show how the hero changed from a busier version to the simpler framed-window scene inside a star-quilt border, and why simplifying worked better.
- Visual details: The paper-like background, your type choices, and how you kept everything cohesive.
- Illustration: Drawing the tulips, birds, and balloon in Illustrator and exporting them as SVGs, which stay sharp at any size.
- Animation and storytelling: How the scene went from simple moving clouds to a small animated story, and what that story is.
- Building it: The tools you used to turn the Figma design into a working site, and any challenges you solved along the way.
Solution: A finished portfolio where the layout stays simple and easy to use, and the personality lives in the illustrated window. Reflect on what you learned about moving from design to development and what you'd add in the future.