Alberni District Teacher’s Union Website
Type:
Front-end development
Skills:
HTML/CSS, Javascript, Drupal
Context:
Work project under Alberni Online
Time:
April 2025
Link
https://adtu.expm.albernihosting.ca/
Intro
A Drupal website developed for the Alberni District Teacher’s Union. The website provides access to all kinds of relevant terms, helpful resources and meeting informations for ADTU members .
My role in this project was to develop the entire website using Drupal, based on provided design documents. Site content was structured and managed through Drupal’s content management system, primarliy with Drupal’s Paragraph module. Custom styling and advanced functionality are achieved with Drupal, custom CSS, and JavaScript.
Notable Features & Takeaways
- Designed and implemented a complex Drupal architecture using Paragraphs, custom content types, blocks, and Views to support terms, articles, event listings, and forms for a teacher union website.
- Developed a client-friendly content structure to keep content editing expereince smooth and intutive for the client within the Drupal admin interface.
- Translated design specifications into a responsive, pixel-perfect Drupal site using custom CSS, JavaScript, and Twig templates.
- Gained inspiration on implementing complex visual styles on other CMS platform such as Wordpress based on the methods used in this project.
Progress Documents
The most significant progress document I have for this project is paragraph plans. Since the Outreach Therapy project, the Alberni Online adapted the Drupal Paragraph module as a part of the Drupal development routine, for the Paragraph module provide better content editing experience for the users.
We used Gutenberg Editor for Drupal (left) before and we find it is more confusing & prone to mistakes.
However, when I first uses the Paragraph module, the editor experiecne was not greatly improved because I didn’t design the Paragraph structure properly. Too many Paragraph types with confusing names are created. Although it still works for us as developers, it caused many confusions for the non-tech editors who often wonder which paragraph they should add or edit.
To avoid this issue again, I planned out the paragraph structure in detail before implementing them to make sure the paragraph structure also makes sense for the editors. Below are some of my plan documents for the ADTU website.
Drupal - ADTU Project Paragraph Planning.pdf
Drupal - ADTU Calendar Event Tag Plan.pdf
ADTU Table of Content Plan.pdf
ADTU Minor Member List Plan.pdf
Other than paragraph planning, I also keep a document of issues and resources for future references. Below are some of my issues & resources documentations for this project.