arapl3y / cfa-major-project-1

Personal portfolio

alexrapley.com

Personal portfolio project for Coder Factory Academy Term 1.
Built using HTML, CSS, jQuery and Ruby on Rails

---

The Process 📐

My goal for this project was to create a clean, minimal and modern portfolio page. I took my previous portfolio design and replaced images with colour gradients, straight lines with skewed lines and a number of other alterations to create a modern and engaging experience for the user.

Previous:

Current:

Most of my design choices were made after compiling a small check list on paper...

I also used Trello to make sure I kept to my original plan and was fulfilling the outcomes I had set for the project...

Due to my design being image heavy, I decided to use Optimizilla to create optimised, minified copies of my images which drastically decreased load time.

The Design ✏️

My favourite example of engaging, clean web design at the moment is https://stripe.com, so naturally when given the task of revamping my own website, I took a lot of inspiration from Benjamin de Cock's designs.

Two of my biggest shifts in design were using an animated colour gradient for backgrounds and condensing my introduction blurb translations into one flippable card. I used David Walsh's CSS Flip guide and Ian Forrest's Gradient Animator to bring these ideas to fruition.

I also implemented a new contact form which provides the user a quick and simple way to get in touch. The form is built on Rails and Mailgun.

Start Bootstrap's Freelancer Theme was also crucial in determining my initial layout.

The Projects 🎨

The bulk of my projects section is made up of web application challenges completed as part of FreeCodeCamp's Front End Development certificate as well as Rob Dey's Essential Web Developer Course.

I've started to get very interested in Virtual Reality, more specifically WebVR and decided that I'd like to try and create a WebVR experience as part of my portfolio. I made some decent strides but the project is still definitely unfinished and in its early stages. The project is accessable by clicking the VR HMU icon in the bottom left of the screen.

I used the A-Frame Framework in conjunction with A-Frame Extras by Don McCurdy. I also got a lot of inspiration from Eddie Barkman's VR Design Portfolio.

Thanks for reading and enjoy the portfolio!