The Story
One day, my colleague Roa’a Hafez asked me to create a personal website for her.
At first, I started searching for creative ideas—many of them looked common, weak, or repetitive.
Since I believe that a portfolio shouldn’t just display someone’s work, but should reflect their character, I decided to start from the most important point: understanding Roa’a herself.
So I talked with her to learn more about her personality, and discovered three things she truly loves:
the sky, the color brown, and the Victorian era.
That moment, an unusual idea was born—
💡 Why not design a modern portfolio inspired by the Victorian era?
There weren’t ready references or UI examples built in this style for modern websites. And that’s exactly what made the challenge exciting. I felt like I was stepping into a whole new creative space—an empty canvas that gave me complete freedom to experiment.
I started collecting visual material:
Victorian furniture, poems, clothes, decorative pieces, letters, paintings, and more.
From that visual research, I extracted symbolic patterns and design principles
Insights
From studying Victorian visuals and layout systems, I found that:
- The Victorian style loves exaggeration and complexity, even in clothing and décor
- It consistently uses mirroring: right matches left, and sometimes top matches bottom.
- The style is full of floral decorations and ornamental frames.
- Stars were symbolic:
⭐ A single star represents uniqueness & creativity.
✨ A paired star represents communication, closeness & spirituality.
I wanted to bring these principles into a modern UI—without making the website feel crowded or old-fashioned.
So the goal became: merge Victorian richness with modern calmness
Technologies
- Next.js
For performance, routing, and smooth page transitions suitable for portfolio experiences.
- React.js
To build reusable components and interactive UI sections with flexibility
- Tailwind CSS
To modernize the Victorian visual style while keeping spacing, typography, and layout neat.
- Adobe Illustrator
Crafted ornamental frames, patterns, and symbolic stars adapted for modern web use.
- CSS3
To apply decorations to the web in an attractive and precise way.
Solutions
- I combined modern minimal UI with Victorian design logic.
- I used a single star in the hero and the about section as a symbol of uniqueness.
- I used paired stars in the projects section, symbolizing connection between creator and viewer.
- I chose a vintage-style typography that resembles Victorian lettering but stays readable in web standards.
- I framed photos using ornamental patterns, just like Victorian portrait borders.
- In the “About” section, I mirrored the top and bottom decorative elements to reflect Victorian symmetry.
- Background textures resemble old paper to make the portfolio feel like a personal vintage document, not just a modern webpage.