Since 2018, I had wanted to create a photography portfolio website, but I never got to it. 3 years later, I finally created my personal website anniew.xyz, a developer and photographer portfolio.
- The Process
Here are my process and all the details of creating my website.
I decided to first get a domain because the idea of putting money into it meant that I had to fully commit to this project or else I would have wasted money. I was not able to get the classic .com domain with my full name, so I had to get a little creative. Eventually, I chose anniew.xyz, which in my opinion is pretty genius with the way my last initial flowed into the .xyz domain.
Because of the command line about the section and the website's minimalist aesthetic, I decided to go for a duo font combination.
Fira Mono - title, headings, and the command line text.
Noto Sans - all other text
I searched far and wide for color palettes on the vast interwebs. For the base colors, I decided to use slightly different white and black hues. It then took some experimenting and lots of trial and error, but I finally found some colors that I liked and worked well together.
Here are some of the design choices I made for my website.
I tested how my initials would look in almost every font until I found this gem that looked absolutely amazing.
This is just a cute little typewriter animation of my name at the top of the page to welcome the visitor.
Here is my CSS for creating this animation.
I had seen a few terminal-styled portfolio websites before. However, I didn't exactly like how they looked, so I went for a more minimal and pleasant-looking design. I also added a blinking carat (from the typewriter animation) at the end of the terminal.
This is what each project card looks like. It displays all the information you need to know about a project and contains the relevant links.
I chose to use a masonry grid to showcase my photography since it beautifully displayed all the photos and was able to easily adapt to different screen sizes.
(The pictures look better on the website. The resolution was sacrificed in the process of recording this gif.)
- Deployed on Netlify
The website's overall look took a while to figure out, but in the end, I was very happy with a minimal design and a few text animations. It felt like it well represented my brand and personality.
I had a lot of fun with this project and am very proud of it. I will be continuing my journey of learning web dev with other projects.