Build yourself a website, using either hand-coded HTML and CSS or a content management system like Cargo or Wordpress (I won’t grade one method more favorably than the other).

Consider the following:

• Although this is technically your “portfolio” site for this class, you’re not required to put your name or any identifying information anywhere on the site (though you certainly may).
• You’ll be asked to post all of your weekly projects on this website moving forward, but they don’t need to be on a publicly visible page as long as you send me the project page’s url on Moodle.
• What information do you want to present, and how do you want to arrange it? Are you trying to be clear and direct? Or complex and opaque?
• What are the unique affordances of the platform you’re using to build your website? Are there ways to exploit and/or subvert them?
• Remember that you’ll be adding to this site throughout the rest of the semester. Consider how you might be able to give your website space to grow and develop (whatever that might mean to you).

For this project, I chose Next.js. The website itself is the assignment. The full source code is available on GitHub: github.com/lianabourdon/COM214-PA4

The site is hosted at: lianabourdon.com

The repository name COM214-PA4 comes from its origin as a project for my COM 214; Web Technologies & Development course.
For AT101, I chose to iterate on this existing work by adding a Creative Coding section that documents weekly projects.

---

Technology Stack

• Next.js (16): framework and routing
• React (19): component and rendering runtime
• Bootstrap: responsive layout and grid system
• Font Awesome: icons for navigation and buttons
• SCSS: stylesheet management and custom Cargo-style typography
• App Router + JSX: views for each section of the site

---

Site Organization

• / Home landing page
• /coding Original COM 214 “Coding” portfolio
• /at101 AT101 section with weekly index
• /at101/weeks/:week Individual week instructions + submissions
• /public/at101/*.pdf Downloadable PDF versions

---

What information do you want to present, and how do you want to arrange it?

I want to present both course work and portfolio material in a way that is clear and direct. The navigation is simple: each major section is accessible from the top menu, and each AT101 week has its own page. By keeping a consistent structure, the site is easy to follow while still showing technical depth.

What are the unique affordances of the platform you’re using?

Because I chose Next.js, I can go beyond static HTML. Next.js makes it possible to manage routes like /weeks/:week automatically, pre-render pages, and keep static files easy to serve. I can also subvert the “portfolio” expectation by embedding live experiments directly into week pages, not just screenshots or static text.

How can the site grow and develop?

The site is designed to grow incrementally. Each week I can add a new page/content file (and optionally a PDF) without breaking navigation. The AT101 index automatically links to all weeks, so the structure accommodates future work. After AT101, I could extend the site further to include new sections or merge it back into my professional portfolio, showing a continuous progression from COM 214 to AT101 and beyond.