Hey FCC,
After about a decade of hobby coding and being nearly finished with FCC’s front end program I decided to officially put myself up for hire about 2 weeks ago. Unfortunately I haven’t gotten any firm interest, and I’d love some advice on how to get my portfolio to the next level and maybe increase my chances. Honest critiques would be sorely appreciated!
Link: https://codepen.io/L0TU5/full/YaoYeg/
Thanks in advance.
~DC
Hey there!
A very good start in my opinion. Looks solid and nice!
Is a little unique as you are and every personal portfolio needs it!
Good job!
Keep it up.
I’m not a native English speaker, but one typo really caught my eye: ‘Design Princaples’ should be Design Principles. You might want to check the spelling. As mentioned, I am not a native English speaker, and I’m not sure if I would be able to spot any other typos.
On your contact page there’s only an email address. You might want to add your GitHub and CodePen page, which you mentioned on your project page, here also.
Now, I’m going to play the devil’s advocate a bit.
On your contact page you mention Professional Accounts and Friendly Accounts and those are empty. Not sure what you mean with ‘accounts’, but I am guessing ‘clients’? Then you should maybe consider removing those headers until you have something to put there. Especially the friends one. Now, it kind of looks like you weren’t even capable of convincing friends to make something for them. That’s not a good advertisement. It’s especially odd since you mention this in your resume: ‘Freelancer Front End Web Developer / Graphic Designer / 2013 - PRESENT’. You’ve been a Web designer for 4 years, but haven’t had any clients, apart from doing graphic design for the LARP fest and being a lead mural painter?
This statement: “Then, as with any of my art forms; I keep working until it’s gorgeous.” Be careful with that one. Not every employer or client will be enamored with the idea of hiring a perfectionist who could potentially make the project drag on endlessly.
On the flip side.
I love both your ‘What drives me’ and ‘Never stop learning’ paragraphs. This attitude is also backed by your resume, so it’s consistent. And therefor most likely honest and accurate. I think your resume is awesome, btw! I bet some people might be jealous of what you have done and accomplished 
Hey Morrighain, thanks so much for pointing out those typos! Codepen doesn’t have spell check 
. I think I caught them all at this point though!
As for my contact page, I should have font awesome icons listing 6 different accounts… would you mind at all getting a screen shot for me so I can see what you’re seeing?? I’d so appreciate it!
For my freelance stuff, I built blog layouts and countless social media account features/graphics years ago when social media still allowed custom formatting, but I stopped for a few years when I made a career change into global account management, social media marketing, and game production. I sadly don’t have any of the work saved, and all the sites (Angelfire, Blogger, livejournal, myspace) have either been taken down or had their interface reformatted so much that my previous code is irretrievable. I’ve actually had 10+years with html/css, and graphics/illustration, so the number of years on my resume is actually quite smaller than it really should be 
. Since I haven’t figured out a way to describe this yet, I just say the number of years is shorter to make up for my small portfolio while I build new stuff, which thankfully is going quickly and I’ve got a few freelance gigs lined up. I’ll definitely think on how to rephrase it.
And, after thinking about it, I also totally hear you on the perfectionist part and will also revise that. 
Again, Thank you! I’m really grateful for you in-depth review!
Here are the screenshots.
Not sure if you are working on it right this minute, but the Projects page isn’t showing any content now either (and neither does the Contact page, which looks the same as the Projects one). They do have a (empty, unscrollable) scroll bar on the right though.
The About section works perfectly well. It’s scrollable, and the tools pop ups work great. I really like those by the way 
I do see some icons on the left side now, but very faint. I didn’t even notice them until after a while.
I am running Windows 10 64-bit at the moment. I could check my Linux laptop, but I am somehow expecting it to give the same result. I’ve also tried 3 browsers: Opera 52.0.2871.99, Google Chrome 66.0.3359.139 (Official Build) (64-bit), and Firefox Quantum 59.0.3 (64-bit).
As for the freelance stuff: I figured as much. A long time ago, I made quite some stuff as well. Nothing is left, apart from my personal Web page. I’m now thinking of at least making a screen shot and/or picture of my work, for the archives. Or keeping old code, if that’s possible. Kind of like my personal digital museum 
Hey dude I think your portfolio is pretty cool but I do have some ideas.
First off I really like the opening I was very impressed by it but then after that. the general overall design is really hard on the eyes. Something about the darkness of the screen and the neon colors is really straining for me. All the info you have in your body paragraphs are pretty good but I think it could be condensed. I think the first paragraph should be more of an overview about you instead of the “design principle” section. Try and tell a story in the order of the paragraphs.
Then you have all those tiles with your experience I think there are WAY too many. It’s good to see that you have a lot of strong areas but they are overwhelming, especially with the hover text. The hover text to me seems like it serves no purpose as some of the descriptors are identical between different things. Maybe focus on 5-6 that are really important for you to highlight and then write more for each other.
Finally I checked out your resume and I feel like you need to rework your opening statement. There are a TON of buzzwords/adjectives thrown in there that just weigh it down and it muddles what you are really trying to convey.
This is just a side note but I am also in the Seattle area. Crazy that you worked at Wizards of the Coast!
Just want to give short feedback about the tools section.
When I hover over an icon to learn more, there is a section that fades in overtop with some more information. That’s pretty neat - and here’s my feedback:
I’m able to hover on the top to middle tools easily. If I have the info section popped up, I can’t hover a tool on the bottom. Or, if I hover on a bottom tool, I have to get my mouse outside of the popped up section to be able to look at another. It’s just a little awkward ui thing, that’s all.
Hey Morrighain, thanks for getting back to me with the screen shots and your system data. Super helpful! I was actually working on it at the time that you where checking it out. It’s up again The icons on the side should be present on every window as my pseudo-signature. But I’m still not sure why the icons aren’t showing up on the contact page and that worries me. Please let me know if they’re still not showing up.
Good luck getting your previous work together!
Thanks carrmendotcom, this is all great feedback and I super appreciate how in-depth it is. I’ll try and incorporate it and let you know when I’ve made updates
Also, SEATTLE IS THE BEST. And WotC was a fun gig despite some draw backs. Love me some games!
Yeaaaah, I hear you dookwebdev and thank you. I got the idea for the hover data and started messing with it. It definitely still neds perfecting, thought it’s been tough to find a way to have it work that looks good on all devices. I first had the pop-ups coming up next to the cursor location, but I couldn’t find a way to make sure that their contents didn’t expand out of the view screen so I just locked it to the bottom while I tooled with other ideas.
@lotus I think if it’s going to be something that pops up it will take up space either way and that sort of thing easily gets in the way of normal interaction. In other words it’s a little hard to pull off without compromising on good design principles.
I suggest aiming for mobile first, since you like responsive design. What will it do on mobile?
Mobile doesn’t have hover with a mouse. If I touch an icon, what will happen? One suggestion I have is what about a modal?
Anyway- I say try to design it will on mobile first as that’s a bigger challenge. Then work out how it will look and behave on desktop.
As a side note, often hover with big automatic pop ups are usually not friendly for the user. Think about some of those huge hover pop up menus that some sites have and sometimes it’s hard just to get exactly what you want in the menu!! Makes for frustrated users!
Hi Danielle,
The portfolio page is intriguing and motivates me to keep looking.
Two comments:
Hi Danielle,
I like the sleek gaming design-tech that you’re going for. As I went over your page, I kept having an urge to see more, it stimulates my artistic and tech sensibilities. One question though, for your projects section, how did you get that laptop-mobile phone set up that displays your work like that? Did you use a template? I’ve always wondered how people do that haha…Thanks in advance for your response!
Great advice! I’m toying with the idea of having the icon divs do some sort of transform to move out of the way to reveal the information now. I’ll be able to experiment more after I wrap up my current freelance project. I’ll keep ya posted on the progress.
Thank you swayman01! I fixed my resume, and I agree with you on the text-wall that is my process section lol. I also love the idea of breaking it down the way you suggest. I’ll have to start sketching some assets to represent the different stages.
Hey IDCODER, thanks for the kind words!
As for my project display, it’s totally a template, and they can be found in most stock photo galleries (make sure the one you find is royalty free just in case). Once you find a template that you like, take full-view screen shots of your projects on the relevant device sizes and use some image editing software (if you don’t have access to photoshop, I recommend Pixlr) to fit them within the screens in the template without distorting too much. Alternatively, if you have the devices handy, you can always just set them up against a neutral backdrop with the projects open and take a pic. I hope that helps!
Your site looks great! You even have animation. Lol, I used to live in Seattle.
I would do some work with your DG logo to add some depth to it. I wouldn’t change the design at all. I would do something like add some shadowing, use a gradient, give it a shadow, etc. It looks very plain.
Your “UI+UX” should maybe be “UI/UX” to conform with how it’s normally done. I would also make it a little less “bright”. It looks like neon.
The blinking ^ button should be > because that’s the way you set it to go to the next page. I would also get rid of the border. It would look better.
The transition after clicking that button appears to try and load the next page from the right. It starts to move to the right upon click, but then just jumps to the next page, and appears to have something wrong with it. I would fix that.
I would also make your “Danielle C. Monroe” on your About page a little less “bright”. It looks like neon. I would make the pencil icon a little smaller and center it with the paragraph. It’s too big because that is where my eye is drawn to first and it should be to the text.
The text on the 4 icon boxes below that cut off the text.
I would make the gear icon a little smaller and center it with the paragraph. It’s too big because that is where my eye is drawn to first and it should be to the text.
The “Read more about my process in my Projects section!” should link to your projects section.
I think that your My Tools sections was done perfectly.
I would make the question mark icon a little smaller and center it with the paragraph. It’s too big because that is where my eye is drawn to first and it should be to the text. Same with the graduation cap.
YOU SHOULD ABSOLUTELY NEVER PUT YOUR REAL EMAIL ON YOUR SITE!!! This should help:
https://www.wordfence.com/learn/how-to-write-secure-php-code/
https://www.w3resource.com/php/mail/php-secure-mail.php
http://www.maurits.vdschee.nl/php_hide_email/
If you have content that is below the fold you need to have that floating top of the page button on the right.
Projects page looks good except for having your email. Same with the Contact page.
On your Contact page, you should get rid of the colons as they are not needed. I would also space out the 3 so that it sits right on the edge of the fold.
Your resume looks awesome to me. You might want to just put one Job title down instead of 3. Put the one job that you want the most. With 3 it looks like you are all over the place and an employer might not like that.
Also, once you pick the 1 one job, you should focus your website on just that 1, and then showcase that 1 area of expertise. Your resume shows the other skills you have so they won’t be missed by a potential employer. Personally, I would focus on UI/UX because it pays more.
I hope this helps. Don’t feel like I am putting you down at all. It looks great, but those are some improvements that I saw that could be done. I am a fellow UI/UX’er too.
The one other thing that I would personally do was get your main site off of CodePen. It may be my opinion, but it looks like you are not ready to be a professional because you don’t have your own website. It looks like you are a hobbyist.
Once you actually start working you are absolutely going to want your own host to work on projects for your employer or freelancing for a client. Plus, you will inevitably want to do your own personal projects and you are going to want to host them yourself.
Just some FYI. Good luck! I hope these improvements help you get a job!
Great site so far.
Several things I could suggest:
Make sure you have no typos and fix the alignments that are off…It looks like teh D in the initial animation is a little off, the spine of the letter is appearing alittle bit in on my screen. Might be a responsive issue, I have a pretty wide screen.
If this is where you are hosting it (on codepen), get a domain name from google domains (~$5) and set up a droplet on Digital Ocean or something similar (<$10 a month). Its all about presentation there and going professionally means ‘acting like it’. Also, Google for business is a relatively affordable way to hook up your MX record for your email (~$5/mo)
Consider revisiting the design. I like the idea alot, but you are not quite hitting the modernity note. Take a look at other designers, especially established people and agencies and take not of what theyre doing.
For example, with vertical scrolling, parallax or in-view reveals are very popular.
Here a couple of examples Im familiar with from around my area (LI, NY):
Its a really big thing to have what you have right now! Keep going!
Good luck!
