View The Website here.
(August 2022)
My main focus for this project was to get a presentable portfolio page ready in time for The School of Code’s graduation event. I tried to design a simple, clean site that I could realistically build in a short time, given the skill set that I had at the time.
(May 2023)
Although the website is functional the code for this project is a bit of a mess…especially the CSS. I made the majority of this site in my free time towards the end of The School of Codes 16-week BootCamp in August 2022. My main focus was to get it complete by graduation and I didn't really give much thought to structure or readability. After coming back a few months later to add a hamburger menu and a couple of other smaller features, I quickly realised what a mess it is. I managed to navigate the code and make the necessary adjustments, but it was a very humbling experience in the importance of writing clean and maintainable code.
"Leave the campsite better than you found it.” Having to navigate through messy code just led to me adding more messy code to the codebase as there was no discernible structure to use in the first place. I intend to come back and clean up the code when I have some more time. Thankfully I feel that my more recent projects are much better structured and easier to navigate.
|
|
|
|
-
Week 3 of School of Code was UI/UX week, and our homework task was to design low-fidelity and high-fidelity wireframes for our Portfolio site. I used these wireframes to build the site later in the course.
-
I started off by putting myself in the potential user's shoes and created some user stories and user personas. I tried to design the site for a potential employer who doesn’t have much time and likely looks at dozens of portfolio sites a day. Thus, I imagined that they would want to see a short and to the point About Me section, easy to view contact information, clear links to my Resume and projects etc
-
I also decided that I would include a few pictures of myself in the About Me section, as I feel that a picture can say a thousand words.
-
I then went on to create Low-Fidelity wireframes in Miro and High Fidelity Wireframes in Figma. The links to which can be found below.
|
|
-
This was my first attempt at designing a website independently. I really enjoyed putting myself in the user's shoes during the design process and thinking about what they would expect and want to see and where items should be placed in the flow of the page.
-
This was a great opportunity to get some reps in with Miro and Figma. I found Miro easier to pick up, but more limited in features, whereas Figma seemed to be the opposite. I definitely plan to take a deep dive into Figma soon.
-
I decided to build the site using Nextjs, as I felt it would be a good opportunity to challenge myself and play with some new tech. I also felt that I could take advantage of the Server Side Rendering and Lazy Loading Images feature that Nextjs comes with out of the box.
-
This was the first time I had made a fully responsive website and CSS Grid helped to make it much easier than I anticipated. I first completed Net Ninjas amzing CCS Grid layout course , then applied the principles I had learned there on my portfolio site. Although I understand that it is usually best practice to follow mobile-first design principles, I decided to focus on the desktop version first due to time constraints. (I imagined that most potential employers would view the site from a desktop/laptop at work rather than from a phone.)
-
As I had designed a single-page site, I initially thought that I could simply put all the styles into the General Styles sheet. However, the style sheet soon became very long. Although I had labelled all the class names clearly and split the CSS styles into relevant sections, I feel that the stylesheet would probably be difficult to navigate for another user. Next time I would definitely take advantage of CSS modules, especially as I have had a lot of practice with it since.
-
I deployed the site to Netlify as I intended to take advantage of their form feature, however, I had a lot of trouble implementing this. After more than a couple of hours of dead-ends and frustrations with Netlify forms, I decided to use Formspree instead and the process was seamless. Therefore, next time I would probably deploy with Vercel as it is designed explicitly with Nextjs in mind.
-
I would like to refactor and clean up the CSS code, as I think it is pretty sloppy at the moment. (As my priority was to get the site ready by August 24th)
-
In the future, I intend to completely redesign the website and build it with Tailwind. I have a Figma design course and also a Tailwind CSS course that I plan to work through and then apply the principles learned there to build the new site.
- Nextjs
- Formspree
- Figma
- Miro