Design Portfolio from Scratch
For my final project I decided to code my design portfolio from scratch. I do now understand why so many people do not recommend this unless you are a software developer. But I figured it out with Google as my best friend.
Since I did not have a design portfolio already, that was the main problem I was trying to solve. However instead of using squarespace or wix I decided to expand my coding knowledge further and develop my portfolio from scratch. My goal for my end product was to have a fully functioning coded portfolio site for showcasing my design capabilities and skills to stand out in the job application process. But, I wanted to practice my coding skills and build my portfolio site form scratch as an alternate way to standout.
In this project my goal was to get more familiar with javascript, css, and html. I started working with different resources that RJ provided us in class, and used these to build different html pages in Visual Studio Code and also incorporated javascript and css. I started off using frameworks and libraries from w3schools and put these together to build the home page. Then when I felt satisfied with my home page I moved created my contact, about and projects pages. I added more and more data to the pages, until I was satisfied with the final result. This was a long process because I had to run my localhost over and over again to find out what particular codes did and how they worked. When the individual pages were done, I worked on the web application so that the html files would communicate with each-other.
Process
I started out by creating a repository in Github. In VS code, I first added one index.html file that was going to be my main landing page/home page.
I browsed around on the internet looking at different design portfolios to get new design, navigation, and style ideas for my webpage. Once I found the layouts I liked, I inspected the elements to figure out how these were coded.
Since I had never coded a page with multiple html links, I had to do some research on how that is done.
I wanted my website to have three pages, so I added 2 more html files: (1) About and (2) Contact. I also added a CSS file and a readme file.
After doing more research I realized that most designers have their own project page. So, I added another html file for all my projects.
I started working on the navigation bar by pasting codes from sections in different templates that I liked. Since my navigation bar would get lost in my content when I scrolled on the page, I used javascript codes to increase the visibility. I also wanted my top menu to turn into a hamburger menu on small screens, so I used these codes:
Then I started creating a photo grid for my home page that would have my projects in it. I experimented with different libraries in w3schools until I was satisfied with my result.
I also wanted a header image that would give my home page more content and give it a fun Parallax effect, not allowing the image to move as I scrolled, while my project images moved up on the page.
For that to work properly I had to add these codes to my stylesheet:
For my photo grid and header, I also had to insert codes into my stylesheet so it would be displayed as I imagined it to be.
I decided to stick to one font, and added the color I wanted for my font as well as my backgorund.
For my other pages I used the same styles, but changed the content of the pages.
When I was finished coding the page structure in all of my html files, I added images dragging them one by one into my workspace. I also added the html links to my html pages so that it would bring me from one page to another.
When this process was completed I felt happy with the look of my website. I then went on to Namecheap and purchased a host and a domain. I uploaded all my files to the File Manager in the cPanel.
When I thought the hardest parts were already completed, I was wrong. I had a hard time figuring out how to add all my files to the File Manager in the cPanel so that my website would look the same as it does on the local host on my computer.
My contact page could not be located when I pushed the link on my website. I contacted customer support, and they reinstalled the Comodo SSL Certificate and reset my cPanel to default. When I reuploaded my files again these issues were resolved.
One last thing I tried to do that did not work out the way I wanted was the submission function on my contact page did not work. I tried adding a mail.php page so that when the form was filled out it would send me an email and redirect the visitor to a different page that would confirm email submission. I could not figure out how to make the codes I wrote in my html file coordinate with the codes in my php page.
Using Terminal, I committed the new files to my repository on Github.
Summary
The process of building a portfolio site is similar to the work I do as a designer. The products we create as designers have a target user group and is used for specific cases, similar to the creation of a web portfolio. In both cases you need to consider the rationale behind the decision of building the product and also the user goal so that it is easy to interact with.
Throughout the process I became more familiar with structuring a document based on the framework used and how to utilize javascript to filter a list of items in my html pages. The biggest challenge for me was using front-end frameworks and making them coordinate with the other styles I had already created for my home page so that they would stay consistent. Another challenge I encountered was to combine the different pages into one CSS file because my html pages had different styles. During the process of writing codes, I also realized the importance of having a clean structure in all the files. I had to constantly update my links in my code, so, if I had started out with a proper structure before writing the codes it would have made my process more efficient.
When I was done with the coding, I started looking for places to buy a domain and somewhere that would also host my website. I ended up using Namecheap. Since I had never done this process before, I struggled a lot trying to add my codes to the File Manager in the cPanel. I deleted folders I was not supposed to and ended up having to get a member of the support team to reset my cPanel to default. During this process, Namecheap’s live chat became my best friend and is the only reason my website is up and running now. It took around 10–12 hours for me to resolve all these issues and finally, I have a working website.
The future work for my portfolio is to add all of my best design projects into my portfolio so that the site is complete and ready to send out to employers when I apply for jobs. I will also try to resolve the issues in my contact page so that when the contact form is filled out and someone sumbits their message it will show up in my email inbox. I am certain that I will play around and add changes to the layout and structure of my website because I noticed in the development process, I would constantly change things as I went on and I would never feel 100% satisfied.
The major takeaway from this project is “learning by doing”. Starting out I had only tried creating simple html pages. Trying out different codes and then running my localhost over and over again and deleting codes that didn’t do what I wanted them to do was a never ending process. This turned out to be a very interesting process and I gained a sense of how to utilize web technologies to solve problems.
