You can create your personal web portfolio using Angular and deploy it online for free using Firebase. In this post, I will explain the introduction how I accomplished this using free and open-source tools. This will be the first of a three part series of posts and i hope you get a good read.
To begin, some individuals may advise new aspiring developers to create a personal website/portfolio to showcase their skills and gain recognition from recruiters effortlessly. However, it's important to note that this isn't always necessary. Many recruiters are willing to give self-taught individuals and recent college graduates a chance at employment. Nevertheless, you, being the talented programmer that you are, chose to build your own web portfolio because you were influenced by some "great" programmer on YouTube who suggested doing so.
I assume that by this point, you are already familiar with the holy trinity of web development: HTML, CSS, and JavaScript. I also assume that you have a grasp of the basics of Angular. However, please note even if it's a framework it doesn't guarantee that it will make your life entirely easy. You need to understand its fundamentals to fully harness its potential. As for Firebase, it's relatively straightforward, and there's no need to complicate things unnecessarily. I would say that most of the complexity lies in developing the Angular application itself.
To achieve this feat, you will handle all aspects of designing, development, and deployment. Essentially, you'll be both the full-stack developer and the designer simultaneously, so avoid going all Picasso when designing your portfolio. Keep it practical and simple since you'll also be responsible for its implementation.
Designing
You can use Figma to create wireframes and designs for your portfolio. Aim for consistency as much as possible so that you can turn the parts into components and reuse them during the implementation stage.
Design of my web portfolio on figma.
Use a consistent color pallete
Selecting a color palette for your portfolio is a critical design decision. It establishes consistency and visual harmony for your audience. Utilize free platforms like Color Hunt or Coolors to help you choose your preferred color palette. These tools provide valuable assistance in ensuring a cohesive and aesthetically pleasing color scheme for your web portfolio.
Maintain consistent font combination
Just as selecting a color palette demands consistency, maintaining uniformity in font combinations contributes to the overall order and visual harmony of your portfolio.
There are many online resources that provide insights into effective font combinations, serving as valuable references. For practical implementation, leverage Google Fonts to seamlessly import and integrate preferred fonts into your Angular project. This not only enhances the visual appeal but also ensures a cohesive typographic experience throughout your portfolio.
Just go to the "Selected Family" section of a specific font on google fonts to access the code snippet for importing the font to you angular project as well as the css snippet for using it.
Summary
When designing your personal web portfolio, prioritize simplicity and consistency, considering that you will be the implementer. Stick on adhering to fundamental design principles, such as selecting a cohesive color palette and font combination. There are many free online tools that cater to these needs, allowing you to make your choices based on personal preferences.
Top comments (0)