/    Sign up×
Community /Pin to ProfileBookmark

Hey guys,

I’m a computer science student and i decided to build a portfolio website as way to learn and to have it as a little project.

The website is far from finish and for now I made only the the structure of the website: html, css. (the content is dummy text for the most part)

I want to hear your opinion, what should I change? what should I improve? and also what to delete?

I also have an issue that I faced only when I uploaded it to the server: the page loads very weird and all the css loads at “runtime” and you can see all the positioning of the elements, how can I fix it?

Another issue is that the images load very slow, how can I fix it?

I know that the website doesn’t scale for phones, I will add that later.

Url:
http://avivelka.com/

I would love to hear your thoughts,
Thanks πŸ™‚

to post a comment

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@ChadaiAug 09.2019 β€”Β Hi, so I visited your site and it looks simple, nice. I really like that. Some poeple make their sites very hard for people to understand, every time you make a site, make sure to take it from users perspective.

I see where you have the strength png or whatever it is, you lef there " > " and maybe I would change the color red to something that looks nice with blue and white. Maybe, after pressing for example BLOG button, HOME button is still darker which in my mind indicated that I havent gotten myself to BLOG, but still stayed on HOMEpage. So maybe this could be worth to change.

As I can see, you will write blog posts, I assume that you will use skyscraper strategy (for example like we did here - https://casino.guru/casino-guru-online-casino-guide - to rank on potential from google) which could be the best for you. (There are types of content strategies skyscraper which I have mentioned, then content gap and middle man just a side note if you didnt know :) )

Maybe even add sites you have already made, make bigger portfolio :)

Anyways, nice
Copy linkTweet thisAlerts:
@avivelkayam1247authorAug 12.2019 β€”Β @Chadai Thanks,

I decided to take a new approach (especially on the design).

  • * Instead of making new html page for every tab I decided to change tabs through javascript.

    I also made the tab indicator more intuitive to know which page are you at.


  • * Another thing is that I decided for now to remove the blog tab because I wanted to use the website

    even before I will make any blog post.


  • * I also made the website responsive for difference screen sizes.


  • I would love to hear your opinion about the new design.

    The url remains the same (http://avivelka.com/).

    Thanks :)
    Copy linkTweet thisAlerts:
    @codyhillAug 12.2019 β€”Β @avivelkayam1247#1607369 I like how you made the page transition and what you did with the textarea. Pretty interesting. Also, the about section is easy to read witch I like.

    Although I have some issues with the design.
  • 1. I am not a big fan of the font. It is too tall. I would pick something thicker. Kinda like the one on the tab buttons. I'll leave you some sites at the end of the pots to help you chose fonts and also combine them which brings me to the second point.

  • 2. I see that you have a nice contrast all over the site but not in fonts. Your contrast is only font size and font-weight. It would be nicer to add some different fonts that are more obviously different. Or just make the font-weight differents bigger.

  • 3. I know that the site is far from being finished and you probably do what I do witch means that you live the images and copywriting parts at the end after you have the HTML CSS JS frame. But I would suggest you spend a little more time creating your texts. This "I'm a computer science student, Here I will share my work and my knowledge about programming and computer science-related topics." is not appealing to me and doesn't sound great. But anyway I put this here just in case you had in mind to leave it like that.

  • 4. You have some problems with your buttons that are annoying for the user. The first 2 buttons if you hover on them and your mouse goes from under the buttons, the hover effect won't begging until the cursor doest hit the text. I am not sure why is that, maybe show me the HTML and CSS so I can figure it out.

  • 5. Also, the hove effect on the buttons takes way too long. On the project buttons specifically not on the tab buttons. It is not a good idea to have that on a buttons. The hover needs to be fast so the user know right away that the button is clickable.

  • 6. Not a big fan of the icon design. But again the site is far from finished as you said so I am just leaving this as a remainder.

  • 7. The form title is hard to read. Mainly because of the font which I talked about at point 1. Try to keep the titles simple. change that "Feel free to contact me anytime" to "CONTACT ME" and with a p under the main title add something like "Have something in mind? Let's make it real" or "Need a developer? Shoot me an e-mail" or "Wanna build an app? I am sure I can help!" or something interesting. (Also for the point 1. Good contrast can be achieved with upper case fonts and lowercase font. EX: (

    **CONTACT ME!**

    Need a developer? shoot me an e-mail!

    ) or

    (

    Need a developer? shoot me an e-mail!

    **CONTACT ME!**

    )

  • 8. I don't know why you have a download portfolio button. Maybe you can explain what the button will do. But if you want to make it so people can download all your apps. Maybe make it say something like Download Apps and redirect the user to a page where they can download 1 app only or all of them at once. where the apps are nicely arranged and put that button in the navbar and make it with a different background color and round the corners a bit and... and you know what I mean ;). Make it sexy.

  • 9. If you want to use this portfolio as for getting a job. I am suggesting to add buttons that send people to the code source as employes will look for that.


  • This is all! I hope it helped you!

    Overall the design is really good, you just need to make the quality of life better.

    I am by no means expert. I am also working on my portfolio. I need to add some things to mind and fix 2 bugs and I'll finish mine too. If you want to take a look here it is: https://relaxed-swirles-9b73a7.netlify.com/#

    Our color thems is kinda alike :)
    Copy linkTweet thisAlerts:
    @codyhillAug 12.2019 β€”Β @RaulRogojan#1607485 Here are the websites that will help you:

    https://fontpair.co/

    https://www.canva.com/font-combinations/

    https://fonts.google.com/
    Copy linkTweet thisAlerts:
    @avivelkayam1247authorAug 12.2019 β€”Β @RaulRogojan#1607485 Thank you so much for your comprehensive response!
  • 1. The website uses Rubik font in all places, the taller look is actually my mistake (I thought it would look better if I will stretch the font but I think you are right and it doesn't look good). I will change it.

  • 2. I didn't think about using different fonts in different places, that could be a great idea. I will try that.

  • 3. You are totally right. English is not my native language thus it pretty difficult for me to write appealing texts. I will try to think about something better :).

  • 4. I noticed that also, I actually tried to fix it with no success yet. It happens because I made a fixed width for the buttons (when the user hover the buttons, bold effect appear on the text and If the width won't be fixed the navigation bar will move when the user hover the button). because of the fixed width, the underline effect has to be on a span inside the li and that why it appears only on the user hover the text. right now I still don't have a fix for that.

  • 5. Thanks, I changed it from 300ms to 180ms. I think its better now.

  • 6. Do you mean the EasyWorkout Icon design? It just an old project of mine I don't think I should spend time on changing it. :) . Mabye I will remove this project from my portfolio when I will have more projects.

  • 7. Thanks, I will definitely change it.

  • 8. Maybe its wrong translation but I meant "Download Resume" / "Download CV"? I don't know which one is the right I think I will change it to "Download Resume", the links to my projects appear in "projects" tab.

  • 9. I don't think I want to expose any of the code that I write, but I will do it for some of the projects, thanks for the advice :)


  • Thank you so much for your help, I really appreciate it.

    I will definitely update you again when I will make the changes.

    Btw, Awesome work, I really liked it :)
    Copy linkTweet thisAlerts:
    @codyhillAug 13.2019 β€”Β @avivelkayam1247#1607499 Thanks!
  • 1. Stretching fonts is almost never good, especially in web design. The same with shushing it.

  • 2. Keep a maximum of 3 fonts. Usually is better to use 2 major fonts. Gain contrast more from font weights and font sizes. If you combine them you'll have a good contrast. Just don't overkill one or another.

  • 3. English is not my native language either. What I do is I learned about copywriting just a little bit, the basics. And I am also looking at examples of other texts and combine 2 or I change one to fit me. I also use Grammarly for grammar.

  • 4. Don't make buttons with span and li. Use a tags and button tags. This should help you.

    https://codepen.io/raul-rogojan/pen/eYOpGqN?editors=1100

  • 5. It's better to experiment with different types and designs of the button and transitions because for every of a button there is a different transition time that feels better. Also, the transition times vary on the kind of transition you have. For your design and transition effect, I will suggest you do not have any transition at all or something like 50/80 ms.

  • 6. I did not know that the icon was the app icon. My bad :) sorry! I thought it's just a random icon from a site like font-awesome or something like that haha.

  • 8. Download Resume is much better :). Although I will suggest you add another page on the site with your resume. But you can do whatever. Both versions are good. Just put yourself in the employe and client place.
  • Γ—

    Success!

    Help @avivelkayam1247 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 β€” BETA 3.29,
    whats_new: community page,
    up_next: more Davinciβ€’003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinciβ€’003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,

    tipper: Anonymous,
    tipped: article
    amount: 10 SATS,
    )...