The first one of my personal projects I deployed with Azure app service.
Currently only works with certain viewport sizes. I have made a bigger and more complex ones but mainly back end apps that require an IDE to run at this stage(need to implement some security features first cus i plan to someday make it an actual fitness website),
Pretty fun to see numbers and alphabets create entire applications.
Mainly looking for feedback on my responsive design, so I can cover more mobile devices without having to make a code for each individual device.
Here is the link: https://troydonportfolio.azurewebsites.net
Hey Troydon. I’m also into body building (not professionally, just a very serious hobby). Been a little tough lately with my gym (and all other gyms) closing because of the Corona virus, but I’m getting by with what I have at home.
As far as responsiveness goes, there is no reason you should have to code for individual devices. The point of responsive design is that it will automatically work on all devices. This is what I would do:
- Get rid of all the effects and animations you have on there right now. You just want to concentrate on content.
- Narrow your browser window as much as possible and then style your content so that it all fits nicely.
- Now you can slowly widen the browser and decide where the next natural break point is. Don’t worry about specific devices, let the content tell you where the break point is.
Basically, you want to start small and then work your way to bigger. Sort of like body building, eh? And this will allow you to get rid of that disclaimer at the bottom of the page.
After you have done the above then you can add back some effects to personalize your site. But you may find that some of them just don’t work at smaller widths. That’s OK. It’s more important that your content looks good than your special effects.
If you want a critique of your overall site let me know.
Good to see a fellow lifter, I have got a bit of weights at home so I guess I am lucky.
Yes, I would like critique on the entire site, probably alot to add lol but yeah that should help me see what I should brush up on and improve the website.
Actually, I would say there is a lot to remove 
We all have our personal styles, so take this with a grain of salt, but I think you have way too many effects on your page. Just a few examples:
- the blinking menu indicator
- the blue flames when you mouseover on the contact form
- the headers that change on mouseover
- the text that scrolls on mouseover
- the spinning pictures on the Bio page
If you are just experimenting for the sake of having fun then fine. But if you intend to use this to market yourself professionally then I would lose all of the above. Bottom line, these effects are outdated/overused and a lot of them (especially the blinking) are frowned upon by most people. They don’t enhance your page but rather make it look dated and unprofessional. Besides, you have a projects page where you can link to projects that show off all your abilities. If you do want to add some effects, then try to make them more original (that also gives you another project to show off).
Other issues/suggestions:
- The scrolling text is actually a functional issue as well. If I want to copy/paste something from it I have to wait for the text to scroll back up. And it’s not scrolling completely to the end of the text for me so I can never see the last few lines. Just more reasons to get rid of this effect.
- Your menubar button is not obvious and thus you have the blinking menu indicator. Lose the indicator and make the menubar button speak for itself. In my opinion, you might consider not hiding the menu in the first place. If you want to have some fun with the menubar then make it responsive (vertical for wider screens and horizontal at the top for narrower screens).
- On the projects page, the text that pops up when I hover over an image is unreadable. You need more color contrast with the background and the background needs to more opaque because the images are too busy to be bleeding through. Personally, I would lose the pop up content and just display it with each image. One, you want your users to see it so why force them to mouseover and two, what about people who can’t/don’t use a mouse? Also, the carousel feature is getting a little overused as well if you ask me. If you were hurting for real estate on that page then I could see its usefulness.
- Try navigating through your site using just a keyboard. (You won’t be able to do it.) You need to make sure that every link/function on your site can be activated with the keyboard and that the focus indicator shows the user where the keyboard is currently focused.
Sorry, I don’t mean to sound so negative. Like I said, if this site is just for fun and experimenting then you can ignore most of my suggestions. But as you know with body building, attention to detail is crucial. So I’m putting that same sort of focus into my suggestions.
Good luck down there. Hope life gets back to normal soon. Like I said, I am able to work out at home, but it’s not the same as going to the gym (and it’s starting to show).
Dang, I expected there to be a lot since this is my first time asking for feedback. Probably should have been doing more often on all of my projects so I would head down a better path to begin with.
Your assumptions are correct, I sort of mainly wanted to have a bit of fun but also showcase my skills and what I can do. Although if you say removing them is better to showcase and market myself for professional purposes, then probably would be a good thing to remove them.
Regarding the text scrolling, if functionality is the only issue, what If I made it the other way around and make it scroll on page load and then make it stop scrolling when hovered over so that way you can copy paste it? Or is the style just not appealing?
Will look into a better contrast setting thanks.
Okay keyboard navigation is something I never thought of, probably will have to get onto implementing it.
Yeah working at home can never beat a real gym unless you have a decent amount of space, hard flooring so you can drop your weights when you reach failure and $5-$10k worth of equipment 
Ok so I have inverted how the scroll text works, so it scrolls on page load and stops when hovered over.
I changed it so the power button is now written as ‘menu’.
I also made the background more opaque, I did set it up so touchscreens will have the descriptions show just under the image on page load. So i think I will do the same for all screens instead, later.
Also do the navigation with keyboard later.
I will make these later adjustments, I think for now I want to work on my other projects