jonathanly.github.io
Project 1 - Portfolio Site
Live and proudly hosted at https://jonathanly.github.io/
Design Documentation
Aim
My primary focus was to create a fun yet minimalistic portfolio design. The portfolio is a one-pager, I have always loved the style and how modular it can be when it comes to editing it in the future. The language choice used is very casual. Why? My social media presence isn't very strong yet hence why this portfolio is geared towards highlighting a bit of my personality to prospectiver employers.
Due to time constraints, I have decided to go with a bootstrap template. If time had permitted, I would've liked to make a website from scratch to really drill in HTML & CSS concepts. However, this decision had its own set of hurdles to jump through.
One-Pager Elements
About Me (Hi There!)
Very short informal introduction about myself and my current life goals. Will be endeavouring to add more information about myself in the future
Countdown Timer
This section highlights my number one goal at the moment, graduating from Coderfactory Academy! I purposely left out a title to invoke viewer curiousity to read on and find out what it was all about
Skills (What's that)
Flowing on from the timer countdown's purpose, I quickly summerised the skills expected of me when I graduate from Coderfactory Academy. Instead of displaying it in list form, I used developer icon database, Devicons.fr, and purposely selected colourful icons to grab attention. Icon colour scheme also matches my website colour theme. A very positive outcome from a somewhat unintentional decision.
Projects
Will be showcasing some of the projects I've completed thus far. Section is still in the works due to time constraints. The plan is to include thumbnails, a short desciption and links to about 4-6 of my best works to date. These works will be hosted on GitHub where the code can be viewed.
Contact me
Allows viewers to mail me directly or via supplied social media accounts
Design process
From the get go I already had a very clear idea of what I want to achieve. A minimalistic one-pager with a space themed landing image (because space and astronomy is cool!). It will also have a very clean look and use colour blocks for each section. Sections were planned to be modular so that they could be edited or removed as required.
Main inspiration came from this site by Matt Farley
Building
As mentioned earlier, time constraints led to the decision to start off with a template from startbootstrap.com. I soon learnt that a template wasn't as easy as I imagined it to be. More on that soon.
Difficulties faced
A template was used to 'save time'. However, HTML/CSS concepts are still fairly new to me and the code in the template was overwhelming. Much time was needed to breakdown and understand the code written. More time was required before I could start confidently editing HTML and CSS elements for my intended design style. In the end, I am very happy with the results I produced. Interpreting someone else's code is a steep learning curve but I came out learning a whole bunch.
The second issue I ran into was integrating a third-party open source countdown timer into my code. I haven't dabbled too much into javascript code, which made implementation quite difficult. The pre-defined CSS styling included a lot of !important statements, which was quite disruptive when attempting to design responsiveness for smaller viewports.
Initial excitement during the design process had me wanting to include extra features and themes to website. Unfortunately, my technical skills barred me from being able to incorporate those features. The lesson learnt? Keep it simple stupid (KISS principle). First build a solid foundation then slowly build on top of it.
Tools used
- HTML
- CSS
- FontAwesome
- DevIcons
- Bootstrap Framework
- Photoshop
The small touches
- My ugly personal brand logo (version 0.1)
- Countdown timer javascript plugin
- Mobile responsiveness (except for countdown timer, still working on it)
- Top nav bar removal in viewports
- Hover effects on social media links and desktop navbar
- Poor attempt at quoting Neil Armstrong 5am in the morning.
To do/Future work
- Clean up unneccesary code
- Polish countdown timer responsiveness
- Complete projects section
- Dabble with parralax scrolling code (it's so in at the moment!)