Portfolio

Practice Projects

React-Based Image Search

  • Source: Modern React with Redux by Stephen Grider (Udemy)
  • Date: September 2019
  • Skills & Tools:
    • React
    • API requests
    • fetching data
    • async/await
    • axios
    • Unsplash API
    • handling user input
    • search feature
    • DOM Refs
    • Semantic UI
    • CSS grid

React-Based Image Search

This app returns a set of images based on the user's search term and displays the images in a fitted gallery with no white space in between images, despite differences in size.

To use this app, type in your search term and press "Enter."

  • Used create-react-app to initialize project.
  • Created each major component for the intended app–App, SearchBar, ImageList, and ImageCard.
  • Wrote get request to Unsplash API using async/await.
  • Used arrow functions to bind the "this" keyword.
  • Use destructuring to get properties from Unsplash images.
  • Used componentDidMount() to set some image property values.
View Live View on GitHub

React-Based Scoreboard

  • Source: Treehouse Courses
  • Date: August 2019
  • Skills & Tools:
    • Create React App
    • React Components
    • JSX
    • state
    • lifecycle methods
    • Pure Components
    • React Developer Tools
    • destructuring assignment
    • PropTypes validation
    • design patterns
    • modular JavaScript
    • ES6/ES2015

React-Based Scoreboard

This app serves to keep score of a game. The player(s) with the top score will receive a gold crown.

You may:

  • Add and remove players.
  • Add or substract from a player's score.
  • Start, stop, and reset the timer.
  • Installed Create React App via npx/npm.
  • Created components for each major part of the intended UI App (for overall scoreboard), Header, and Player.
  • Kept components organized into modules with imports, exports, and named imports where necessary.
  • Made data flow unidirectional by lifting state from child components into parent App component.
  • Created Counter component (used within Player component) with feature to increment and decrement player's score.
  • Created Stats component (used within Header) with features to keep track of total players and total score by passing down props.
  • Created controlled component AddPlayerForm with features to add a new Player component to the scoreboard and manage id numbers as players are removed and added.
  • Created Stopwatch component (used within Header) with features to allow players to start, stop, and reset the time using Component Lifecycle method componentDidMount() and componentWillUnmount().
  • Created Icon component with feature to crown the player(s) with the highest score.
  • Used React Developer Tools to confirm changes in state.
  • Added PropTypes validation to each component to facilitate debugging.
  • Deployed React project to GitHub.
View Live View on GitHub

Public API Requests (Employee Directory)

  • Source: Treehouse Full-Stack JavaScript Techdegree
  • Date: February 2019
  • Grade: Exceeds Expectations
  • Skills & Tools:
    • Fetch API
    • Random User API
    • JSON
    • array iteration
    • filter search
    • jQuery
    • modal slideshow
    • CSS grid layout
    • flexbox

Public API Requests

Communicating with APIs allows you to work with microservices and with vast databases to build useful tools and relevant information quickly and easily. You can build utilities, games, infographics, and more. You can also integrate, display, and analyze social media and large data sets without having to create and curate them yourself.

Awesome Startup is a distributed company with employees working all over the world. They need a smart way to for employees to share contact information with each other. In this project, you’ll use the Random User Generator API (https://randomuser.me/) to grab information for 12 random “employees,” and use that data to build a prototype for an Awesome Startup employee directory. You’ll request a JSON object from the API using fetch and parse the data so that 12 employees are listed in a grid with their thumbnail image, full name, email, and location. Clicking the employee’s image or name will open a modal window with more detailed information, such as the employee’s birthday and address.

© 2019 Treehouse Island, Inc.
  • Developed layout and employee profile cards according to mockup.
  • Styled mobile version (not provided in mockup).
  • Developed modal to display full profile.
  • Styled modal content for mobile view.
  • Added slideshow functionality and animation to modal profile-card.
  • Used Fetch API (successor to AJAX) to display 12 random users from the Random User Generator API.
  • Added functionality to filter the employee profiles on the page.
View Live View on GitHub

OOP Game Show App

  • Source: Treehouse Full-Stack JavaScript Techdegree
  • Date: January 2019
  • Grade: Exceeds Expectations
  • Skills & Tools:
    • object-oriented design
    • user-keyboard input
    • modular JavaScript
    • jQuery
    • jQuery UI animations
    • arrays
    • CSS @keyframes animations
    • modular CSS
    • refactoring code

OOP Game Show App

Create a browser-based, word guessing game: "Phrase Hunter." You’ll use JavaScript and OOP (Object-Oriented Programming) to select a random, hidden phrase. A player tries to guess the phrase by selecting individual letters from an onscreen keyboard. Can they guess the phrase before they run out of attempts?

© 2019 Treehouse Island, Inc.
  • Imported supplied HTML and CSS from Treehouse.
  • Used constructor method when creating object classes for the overall Game and the overall Phrase feature.
  • Game Object/Class:
    • Added "phrase" property with array of phrases for guessing game.
    • Added "missed" property to keep track of incorrect guesses.
    • Created method to randomly choose a phrase from array.
    • Added a new instance of Phrase class to the Game.
    • Created methods to track user wrong guesses and check win status.
    • Created methods to show game success or failure.
    • Created method to reset game.
  • Phrase Object/Class:
    • Created method to display random phrase on screen as individual letters, hidden until user guesses letter correctly.
    • Created method to check user's clicked letter in onscreen keyboard against phrase.
  • Created event handler for user keyboard input so user can guess letters with physical keyboard.
View Live View on GitHub

Interactive Form

  • Source: Treehouse Full-Stack JavaScript Techdegree
  • Date: October 2018
  • Grade: Exceeds Expectations
  • Skills & Tools:
    • form interaction
    • form validation
    • regular expressions
    • unobstrusive JavaScript
    • ES6/ES2015
    • jQuery
    • debugging

Interactive Form

In this project, you'll use JavaScript to enhance an interactive registration form for a fictional conference called "FullStack Conf."

Using the supplied HTML and CSS files, you'll add your own JavaScript to make the form more user-friendly by:

  • adding customized and conditional behavior and interactivity
  • validating user input and providing helpful error messages when the user enters invalid information into the form fields.
© 2018 Treehouse Island, Inc.
  • Created function to set cursor focus to first textfield.
  • Job Role section: Created function to hide text input under until user selects “other” job role option.
  • T-Shirt Info section: Created function to hide color selection menu until user has selected theme.
  • T-Shirt Info section: Creation function to show appropriate set of colors when user chooses shirt design theme.
  • Register for Activities section: Created function to disable any conflicting activities when user checks an activity and adjust total cost as user selects and deselects activities.
  • Payment Info section: Created function to show appropriate inputs or info when a given option is selected and hide others.
  • Created function to dynamically create an insert alert messages in the form of tooltips.
  • Wrote conditional alert messages for each set of form elements to appear upon validation.
  • Wrote regular expressions for each text field to test user input against.
  • Created function to validate user input and reveal tooltip when invalid.
  • Created function to only submit form when all inputs are valid.

jQuery: Great job using jQuery throughout the entirety of your project!

Focus on the first field: You have the “Name:” input field set to focus on page load. Perfect!

Job Role Section: Awesome, you added the "Other" job role input field into the index.html and set it to only appear if the user selects "other" in the Job Role select menu!

Activity Registration: The user is unable to select an activity that has a schedule conflict with one they have already selected. The total price is updated dynamically as a user adds or removes activities! Awesome!

Displaying payment sections: The “Credit Card” payment option is selected by default on page load. The “Select Payment Option” is disabled and the correct info is displayed for the Bitcoin and PayPal options!

Form Validation: Phenomenal job implementing your jQuery based form submission validation! Every input field and checkbox are accounted for! Awesome job with your Credit Card, Zip Code, and CVV length conditionals!

Form works without JavaScript: Perfect, when disabling JavaScript the “Other” field under the “Job Role” section appears!

T-Shirt Section Exceeds Expectations Feedback: Sweet, the color drop down menu is hidden until a T-Shirt design is selected! Each T-Shirt design is now only showing the colors that are available to that design!

Form Validation Messages: I am really loving your tool-tip style validation errors, they look great! It looks like you also went above and beyond and created some real-time form validation!

Overall Comments: Outstanding job on this tough project! You have shown a deep understanding of jQuery and form validation! You definitely earned the “Exceeds Expectations” grade on this one! Keep up the great work and happy coding!

View Live View on GitHub

List Pagination and Filtering

  • Source: Treehouse Full-Stack JavaScript Techdegree
  • Date: October 2018
  • Grade: Exceeds Expectations
  • Skills & Tools:
    • ES2015
    • progressive enhancement
    • unobtrusive JavaScript
    • jQuery
    • pagination
    • real-time filter search
    • resetting search results

List Pagination and Filtering

In this project, you’ll enhance the usability of a web page that is displaying way too much information all at once. Long lists don’t make for a good user experience on a web page. To make it easier for the user to find information and read the page, you’ll add to this project a popular web development technique known as “pagination.”

While making these improvements, you'll adhere to an important development principle known as “progressive enhancement.” Which in this case basically just means that you’ll add JavaScript to enhance the web page, without making the web page dependent upon the JavaScript that you are adding.

In other words, you’ll add JavaScript to paginate and improve the project, without altering the project in such a way that JavaScript becomes required to use or view the web page.

With “progressive enhancement” in mind, you’ll write the code to take this default list of 54 students and break it up into separate pages that display only 10 students at a time. Additionally, you’ll programmitcally add buttons to the bottom of the page that allow users to navigate through the list, 10 students at a time.

Your pagination solution should be dynamic, meaning it will work for any list containing any number of items.

An optional search feature task will give you the opportunity to earn an Exceeds Expectation grade on this project while learning about filtering in a web page.

© 2018 Treehouse Island, Inc.
  • Created function to set number of displayed list items on a given page and match the items with the given page number.
  • Created function to get number of pages needed based on selected array of list items and selected number of items per page.
  • Created function to dynamically create pagination links.
  • Created function to select the right batch of list items when user clicks pagination buttons
  • Created function to dynamically add search bar.
  • Created function to filter page list.
  • Set “Enter” key listener on search input and “click” listener on search button to call filter-list function.
  • Created function to display "no results" message.
  • Created function to reset page main content and pagination links.
  • Created function to reset page if user empties the search field.
  • Set event listeners and functions with initial values to active on document.ready.

Code Comments: Great job in including comments to your code to explain each function.

Progressive Enhancement and Unobtrusive JavaScript: Excellent job adding in an unobtrusive pagination bar and search bar, no inline javascript/all javascript is in an external file

Pagination Links: Excellent job in implementing the pagination which varies depending on the number of records!

Paging: I really like how you handled if no results are found! licking each pagination link correcctly updates the records and also applies the .active class! great job!

Overall Comments: You did an excellent job on this project, Keep up the great work!

View Live View on GitHub

Web App Dashboard

  • Source: Treehouse Front-End Web Development Techdegree
  • Date: September 2018
  • Grade: Exceeds Expectations
  • Skills & Tools:
    • CSS grid layout
    • styling SVGs
    • modular JavaScript
    • jQuery
    • data visualization
    • object property configuration
    • local storage
    • Sass
    • debugging
    • developing from mockup

Web App Dashboard

Many websites do more than just give you information. Sites like GitHub, Zillow, Mint and Treehouse let users do things. They act like programs you run on your computer. These web applications, often include pages for looking at your profile, what you've done in the week or what you need to get done. These "dashboards" act like your control panel for controlling the web app.

In this project, you'll take a mockup and a few icons and build a beautiful, web dashboard complete with JavaScript-driven charts and graphs. You only need to take the design and create the HTML, CSS and JavaScript functionality for this one page -- you don't need to create other pages, or build any backend or database functionality.

© 2018 Treehouse Island, Inc.
  • Developed web page according to mockup.
  • Used CSS grid to lay out main elements (header, sidebar, navigation, and main content).
  • Developed front-end of notifications feature and alert.
  • Used Chart.js for data visualization.
  • Implemented plugin for switch to toggle between charts.
  • Created scripts to display appropriate charts when switch is toggled.
  • Developed front-end of social media widgets with styled SVGs.
  • Developed front-end of widget to display member activity.
  • Developed front-end of messaging widget with scripts for success and warning alerts.
  • Developed settings widget using local storage to save user input.

Alert Notifications: Your hover animation for the bell is super cool!!! Great job also adding the green indicator and 3 alerts to it! Awesome, you added the alert header and the functionality to close it!

Chart Widget: You have the best looking line chart navigation that I have seen, such an awesome transition effect! Great job implementing the chart.js plugin and building out data/labels for all your charts and very closely matching the mockups! You have gone above and beyond by adding info for the Hourly, Daily, Weekly and Monthly line charts!

Message User Widget: Your required and success alerts for the message section look and function fantastically! Nice touch with the input border changes on hover and focus! You again went above and beyond and added autocomplete search functionality to the "Search for User" input field! Perfect!

Settings Widget: Wonderful job creating the toggle switches to match the mockup! Your local storage saves all settings and persists through browser refresh and closure!

Overall Comments: Congratulations on completing project 7! You were able to meet and exceed all expectations! You've done a wonderful job on this project and can tell that you spent a great amount of time on this project! This project is a great one because it takes everything you've learned so far and puts it into one big project. Overall, stellar work on this project! Keep up the great work and good luck on the last two projects!

View Live View on GitHub

Game Show App

  • Source: Treehouse Front-End Web Development Techdegree
  • Date: August 2018
  • Grade: Exceeds Expectations
  • Skills & Tools:
    • modular JavaScript
    • jQuery
    • jQuery UI animations
    • arrays
    • CSS @keyframes animations
    • modular CSS
    • refactoring code

Game Show App

In this project, you'll create a browser version of “Wheel of Success”, a word guessing game where players will click letters from an onscreen keyboard to try to guess a random phrase.

Using Javascript, you’ll create an array of phrases and write functions to choose a random phrase from that array, split the phrase into letters, and put those letters onto the game board.

Each time the player guesses a letter, you’ll need to compare the letter the player has chosen with the random phrase. If the letter is in the phrase, you’ll update the game board with the chosen letters.

A player can keep choosing letters until they make five incorrect guesses. If the letter they chose isn’t in the phrase, you’ll remove one of the player’s 5 guesses.

If the player completes the phrase before they run out of guesses, a winning screen will display. If the player guesses incorrectly 5 times, a losing screen will display.

A player can guess a letter only once. After they’ve guessed a letter, your programming will need to disable that letter.

© 2018 Treehouse Island, Inc.
  • Imported supplied HTML and CSS from Treehouse.
  • Created array of phrases for guessing game.
  • Created funciton to randomly choose a phrase from array.
  • Created function to display random phrase on screen as individual letters, hidden until user guesses letter correctly.
  • Created function to check user's clicked letter in onscreen keyboard against phrase.
  • Created functions to track user wrong guesses and check win status.
  • Created functions to show game success or failure.
  • Created function to reset game.

Phrases: Great job creating a proper array of phrases, loving the computer error theme, makes us think while playing it!

Keyboard: The functionality of your onscreen keyboard is working perfectly. Letters can only be pressed, and hearts are only being removed for incorrect guesses and not by hitting the whitespace between letters.

Phrase Display: Each time I refresh the browser, the game is having no problems pulling a different phrase from the array. Also, love the jiggle effect you have for the letters when they appear!

Game Over: Nice work on your win and lose overlays, everything resets properly and the split screen transformation/transition looks fantastic!

Overall Comments: Awesome work all the way around here! Everything functions and looks perfect and you very thorough and thoughtful code comments throughout the jQuery/JS that make following the code a breeze. There was nothing I could find that needed attention or felt could be improved upon. Well done and keep up the great work!

View Live View on GitHub

Interactive Photo Gallery

  • Source: Treehouse Front-End Web Development Techdegree
  • Date: August 2018
  • Grade: Exceeds Expectations
  • Skills & Tools:
    • JavaScript
    • jQuery
    • Lightbox2 plugin
    • real-time filter search
    • flexbox
    • Sass
    • developing from mockup
    • mobile-first

Interactive Photo Gallery

In this project, you will create an interactive photo gallery using JavaScript and jQuery. Thumbnails and photos will be provided with descriptions. At the top of the page, you'll have a search area where photos will hide and show depending on user input. When the user clicks on a thumbnail, the photo will display in a lightbox. There should be a back and previous arrows to cycle through photos.

© 2018 Treehouse Island, Inc.
  • Developed and styled photo gallery based on mockup, using supplied images.
  • Implemented flexbox for layout.
  • Installed Lightbox 2 jQuery plugin.
  • Created function for filtering photos based on user input.

Design: Nice job with the layout, especially the mobile-first design.

Lightbox Functionality: Your lightbox looks and functions great, even in a mobile layout. Great!

Content Filtering: You went the extra mile to write the search box javascript yourself. Great job!

Overall Comments: It's clear that you worked hard on this project, adding some nice styling, linking the plugin and working out the code for the search function. This is a challenging project, but it looks and works really well. Great job!

View Live View on GitHub

Professional Projects

CAS Website Redesign

  • Client: UNCW College of Arts & Sciences
  • Date: July 2018 to September 2018
  • My Role: Front-End Web Developer
  • Skills & Tools:
    • UI and UX design
    • responsive design
    • JS modals
    • ZURB Foundation 5
    • Cascade CMS
    • accordions
    • flexbox
    • CSS transitions and transforms
    • maintaining brand identity
    • soft skills

CAS Website Redesign

Moving site from test server to live server has been delayed due to Hurricane Florence. Changes to go live by the end of October 2018.

In the spring of 2018, the UNCW College of Arts & Sciences (CAS) needed a front-end web developer to redesign and reorganize content on its main website (and some departmental websites within the college). I had come highly recommended from past work with other entities at UNCW, so CAS's public communication specialist reached out to me. But I was unavailable for spring, having already been asked to help with the Office of e-Learning on multiple projects.

Near the end of spring 2018, the public comminiation specialist contacted me again to check my availability. I confirmed that I would be available during the summer, so we set up a meeting to discuss specifics.

The CAS website was divided into multiple sections with different overseers. Over the course of the project, I met with each overseer to assess the needs of their site section, hear their problems and ideas, and inform them of what I could do for them.

  • Communicated web design concepts to laymen.
  • Advised clients create a to-do list for each web page in their site section for better project and task management.
  • Advised clients to send me the to-do lists one-by-one so progress could be made while they were still reviewing other pages for needed changes.
  • Completed each to-do list within one business week of receipt and confirmed completion with client each time.
  • Worked with public communication specialist to improve user experience, as well as make pages easier for web content managers to find and manage.
    • Reorganized website folder structure.
    • Renamed folders, web pages, and nav links.
    • Organized images and docs into folders.
  • Created more visual interface for landing pages.
  • Created new, resuable brand assets.
  • Used flexbox to improve alignment and eliminate white space.

Each of the site section overseers gave praise for the changes I made. They found the site easier to navigate and more pleasing to look at. They also found their section within the web content management system to be more well organized and easier to update.

View Live

Cascade CMS Online Manual

  • Client: UNCW Information Technology Services (ITS) Web Team
  • Date: April 2018 to June 2018
  • My Role: e-Learning Developer/Web Developer
  • Skills & Tools:
    • UX and UI design
    • responsive design
    • accessibility
    • technical writing
    • CSS transitions and transforms
    • debugging CSS and JS
    • jQuery
    • ZURB Foundation 5
    • Cascade CMS
    • soft skills

Cascade CMS Online Manual

The Web Team for Information Technology Services (ITS) at UNCW was preparing for an upgrade to the web content management system (Cascade) used by over 600 staff members across campus. They needed someone to revise the instruction manual in two months, when the new version of the system was scheduled to go online.

The manual for the previous version of Cascade (version 7) was in PDF form. The ITS Web Team wanted a format that was more accessible, so I developed the manual in the form of a single web page.

  • Acquired basic information on audience and intended usage of manual.
  • Reviewed PDF manual for previous version of Cascade (version 7).
  • Tested Cascade 8.
  • Outlined online instruction manual.
  • Went through all tasks in manual tutorials to determine instructions and screenshots from user’s perspective.
  • Captured, cropped, resized, named, and organized graphics.
  • Finished drafting text for all tutorials, and transferred content into HTML file.
  • Edited and debugged web page for proper display and functionality of all objects.
  • Cleaned and documented code to facilitate future additions and edits made by ITS Web Team.
  • Acquired feedback and approval for launch.

According to the ITS Web Team, the final product was much more than what they had expected. I had gone above and beyond, providing a more comprehensive manual than they had in the past, including “best practices” for a given task, displaying information in an attractive and digestible manner, and designing a sleek user interface that users would find very convenient. All the necessary tutorials—and more—were completed in time for launch.

View Live

Office of e-Learning Website Redesign

  • Client: UNCW Office of e-Learning
  • Date: February 2018 to June 2018
  • My Role: Front-End Web Developer
  • Skills & Tools:
    • UI design
    • aesthetic web design
    • CSS transitions and transforms
    • JavaScript modals
    • ZURB Foundation 5
    • jQuery
    • Cascade CMS
    • Adobe Photoshop & Illustrator
    • Trello
    • soft skills

Office of e-Learning Website Redesign

The Office of e-Learning must still get approval to launch the new version of the website. The redesigned version will be live November 2018.

During the spring 2018 semester at UNCW, the Office of e-Learning (OeL) needed their website redesigned. When I was brought on, OeL had already determined the new site structure for their rebranding but needed someone to modernize their website and find efficient, user-friendly ways to display their content.

By the end of my contract period, not all web page content had been submitted to me, since content was generated by OeL’s instructional designers. However, I’d completed usable drafts for 15 of the 16 web pages (every page for which I had at least some content), documented and labeled my code, and trained OeL’s most tech-savvy staff member to read and use my stylesheets and scripts.

  • Acquired information on intended users and site usage.
  • Acted as consultant for content providers on how to display content.
  • Created more visual landing pages with animated icon overlays for page descriptions.
  • Creating new, resuable assets that maintained brand identity.
  • Commissioned icons from a grad student graphic designer.
  • Placed staff profiles in business cards, with an accordion for viewing full profile.
  • Placed sequenced and categorized information into accordions.
  • Used tabs to organize content and reduce page scrolling.
  • Placed embedded videos in JS modals to conserve space.
  • Created floating cards for notes and information across site.
  • Styled all objects (icon overlays, modals, embedded videos, etc.) for responsiveness.
  • Wrote documentation and detailed comments for future coders.
  • Trained OeL staff member to maintain code.

Ultimately, OeL staff members were very pleased with my work and excited to show off their rebranded website once their final content was complete.

The OEL’s staff member I trained appreciated how well documented my code was. It made everything easier to understand.

A couple months after my contract ended, my skills had improved enough to refactor some of my JavaScript for efficiency, for improved readability, and to make it easier to maintain and reuse. So I went ahead and refactored the code and then offered to apply the changes to their site. They gladly accepted.

View Live

UNCW Canvas Website

  • Client: UNCW Office of e-Learning
  • Date: May 2018 to June 2018
  • My Role: Front-End Web Developer
  • Skills & Tools:
    • UI/UX design
    • responsive design
    • CSS transitions and transforms
    • ZURB Foundation 5
    • modals
    • accordions
    • tabs
    • tooltips
    • jQuery
    • Trello

UNCW Canvas Website

At the end of the spring 2018 semester, UNCW’s learning management system (LMS) migration committee had decided to adopt Canvas as its LMS in place of Blackboard Learn. With this decision, UNCW needed a website to serve as a landing page for information for faculty and students about the migration to Canvas and how to use the LMS.

I was tapped by the director of the Office of e-Learning (OeL) to design the campus’s Canvas website, due to how pleased she was with my redesign of the OeL department website. I was given another university’s LMS information website as reference. I was also asked for a quick turnaround time so that OeL staff could direct curious faculty to the website for detailed information and to view the Canvas training schedule.

  • Acquired information on intended users and site usage.
  • Created a visual landing page with condensed information and convenient links.
  • Commissioned icons from a grad student graphic designer.
  • Created clean-looking page in which to house guides, references, and links for faculty and students. (Used tabs to organize content and reduce page scrolling.)
  • Created sleek table in UNCW color scheme to house training schedule.
  • Placed embedded interactive calendar in JS modal to conserve space on the page.
  • Wrote documentation and detailed comments for future coders.
  • Reviewed code with LMS manager so he could successfully maintain it.

I completed the project in five weeks and received positive feedback from the OeL director as well as the learning management system manager who would be taking over long-term management of the website.

View Live

SPARC Website Redesign

  • Client: UNCW Office of Sponsored Programs and Research Compliance (SPARC)
  • Date: February 2017 to July 2017
  • My Role: Front-End Web Developer
  • Skills & Tools:
    • UX design
    • aesthetic web design
    • copyediting
    • responsive design
    • Cascade CMS
    • Adobe Photoshop
    • ZURB Foundation 5
    • accordions
    • table sorter
    • soft skills

SPARC Website Redesign

This project involved improving the user experience (UX) and aesthetic design for the website of the Office of Sponsored Programs and Research Compliance (SPARC) at UNCW, consolidating separate websites that contributed to the office being viewed as separate entities, and revising content to a more supportive tone to improve office's relationship with faculty researchers.

I primarily worked with SPARC’s grant specialist as the office liaison.

  • more user-friendly navigation and information architecture (organization)
  • placed frequently used links and info in more prominent areas
  • more supportive tone in copy writing
  • updated organizational chart
  • fixed all broken links
  • reduced text and increased visuals on key pages
  • working with SMEs
  • working with project manager
  • maintaining brand identity
  • communicating web design concepts to laymen

SPARC’s staff were very pleased with the changes, especially their new landing page, contact page, and FAQs page.

Since the completion of this project, SPARC’s liaison has contacted intermittently to build a new page, add a new feature, or consult on changes she’d like to make or adjust herself. In late 2017, I added an Events page with subpages that contained photo galleries made from a jQuery plugin that I styled for the UNCW brand.

View Live