DEV Community

MarsacKg86
MarsacKg86

Posted on

1 2

Creating A Portfolio Site

So Week 11 of theClubhou.se Coding Bootcamp. I was excited about designing and learning to use new tools to help get across my vision(HA!). We looked at resources for three different design styles: Brutalist, Flat, and Material. We started with making button designs using Figma. Relatively easy enough but then when it came to adding a text element (which went through too many iterations for three sentences) and a header(thankfully it was just my first and last name) it became abundantly clear that layout is hard. We made three more designs for all the components using each of the three designs. All looked pretty blah, if I'm being honest (not the designs fault but the designer). Then we were told we could use any design elements we wanted but had to write out a style guide for those choices. Well hell! I don't know why I wanted to use a certain rule/formatting/style over any other. How was I going to have any of that make sense with words? Then had a little one on one psychological profile meeting with the instructor to try to get at the root of what would communicate me on the page. I'm too eclectic to really nail down anything, except I like grey and I wanted a brush stroke font for my name as the header. Then the TA suggested using coolors.co to randomly select a color palette that could help me figure out where to go. So now I've got these five colors to use. They are the colors and no questions from the instructor are changing 'em! Update on those colors, come to find out one of my colors isn't very Accessible friendly so I'm gonna have to change that one. Since Google fonts was failing me, I created an SVG in Figma using the pencil tool and did my signature, header complete for now. Hope to find a free, open source tool to use a different brush to get the effect I'm actually looking for. I ended up doing a lot of try this px Ctrl-S, nope what about this, with the live server in Visual Studio Code to see my changes and hope my "vision" would come to life. Now realize I should've just been using CodePen to see all the changes, would've saved me all that Ctrl-S. Well anyway. I've got four pages and a .css. What to do next, publish it? How the instructor wants us to do that is TBD.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (3)

Collapse
 
micahlt profile image
Micah Lindley

Probably publishing will be the next step. You can use GitHub Pages to publish the site for free on a GitHub subdomain. Just upload all your files to a new repository named MarsacKg86.github.io

Collapse
 
marsackg86 profile image
MarsacKg86

Thanks! I didn't know that GitHub had that.

Collapse
 
micahlt profile image
Micah Lindley

:)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay