DEV Community 👩‍💻👨‍💻

sridhar02
sridhar02

Posted on

My personal portfolio site. Some feeback / tips?

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

Top comments (35)

Collapse
thomasbnt profile image
Thomas Bnt

Hello ! ☕
Add

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

On head for mobile responsive.

Collapse
sridhar02 profile image
sridhar02 Author

i have included it the head , may be u can look into repo here github repo link .

Collapse
thomasbnt profile image
Thomas Bnt

I've got that

Thread Thread
sridhar02 profile image
sridhar02 Author • Edited on

may be for phone view it is not supporting for desktop view it is looking good
dev-to-uploads.s3.amazonaws.com/i/...

Thread Thread
thomasbnt profile image
Thomas Bnt

Hoooh very nice effectively ! ☕

Thread Thread
thomasbnt profile image
Thomas Bnt • Edited on

I've got that on desktop, ajust with margin and edit

.jss105 {
    display: flex;
    padding: 10px;
    justify-content: space-between;
}

Thread Thread
sridhar02 profile image
sridhar02 Author

yes i will modify the webiste this week based on the all the reviews

Collapse
joelbonetr profile image
JoelBonetR • Edited on

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/

Collapse
sridhar02 profile image
sridhar02 Author

thanks i will definitely flow these suggestions and i will redesign the website,if i need any help definitely contact u .

Collapse
devvyd profile image
Dāvis Naglis

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.

Collapse
joelbonetr profile image
JoelBonetR • Edited on

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.

Thread Thread
devvyd profile image
Dāvis Naglis • Edited on

The thing is - you didn't. Read what you wrote again.

EDIT: And now you edited it.

Thread Thread
joelbonetr profile image
JoelBonetR

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.

Collapse
chantelsky profile image
Sky • Edited on

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!

Collapse
sridhar02 profile image
sridhar02 Author • Edited on

thanks i will definitely follow these suggestions and make modifications accordingly.

Collapse
remrkabledev profile image
Malcolm R. Kente

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 :)

Collapse
steeve profile image
Steeve

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.

Collapse
sridhar02 profile image
sridhar02 Author

thank you i will modify it as soon as possible

Collapse
iamtravisw profile image
Travis Woodward • Edited on

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!

Collapse
sridhar02 profile image
sridhar02 Author

thanks i will definitely flow these suggestions and make modifications accordingly

Collapse
farzadbagheri profile image
farzadbagheri

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....

Collapse
sridhar02 profile image
sridhar02 Author

thanks i will definitely flow these suggestions and make modifications accordingly

Collapse
pavermakov profile image
Pavel Ermakov

Look nice, simple and straight to the point. I'd add a few colors.

Collapse
sridhar02 profile image
sridhar02 Author

Thanks and i will try to modify it accordingly

Collapse
srirammahadevan profile image
Sriram.Mahadevan

Very good and minimalistic. You can have the top banner fixed while scrolling. Also a photo of you (maybe like top right corner of dev.to site) will be good as well. Cheers!

Collapse
sridhar02 profile image
sridhar02 Author

Thanks and based on the suggestions i am going to revamp the website

Collapse
sheikh_ishaan profile image
Ishaan Sheikh

Responsiveness is a must since it shows how much you know about web development or software Engineering in general. Otherwise looks good.👍

Collapse
hinasoftwareengineer profile image
Hina-softwareEngineer

Add animations and transitions. It makes your site attractive

Collapse
sridhar02 profile image
sridhar02 Author

thanks , i will try to implement them

Collapse
leadersheir_ profile image
Warisul Imam

I really liked the typography and the icons you used. I'd be really happy to help in any way I can. Just let me know how I can be of help.
Happy Coding! 🤗

Collapse
sridhar02 profile image
sridhar02 Author

thanks i will definitely flow these suggestions and i will redesign the website,if i need any help definitely contact u .

Collapse
rococo_bang profile image
Straja

It's kinda broken my dude.

Collapse
sridhar02 profile image
sridhar02 Author

For desktops it is working fine , may be for phone desktop view it is not good I guess .

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.