Wednesday, August 15, 2018
NOTE: This site underwent a significant transformation since this original post.
One year ago today, I graduated from the New York Code & Design Academy web development intensive program, and was lucky to land my first gig with an awesome company called Hatch Apps as their frontend developer. On this anniversary, it only seems fitting that I unveil my new portfolio website to the world! ("Hello, World!"?)
I built this website over the course of a month and a half with design assistance by my friend and co-worker, Ramzi Nahawi. He worked with me to come up with an overall theme, and I filled in the details of functionality, style, and UI. I'm most proud of the planning that went into it: before putting any code in an editor, I was deliberate about the steps I would take to bring this site to life. In short, I worked on bringing black and white to the screen, then worked on the functionality of including blog posts and a contact form, and then added layout and styling.
The site is built from scratch entirely with Vue, an awesome JavaScript UI library and in my opinion one of the most developer-friendly out there. All client-side routing is handled using Vue-Router, and Vue-Meta helps me optimize SEO for the site by dynamically updating meta information on a per-page/per-component basis. I spun up a Node/Express server to handle API calls to third-parties, such as the incredible ButterCMS headless blog engine (it's free if you use it for personal websites! I highly recommend it) and Google Firebase to capture contact form submissions. For hosting, I'm using Heroku.
I implemented Animate.css to do much of the heavy CSS animation lifting, but added control to some of those animations using JavaScript (check out the Portfolio page on your desktop and refresh: see how the project cards enter the screen different/randomly each time? That's fun, right?). Font-Awesome is supplying all the icons and was especially helpful as I moved the navigation entirely down to the bottom of the viewport on mobile: icons - as opposed to words - allow for a more efficient use of screen real estate and take advantage of the natural thumb position when using a phone. I even included a charting library (on the About desktop view) called Chart.js to help visualize my professional/hobby experience.
I'm still in disbelief that I was able to pull off the career switch, become gainfully employed, and truly enjoy every second of my day-to-day job. While I've learned a lot, I still am at the bottom of the mountain and cannot wait to continue the ascent. I love talking to anyone who wants to hear about my metamorphosis from communications professional to web developer. Over the next four weeks, I will be posting a series devoted to explaining my transition in detail, including:
More to come!