PHP CMS

The other day I worked on putting together a custom PHP CMS, where admin users are able to create, delete, and edit other admin users. Admin users are also able to create content and rearrange the way the content appears in the main nav.

One challenge of this project was to work on creating a secondary menu that presented additional information to the admin user. If you’re curious about the code, you can find the GitHub repo here.

Here’s a screenshot of the homepage for the CMS:

PHP CMS

And here’s what the interface looks like for managing admin users:

PHP CMS

This project was a bit of practice for me to get more familiar with PHP, since it’s important to know PHP when working with WordPress or Drupal websites.

New Design for Green Apple Website

Today we relaunched the greenapple.org website. The site was in dire need of a facelift – it wasn’t responsive, it had an odd user experience, and the CMS made it difficult for editors to make updates.

Here is what the homepage previously looked like:

Green Apple old screenshot

And here’s what it looked like after I overhauled the design:

Green Apple

Our content specialists simplified the website’s content, and I worked on giving the overall look and feel a more modern look. I selected images for the new site, created icons, and coded it so that editors can easily swap out banner images. The website also uses SASS to make it easier for me to make global changes to colors, padding, and so on and so forth.

It’s always fun getting to rework a website, and compare and contrast the changes made in any given update.

New Design for PEER

Today we relaunched the PEER website. The site’s content was simplified, which meant that fewer pages were needed. I used this as an opportunity to simplify and clean-up the existing look and feel. When it comes to web layout and design, I always lean towards minimalist tendencies. Minimalist designs don’t distract from the content, but complement it.

The PEER website homepage previously looked like this:

PEER website

And the new website homepage now looks like this:

PEER website

You can see that the main navigation was simplified and a larger, bolder image is being used for the main banner. The main navigation was also adjusted to take up less real estate on the header. The fonts were also tweaked to create a more modern look.

The process of updating the website included finding strong images and finding ways to code the layout so that it would shift smoothly when viewed on different devices. It also included creating additional views in Drupal to manage the updated Resources section, and a different format for sharing published articles.

The previous version of the site was something I designed a couple of years ago. It’s amazing how quickly your style can change and improve over time.

Deploying a React App to GitHub Pages

Earlier today, I worked on putting together this Sticky Note App, in an effort to get more comfortable with React.js. The application uses React.js, React DOM, and React Draggable.

After completing my application, I was about to tackle deployment with Heroku, since I’ve become pretty familiar with deploying various applications that consist of different stacks on Heroku.

However, this application was a lot simpler, so it seemed like using Heroku would have been a little excessive, especially since there’s no backend component for this application.

So I decided to tackle deploying the application via GitHub pages – which is already one of my favorite ways to deploy simple applications since I host all my repos there as well.

The first step I did, was use the create-react-app command in my terminal, where I then moved the various components of my simple React application. Then I followed the following steps:

Step 1

Edit package.json by adding a homepage

"homepage": "https://[insert username].github.io/[insert project repo name]"

Step 2

Run npm install --save-dev gh-pages

Step 3

Edit package.json by adding a predeploy and deploy script:

"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

Step 4

Run: npm run deploy

And there you have it, a simple enough solution for deploying those simple enough React applications.

New Design for GBCI.org

This week we recently launched a new design for GBCI.org. I used Flexbox a little bit with the layout, and tried to find better images that could create more of an impact for the viewer. I also adjusted the icons and tried to style the site in such a way where CMS editors can make changes to background images without having to touch the CSS.

Here’s a look at the new homepage:

Here’s actually what the previous homepage looked like. I designed this one a couple of years ago:

Before I started working at USGBC, the GBCI website looked like this:

New Design for Art Portfolio Site

When I’m not busy working on websites or building applications, I like to make artwork. My work as an artist is actually what got me interested in becoming a web developer – the first website I made was for my artwork.

Over the years my art portfolio website has gone through a number of redesigns. The last one was back in 2010, so it was long overdue for an entire overhaul. Here is what the old homepage used to look like:

And here’s what the homepage looked like after the redesign:

I ended up redesigning my logo and simplifying a lot of the pages. I’m still in the process of reworking several pages, as well as adding an online store for selling my original artwork, but for the most part the heaviest lift is out of the way.

New Design for Portfolio Site

I finally got around to updating the look and feel of this portfolio website. Previously the site was bogged down with too many pages, and from a technical stand-point, I wasn’t taking advantage of customizing templates very well with php. Below is actually the way the homepage previously looked before the redesign:

Megan Coyle's previous web portfolio design

With this updated look, it was important that I focus on page load time, and also simplify the overall layout. The font sizes on the previous site were also fairly large. And lastly, the older site focused primarily on my web design work. I wanted to rework the entire site so that it could focus more on my development work.

GRESB Website

Project Details:

gresb.com
GRESB was in need of a new marketing website redesign. I began the process by putting together a rough draft of a site by customizing a build of Drupal. After going through a series of edits, I also worked on adding in JavaScript functionality for carousels and collapse/expand panels. The new site was launched at the beginning of this month.

Programs Used:

  • Drupal (CMS)
  • JavaScript
  • Photoshop
  • Illustrator

GRESB Website

William Coyle Portfolio Website

Project Details:

wtcoyle.com
I created the logo and manipulated William Coyle’s photographs for different sections of the website. After completing the website with Dreamweaver, I later reworked the entire site with WordPress so the client could make updates.

Programs & Technology Used:

  • jQuery
  • JavaScript
  • CSS & HTML
  • PHP
  • Photoshop
  • Illustrator
  • WordPress (CMS)

wtcoyle_1-website

wtcoyle_2-website

USGBC STUDIO Website

Project Details:

studio.usgbc.org
This was a collaboration with one of the designers on my team. I worked on developing the user experience and framework. The other designer worked on fine-tuning and editing the overall look.  I also worked on customizing a WordPress theme so that our non-coder team members would be able to make updates to the website.

Programs & Technology Used:

  • jQuery
  • JavaScript
  • CSS & HTML
  • PHP
  • Photoshop
  • WordPress

Studio USGBC

Studio USGBC