Finally finished my portfolio page...WAHOO!

Well it took me almost three weeks but I finally finished my portfolio page. I have now studied HTML, CSS and Bootstrap 3 and 4 over the last two months so now I am off to learn JavaScript. I also want to continue designing more webpages in Bootstrap for some clients.

http://www.designsbyregina.com

2 Likes

It’s beautiful! Congratulations!

And thanks for the Carousel, I was trying to find out how to do something like that…

1 Like

Nice work. I have just started in the jQuery section and then on to the portfolio. It is great to see someone who is a few steps ahead of me. Very encouraging.

1 Like

If you studied Graphic Design, that’s an advantage over the plain hard-core coders. Now, if you start learning to code, that will be a potent combination. Graphics Design diva + Coding ninja.

1 Like

This is an awesome! I just finished all the basics and I’m working on my tribute page I hope I can make something half as nice as yours :slight_smile:

1 Like

Wow, I’m start bulding my portfolio too, good luck to you :slight_smile:

1 Like

Looks great, and nice use of responsive design.

A few pointers:

  • Your About Me section contains 317 words before getting to the part where you explain why someone should hire you. Luckily, your writing is good and you’re a strong storyteller, but consider your audience: clients don’t necessarily need to know this stuff, they just want someone who can build their site or app.
  • Your burger menu looks a little squashed - consider making the button a square. Also, by convention, most burger menus just look like three lines rather than something that’s conspicuously a “button” - consider the principle of least surprise in your design choices (unless you can be sure the surprise will be a pleasant one).
  • Your cover image is a whopping 8.11 MB, which takes an age to load on my slow home Internet connection. There’s really very little reason to save photos as .png files - most cameras save pictures as .jpg, and converting to .png doesn’t add any fidelity that wasn’t there to start with. By resizing to 1920px in width (equivalent to 1080p) and saving as a .jpg, you could reduce the filesize by more than an order of magnitude (494 KB at 90% quality, 313 KB at 80%, 237 KB at 70%). Bear in mind that, for your typical photo, 70% is barely distinguishable with the native eye, and 90% is barely distinguishable with a magnifying glass.
    These file sizes are still on the large side, and you might want to consider other options for getting it to load faster. For example, I noticed that on wider screens, the top and bottom of the image get cropped off anyway - might be able to use this to your advantage? You could also consider using media queries to load smaller versions on smaller devices or progressive image loading to quickly load a smaller version first.
1 Like

Wow thanks everyone for the comments. I really appreciate you taking the time to look at it. After learning for the last 2 months, I wasn’t sure if I could pull this off but I am glad I stuck with it and working on a project really taught me so much more then just watching online courses.

Lionel, thanks for your tips. I will work on that for sure. I thought png was better for the web but I guess I need to do more research into that. I will fix that one large image hopefully tomorrow night. Yours tips were so helpful. Thanks for taking the time to write that up for me!

Very beautiful work I really like it, taking your time is very important. Keep us updated on your journey.

1 Like

Very nice work Regina. By the way that is my mother’s name too kkkkkk.

1 Like

I always like to help make websites better. Just some FYI.

You need to add some padding to the sections of your content. It is too close to the edges. Also, add some space between your lines, like line-height in CSS.

I would also change the main font to something softer and not so rigid. Here is a link to a page with great font combinations

Great job!.

1 Like

Wow thanks for even more feedback. It is so helpful to get your suggestions and your nice comments make my day. I added padding to the side but I still might add some more. I like the font at the moment, so I think I am going to keep it. I did bookmark that page though because there were a lot of good inspirations for future pages. I changed the top image to a jpg and shrunk it down like it was suggested so thanks for that tip. I will try to remember that going forward. As for my burger menu, I had a lot of issues with that and that was the best I could finally come up with. I want to delete the whole thing and try to figure out where I went wrong because I would prefer to do just the three lines but it kept getting messed up sadly. I need to look into that more and I still want to go back and fix some problems with the page. I am currently working on two other pages and learning even more the more I practice so I hope that will help me fix my page and do better on pages in the future. Thanks :slight_smile:

Better? Depends on context.

If you want the absolute highest quality picture (and don’t care about file size), PNG.

If it contains line art, text, or icon drawings, PNG (though SVG can also be used here, GIF can also be used but it’s limited in colors)

JPG is lossy compression. PNG is not.

But PNG can have big file sizes, vs JPG. If it’s a photograph and minor artifacts are acceptable (or won’t be noticeable), use JPG.

PNG can have transparency though, while JPG cannot.