Portfolio redesign

Greetings!
After finishing my 5th certification here on freeCodeCamp, I’ve redesigned my portfolio to better represent my skills, as I had become unsatisfied with my first one (which was the project I’d done to obtain the 1st certification). I would REALLY like to have some feedback on it this time. Can you guys help me?
The portfolio is at https://raul-f.glitch.me/
Thanks already!

2 Likes

Looks great, and I applaud your “form equals function” philosophy, but three major comments about the “About” section.

  1. The order of the about section: Your personal stuff should come last.
  2. You should have declarative statements (I viewed the English version, so this may be a native-speaker thing); “I should say that” is soft, and “some basic” is weaker than “basic”. In that last sentence, you have both the words “also” and “too.” You should only have one (or none).
  3. In the first paragraph, I wouldn’t compare UX with baseline functionality. It’s a false choice, and even the “just as important” implies that one has to choose between the to. If “form == function,” then isn’t it true that the characteristics you mention are a part of it working properly?

e.g.:

As a developer, that’s my core philosophy: having your site be well-designed, usable, intuitive to navigate - and feel good - is an integral part of it working properly.

I’m a 21-year-old web designer and front-end web developer based in São Paulo, Brasil. I have confidence in my CSS, SASS, HTML, JavaScript and React.js skills. I have basic knowledge of UX/UI. Also, I am well-versed in Node.js, a prolific user of git and Github, and I can work with D3.js.

Besides design and coding, I love cats, birds, kids, story-driven video games and fashion. Also, I’m a big fan of high-contrast, well-balanced two-color design - black and white design in particular.

As for the Projects page, there is a big design flaw. Clicking on one of the subsections “loads” the various projects, but doesn’t scroll to them. I clicked multiple times before I figured out that the small downward-pointing arrow in the corner was what you wanted me to do.

2 Likes

That’s some solid advice, thanks! I’ll take most of it right away!
In the projects section, the idea was to display a short description of the project set before displaying the actual set - do you think that doing something like enlarging the button on set selection or changing its colors would help, or would it be better overall to scroll down immediately?

In my opinion, I think that it would be better overall to just scroll down to it immediately. I was also tricked as I didn’t know that I had to scroll down. I also didn’t know that if I clicked it would load up the projects. So far, I’m actually liking how your projects look. A big thumbs up from me :smiley:

1 Like

I was really dumb - you can preview sets by hovering over the option. Makes sense that clicking would scroll down, so I did it. Thanks!

By the way, i have rewritten my about text:

Form equals function.
As a developer, that’s my core philosophy: having your site be well-designed, usable, intuitive to navigate, work properly - and feel good - are all equally important parts of the user’s experience.

I’m a 21-year-old front-end web developer based in São Paulo, Brasil, who feels most comfortable working with CSS, SASS, HTML, JavaScript and React.js. I also have some knowledge of UX/UI, am well-versed in Node.js, a prolific user of Git and Github, and I can work with D3.js.

Besides design and coding, I love cats, birds, kids, story-driven video games and fashion. Also, I’m a big fan of high-contrast, well-balanced two-colour design - black and white design in particular.

What do you think?

1 Like

Much better. I was going to say (after running some errands) that my initial rewrite felt clunky, but you have definitely smoothed it down. Just a small point of grammar: In your first paragraph in “About”, you use hypens to effectively parenthesize “and feel good.” Those hyphens should be em dashes, which you can create on windows with alt code Alt+0151, or on Mac with Option-hyphen, and use without surrounding spaces, like so:

As a developer, that’s my core philosophy: having your site be well-designed, usable, intuitive to navigate, work properly—and feel good—are all equally important parts of the user’s experience.

I think your initial idea wasn’t bad, and given that hover effects don’t work on mobile, what I would suggest you do is this (since it is all easily doable in React):

  1. Have the hover behave as currently. (good design for desktop)
  2. Have a click bring up the same text that hover does, but also make it do two things:
    1. Bring up that arrow directly below the “description text” on the left
    2. Begin a timeout that will cause the app to scroll to the relevant section after some time (1 or 1.5 s should be enough time to read the description).

I tried to view it but when I selected English (the flag on the right), I got this page:

Sorry,

there is no tablet version (yet).

Check this website on mobile or desktop!

--------------------------------------

I’m not on a tablet! I’m on a laptop. I guess that equates tablet …:stuck_out_tongue: lol.

I was quite impressed with it. The only thing I didn’t like was the full screen mode, it felt like it took some control away from me and it wasn’t obvious. I like your introduction as well, but I personally didn’t like that navigation after that is hidden by a menu. I’m very new, so those are just my opinions as an inexperienced learner. They seem to be just stylistic preferences, so I have to say great job! I bookmarked it :slight_smile:

1 Like

I’m sorry about that! Due to time constraints, I wrote stylesheets only for devices wider than 1250px or thinner than 500px, and it took me 17 days of work to do that. With time, I plan to accommodate all device sizes appropriately. While that hasn’t been done, and if you still have any interest in it, you can check the mobile version!
Thank you for your time!

1 Like