Overview
There is an essential need for a portfolio to display and share past and present work especially as a designer. New to the tech industry, it is therefore an important part of the process to create a portfolio to demonstrate my progress with the goal to compile evidence of accumulated skills and how they may add value to business or organization. As a creative, it is also a space for expression and thought sharing.
Objective
For this particular project, the objective is to demonstrate how I applied my newly acquired Frontend Development skills.
Goal: How might I recreate my Wix Website using HTML, CSS & JS?
Story
(Context & Challenge)
Situation: I started my portfolio using Wix as my chosen platform. I didn't know how to code yet at that point but was about to start a Frontend Development class -- the end goal was "A Portfolio Project".
Task: To challenge myself, I decided to use my existing portfolio website to try as much as I can to replicate it, coded version.
Action: Using VS Code as my tool, and together with the Career Foundry Program and my very helpful (and patient) mentor, I went through the steps of learning to code the information and add images through HTML and incorporate the visual details with CSS. Java Script was used in the drop down menu but there is still a lot to learn and understand.
Result: I was able to include the necessary elements and I feel the overall look and theme is present.
​
*You may take a look at the videos below for the progress and results or visit my Github link https://github.com/ginpanlilio/portfolio-website to view the code.
​
The coded version of this portfolio website may viewed through this link https://ginpanlilio.github.io/portfolio-website/
How it started (or the middle of it)
How it's going
Processes & Insights
Some encountered surprises and concerns while working through the project.
-
At some point, before applying CSS, the embedded images looked gigantic
-
Non-existent margins, the need to adjust in the different screen sizes
-
Images not uploading on Safari on an iPhone but would upload in Chrome and on other devices
-
The surprise of the number of errors that showed up when checking code on W3C
-
One by one, going through the list of lines that needed revisions.
-
Part of the learning process was taking down notes and practicing. I used Codepen whenever I would research for solutions and test it out on the Codepen site before applying it to my project's code. What I'm learning though is that even with the syntax in place, there's still an aspect of trial and error in the process.
Below are screenshots of both the coded website and the Wix website side-by-side.
HTML, CSS, JS Version
Wix Version
There are some slight differences due to the limitations I have based on my knowledge of coding. Overall though, the usability, functionality and visual hierarchy are similar across both portfolio versions.
Key Takeaways
- As a beginner, I found HTML reasonably easy to understand, at least the basic knowledge of it.
- With CSS and Java Script, there is still a lot on my end to learn and comprehend to be able to make my designs more visually appealing and intuitive.
- Overall, Im glad to have this knowledge and understanding of what processes are part of creating digital products on the frontend dev side.
- My "Portfolio Project" is still a work in progress but at present, my internal expectation, which was to learn the basics and apply them in a project, has been satiated.
- To view my coded portfolio website, click on this link https://ginpanlilio.github.io/portfolio-website/
Thanks for checking out my portfolio. If you have any thoughts or questions,
feel free to send me a message. Email adresworkspace@gmail.com.