Portfolio training for deployment. Pointers?

Hi, I decided to take the leap and build my portfolio. Even though I don’t think I’m really ready, I’ve decided to take the leap anyways. I came up with a design for my portfolio and started coding it about two weeks ago. As soon as I’m done with it, I will start applying for jobs. I have no other option. So ready or not, I’m going in.

I’ve completed most of the copy for the “about” page, aside from that everything else just has lipsum text. All the navs and links should be working. I tested it on my iphone 5s and on chrome for windows. I believe some browsers might not render the site the way I designed it. If anyone out there notices anything that seems weird, or if something doesn’t seem to work PLEASE let me know. Aside from that I would just like to know what you all think about the design. Thanks for checking it out :slightly_smiling_face:

1 Like

Made some small updates:

  • decreased the opacity of the red bar on the side to 0.8
  • decreased the opacity of the “page-header” (the grey bar) to 0.3
  • changed the font on the logo one that more closely resembles the
    style of the symbols

Added a link to my resume

updated my contact page content. Any thoughts, anyone?

I really like this. You might consider adding thumbnails so that prospective can easily see what you can do. Many recruiters both in and out of house are not technically and want a visual set to see what you have. But that animations is really nice, the theme is novel and it’s very clean.

2 Likes

Thank you. That is an excellent point. I am working on a component that will reveal some sort of thumbnail on hover. I have enough of the details fleshed out so I will start coding it shortly.

Man, this looks great! I’m getting ideas/inspiration for my portfolio and I definitely got a ways to go, lol. The only thing I could add is when I’m on your About page, I see you have small pictures for all the languages you know. It’d be cool when I hover over them if they became solid/had no opacity on them. Just a little hover effect that could look nice. Are you planning on changing them from wikipedia to your projects in those languages?

1 Like

@pleeseno Thank you. I’m guessing that on this journey you will always feel like you have ways to go :slightly_smiling_face:, I still feel like I have ways to go. I got inspiration from about 4 different portfolios for this one, so if you somehow get inspired by something here, then we’re passing the inspiration along. I think thats great. The icons on the about page represent the tools I know how to use, including everything from the programming languages I use to the text editor. The links are for someone going over the site who isn’t familiar with the tools are, like a recruiter.

Now that you bring that up I realize that it might not be the best way to help users understand what’s going on. In fact just writing this post it occurred to me that some sort of popup on hover would probably be easier to understand. Something that gives a short summary of what the tools are and that links to another page for more info. I’m getting excited! I will have to code that up! Thanks bro, see how you just inspired me!!

1 Like

Hi man, clicked in because I remembered your Mission: Impossible page and being blown away by the CSS. I’m glad you’re at a stage where you’re looking forward to jobs. However, my major criticism is that your portfolio page hides your light under a bushel. Like @Tirjasdyn said, you need thumbnails of your project because they look great. I would go even further and say that for your CSS-only projects, you should do some video screen capture and convert them to GIFs (cutting out useless frames to reduce size - there are free utilities for this) so that people can see exactly how much you can acheive with CSS alone.

An obvious additional point is that the lorem ipsum has to go. Maybe the font is too thin for such a bright background. Maybe speed up the transitions. Easing in/out will cover any concerns about it being too sudden. I’m on a large screen (4k) and it’s a crawl.

Good luck!

@vipatron this is the post that you mentioned. I remember that you are one of the ones that helped me with that project. I had to check back caz I couldn’t remember exactly what you said :sweat_smile:. I could be an old man like that sometimes lol.

this i an excellent point. I’m ashamed to say I have no idea how to make a GIF, but that’s not a problem, I will learn. I mentioned to @Tirjasdyn that I’m planning on building a component that will bring up the thumbnails on hover. Or, I could go the other way and have the thumbnails display by default and then display the project description on hover. What do you think?

I agree, the animation is kind of slow. I finally started learning javascript by the way. I used javascript for the animation on this page. Speeding up the animation is a simple matter of changing the value of a constant in the code. I also noticed that the animation starts to drag towards the end. Did you by any chance notice this?

Thanks a lot for your help again.

transform animations may actually be better handled by CSS. Do you use a Mac or a PC? Both have free ways to record the screen. I know that for Windows 10 it is built in (Game Mode), and for Mac you can use the bundled Quicktime Player.

1 Like

I think you might be right. I saw it as a chance to practice some of the JavaScript I’d learnt so far. it would be as simple as adding a few css classes though.

I’ve been using Debian Linux for years now. I used the command line for virtually everything aside from browsing. My laptop crashed a few weeks ago so I had borrow my wifes PC running windows 10. I’ll try to find the feature.

Sorry, I don’t know how to record the screen on Linux systems, but you can definitely just use your wife’s to do this one thing. As for converting the video to GIF, I know that there are many online converters. I’ve used Giphy before: https://giphy.com/create/gifmaker

1 Like

Dude you are the best! Thank you. I got so many things I need start working on. I need to get to work. I’ll send a message when I emerge from my bunker lol.

1 Like

Just remember to air out the bunker if the geiger counter reads normal!

1 Like