First Portfolios: The Good, the Bad, and the WHY GOD WHY?
In which we talk about first portfolios and have a proposition for you…
If you’ve ever taken an intro to HTML & CSS course, chances are you’ve been asked to create a portfolio website to show off all the projects you haven’t done yet. It’s a new developer’s rite of passage: get your domain and hosting and FTP on and voilà… you put something on the internets that you hand coded and it’s exhilarating… for like, 2 days.
Today we’re talking about our first portfolio projects, what we’ve learned, and how we’ve grown since then. We’re also gonna talk about how you can share your first portfolio and make an open source contribution at the same time. Sounds good, right? Well, read on!
My first portfolio website was the final project for my intro to HTML & CSS course in Udacity’s Front End Developer Nanodegree. I was a bright-eyed young dev with a passion for “clean and elegant” code. Don’t get me wrong, I still love an efficient and sophisticated solution, but um, that’s not exactly unique or riveting stuff. My portfolio was also non-existent, so I had to fabricate projects from half-formed ideas to complete the assignment.
The main thing I learned, besides Bootstrap classes, was that a portfolio should evolve with you, and continue to showcase your skill level and the work you have done. I am currently on the fourth iteration of my portfolio, and already thinking about how to make it reflect all the new things I’ve learned recently. It sometimes feels like keeping my portfolio up is a full time job, but keeping the page simple minimizes update fatigue.
When I completed my first HTML+CSS class, I launched a static, single page website that had nothing to do with me. It made me really uncomfortable, because it was my domain and if I told people about it, it’d been like showing you a paint-by-numbers instead of an original.
I used a class break to do something about that… I moved sections around, changed colors, eliminated pictures here, added pictures there, changed fonts… I added a portfolio page with the previous version of page and another similar project and a bunch of text. I started a blog section, and since it had no real back end, it would’ve been a bitch to maintain, but I knew how I could do it, so that made me happy. Basically, I had a lot of practice and tbh it’s not quite state of the art but I’m still proud of it being the first thing I did. I once adopted a hella ugly kitty, and I loved her for being ugly and demanding and a total weirdo that didn’t know how to be a cat… it’s a similar feeling…
I never updated it to responsive because I started focusing on WordPress and that’s where I am now… taking aaaall the time in the world before it’s officially live, and while I finish my first WordPress studies, I go and play with it once in a while or whenever I learn something I want to practice more.
I know it won’t be definitive, but it will certainly be easier to maintain and customize and ultimately that’s what I want to sell as an experience. I’m putting my code where my mouth is.
The first website I built from scratch was a static one page with a structure borrowed heavily from my first Skillcrush coding project. I was happy with my achievement until I opened the site on my phone. It looked like amateur hour and I signed up for the Front-End Developer blueprint to learn responsive development. While the static page took a few hours, converting it to responsive took eight hours, some tears, and a sour mood (Remember: mobile first, folks).
I’m now preparing my next round of portfolio development. I’m enjoying the process but I know I will dislike it in a few months. Le sigh, the life of portfolio making.
It’s understandable if you want to change it every few months because you’re learning new skills. Resist the temptation or else you will be in a never-ending portfolio cycle when you need projects to display for your portfolio.
So, what about your first portfolio?
Now that we’ve shared our first portfolio project, we want to see yours! We also want to get you contributing to our first open source project, a first portfolios gallery website we expect to launch on February 10.
We hope to receive at least 12 PR before that. If you’re a newbie (like us), we promise you it’s super newbie friendly, you can tweet at us if there’s something you’d like us to make more clear. If you’re a ninja, rockstar, witch, or saint of code, consider how inspiring it’ll be for us newcomers to see where you started. So, are you in? Keep reading and follow the directions to submit your first portfolio project to our gallery and stay tuned for updates on when the gallery goes live!
How to submit your portfolio:
Step 1: Make sure your portfolio is hosted. We recommend you host with Github pages or Firebase. Github pages is easy and free, Firebase is also good for quickly deploying a website. Host your first portfolio with one of these methods separately from your professional portfolio so it can stay the same indefinitely and remain a point of comparison to all the new things you will accomplish! You will also be able to add a link to your current portfolio to easily compare.
Step 2: Grab the link to your first portfolio.
Step 3: Fork the repository for the project.
Now that you have the link to your portfolio, you will need to fork the repository for the project.
Within the portfolios folder, use the example.js file as a template to create a new file with your profile information.
Add the new file to the portfolios folder in your fork of the repository. Once you have committed the new file, you will be ready to start your pull request!
Step 4: Submit your pull request! Go to the master repository and select the button that says “New pull request.”
The Compare Changes page will load, and you will need to select “compare across forks.” The base fork should be the master repository, the head fork will the version that you are submitting. Click the green “Create pull request” button.
On the next page you will need to fill in at least the title, and optionally add more information about your pull request. A title describing your filename will be plenty of info for this contribution. Once you have filled in that information, you can click the next green “Create pull request” button.
Step 5: That’s it! Now just relax and wait for your submission to be merged!
