Hello everyone, herein lies my Personal Portfolio webpage assignment. All of the user stories appear to be met and I am really satisfied with the design and layout and but feel the functionality and consistency could be improved upon. Any feedback and general advice is welcomed and encouraged. Thank you.
For starters, let me say that this looks like an excellent start to a clean and polished portfolio. You said in your initial post that you wanted to improve on functionality and consistency. Functionality aside for a moment, I don’t see any glaring consistency issues, which typically don’t become a large issue with single-page websites.
One thing I noticed immediately off the bat is that it isn’t immediately obvious who’s portfolio it is. Your name is in standard size font and comes after “Introduction.” I would say that you should put your name front and center in a reasonably large font. I also question the necessity of the “Introduction” header.
For a personal portfolio (and this might be nit-picking, but still), you probably want to use your full name instead of “t.y.Developments” for the sake of identity.
Okay, let’s come back to functionality. As a portfolio, it does the basics: it tells people who you are and a bit about you, it shows your previous works, and it shows ways to contact you. It isn’t required that it do much more than that, but if you want it to stand out, there are several things that you can do regarding functionality.
- First, and perhaps the most important, would be making your website responsive, or in other words, the layout and functionality of your website changes to best suit the screen that it is on. If you try scaling your website down beyond a width of approximately 1050 pixels your layout breaks down significantly. I would personally recommend Codecademy’s “How to Build a Responsive Website” course if you would like to see some methods for making your portfolio responsive. (You’re also using Bootstrap it seems, which makes responsiveness much easier when used correctly)
- You might consider adding a contact form or email for more formal contact as a means to get more out of your portfolio.
And as a couple of side notes, I think you might be better off if you add more about yourself personally and your development work. Like your portfolio is intended to do, don’t tell people what you do but show them. This should be reflected in your description as well.
In regards to design, I can’t say that I’m a fan personally, but I can say that the colors mesh together to form a cohesive palette and the background is a very flexible tool that I would recommend experimenting with to affect the overall feel of your website. The same goes for transparency.
Your animations operate with a light touch that many people often overdo, but you do good by limiting your use of animations. All I noticed were the hover effects on the navbar, and they worked fine. If you had any other intended animations, they didn’t work at all.
Hopefully, this is a good starting point for future improvements. Don’t be afraid to experiment with different designs or layouts either to find what works best. It’s (usually) as simple as switching out stylesheets.
If you would like more feedback or clarification on anything I mentioned, please don’t hesitate to ask.
Again, this is a great start and I hope you find success in your future projects.
Thank you very much for the extensive feedback. I will take it all into account and attempt to make improvements.
The introduction and about-me section is, for whatever reason, the kind of thing that I never really know what to put down so thanks for the ideas to improve the bio and introduction.
The issue of responsiveness was actually my main concern regarding “functionality” since I didn’t know how the page would look on a different sized browser so I will pursue your recommendations on improving the responsiveness.
As for the button animations did you notice that after you click a button and it does an animation once if you click that same button again it will not animate? I have yet to figure that out and wondered if you had any thoughts on that.
What Chance9025 said.
He is right-on-the-money.
The biggest hing is to have your name bigger, and remove “introduction”.
I now notice the animations (which only play on click in addition to the hover effect), I wasn’t very observant to them earlier despite the Javascript.
With that said, I spent some time trying to fix the issue and I think I figured out what you need to do, but I can’t give you exact code.
When you apply the class “animated pulse”, it runs the animation as expected, but you need to remove the class and then add it again for the animation to play subsequent times, as far as I have found out. I got the code to the point to where it played the animation on every second click, but that’s not good enough.
So, if you know how to code it (or can figure it out), here’s what you should try:
For any particular button, add the class (it should start off not having the class)
After you add the class, use setTimeout to remove the class once the animation is done. This time is necessary to let the animation play prior to removing the class. If you add the class and remove it without any wait, the animation simply won’t play from my experience.
The above should all happen as a result of one click event and the HTML element should be the same after the function/script runs as it was before it ran.
Maybe someone can help you with the code, but I’m too rough on my JS/jQuery right now to do so.
Hope this helps you enough!
Thanks. It may take a little time figuring out the code but I will give it a try!