angelika7 / portfoliov2 Goto Github PK
View Code? Open in Web Editor NEWModern portfolio create in React.js, CSS (SCSS) + GSAP, JS
Modern portfolio create in React.js, CSS (SCSS) + GSAP, JS
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#
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/
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.
Reproduction steps
Expected behavior
Bug video: https://www.loom.com/share/64126761ccb641798d739e2ee0c953b2
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:
Please expand the README.MD with information on:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.