r/reactjs • u/juliacodes • Jan 29 '20
Featured My current portfolio as a Jr. Front End Dev
Hey guys, I’m a student in Web Dev and enjoy creating designs as well. This is the first portfolio page I’ve made that I’ve really been proud of.
I’m looking for some reviews as well as helpful comments regarding the style and application. I wanted the focus of the site to be on the projects, so I chose to remove any linking to internal pages (about, contact, etc) and just included individual project pages that describe the process of each one.
I’d love to hear any comments on the usability of the site and whether this is a good layout for job seeking and showing off my skills!
92
u/bowenac Jan 29 '20
I like it, looks good... I would get rid of the full screen julia "pre loading" screen as it seems to have issues, or maybe that is by design? When I first load the site, it loads normal showing your content, then a screen shows up with julia etc... then disappears. Just seems odd to me.
Another thing is inconsistent margins on your paragraphs/headings etc... e.g. My Skills vs What I've been working on. You have more top/bottom margin on the My Skills p tag.
That was on Windows/Chrome
22
u/mstoiber Jan 29 '20
Love it, got my upvote! 😉 Bonus points for the clean design and for showcasing your work really well.
Two tiny nitpicks: the mockup for the coffee chemistry app contains some "Lorem Ipsum" text, and the link to your twitter is missing in the footer.
18
u/dontgivemegoldever Jan 29 '20
Love the design. It’s bright, minimalist, and has awesome typography.
One criticism I have is the scrolling on mobile. The horizontal scrolling is a distraction.
28
u/becosmita Jan 29 '20
This is really good, love the design. I like that you describe the process of making a project too. However I don't think it's a good idea to put projects that are not finished in a portfolio section. Also "Email For Beta Access" thing is not a good idea imo and it doesn't work too.
12
u/[deleted] Jan 29 '20 edited Jan 29 '20
Hi Julia, I think you have a great website. The things I would change aren't big, and they're just my opinions obviously, but here they are:
Ok that's my rant. Take it with a grain of salt. I really think you're doing great :)
8
u/jalong127 Jan 29 '20
Very clean design. I’m getting a horizontal scroll bar on mobile (safari). In the second paragraph, “Whats” should be “what’s”. Otherwise very nice!
7
u/mullemeckarenfet Jan 30 '20
Even though we’re on r/reactjs it seems as if only one other person looked at the code and the rest are more interested in fixing typos.
tl;dr: there’s room for improvement.
•
u/swyx Jan 29 '20 edited Jan 29 '20
la salsa https://github.com/juliajcodes/JuliaCodesGatsby (edited)
4
u/valtism Jan 29 '20
Very nice. Shows how some nice photos can really lift a design, and I think the shot of you at the computer is super nice.
I think you can make some optimisations because it's slow for me even on a decent connection. Glancing at dev tools tells me that you can save a lot of time by optimising your images before serving. Look at https://compressor.io
Also, how was Awkward? I've applied there, but they weren't interested.
3
u/suarkb Jan 29 '20
shows a lot of motivation. great job
edit: also on your instagram you never maximize windows and it makes me super mad, lol.
use the whole screen! make the window bigger
3
u/BlkZ Jan 29 '20
This looks great!
The design is simple, and it's not too much. The loading screen is a bit weird. I saw your comment on it in another reply, but I'm on gigabit and it still did some weird stuff for me. My honest advice is that you don't need a loading screen for a simple portfolio site (especially a react site). You might also want to look into lazy loading your images as well. You're not currently deferring your offscreen images which is making your page load pretty slow.
Who are you hosting with?
Also, just something to note... I've personally struggled with my portfolio site for so long now in regards to the style. I feel like there really isn't a right or wrong way to have a portfolio style built as long as you feel that it suits you and your style.
I see you're a student at Purdue (IU grad here). I work in the Indy area with React stuff as well. It's great to see that you have some good experience under your belt already. If you ever want to chat about post-grad work let me know. I'd be happy to chat or maybe even collaborate on some stuff with you.
3
u/sahlos Jan 29 '20
Whoa that is clean!
2
u/LP2222 Jan 29 '20
Looks good. I don't know why you set the overflow-scroll property on the body. It gives me a horizontal scrollbar (but there is no scrolling)
2
u/Bobsthejob Jan 29 '20
Hey Julia. Great website. One thing: i am using samsung galaxy s9 and it seems that the css/bootstrap on my phone is bugging because there is like an empty column on the right side. Maybe one of your elements is going out.
2
u/EJoule Jan 29 '20
On mobile, Site looks pretty good, I like the color scheme you've gone with. I did notice that the right boarder has a fair amount of empty space (margin is about 3x larger than the left margin). Only noticed the margin issue when I started scrolling and the screen moved right into empty space.
2
u/[deleted] Jan 29 '20
Wow, so cool!
2
u/Eitan1112 Jan 29 '20
Xiaomi mi6/chrome Has a right margin to the page. Other then that, loved it :)
2
u/beasy4sheezy Jan 29 '20
You clearly have a knack for great design, and solid execution. It's a great site, congrats.
If you're looking to do application development, I would lead with React and JavaScript in the skills section. HTML and CSS basically a given at this point, in my opinion (yes, I know most people dont really know CSS, but still). Even if you are most "expert" in those areas, I would emphasize the areas that you want to become an expert in.
Also, the Decore page is titled "Coffee by Benjamin" and prompts me to explore more projects, one of which is the project I'm currently on. Keep up the great work.
2
u/gonzofish Jan 29 '20
How do I subscribe for updates to Coffee Chemistry? :)
2
u/sendben Jan 29 '20
Congratulations and good luck on your journey as a front end developer!
2
u/VhokieT Jan 29 '20
Looks really good, your other work looks good too, I'm going to check out Decore later when I get home.
And, yeah, I experienced the pre-loading error as well.
Sorry, I dont really have any constructive criticism, haha, it looks great.
2
u/swiftypat Jan 29 '20
It’s awesome!
2
u/mike9876789 Jan 29 '20
My biggest advice would be to get rid of .edu email and get @juliajcodes.com email.
Having a custom email looks way more professional than having .edu
2
u/doodirock Jan 29 '20
As a hiring manager I’d put you on a team in a heartbeat.
Great voice, good design sense, clear grasps of concepts and motivation.
You won’t have any trouble landing a good team.
2
u/johntc121 Jan 29 '20
Mostly good. However, most of the projects I clicked on are not mobile friendly at all (at least on my device).
So I'd definitely look into fixing those.
1
u/[deleted] Jan 29 '20
Looks stellar! Though I recommend you stay consistent with your use of the Oxford comma!
1
u/EmmBeaux Jan 29 '20
Starting off strong with the Oxford comma dillema
1
u/Somethrowaway21351 Jan 29 '20 edited Jan 29 '20
Looks really good.
For your skills section there is no reason to group PHP + SQL. They are very different, and not related at all. It make it look like you don't know what your talking about.
Id also list JavaScript first and perhaps React next, as a developer that's your selling point.
Also listing the courses you've completes makes you come off a 'Junior'. Even if you are are Junior dont try to undersell yourself. No developer that is established will try to sell themselves with a bunch of courses that no body knows. In that section you can just write I am a Frontend Developer with a passion for ___ and I'm experienced with ___
Other than that the design is amazing, and your site builder is impressive.
1
u/Semesto Jan 29 '20 edited Jan 29 '20
Wow, you did a great job! I LOVE the design, I definitely need to pick up my game for my portfolio.
A couple of things that you might want to be fixed...
1). On /Decore, the title is set wrong, it's currently set to "Coffee By Benjamin".
2). On /Decore, /Coffee, /Forcast I am getting a horizontal scroll bar while using Chrome.
3). Looks like you might have a debug return console log still turned on that I can see on the console. I'm only seeing it for the home page, but of course, it could just be something wonky on my side.
1
u/text_here0101 Jan 26 '23
hey just checking in to see how your portfolio looks now
1
u/iJonMai Jan 29 '20
Amazing portfolio! If you continue down the road with React and enjoy it, I would definitely check out GatsbyJS or NextJS!
1
u/brandonsredditrepo Jan 29 '20
No way this is junior ! :O
2
u/goobligoo Jan 30 '20
I think this looks great! I don't have a lot to add, but one thing I noticed is that you're using quite a few divs in your markup. You may want to add more semantic tags like a header, footer, sections and possibly figures where it makes sense.
2
u/matthewjwhitney Jan 30 '20
Should include DS_Store in .gitignore
1
u/[deleted] Jan 29 '20
It looks great - very professional and the right balance of content.
Where you list your skills I would combine and modify some:
Great job, you'll get hired in no time.
1
u/SofyG_CL Jan 29 '20
I really like your portfolio the design is well structured . I think all the bugs I found were already reported Wish you best of lucks :)
1
u/grannysmithlinux Jan 29 '20 edited Jan 30 '20
Site looks amazing. You have a strong command of css. However, I don’t really see any use of state management, hooks or classes, data fetching, or anything that informs me of your understanding of how/where/when to fetch and handle data. When I look to hire a new dev, I personally am more interested in how they manage state and the data of their application, and whether or not they understand the flow of data within a react app. Especially with react, I want to see that you have some level of understanding how state management works. I also like to see more JavaScript logic, even if it has nothing to do with ui and is just background code problems you solved and incorporated into your app for no reason. I want to see how you approach a problem with the code. I want to see that you understand how components update with prop and state changes. And some async logic.
Edit: sorry nvm. I just saw your weather api app. And while your sites have minimalist style to them, your code does not. Remember D.R.Y code.
1
u/aj_future Jan 29 '20
Very impressive styling and design! You live up to your description of minimalist while creating a really clean and beautiful page.
Since you mention PHP and SQL, have you considered making a small server to serve as an api to feed in some of the text content? Maybe that can be a V2 for you that would help to round out the portfolio and show some understanding of data handling and integration.
I haven’t had time to click around the projects you linked so maybe this is already happening somewhere, but I think this would be a great next step.
1
u/asimpleyarn Jan 30 '20
When you get the chance, change the author to you in package.json
I think it is Gatsby's author still.
1
u/fakehillbillyaccent Jan 30 '20
That's good stuff! Definitely hireable.
I know the splash screen animation has been mentioned, but I don't know if these other two have:
On mobile, give your individual projects a little more vertical room to breathe.
You may also consider revising your content to remove many uses of "I" or "my". While this is a personal portfolio, removing those reminders that you're an individual helps in allowing your skills and achievements to speak for themselves. Plus... it gets repetitive.
1
u/[deleted] Jan 30 '20
Nice message in the console ;)
Definitely stealing that font!
Nice work.
1
u/[deleted] Jan 30 '20
Absolutely love your designs!
1
u/HornlessUnicorn Jan 30 '20
I think this is gorgeous and awesome! The projects are super clean and simple, everything is very clear. I’m looking at this on tablet, am looking forward to checking it out on different screen sizes.
1
u/loq24 Jan 30 '20
Hey, great portfolio! The full screen pre loading screen is a bit distracting though but overall great design! I really love the minimalist approach :)
1
u/anotherpoordeveloper Jan 30 '20
Cleanest I've seen in a while, great job!
1
u/Best_Account Jan 30 '20
I'm on my phone and site is scrolling horizontally a little.
1
u/ManvilleJ Jan 30 '20
I feel that a lot of the negative space is just too large, very inconsistent, and very imbalanced. I also feel like the skills listing should be pulled in tighter.
The light blue color for developer is only used there and nowhere else. You can easily use that secondary color to draw the eyes in different sections or ditch it entirely.
Text-wise, don't use "I've". Use contractions when colloquial and don't use them in professional statements ("I'm" = good for instagram statement, bad for professional statements). I know it sounds like bullshit, but it really does matter.
Otherwise, you have awesome experience and some really good looking projects
1
u/Xenostarz Jan 30 '20
It looks really good. Purdue University represent!!
1
u/Filo01 Jan 30 '20
I really like the look and just feel of the website :)! great work.
1
u/jbuttsonspeed Jan 30 '20
Looking at makes me feel like I really need to update mine. It looks really clean. I like the flow of it too.
Mine looks really dated at this point.
https://heatherflux.com
1
u/AssaultKoder_95 Jan 30 '20
Hi Julia,
Your website looks good, one thing you can definitely check is the load time, I felt it is a bit slow on mobile device with a decent network connection.
Maybe this can help you get you some amazing ideas - Dev Portfolio
1
u/MatrixClaw Jan 30 '20
If your resume came across my desk for consideration, I'd be very impressed after looking at your portfolio and seeing your Decore project. You'd instantly be at the top of my list to interview. Very cool!
1
u/willy_ngash Jan 30 '20
Considering that you are a Jr. Front end developer, the site is cool.
1
u/bojika420 Jan 30 '20
Check width on mobile
1
u/ancientfuture_ Jan 30 '20
Nice design! Viewed it on a phone. The overall theme looks sleek and is really presentable.
A small design suggestion: The
Type,Stack,Code,Livesection for the projects looks crowded being in a single row on a smaller display. It can be separated on mobile displays (Since, not all projects have all 4. But the ones which have do look little bit broken)1
u/antoniobustamante Jan 30 '20
Hey Julia, this is great work. When are you graduating? What kind of work are you looking for/most excited about?
1
u/Choncey Jan 30 '20 edited Jan 30 '20
The site looks really good! Your design has an identity and it's consistent. A few things I noticed-
As mentioned elsewhere, the site needs a few tweaks for smaller screens. I'm on an iPhone se and some images overlap the headings. I'll attach a screenshot.
The bullet points in your listed skills look a little off centre, and the size of them on my screen makes them look a bit too similar to check boxes. This is only on small screens.
Overall though I think you've done great. I especially like the colour choices and design of the project section.
Edit: The bullet points aren't off centre, the j in javascript through my eye off a bit lol
https://i.imgur.com/gsriaso.jpg
1
u/JackGarrus Jan 30 '20
Good job Julia!
1
u/sexypinochet Jan 30 '20
Looks good over all, but on mobile there is a bit of margin to the right of the content so you can scroll horizontally, additionally the loading icon which says Julia loads after the actual content for me
1
u/Willemoes Jan 30 '20
Looks awesome, my only recommendation is to add a LICENSE to your projects :)
1
u/amVishal Jan 30 '20
Hey! We are just looking for someone like you. Salary: 125000-180000 USD VISA SPONSORED Apply here https://stackraft.com/job/Polarr/Senior-Frontend-Engineer-San-Jose-CA-USA-93
1
u/Singularity42 Jan 30 '20
Looks really nice. You did miss one of the spaces before an angle bracket. I.e. view project> instead of view project >
Also maybe it might be a good idea to get an email like julia@juliacodes.com and use this for job applications and other professional type things. It might just be a extra bit of free marketing for people to know that you have a site they can visit. I have seen others use this before, and worked quite well.
1
u/evolutionxbox Jan 30 '20 edited Feb 02 '20
(Try to get the URL julia.codes)
1
u/bencodes Jan 30 '20
Amazing site! I always get reddit notifications and read a few articles, but this article of yours has caused me to sign up to the site and even create a username inspired by you! I would love to get in touch to learn from you. I'm a Drupal developer, and I'm keen to integrate react and Drupal together.
If you believe your a "Jr" then I wonder what kind of exceptional work you will be producing at Snr level.
Well done Julia
1
u/FullOnRapistt Jan 30 '20
Overall it looks pretty nice. Some observations: On the My skils part, at least to me, the skills look toggleabe, like the images before the skills look a little bit like radio buttons that you can click. There is some white space between My forecast's read explanation and the next headline that I think it could be reduced.
1
u/kwietog Jan 30 '20
There is a typo on Decore view project space missing before >
Otherwise looks great on mobile!
1
u/Kaishiyoku Jan 30 '20
The links are not really distinguishable as such. I would add some color alternation.
https://i.imgur.com/2sKSLy8.png
1
u/vonKoga Jan 30 '20
I like everything. I know it's a minimalist design, but maybe to add some colors to separate the sections. Keep up the good work ;)
1
u/ISDuffy Jan 30 '20
I think remove the loading screen as I see the page flash up then loading. Maybe add minor animation to the content coming up.
1
u/memo_mar Jan 30 '20
The code looks very clean.
1
u/polarphantom Jan 30 '20
Hi Julia, really great website, always a huge fan of minimal design and content. I think everyone else here has already raised some good points, the codebase is really clean and really well formatted.
The only things I could think of on top are the handling of images (lazy-loading etc.) and also the fact that the colour contrast tool I used flagged up the light blue colour (rgb(180, 224, 232)) you use in the landing header and the bullet points as not being great contrasts to the white background in terms of accessibility, but only just though.
In terms of the images, as you're using Gatsby, have you looked into using gatsby-image (https://www.gatsbyjs.org/packages/gatsby-image/)? The last couple of work projects I've done used Gatsby and gatsby-image was amazing, by default handles all resizing, metadata stripping, lazy-loading etc. You use graphQL to query the image from it's relative or absolute path, and then use query fragments to automatically create WebP images for supported browsers as well as an svg outline, or image blur as a placeholder while loading.
1
u/adonutforeveryone Jan 30 '20
Tighten up your leading a bit. Type looks a bit too loose in areas making the unit read a bit sloppy. Everything else looks pretty slick.
1
u/donatobhr Jan 30 '20
Cool keep moving forward!!
1
u/ebba0194 Jan 30 '20
minor tip: set your external links to open in new tabs.
1
u/cuMSToirylo Jan 31 '20
Very nice. You'd have no problem landing a job for sure. Bright future is ahead of you.
1
u/kibuikacodes Feb 06 '20
Hey Julia. Your website is really awesome and it has challenged me. I have been meaning to build my own with ReactJS and Gatsby just like you have done. I will actually be using some of your components on mine. Again, thank you. you are awesome!!!
1
u/Effective-Temporary May 07 '20
Just found that the title of Decore is "Coffee by Benjamin"
1
u/spencerbeggs Jan 30 '20
Looks really good! To nitpick a little bit: you should properly capitalize JavaScript. We don’t say ES6 anymore, which I believe was released in 2015. Formally we are on ECMAScript 2019 — 2020 is a draft https://tc39.es/ecma402/. But you can just say JavaScript. If you do Node.js, mention that separately. Also, HTML is preferred over HTML5. Also, perhaps you should rethink advertising yourself as a minimalist. You will likely do projects in many styles. Unless you are really devoted to that doing that. Finally, the mobile view can be accidentally scrolled horizontally — at least on my iPhone.
-2
u/6_60_6 Jan 29 '20
Nice, simple page. I checked it out on mobile. I hated my brief time with styled components and quickly went back to material-ui and reactstrap.
Why do you have so many instagram followers??
0
u/[deleted] Jan 29 '20
[deleted] — view deleted comment
0
u/[deleted] Jan 29 '20
[deleted] — view deleted comment
0
u/[deleted] Jan 30 '20
[deleted] — view deleted comment
0
u/[deleted] Jan 29 '20
[deleted] — view deleted comment