My very own portfolio

Hey all. I’ve been working feverishly for the past month or so on getting this and all of my other projects hosted on my server. Let me know what you think. I’m really happy with most of my personal page, but not so much the About section - if you have any input on making that more attractive, please hit me with it. Many of my projects are also listed here, although they aren’t very well styled.

Without further ado… https://www.gregoftheweb.com

10 Likes

I’m on my mobile at the moment, so I’ll check out when I get back home, but the first thing I noticed was that all of your projects seems very clustered to distinguish what I am looking at at via mobile. Perhaps may be add some extra padding between them?

Other than that, great job! I love the filter function. It helps a lot to showcase all the stuff you done for FCC

2 Likes

Really like it works great love the filter and the way it works … text size is great nice to see a good size text used as makes it easier to read … a lot of portfolios use a text thats too small. Only thing i dont like is when on small screens the projects seem to blend into each other and its hard to tell where one starts and other begins as there is no visible separation. but other than that looks great works great

1 Like

I noticed that your website needs to load 3.0 MB…that’s too much!! I always try to have my webpages lower than 1.0 MB

I would say to compress your images (since you are using those png files for your portfolio page) as well minify your code.

1 Like

Hoooooooooooollllyyyyyy crap! I knew there was something I was forgetting! It’s just under 900k now. Thanks for pointing that out!

Super great input. I’ve added some margin and a colored border in mobile sizes. Let me know what you think!

Thanks, everyone!

1 Like

Awesome! That def. improved the loading time, as well as the layout of the portfolio. Good job!

Quick question: how were you able to implement the filter function? I’d like to apply that in my own portfolio page

1 Like

I’m on mobile atm so I can’t give too many details. Basically, I use jQuery to select every item, which gives me a collection. At this point I hide the selected elements. Then, using filter(), I just eliminate everything that doesn’t have a class that matches the selected text which gives me the collection I want to call show() on. There are other little details because of the masonry layout plugin I’m using, but that’s the gist. The source code is all up on my GitHub if you want to see it for yourself.

1 Like

Thanks for the response! I will def will implement similar filter function.

This is out of of topic, but I am still new to how purchase/host on a specific domain name…

I am assuming you were able to host your pages from git pages and directed the url to your domain name?

I loved your portfolio, you have put in a lot of effort into making this and it shows. One thing you can add though is smooth scrolling on your page, Rest all looks good pretty good to me. :thumbsup:

1 Like

Hello! I like you site, you did great job.
What about to place your photo higher on the page in order to fill a gap between a jumbotron and the picture? Now it looks like the grid is broken.

1 Like

Nope! I’m actually paying DigitalOcean for a server. This way I can host all of my apps, including my APIs, on one server and properly control access to those services I expose. Pointing your domain to Github Pages is certainly possible, though. I would recommend buying from Gandi as I saw a lot of hidden fees with other registrars when I was shopping around (plus you get a free mail server, which is always good). I won’t bore you with the particulars of my setup, but if you have any specific questions, I’m sure I can answer them.

1 Like

Many thanks to both of you! These are both great suggestions. I’m not a huge fan of smooth scrolling myself, but I’ll take it into consideration. As for the space in my about page, I absolutely agree and would love to pack more information in there, but I have no idea what I’d want it to say and simply moving the picture up left a gap I didn’t like. This would be easier if I weren’t such a boring person!

1 Like

I am new here, but I completed several courses on Coursera and when I created a page, I had the same problem I couldn’t tell about myself :blush:
As for grids, I do not speak English well, so I just put it here, hope it will help you and I do not break the rules of the forum http://www.creativebloq.com/web-design/grid-theory-41411345 this article looks simple and useful.

I would try adding a ~2px border around your projects items like you have in the mobile version, maybe 0.5 opacity black or some grayish color to better distinguish them on the light background. Also some subtle hover effect would be nice from UX point of view. Good job :slight_smile:

P.S. Maybe make the font in About a bit smaller on small screens.

1 Like

Hi! I pretty like your project (especially the portfolio section). On small screens (width<600px) the about section img is x-scaled whereas the height does not change so your picture is distorted; you should probably set a smaller width with a media query.

1 Like

When I tried a responsive design test, the background appears like this on smaller resolutions (see attached). (Not sure why yet.) When I use Chrome Dev Tools and look at it on different devices, your Home background is there, but it doesn’t fill the screen, and there is a white gap between it and your About section (where the photo begins).
Overall, strong structure and it was a great idea to use the portfolio filter. I love what you included in your bio; makes you seem interesting. What follows reflects my own aesthetic bias: font is too large and color palette overall a bit too bland/neutral. Also, I like the way you used fonts in your logo and the letter spacing in “Web Developer,” but the font you used on the rest of the page a bit dull/predictable.

1 Like

Thank you for your super excellent input! I’m pretty happy with the color palette, but if you have any font recommendations I’d love to get some (my taste in typography is still very young and developing). I’ll play around with the font size and photo positioning, but I’m not sure what I can do about the weirdness in the dev tools. I tried it on a few different devices and it worked on those, so I’ll have to assume it’s a bug in Chrome’s responsive editor for now. Thanks again!

That’s really interesting! Which browser are you using? I think I’m actually relying on Bootstrap’s img-responsive class to size that photo, but the problem may be that I’ve already got a media query on it.

I had a border around those when I started, but removed it because it was looking a bit too busy for me. I’ll play around with some other borders or maybe change the background color, but I definitely agree that there should be some overlay and changes on hover.

Thanks for all the good input, everyone!

@PortableStick, you should use this tool to see how responsive your page is:

http://responsiv.eu/

2 Likes

I tried it out with the “responsive design view” of firefox (ctrl+m), or you can use the resource suggested by @Neotriz (many thanks, I didn’t know it but it seems to be really helpful). I had another look to your page, and it seems that the issue is due to the display:flex property assigned to the #about section: if you remove it, on small devices the img resizes the right way; since you are already using bootstrap you should probably take advantage of its grid feature and set col-- values to manage the layout.

Looks very professional. Well done!