Hyper Island - The Fundamentals Module - Brief 1.
Design and develop a Personal Portfolio or Blog. The primary objective is to build upon our JavaScript, CSS and HTML skills. A secondary objective was to fetch posts from a data source e.g. JSON file or WordPress CMS.
6 weeks.
I went with a blog and set myself the following goals.
- Get stuck into Figma, have opinions on good/bad design, accessibility and site structure.
- Broaden programming skills, build a responsive site and have fun with UI animations.
- Make use of a fetch API and deep dive on dynamic pages/data handling.
Although this was a personal project, we picked a team of 10 as a support network. I built in time for others to help/learn from roadblocks on their projects too.
Figma helped me design out the blog in full and remain organised. I'm excited by the teamwork capabilities of the tool for future projects.
With a solid design foundation, building out the minimalist design was straightforward. I integrated a JSON file to fetch posts, added search functionality through JS and connected a Contact Me function via Mailchimp.
I used Axios and the GitHub API to link endpoints to my Github (name/userID/avatar_url/followers/following/public_repos) and publish it within the profile section of the index page.
Using the Google Maps API, I was able to plot Hyper Island on a map along with local pubs and customise colours to match the site design.
I integrated the WordPress REST API and used endpoints for post pages, comments and pagination.
- Just how useful Stack overflow is!
- The power of API's
- Animations are a lot of fun. I enjoyed using the AOS library and keyframes to inject personality.
- Discussing hurdles as a group and working through issues & solutions worked well and proved rewarding.
- Feel more confident in Figma, responsive design, CSS, JS and integrating APIs.
- Figma
- HTML
- CSS
- AOS - Animate on scroll library
- JavaScript
- JSON
- MAMP
- WordPress REST API
- GitHub API
- Google Maps API
- Axios
- Mailchimp