DEV Community

loading...
Cover image for Finally Created My Portfolio Website

Finally Created My Portfolio Website

anniedotexe profile image annie.exe Updated on ・3 min read

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.

Encouraging Pikachu

Table of Contents

The Process

Here are my process and all the details of creating my website.

Domain

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.

Fonts

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.

Fira Mono

Noto Sans - all other text

Noto Sans

Color Scheme

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.

Standard

Normal Color Palette

On black

On Black Color Palette

Design

Here are some of the design choices I made for my website.

Logo

I tested how my initials would look in almost every font until I found this gem that looked absolutely amazing.

My Logo

Typewriter Animation

This is just a cute little typewriter animation of my name at the top of the page to welcome the visitor.

Typewriter Animation

Here is my CSS for creating this animation.

Alt Text

About Me

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.

About Me

Projects

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.

Project Card

Photos

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.)

Photos Masonry Grid

Code

GitHub logo anniedotexe / anniew.xyz

My Personal Website

Built With

  • HTML5
  • CSS3
  • JavaScript
  • Deployed on Netlify

In Conclusion

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.

Happy Pikachu

Check out some of my other projects below

The end,
annie.exe


Discussion (6)

Collapse
roshaen09 profile image
Roshan Kumar

Awesome design😍

Collapse
jemimaabu profile image
Jemima Abu

Oh I really like the console design, it looks great

Collapse
anniedotexe profile image
annie.exe Author

Thanks 😊

Collapse
baalkikhaal profile image
Sreekar Guddeti • Edited

Thank you for sharing such a MUJI ish design 😊.

Collapse
yaznas profile image
Sanjay Shrestha

Loved your site! It's really unique.

Collapse
anniedotexe profile image
annie.exe Author

Thanks 🙂

Forem Open with the Forem app