README - Portfolio

Intro

This is a single page portfolio with a minimalistic, streamlined design. I don't have any specific requirements for this project other than wanting a simple, easy-to-maintain design so that I could practice creating the different elements I've learned in previous workshops (e.g., making a navigation bar from scratch rather than using a pre-constructed design). This single-page portfolio contains the following sections: Home, About, Projects, and Contact.

Tech Stack

• HTML/CSS
• Flexbox
• Bootstrap
• Netlify

Features

When the user first loads the page, they will see the main header section that features a greeting ("Hello, I'm Naomi") and has a gradient background starting with purple at the top and fading into white at the bottom. There is also a black navigation bar with the following links: Home, About, Projects, Contact. Each of these links will redirect the page's view to the section selected (e.g., clicking "About" will show the About section). Under the greeting, there is a subtitle that states "Web Developer" and a fine-line artwork of a woman.

Beneath the header section, the About section will give a very brief overview of my pronouns (She/Her), my location (Australia), and where my interest in coding lies. Next is the Tech Stack section, which shows images of the different technologies I'm learning through self-paced, online training (e.g., HTML, CSS, JS, Python).

The Projects section follows this, displaying several projects that I've recently completed. As my skills grow so will my portfolio, and this section will expand as I create more projects.

Finally, I have a simple contact section at the end that features links to different contact methods, including email, GitHub, and LinkedIn.

Process

Since I knew I wanted a very minimalist design, I started by outlining what sections were needed and researching simple color schemes. I then started by adding in the very basic information required, including the header greeting, a brief bio, and contact info, and leaving space for adding previews of my previous projects.

I decided to leave the navigation bar until later because I wanted to challenge myself to create a simple nav-bar without using a pre-designed one. I also wanted to leave the Projects section so that I could take some time to play around with grids and flexbox and decide how I wanted to set out my project images. As I'm still new to this, I wanted to keep it simple and clean and make it easy for users to find more information on the projects directly through the links.

The footer and responsive design are elements I wanted to keep for last. Since I have the main elements on the page already, I wanted to keep the footer light, tying together and emphasizing the overall design rather than bigger a larger focal point. The responsive design was also kept for last so I could make any final tweaks to the design.

Learnings

I took the opportunity to practice several elements that still feel very new to me. For example:

• I decided to create a simple nav bar from scratch rather than use one from Bootstrap.
• I created a gradient background for only the header section with the rest of the body a different color.
• I played around with grids vs. flexbox.

Improvements

This project is still a WIP, but some of the things I'm still working on include:

• Responsive design for different devices and screen sizes.
• Confirming that accessible design practices are consistently applied throughout.
• Perhaps some minor changes to the footer. (I'm still brainstorming this.)

Image

Images below are snippets from an iPad Pro view. Screen dimensions are 1024px x 1366px.

Header


About


Projects

My portfolio

Acknowledgments

Stock image in header section from rawpixel.com