Portfolio page is finally done,

Code Feedback
1

I’ve done my Portfolio page. Project is here: https://ozmos.github.io/Portfolio/
Code is here: https://github.com/ozmos/Portfolio/tree/master

Let me know what you think and where it might improve and I’ll add it to my list of improvements to all my projects which will keep me busy over the next couple of weeks or so.

I feel obliged to provide a link to the pen which gave me the blueprint for the flickering neon effects. As you can see my text shadows are basically identical and the keyframes, although different follow the same basic principles,

https://codepen.io/mandymichael/pen/aJLYVz

12 Likes
2

I can say this : so cool!
Love the urban design and of course the responsiveness.
You could probably carry thru the same urban design to your projects list. (maybe by highlighting them with ‘neon’ frames or something).

Really great.

1 Like
3

Thanks, good suggestion. I have introduced neon style hover effects but a frame might look good too.

4

Landing page looks great! A notch above the rest.

2 Likes
5

You might want to speed up the top menu lighting up, because at first I thought the design was flawed due to not enough contrast between the menu text and the dark background. After 12 seconds, the nav menu lit up and I could finally read the menu text, but that seems a bit long in my opinion.

1 Like
6

i also agree with @RandellDawson , you should aim for no more than 6 seconds wait before the first effect. (2 if you believe research that people lose interest that fast)

1 Like
7

also just noticed that your skills link in the footer is not working …

I keep coming back to the projects and contact section and being a bit disappointed they don’t carry that urban theme in them. For eg. you seem to dim the buttons and social circles when they’re being hovered on, which seems opposite to what you were doing in the landing page. (sorry to keep harping on, but I’m inspired by the landing page)

1 Like
8

@RandellDawson and @hbar1st you are right about the delay. Its sometimes hard to see things from the user’s perspective (especially when stuck in @keyframes purgatory) which is why your input is so important.

@hbar1st I will extend the neon theme to those elements you mentioned and fix the footer links.

Thanks!!

1 Like
9

What can I say? It’s awesome!

1 Like
10

Really, really good! I’m jealous - got some work to do!

1 Like
11

Nice work, I love it!

1 Like
12

Thanks for all the positive feedback. I wanted this page to pop and it looks like it does!

13

Now I would suggest moving all your projects off of Codepn and onto the github site you have created. Also, I would suggest making the project thumbnails with higher quality images. Some are rather grainy right now.

14

Thanks, working through my to do list with all my pages today. Will add these items to that list. Do you think having projects hosted on codepen looks unprofessional?

15

In my opinion, Sites on codepen don’t look that professional. Learning to host websites yourself and put your code on GitHub will not only look better for future clients of yours but will also give you necessary experience.

1 Like
16

Nice site I like the lighting effect

1 Like
17

Hello Osamu,

Cool work comrade, very good.

As other great people said, it’s perfect. I’m not very good at design and creativity but I would give some small suggestions.

As you are expert enough comrade, I suggest you get some hand of JS(don’t know if it’s possible with CSS), and give a transparent background colour to top navigation when user starts scrolling to bottom(so it means no transparent when top scroll), also make the top navigation a little smaller(less height).
If you assume the current form when in top scroll, assume following(my suggestion) when it’s not at top), check:

image
image729×139 20.2 KB

About the project section. For desktop it’s super! but let me note one thing about mobile view.

You know there is no any :hover thing in mobile. Some mobile browser may simulate the hover when an element comes without any action.

In mobile, user by default see one thumbnail, and he/she might not thinking to click on it for more inline info(just like the hover action for desktop)
So I suggest you place each image(thumbnail of your work) as a captioned box/frame, I think it’s more cool, I did one for you for sampling, please assuming following:
image

Also I also suggest you apply the same thing for desktop too.

Your project section is awesome, but you know what makes it super awesome? let me tell you one fact.
In very very rare situation, this is possible that an external script gets blocked, or failed to load(let say your jquery plugin) so what happens? there will be no any data about the projects when user click or hover on each one!

Way to be super awesome: One good practice is code the html part in a manner that if all of the scripts get blocked, the page still speak its data. So I refer to my suggestion mentioned above. by default you may let each box come with caption, and when jquery is loaded, you do the extra hover action too.

Another small bug is about the links in top navigation, I’m talking about the “about” and “project” links. If you note, when you click on them(let say “about”) page is scrolled correctly, but “about”(title) is under top navigation border. please check:

image
image781×181 5.16 KB

You see about is under navigation border, I think it’s not pro.(same thing about the projects)

I suggest you apply a small fix and just scroll it a little less so about/project is placed after navigation border.

I say you will be one mean UI/UX developer, which you already are.

perfect, keep going on great work Osamu, happy programming.

2 Likes
18

Thanks for the suggestions,

I’ll try to implement your suggestion about the transparent background for the nav on scroll. I’m sure google will help me with this. Do you think the hover effects may have trouble loading sometimes even though they’re not dependent on javascript? Or are they …? I thought that I removed the jQuery plugin as its not needed anymore. Seems I forgot to. Had some git troubles yesterday.

Can’t promise that I’ll implement all the suggestions immediately although I will certainly try. My top priority for this page at the moment is to get the contact form fully functioning. I’m hoping I can do this even while hosted by git pages.

19

Design is great … But I don’t like the color , can you try with other cool color platte

20

That is something I may experiment with later but I think it’s very hard to please all user’s tastes of color. Unfortunately dark backgrounds with bright foreground don’t appeal to a lot of people but is necessary for this particular animation.