I have recently created by web portfolio, it is not responsive suitable for desktops ,can any one review it and help me to prefect it,so that I can use it for my job interviews.
Web portfolio link
Thanks in advance
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (33)
Hello ! ☕
Add
On head for mobile responsive.
i have included it the head , may be u can look into repo here github repo link .
I've got that
may be for phone view it is not supporting for desktop view it is looking good
dev-to-uploads.s3.amazonaws.com/i/...
Hoooh very nice effectively ! ☕
I've got that on desktop, ajust with margin and edit
yes i will modify the webiste this week based on the all the reviews
Hello!
First of all, nice typography.
Because your site is lacking content I think it might be best to place the information on pages to give an illusion that there is more content - It is effort to scroll when there is quite a lot of white space between each section. I would also recommend adding a description of what you did under the projects you have done.
After clicking on the projects, I would also add functionality to the websites you have done and improve on the overall designs + making sure they are responsive.
Hope this helps!
thanks i will definitely follow these suggestions and make modifications accordingly.
Well... It needs sole work, which framework are you using?
I just rebuild mine and i suggest you to draw on a paper what you want to reach first, then start coding.
A good understanding of some framework, or simply CSS Grid or Flex could help.
I'm just about to release a flex based, lightweight css framework in less than a month, my new portfolio is built with it, check it out if you want:
joelbonetr.com/
thanks i will definitely flow these suggestions and i will redesign the website,if i need any help definitely contact u .
Why would you need a framework for that? Simple flex-box and some good typography and for a minimal portfolio site it would be enough if that's his goal.
Yup, i said it too in the comment, have you read it all? 🤷🏻♀️
I made my own css framework using flex, just need to import those parts for grid system and so, no need to import entire framework, that's the point.
The thing is - you didn't. Read what you wrote again.
EDIT: And now you edited it.
I said you can use a framework or CSS Flex or Grid clearly, it's not my job to decide what he must use, only answering to the OP, by the other hand... When you use a framework, do you import it all, so you assumed that use it for a portfolio could be inefficient?
Using a framework and importing just what you need is as efficient as could be if you type it all from scratch. I imported (from my own framework) only the components i need (containers, grid system, accordions, modals, typography and colors) and i'm getting a 100/100 on pagespeed, because there isn't unused css or js on it, and the size is pretty lightweight, even i didn't optimized the images or cache policy yet.
Check it out:
developers.google.com/speed/pagesp...
If you want or need a full workaround i'll set the points here, ordered:
1- Draw what you want to reach on a paper, a simple wireframe (mobile and desktop).
2- Generate a Git project, clone it and set parcel.js (or rollup, or webpack) on it.
3- Start coding your structure in a file called index.html, with html5 (you can use pug or something similar if you like). - Only a single block of content.
4- Style this content block as you want, - Flex recommended, but you can use Grid too. If you are not familiar with those two features, or want to get it done faster, you can simply use a framework like Mustard UI, bootstrap or whatever you know or want to learn. Simply make sure you import only what you use. -
5- Repeat steps 3 and 4 till you have the entire layout done, from header to footer.
6- Optimize assets (scss and js will be compiled and optimized by the bundler if used correctly, i highly recommend you to optimize images by your own with your preferred software as bundlers mess it up a bit or makes a poor job that leads yo to loose too image quality).
7- push your project's new version to Git.
8- Build for production.
9- Deploy.
Obviously there could be tones of correct workarounds to reach same result.
Cool website :)
Aesthetically the thing that struck out to me was the amount of white space on your portfolio. I think it's good to have some but not too much. Atm, it feels like there is a lot more white space in between the different sections. It makes your site feel more lengthy than it actually is. Maybe consider (as some people have suggested), using css-grid / flexbox to layout your site into columns as well.
Good job on making the site though :)
Hi, try to make the height of blocks smaller, the user have to scroll a lot to access to the content. Make the navigation simple, centralize all the information in one place. You're website is working only on desktop screen, build the website by thinking mobile first.
thank you i will modify it as soon as possible
Checking it out on a standard 1920x1080 resolution. There is a lot of un-used space which currently is filled only with white background. In my opinion it feels very unfinished/ unpolished like this. I think there's a ton of potential in the layout, maybe a more telling background or a better use of vertical space? You're on a good path!
thanks i will definitely flow these suggestions and make modifications accordingly
Hi Sridhar! Your website looks great, nice work. I would say, flexbox can be your best friend here, in terms of making your page more responsive: css-tricks.com/snippets/css/a-guid....
thanks i will definitely flow these suggestions and make modifications accordingly
Responsiveness is a must since it shows how much you know about web development or software Engineering in general. Otherwise looks good.👍
Add animations and transitions. It makes your site attractive
thanks , i will try to implement them
Look nice, simple and straight to the point. I'd add a few colors.
Thanks and i will try to modify it accordingly