angelika7/portfoliov2

Modern portfolio create in React.js, CSS (SCSS) + GSAP, JS

Hi there. Nice to meet you 👋

My name is Angelika 🤓 For 2 years I have been working as a Frontend Developer. I did a project in Vue3 with Composition API. I used Vuex, Storybook, Jest and Testcafe. In addition, I was creating stores in Shopify/Shopify Plus. I am looking for a job which gives me possibilities to develop my knowledge and gain new experience.

• 🔭 I’m currently working on an application for selling books
• 🌱 I’m currently learning React.js
• 💬 Ask me about my projects
• 😄 Pronouns: she/her
• ⚡ Fun fact: I love travelling. I wanna be a digital nomad

Connect with me:

Languages and Tools:

Latest Projects:

• 📕 Portfolio (React.js)
• 🐱 MemoCats - memory game (React.js + Redux)
• ☕️ Cafes App - find your favourite cafe (JS, API Zomato)

Write to me! 😉

portfoliov2's Issues

Using images as text

I strongly advise AGAINST using images as headers.
It adds load time for the page. It is not nicely scalable.

If you want to use a fancy font you can load it to your page using google fonts.

Try to not exceed 2-3 font families as they will add on load time and also confuse the user. Too much of a font change is not good from the design perspective.

You can check out tools like https://fontpair.co/ to help you find a good match between body font and heading font.

Color palette may benefit from using complementary colors

Your portfolio has a lot of rectangular shapes used which are in 3 base colors and lighter variants of it. It makes it look a bit messy and unprofessional.

There is something that is called Color Theory. I would recommend using it to select a color palette for your projects. It would make them more appealing to recruiters and tech reviewers that would go through your projects.

There are tools like: That will help you find colors that go hand in hand.

Let's take the color that you used on your portfolio page and put it through the tool #295B4B
Suggested results are:

You can also use tools like:

1. https://www.happyhues.co/palettes/16 - predefined colors put in context of a webpage so it's easier to trace them back to your project.
2. https://coolors.co/545f66-829399-d0f4ea-e8fcc2-b1cc74 - Pres spacebar to switch the palette. It helps a lot to find colors that look good together ;)

Improve readme for that repository

Please expand the README.MD with information on:

• webpage on which one can see the live preview of the portfolio
• short description of the purpose of this repository
• mention technologies used in the repository (JavaScript, React, Sass)
• Maybe even short info about you?

Your webpage is overflowing the section constraints

Take a look at this picture with the cyan lines marked

As you may notice each of your sections is starting and also ending in a different place than the following one.
If you could make them consistent throughout the webpage it would make the whole look and feel of the page tidier and easier on the eyes.

It is a good idea to think about setting constraints for large and very large viewports.
Let's say that I have a monitor that has HD resolution 1920x798px.
Yor webpage navbar has 1478px on my display. It makes me travel quite a lot with my eyes from left to right to read through it and every other section of your page. If I would have an even larger display let's say 4K display it would be even more distributed all over the width as your navbar has a width set to 80%.

All of the above applies to the rest of the section on your page here and in other repositories ;)

Just a quick example that I've put together for you on how the web page COULD look like https://www.figma.com/file/wVi2jwZpq3FT0jYcTgMlBB/Landing-page-UI-Kit-Components-Community-Copy?node-id=3%3A938

There are many great inspirations on pages like dribble:
https://dribbble.com/shots/14828026-Pochi-portfolio-landing-page
https://dribbble.com/shots/14013010-Folio-Designer-Portfolio-Kit-Animation#

Skills items are not readable

As it can be seen on the attached image text in the skills section is not readable.

Changing it to smth like this may increase the readability of this section.

.toolItem__TextBox__1SFjD {
    height: 100%;
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

I want to put emphasis on the Typography of your webpages. Throughout the years of first - print media (newspapers, posters, etc) and the internet media (websites, applications, etc) we agreed on a set of rules that are pleasing for the majority of the people that are using the web.
There is an awesome chapter on Typography in the Refactoring UI book that I shared with you. I highly recommend reading it and applying the rules to your designs. As a future FrontEnd developer, you should have a very high-level understanding of trends used in UI design. That knowledge would be used in your day to day work with designers and other members of the team.

Another good source of Typography rules that you broke in your repository: https://www.webdesignerdepot.com/2020/07/the-designers-guide-to-letter-spacing/

Menu in mobile view is not being closed on menu item click

Reproduction steps

• Open Development Tools window
• View page in mobile device simulation view
• Click on first bar "320px" to view it as e.g. IPhone SE user
• Click on "burger" menu
• Click on "Projekty"
• Issue: Menu is not being closed. Two items have a white background.

Expected behavior

• On menu item click the menu overlay should be closed and the user should be scrolled down to a selected viewport.
• Only one menu item should be marked as "active" by white background.

Bug video: https://www.loom.com/share/64126761ccb641798d739e2ee0c953b2