New Video Background for USGBC

Every now and then I get design-related projects with my work at USGBC. The other day I worked on cutting together videos of buildings for a new video background on USGBC’s main website. I added a consistent filter so the videos would look somewhat similar. I haven’t worked too much with video before, so it was interesting putting together something with iMovie. It’s inspired me to make a few videos for my studio art-related work sometime in the future.

USGBC building

USGBC building

PEER Website

Project Details:

peer.gbci.org
PEER was in need of an full website redesign. I began the process by creating wireframes for the user experience. Next, I developed and designed the website in Drupal. Images were Photoshopped and added to the necessary pages. I also designed icons in Illustrator to use on a couple of the pages. CSS and Javascript were used to make the website more interactive as well as responsive.

Programs Used:

  • Photoshop
  • Illustrator
  • Drupal (CMS)

PEER Website

Yoda Speak

I can’t believe it’s been nearly three weeks since I completed the WDI course. In an effort to make sure I’m staying sharp with my coding skills, I’m going to try to complete coding challenges every week and create a new app every month. Will I succeed with living up to those goals? I sure hope so!

I am also combing through my previous class assignments from WDI to try to find ways to refactor my code or polish existing work into more functional applications. So recently I decided to revisit a Yoda exercise we did. Using vanilla JavaScript, I created an application that utilizes the Yoda Mashape API for translating text into Yoda speak.

You can view the live app here and see the Github repo over here.

Yoda Speak

Redesigning USGBC.org’s Homepage

Earlier this year, I worked on reworking USGBC.org’s homepage. The main navigation was also reworked and was launched in conjunction with the homepage redesign project.

Previously, the homepage looked like this:

USGBC's website

As you can see, the logo and search box appeared right below the main navigation on every page. Thus the header took up quite a bit of real estate. The homepage itself had a carousel with banner images that were swapped out every few months.

I worked on redesigning the header so that the logo, search box, and navigational links all existed on the same line. For the homepage, instead of using a carousel, I worked on adding a video background with a text overlay and a call-to-action button. Here’s the final look:

USGBC's website

Overall, it was very exciting to refresh the look and feel of the website by making a few enhancements to the homepage, as well as the overall website layout.

WDI Day Fifty-Eight: Project 4 Presentations and the Last Day of WDI

I can’t believe that three months have already gone by, and that WDI is over. It was a wonderful experience and I’m glad I decided to go through it. Today we had a chance to work on our projects in the morning, and in the afternoon we presented our project 4. I was pleasantly surprised that a lot of people enjoyed my application. I thought it was a rough project that wasn’t fully complete, but it was great seeing that others thought it was good.

After our presentations, we did a few group activities to close off our experience at WDI. We did an exercise where we had a piece of paper taped to our back and everyone walked around writing things we liked about other people so they were receiving anonymous compliments. A couple of the students in the class created certificates for everyone that were pretty humorous. We also received GA backpacks and did a toast at the end of class.

Overall, the experience has been a really positive one. I doubted myself a lot at times towards the end of the course, but overall I did indeed learn a lot. I also met such a wonderful group of people who I hope I can stay in touch with for years.

WDI Day Fifty-Seven: Project Week 4, Part 5

Using Rails and JavaScript for my project has proved to be a good move. Instead of struggling with the technology and building out an application, I have been able to focus on building out my app.

Today was a pretty successful day – I created icons for all of the different sections of the site. I also found a fix for the weird offset issue I was running into. I also added the ability for users to change the difficulty level of the puzzles they created. Overall, things are slowly falling into place, and I’ve successfully launched all changes to the deployed app on Heroku.

puzzle-me-pictures-screenshot

WDI Day Fifty-Six: Project Week 4, Part 4

My project is gradually coming together, and I’m feeling much better about things now that I’ve changed gears. I’ll definitely need to revisit front-end frameworks next week so I can feel more confident with them.

After spending a few hours working on my app, we had a break in the afternoon where the Outcomes team had a former instructor review the technical interview process that developers often go through. Since I’m not at all familiar with that process, it was pretty insightful to get a taste of what happens.

Later I played around with adding animations to my app, and discovered how fun SVG animations are. I’ll need to look into those more in-depth since they seem to be pretty powerful. Overall, today had several wins. I managed to set up user logins, deploy my app, add image uploading with AWS, spiced up the homepage with an animation, and looked into a few other ways to fine-tune the app. For tomorrow, I hope to work on the following:

  • Adding icons to each landing page
  • Rethink the puzzle index page
  • Rework the styling
  • Try to resolve the offset issue that makes the JavaScript puzzle act weird in Chrome and Firefox
  • Add seed data
  • Fine-tune the user experience for user logins

WDI Day Fifty-Five: Project Week 4, Part 3

I woke up at around 5am today to get started on rebuilding my project since I only have until Friday to finish it. I want to make sure that I can create as complete of an application as possible. I like how when my instructor heard that I was rebuilding my project, he told me that the deadline is really just an arbitrary date since we aren’t getting graded for the final project. But I told him that I still wanted to create something complete and portfolio-worthy. And that I can always revisit these more complex applications next week, when I don’t have the pressure of a deadline – even if the deadline is considered arbitrary.

I redid my application in Rails and managed the get the JavaScript puzzle functionality working, for the most part, as I’d like it to. Tonight I’ll work more on styling the application and fine-tuning the JavaScript functionality. Tomorrow I think I’ll add user login and launch it for the first time to see how it does live. Then I’ll take a look at some smaller “like to haves” that I’ll work on tackling one-by-one.

Ever since our third project, the group one, I’ve found myself feeling a little down about my abilities as a developer. I’ve been doubting myself a lot lately, and I’m realizing the problem is that I’m dealing with too many complex frameworks and concepts. Every now and then, I think it will be a good idea if I revisit concepts and technologies that I’m more comfortable with so that I can reassure myself that I am perfectly capable of building things. Sometimes it’s easy to get lost in the noise of all the languages and techniques that are out there. It’s a good thing to reevaluate where you stand.

WDI Day Fifty-Four: Project Week 4, Part 2

Over the weekend I spent a good chunk of time working on my project. And then again all day today and tonight I alway hacked away at it. Unfortunately, I had to come to the conclusion that I need to start the whole project over tomorrow. Why, you may ask?

Well, I didn’t realize that working with HTML5 canvas and React would prove to be a bit complicated. I also realized that I don’t understand React as thoroughly as I’d like to in order to create a complete and polished product.

When it came down to it, it was more important to me that I build something new to add to my portfolio that I can be proud of. After project week, I can always explore React and the MEAN stack once more. And at that point in time, I can also take my time with my work without the pressure of a project deadline.

WDI Day Fifty-Three: Project 4 Kickoff

Today was our project 4 kickoff. The day started off with the instructors walking through project expectations and the submission process, as well as a general overview of what the project week will look like.

I decided I wanted to make a puzzle application, so the day was spent building out the core functionality in JavaScript. I also worked on planning out the wireframes and the ERD. It was pretty much a day of planning.

I’ve also decided to attempt to build the app in React with Express and Mongo DB. I’m not at all familiar with the deployment process for this particular stack, so we shall see how that goes. If I run into too many issues in the beginning, I might just build everything out with technologies I’m more familiar with so that I can have a polished app. I can always explore these more difficult frameworks later on with a different and simpler application.