This website itself is a project!

When you're immersed in a project, it can be difficult to believe that, someday, you may not be able to recall all the technical details - or even the overview of what you did. When you try to talk about an interesting project a decade or more later, the benefit of an easily-locatable summary of the project is clear.

In addition, I have benefitted greatly from reading the projects of others when looking for inspiration for my own, and it seems only right to pay that forward.

I had planned to make a portfolio website "at some point", but had put it off for over 6 months, so I am grateful to ENP-162 (Human-Machine System Design) and Professor Intriligator for making it an assignment (which is why this page is here, to document the process that motivated my design choices)

Who is this portfolio for?

Potential collaborators: the portfolio should showcase my skills and interests to inform potential collaborators
Potential employers: the portfolio should provide a launching point for discussions about past work and how it might inform my future work
Potential clients: the portfolio should provide a comprehensive overview of my skills and interests to enable freelance work
Professors: the portfolio should showcase my research skills as well as the "soft skills" like communication
Other engineers/innovators: the portfolio should have links to relevant files and have descriptions of methods that other people can replicate, so that people don't have to start from zero to do similar work and can benefit from my prior work
Me: the portfolio should serve as a reference for past projects, including providing captivating photos and video, links to relevant published work or documentation, names of collaborators, and technical details in case I need to re-create some part of the project
Random other people who are Googling to find out what I've been up to lately or to figure out if they know me from somewhere

Let's dig deeper into some of those potential users!

User 1:
Collaborator

At the moment, my potential collaborators are other students, particularly in HRI (CS-133), Robotics (ME-134), and Human-Machine Interaction (ENP-162), so I'll focus on one of those. (At later points, this might shift to professional collaborators, with a slightly different focus.)

As we navigate creating groups for projects, it can be difficult to summarize one's educational experience.

User 1 is:

A Tufts student, either an upperclassman undergraduate or a masters' or PhD candidate
Interested in developing a well-rounded team for working on a project where teams are not assigned
Looking for someone with skills that complement their own, strongest in the areas where they personally are weaker

User 1 is highly time-constrained and doesn't have the patience for introductory videos.

User 1 needs a quick summary to help them "make a match".

For User 1, we need an easy to find page with a summary of things they might find interesting or useful, and then more information they can dig into

User 2:
Potential Employer

Potential employers are looking for professionals, people who can not only fill a short-term role but who will contribute to a productive team. They're looking for experience both with engineering skills and with real-world skills like communication and documentation.

User 2 might want flashy video and pretty pictures, but they also want a coherent explanation of what my role was within a bigger project, because they know that the critical work doesn't always come with pretty pictures. They should also have easy access to a formal resumé, in case they stumble across my portfolio without having gotten that first - you can't get past HR screenings without a resumé! It's also important to have contact information for User 2!

User 3:
Other Engineers and Innovators

Other innovators and engineers are easy to model, since what I want to provide them is what I want myself if I find someone else's project on the web. The best projects have pictures, but also a coherent discussion of the technical details of the project so that I can understand quickly whether it matches what I need.

They're looking for help, advice, and support for their own work, so they need as much technical detail as I can provide on *how* I did what I did - both narrative and things like code snippets and CAD files. Good SEO will help them find my content.

Information Architecture

To support the needs of the various users, the portfolio has an easy to use left-hand navigation bar on every page, which is always visible (no searching for a dropdown!)

Projects are organized by type, more or less by priority in what I expect users to care about and how I hope they'll interpret my priorities: Engineering projects go first, then what I am calling "personal projects", but maybe it should be "other projects", and then the Blog. I started with Robotics and HRI projects separate from Engineering Projects, but the distinction is too complex and I don't want to spend time trying to decide which category to put something in, only to then cost the site users the same amount of time and effort trying to guess which one I picked!

For the moment, this page (the portfolio website project) is at the very top, since it is most relevant to the readers I expect to have right now. It will move or get hidden later, when it becomes less relevant. I also have two hidden categories, for music and writing, in case I want to put my musical work or writing work on this page, too, but for right now they are out of scope.

My biggest ongoing side project, babywearing advocacy and education, is lower on the menu but present. Even though it is not relevant to most of my user cases, it's very important to the last one (random Google searchers), since my 10+ years as a babywearing educator mean I have a lot of name recognition in the community from those organizations. I want to keep that connection even while I emphasize my engineering credentials.

Resume, CV, and Bio are all present but last - they're important but boring from a web design standpoint, so they go at the end.

Platform! What does it need:

Permanence: a portfolio was on my to-do list to assist my job search, and got deferred when I was admitted to Tufts. I'd like to have something that sticks around, even if I might modify some of the content or hide some projects once I graduate. (This means not sites.tufts, and that I should eventually pay to upgrade to a domain name)
Simplicity: Starting from raw HTML is exhausting. Wordpress's blocks are obnoxious. I don't know if Wix will be better, but sometimes failing with a new thing is more fun than continuing to struggle with a tool that isn't right for a website that isn't blog-first.
I don't want to play sysadmin, so having someone else do the hosting, backups, etc is key.
Interactive and available: image heavy, no passwords or content restriction, easy to update as I have more recent projects to share

Branding

I want the website to look clean and professional, but creative and fun.
I'd love to have some sort of personal logo, but I haven't designed anything that speaks to me yet.
As a female engineer, I don't want a portrait to be prominent as part of my web presence - I want my work to speak for itself. I am considering including one in the Bio section to make it easier for site users to recognize me if we meet in person, and I did put one in the intro blog post.
I want clean, readable fonts (sans-serif geometrics!) and a clean layout without a lot of clutter.

Automation

The hardest part of keeping a portfolio website is going to be remembering to come in and update it.

Ideally, then, that is the place to apply automation.

I'd like to have a system where I send email to an address and it automatically creates a new page in one of the three Project category pages.

It looks like the Content Manager (which I did not use when originally creating the site) may be able to help with adding projects with a consistent look and feel, which is some helpful automation! I've re-created some of the content from the Projects sections as dynamic pages, and will move towards getting them 100% automated. The Content Manager also automatically creates sub-pages for each entry, which will save a lot of time as I add more projects.

It doesn't seem to have a built-in way to populate the content via email, so I'm still searching for a way to do that. Sadly, none of the API-based automation tools seem to have a way to connect directly to Wix, which makes me think that their API is not exposed in that way.

There is a method for editing the content manager via CSV files, but in order to use that I'd need to host the images for the content elsewhere.

It also might not actually save me any time or effort over using the exposed GUI for the content manager, unless I wrote some pretty gnarly background scripts, and API programming feels like it is out of scope for me, even if it might be potentially in scope for the assignment.

Options for Image Hosting:

Wix. This has the advantage of having a GUI with good access to upload files and is obviously integrated nicely into the website creation system. The biggest disadvantage is that it seems not to be scriptable at all.
- There seems to be some automation available for uploading images from my phone via their app
Dropbox.
- Dropbox is very easy for me to access, since I already have it installed on all my devices and have a lot of content stored there.
- Unfortunately, Wix's Content Manager doesn't seem to be able to interpret the way that Dropbox links present an image file (lots of wrapping around it) in order to use it embedded into the website.
  - Solved! This website gave me the incantation for getting Dropbox to provide just the image.
  - Sadly, it's not a formulaic link based just off the enclosing folder and file name, so it's again going to be hard to automate.
Running a server with a directory of images
- Ugh, I don't want to run a server. It's also not trivial to get email-to-folder working.

For now, I'm going to manage the creation and updating of new projects manually, and use the Content Manager to then automate page creation to document them. Perhaps I will send an email to Wix asking them to expose the Content Manager API so that creating items (and especially adding photos) can within it can be scripted.