Final Project Idea: Personal Blog/Porfolio
Nov 2024 - Dec 2024
Summary
Challenge:
As a final for the web programming class, I have to create a web-based project from concept to execution in order to showcase my creativity and development capacity.
Role
Designer & Developer
Design Tools & Methods
Figma, "Pen-and-paper", Octopus.do
1.What this website's primary functionality?
A portfolio allows you to present a cohesive and professional image and serves as tangible evidence of your skills and achievements. It also allows you stand out from other candidates by showcasing your unique abilities and the quality of your work. Similarly, a blog allows a person a platform to share their thoughts, experiences, and passion. It can serve as a personal archive where you can document any achievements and milestones.
2. How's this website's page heirarchy like?
Through a site map, I developed a page hierarchy with a homepage being displayed first and foremost. In addition, an update section can be seen alongside with the welcome page, but the update page will be able to removed if the user wishes to. There will be links to four other pages; projects, media, blog,and guestbook/contact.
I used the sitemap to create a low-fidelity wireframe of the website through Figma in order to decide on a final project. I ended up deciding in a design that mimics that of a computer screen and the navigation bar being folder icons.
3.What frameworks/libraries do you want to use?
I plan to use some animation framework, such as anime.js, in order to create more fluent animations when clicking on the tabs rather than the tabs just appearing when clicking on the icons. I want to be able to code my portfolio without any frameworks, but in order to avoid hard coding the website with just HTML & CSS, I will try to use react.js despite my lack in experience with the framework.
4.Ideas on the aesthetics?
I want the website to mimic an old retro computer, but I also want to add a few of my favorite colors since this project is more of a personal project. When creating coding practice 3, I really liked the color palette I chose for the website. However, I'm undecided between this color palette and the color combination of pink green. For now, I will focus on creating the features on my website and add on the color palette to decided what looks best overall.
In terms of font, I do have two fonts in mind: VT232 (right image) for the majority of the project (headings, text, etc.) and Baloo 2 (left image) for smaller text (captions, buttons, etc.)
5.How will you plan your time? (Timeline)
Nov 06 - Nov 13: Brainstorm, plan, and design the beginning of your projectNov 13 - Nov 20: Create a design pitch for class
Nov 20 - Dec 11: Create the final product
Dec 11 - Dec 18: Do final edits to the final product and launch the final product using Netlify
Dec 18: Present final product
Back to Top