Portfolio coming together
Yesterday, I outlined my new plan for my time spent working on web development, with it being a three-pronged approach. I said I would spend some time every day working on exercises either on CodeWars or Edabit, work on personal projects, and consume Frontend Masters tutorials. I held true to that yesterday, starting my night off with about 15 or 20 CodeWars exercises, then I spent quite a bit of time working on my portfolio. I finished off the night watching Brian Holt's "4 Semesters of Computer Science in 5 Hours" on Frontend Masters. While I enjoy this course, it may not be the best tutorial to watch at the end of the night, given that it's quite interactive. It is very useful and seems to relate the basic fundamentals of computer science to JavaScript, which is perfect for me, given this is the language I decided to focus on. I may switch it up tonight and start rewatching one of Will Sentance's courses; they were so useful for me the first time around, and I suspect I'll get just as much out of them the second time around. I would watch Kyle Simpson's courses, but I've found his courses tend to put my mind into overdrive if I try to watch them right before going to sleep.
I've repeated this pattern so far today, spending about an hour going through CodeWars and completing some more difficult exercises and then moving on to my portfolio. Last night, I was able to get React-Router fully implemented into my app; it works perfectly and I can navigate around in my app with ease. I don't have any of the extra frills up and running yet, like page transitions, redirects, or history, but it serves it's purpose for the moment. My portfolio is broken into 6 pages: a homepage, skills, projects, coursework, contact, and about me. So far, I have a rough outline of my homepage, but my skills and coursework pages are fully functional. I created 3 arrays of objects today to hold data, one for my technical skills, one for my soft skills, and one for the courses I've taken. I then mapped over those arrays and created cards containing the data. I definitely was not capable of doing this a few weeks ago, but now it seemed so easy. It looks pretty good, but still fairly basic. To be honest, I want to keep it pretty clean, so the only thing I may add to it are some cool animations, like a bounce effect when hovered over and a fading in effect. I would really like to use the Pose library for React after listening to an episode of React Podcast with the creator of this library. He uses physics in a really unique way with this library, making the movements seem more close to real life than the competitors. Again, I'm not going to go too crazy here, but I do want to learn how to use this library.
This leaves me with 3 more pages to figure out: the contact, about, and projects pages. I really don't have any idea what the contacts and about pages will look like yet, but I've been thinking hard about how to do the projects page within the constraints of Semantic UI. I could do something similar to what I've done with the skills and coursework pages, making linked cards out of each project, or I could go in a different route. It seems a bit repetitive to do the same thing as the other pages, but at the same time, there's something to the fact of sticking to a distinct theme for the entire website. It would be kind of odd to navigate to another page and get a completely different look than the rest of the pages; it could seem somewhat incongruent. Semantic UI has quite a lot to offer with different types of components, so I will have a look around at what my options are before I start creating it. Before I get to that, I still have quite a bit of data to input into my coursework and skills pages before they are complete. While they are fully functional, I've only put a handful of skills into my arrays and about half of the courses I've taken. I'm also going to add a statistical component that reduces the hours from each course object and gives me a running total of the amount of hours of coursework I've completed and throw that on the top of this page. At some point, I'll be refactoring these pages and breaking them down into subcomponents to clean it up, but that's further down the road.
Until tomorrow!