Hello everyone!
I’m Sushil, a junior web developer looking for my first job (or anything closely related to my field). Before I start applying, I want to hear some opinions on whether my portfolio is at a level that can get me hired.
Portfolio: Code. Build. Ship
Some background information;
I know HTML, CSS, and responsive design, and I’m currently learning JavaScript.
My portfolio contains 3 projects, a product landing page, a personal blog, and a full-stack gym management app (Pump & Iron) built with React, Firebase, and Tailwind CSS.
I’m open to junior dev roles, freelance gigs, or anything else entry-level in the web space.
So, tell me, does this seem job-ready? What would you add or change before sending it out? Any input is appreciated, thanks!
This is not a bad start on the site itself. I would reorganise the layout on the site to feel a bit more natural. My eye kind of goes all over the place. Mobile intuitivity can be improved a bit. Also when I went to this page it gave a 404 http://pradhansushil.github.io/blog/work/my-first-deployment.html This may throw of people who are going to view the site that are hiring managers.
Looks very decent! Here a few small things I noticed I think you could improve.
-
You’re loading Poppins, which is btw a lovely font, but you’re hardly using it anywhere. I could only see it in the “Code. Build. Ship” animated text. The rest is generic Arial/sans-serif throughout the site.
I recommend you check your CSS and try using Poppins for all the headers and larger text. It will really take out that blandness in your typography. Also, consider making these headers a stronger white, while making your text even darker. This difference in shade and size really helps set hierarchy in your text, which makes it easier for visitors to see what’s important.
I’d recommend using another font for large amounts of body text, as Poppins, like all geometric sans-serifs, isn’t very easy on the eye for long-form reading. You could keep your generic Arial/sans-serif, or choose something simple and beautiful like Inter. Bonus tip: don’t use Inter from Google Fonts, but get it directly from the designer Rasmus Andersson’s website. He has a new version, v4, with tons of updates, while Google Fonts still has v3: Inter font family
-
One of your buttons on the homepage has text that isn’t vertically centered. It’s no big deal, but it is on the landing page and first impressions are super important.
I’d fix it. A simple flexbox snippet will do the trick:
display: flex;
justify-content: center;
align-items: center;
-
Contact form looks solid. To make it even better consider adding some placeholders to the inputs: placeholder HTML attribute - HTML | MDN
Also, this is just an aesthetic recommendation, but I’d suggest setting the inputs’ background color to a dark color, like a shade darker than your background. Something like what you did in your nav bar.
Make it a little wider, too. On desktop it looks like it’s narrow enough to fit on a mobile device. If you’re struggling with making it responsive, try using some “vw” CSS units. These are viewport-width relative, so they’ll adjust with different screen widths. Restrict it from getting too wide or narrow with min and max width rules. It’s actually pretty easy, and you don’t need media queries!
-
I love what you did in the “skills” section with those little pill-shaped text boxes. Rearrange them and put your technical skills before your soft ones. They’re the main focus and having more boxes on the right feels out of balance. Also, under the "Skills’ header, you don’t need to write “Technical Skills” and “Soft Skills”—be less redundant and just write “Technical” and “Soft”.
-
Your project cards look sleek, but they are pretty big. Usually you don’t want cards to be bigger than the viewport, or they stop looking like neat, compact cards. What’s eating your real estate in there is your list of “skills used” and your links—they’re all lined up in a vertical row and you’re wasting a ton of horizontal space to the right. Here’s what I’d do to get those cards looking professional:
- Set those cover images’ width to take up the full width of the card.
- Darken the description text.
- Turn the vertical bullet list of technologies used into that cool thing you did earlier with the pill-shaped boxes.
- Get rid of the “view live” link and turn the entire card into a link. Keep the GitHub and More Info links, but distribute them horizontally.
- I just edited your CSS a bit with my browser dev tools to show you what your cards could look like:
-
Your “About Me” text is great, but usually landing pages do better with short taglines instead of entire paragraphs. Very few visitors have the patience to read even a few sentences (lol). I recommend saving your biography for a different page or section of the site, and just summarizing who you are, what you do and why you do it in a really tiny bit of text. Stylize it too—don’t just leave it looking like a plain blog post paragraph.
-
Try changing the borders of the nav links on your nav bar to have the same radius as your buttons. Or ditch the borders entirely. I used to do this a lot as a beginner, but I later learned that borders only look good if there’s an actual functional need to add a border, and nav links rarely do.
-
Your typewriter animation “Code. Build. Ship” is an excellent idea, but as of now it’s very slow and clunky. I struggled a lot in the past with building typewriter animations myself. Honestly, the best way to handle it is to use a library like GSAP. It’s a JavaScript library, which you’re currently learning, so you could challenge yourself to build a small text animation with GSAP. It’s quite simple for small applications like this. There’s even a plugin just for text manipulation: SplitText | GSAP | Docs & Learning
With GSAP, you can try out other animations too, and the results will be much smoother and faster. Check out this demo: https://codepen.io/GreenSock/pen/xxmaNYj
One mistake I made as a beginner with web animation was using them way too often. Animations have to be used very carefully. They should never be infinite or last longer than a second or two. You don’t need to animate everything one a page. Just animating a header or a button can be enough. And always keep an eye on performance. Animating hundreds of text elements or adding 3D animations make your site feel laggy and slow.
-
Consider adding your name and/or your logo on the left side of your nav bar. Right now it’s a bit empty. If you don’t want to add something there, then consider placing your nav items in the center of the nav bar.
All in all, It’s already looking awesome, and these are just some totally optional suggestions for extra polish.
I think polishing and cleaning up spacing would help a lot. (like the soft skills + technical skills area should be better spaced out…“skills” doesn’t center perfectly)
I agree with Nick that the fonts could be more than the usual (but I understand if that was a stylistic choice? I have seen plain old “monospace” used smartly and aesthetically but it does look like there’s a lot of arial everywhere and the poppins which is super cute and friendly is not utilized enough).
Hey Nick,
Thanks for the detailed review, I really appreciate it.
The typewriter animation was originally at 100ms but I felt it was too fast so I intentionally slow down. I get why that backfired though, nobody wants to sit through a slow animation, especially a recruiter.
Little context: I’ve been through some pretty rough personal stuff this year so my progress has been slower than I’d like. I’m still trying to get through it but I haven’t had the bandwidth to take on new libraries just yet. GSAP is definitely on my list.
That said, what ms would you be looking for? Would love to hear where you think that is right from your experience.
Looking forward to hear from you.
Thanks so much for the feedback, I really appreciate it!
It was probably a 404 as I was working on the site at that time. Also, the URL has changed to: The Dev Log | Portfolio Should be working now but let me know if its still playing up.
Good points on the layout and mobile experience, I’ll be looking back at those too. Thanks again for your time!
I definitely don’t want it to be “cute” (lol) Well, but I get what you’re saying — the font hierarchy could definitely be more intentional. I’ll take your and Nick’s advice to heart and try to work on the spacing and typography. Thanks so much for taking the time to review and leave such thoughtful feedback!
Haha…well I don’t mean cute as in childish but I mean it’s just likeable and easy on the eye. I tend to use more brutalist and cold designs (very inspired and I personally love the german magazine called “Kaltblut”) .
I would place it at around 40-60ms. With a plain typewriter animation, there’s no need to slow it down. You had the right instinct though to be cautious with fast animations, since they can be visually jarring and problematic for accessibility.
If you’re open to a bit of a challenge, you could change it from a simple typewriter animation to something more dynamic, like the letters or words sliding in and out vertically. You would make the font much larger and add some kind of staggered slide effect. I made a quick demo for you: https://codepen.io/nickrg/full/ZYBQqdX
Feel free to use and modify that code in your project if you like : )
Sure thing, don’t hurry with learning new libraries until you’re comfortable with vanilla JS. Also be aware the GSAP isn’t a giant, complex library that takes a lot of time to learn. It isn’t an entire framework for building sites, like React, or NextJS. It’s basically a really capable animation toolbox and you don’t have to learn the entire library to use it. Think of it as a set of JavaScript utility functions to simplify working with animations. That’s all.
Okay, I will look into it. Thanks again for the feedback - it was really useful.
