Hello all! I’m wondering if I could get some feedback on this personal project I’ve been working on?
https://6j0284w5jn.codesandbox.io/
It uses React, and I’m going to try and break it down into smaller components. I have some other ideas I want to implement like Hats, Female character, a little animation, and a way to save or export an image.
So cool man I like it
Send the source code,Its nice
It’s still a work in progress; I realize there’s some parts that can be done a better and cleaner:
(I don’t know why the thumbnail looks like that. I can’t figure out how to update it.)
So I’ve been working on this in the evenings and added a few features:
-Now there’s options to change Beard, Hats, Gloves*, and Race.
*Gloves are kindof m’eh.
Things I still want to do:
-I’m trying to break the bigger elements into Components. It’s a hard idea for me.
-I’m 50% done Facial Features.
-I still want to add a female character & maybe children.
-I kindof want to add CSS for mobile so it compresses into a single column.
-I’ll do the animations last so it’s not too annoying.
Do you think I could put it in my portfolio? Right now the only projects I have online are FCC projects and tutorials from Udemy.
dude you should put it on your portfolio!! It’s HUGE! Also try to fit it in a single screen, so that one can use it without scrolling.
This is very nice, however, I feel as if the color scheme does not fit.
The background image pattern is distracting, and the main container lacks styling along the edges. For instance, here is what the fallout skill point menu looks like:
Use the design features from this menu to make yours make it seem more like the Fallout video game.
Notes
Please hit the reply button or I do not get notified.
Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites
Great job man. Love the project.
Thank you for the suggestions! I’ve been trying to implement them but I’m not quite finished yet. (I’d also disassembled most of the app to try and add Female avatars; I’ve been trying to multitask between re-assembling & adding the new style.) So, some of the functionality is a bit wonky at the moment… 
Before: (in first post)
After: https://lxnl50myo9.codesandbox.io/ , https://codesandbox.io/s/lxnl50myo9
The main things to note:
-I haven’t fixed the borders yet.
–I’d originally planned on using the UI from FS which is kindof just a square with borders, but the ones you posted are nicer.
–I don’t use any checkboxes atm but those ones in the picture look pretty cool.
-I’ve changed the background to one from FS. No more metal honeycomb, it’s a nice scenery shot.
–I’m thinking to layer it and have a brown-to-black gradient for nicer transition into the ground.
-I’ve added 3 cursors; default, pointer, and text. (I’m not crazy about the text one…)
–FS is an iOS, XBox, and PC title, but doesn’t really have any proper mouse cursors.
–I also couldn’t find the cursor files in F4.
–So I ended up print-screening the default cursor from F4, and the other 2 are photoshopped.
-I added 3 fonts; MonoFonto, Overseer, and Futura PT Condensed. But I’m still playing around with the fonts.
–I couldn’t find the font files in FS or F4.
–But people on Reddit mentioned FNV, F4, & F76 might use fonts such as the 3 I mentioned, as well as Roboto Condensed, Berlin Sans, Gills Sans, AddCityBoy (soda bottles), Sierra Madre (DLC), and Comic Sans (?).
Great progress,
I feel as if the font is too big for your selection. Look at the example picture, and how you can nearly include 15 selectors/
@adam-weiler I challenge you to make a mobile version of your website. Fallout theme is awesome! I see you put some real work into this project.
Thanks again for your suggestions! I’m still adding and tweaking the code. I’m up to version 3 now:
https://2v1or125wn.codesandbox.io/
What’s new:
-I added a Basic/Advanced toggle. It starts off with 5 options instead of all 9 at first.
-I fixed the Random button, so it works for Female as well as Male.
-Also everything below.
@michaelnicol:
-I’ve made the font a bit smaller and each line closer together, to match the size in that photo.
-I got rid of the transparent black, I think it’s better without it.
-I’m not too sure how to combine the Buttons and Selection panes. One option is to put the “Shirt 42” on top and put “Vault Suit” right under in smaller font, but this might be overwhelming.
-Another option is to remove the “Shirt 39” text and just have “Vault Suit”, but then it’s unclear which buttons effect which style.
-I guess a third option would be for the Selections pane to float to the right-side of the Buttons pane, take up some of the white space on the side.
-The text cursor; I was trying to imitate how a web browser acts, but I wasn’t that keen on it.
-Also I figured out how to do the stylized borders on the panes.
@brandon_wallace:
-Thank you for the challenge; I added a media query to make it cell-phone friendly. I like how the text grows and shrinks as you resize the window, but the panes themselves don’t transition as cleanly.
-Thanx! Yeah, I try and work on it a little bit every night after dinner. I read somewhere it’s a good way to learn about React by coding something fun.
Try adding
background-attachment: fixed;
To your background image. Not sure if it will look all too good, but it is worth a try.
The race in the gender and race box does not change as you select different skin tones. Maybe you can change it to like “Slightly Brown” or “mixed” (etc) depending on the skin tone.
You can combine the gender & race box info with the gender & race box selection. This is because gender is very obvious (does not need info) and removing it would only leave race info which could be put somewhere else.
Notes
Please hit the reply button or I do not get notified.
Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites