Portfolio Creation Process
The portfolio you create may well be the first thing a perspective recruiter sees when they consider your application. It says a lot about how you code and what your mental map looks like. Having a portfolio in the first place could give you a big boost in chance for getting hired. With this in mind I set out to create one of my own. Here I will explain my creation process.
Planning
First, I created Kanban board on Trello to plan track my progress. On each Kanban board I recorded the tasks I needed to create an effective portfolio. When I thought I had a good plan setup a presented it to a fellow developer who then gave me the push to ask how I will know if a task is at risk of getting left in the dust. I decided it was at risk if I notice a task gets left in a position while other tasks keep moving. Looking back I could had created this board better if I first broke it into epics and then user stories rather than just tasks so I can see the work from the end users perspective.
Then I got started on my list of to do items, which started with gathering information as to what a recruiter is looking for in a online portfolio. I used a simple Kanban setup I found online. I would list my ideas, develop them myself, request other developers to review my work, and then release it to the master branch. This was a good way for me to get my toes wet with applying the agile values and principles.
Designing
Next, I put together a basic design of what this might look like. For this I used adobe XD. I then took my design to a few developers I knew and asked for input. The components of usability are efficiency, learnability, familiarity, simplicity, mapping, motivation, trust, and visibility. After a few iterations on the design, trying to make it as usable as possible, I came up with the current one. Without a doubt it could still be improved upon so feel free to let me know if you have any insights on this.
Building
Then I put together some JS, CSS, and HTML to build the site from scratch. I initialized a git repository and created branches for new features and merged those with a release branch for testing until I was sure it was working as intended and then merged that branch into master. For me this meant a branch was created when I started working on a Kanban card and removed when the work was finished and merged back into the release branch.
Transferring to a Framework
Once this was finished I focused my efforts on transferring this to the React framework. I have been using freecodecamp.com to learn this framework. A framework is a tool to speed up the development of a website. The advantage of transferring my project to React code is the way react splits up the code into components. I created components for each logical division in my framework. Here is my final website.
Refactoring
While developing the site in react I realized several variables could be named better and some of the functionality was more complicated than it needed to be. Specifically, the generation of the tabs at the top and the dropdown version for mobile was two separate sections in the html and was created when the button was pressed. I replaced this design with one div that displays differently on mobile and does not need to be created or deleted when the menu icon was pressed. The more work I did the better I understood what I needed the end result to be until I got there. I am certain this portfolio will need to continue to change to insert better projects as they come and avoid software rot but regardless I am very happy with my current portfolio. Thanks for reading!