[:~]$ mkdir fablab2025
			cd fablab2025

Setup Git:

git config --global user.name edward-woodhouse

git config --global user.email edward.woodhouse@gmail.com

Generate SSH key and check it

ssh-keygen -t rsa -C "my_email@mail.com"
nedit ~/.ssh/id_rsa.pub

Copy the generated SSH key and add it to profile on gitlab.fabcloud.org.

xclip -sel clip < ~/.ssh/id_rsa.pub

Go to edit profile in gitlab profile:

Then SSH keys and “Add new key”:

Once this is done it time to clone the git files locally

git clone git@gitlab.fabcloud.org:academany/fabacademy/2025/labs/barcelona/students/edward-woodhouse.git 

The making of a Web Journal

The philosophy adopted for making this website is finding a wonderful website created by a previous student at fab academy, copy the layout and appropriate it.

Creating the WSL environment

I created a new work directory to build my website

mkdir week1
cd week1
mkdir test
cd test
touch index.html bio.html projects.html assignments.html style.css
mkdir images assignemnts projects

I then initialised this workspace as the git local directory with the command

git init

Appropriating a Web page

I then added an image from my cycling trip in Taiwan as taiwanjungleroad.jpg to the images folder to be used as a background for the index page.

I decided to find a layout I liked from past students. I chose Manuela’s site to use as a template. I used the following bash command to copy the webpage to my local computer:

wget -r -np -k -p https://fabacademy.org/2023/labs/barcelona/students/manuela-reyes/

This line of code is incredibly powerful and allowed me to read all of the html, css and js files.

Using AI tools

As my knowledge of html, javascript and css is complete novice, I decided to use AI models to aid in the endeavour.

First I ask Grok AI :

Through a barrage of prompts, exchanges and interactions with claude-3.5-sonnet on Cursor AI I was able to reposition text, headers, footers, assignment girds, page layouts and clean up both the code and the aesthetics of the website.

At the end of my exchanges once I was happy with the results I used a prompt to create a file with the history of our exchanges: the result is the following containing only my prompts as the resulting text on the chat was too difficult to retrieve. It is also somewhat incomplete, more frequent screen shots are required for an accurate traceability:

# Website Development Conversation - Fab Academy 2025
Date: February 2024
Last Updated: [Current Date]

## Development Timeline and Requests

### 1. Initial Setup and Structure
- "I would like the index header and footer to be applied to all pages"
- "i'd also like the footer on projectmanagement.html"

### 2. Projects Page Development
- "I want to move the project page to a sub index page, with a similar layout to the bio page, with the ./images/interests.svg on the left and the current text on the right of it"
- "Above the image I would like to add some text as an explanation: 'I noted down some of my key interests...'"
- "If you could add a legend to the image, 'Figure 1: idea brainstorming cloud'"
- "I should modify the explanationary text so that it is more formal, creative and from the third person. If you could also make it fit better on the page"

### 3. Koji Fermentation Page Creation
- "I'd like to add a link to a page for the Koji fermentation Control System..."
- "You can remove the repeated text from the Projects.html as it now has it's own specific page"
- "I'd like to add the Project Goal 'koji-section' to the top of the page"
- "I'm now happy with the koji page, it looks great. Maybe underline the title"

### 4. Koji Page Enhancement
- "I'd like to add the png ./image/kojifermplant.png to the Koji Fermentation Control System page..."
- "Could you put the page into two columns so it is more readable please"
- "No, it was more the entire text to be split into two columns..."
- "when the browser is fully opened I'd like the columns to use more of the page. it is too narrow"
- "The additional applications should also be a koji-method class"
- "A little less sales person. A simple concise informative visually appealling text"

### 5. Documentation Requests
- "thanks you have been a great help"
- "can I export our interactions on this chat to a text file please?"
- "can you copy all of the history from this chat and put it in a text file please"
- "what have you named the file and where have you placed it?"
- "yes please, I want you to provide the full conversation content..."
- [Various confirmations: "yes", "yes please", "1"]
- "is this file true to our history? Can you propose what I need to add..."
- "Could you mofify the file so it only includes the questions that I asked"
- "I would like you to include them all here"
- "do what you think is best for traceability and ease of lecture"

## Notes
- Each request represents a significant development step in the website creation
- Requests are grouped by related functionality and purpose
- The timeline shows the natural progression from basic structure to refined design
- Documentation requests show the process of creating this record

Would you like me to:
1. Add the corresponding responses to each request?
2. Include code snippets for each implementation?
3. Add more detailed context for each section?

In order to make the journaling experience as smooth as possible I decided to use a third-party tool for journaling : notion.

Note taking with Notion

Once I tried notion I knew I wanted to use this for the weekly notes. I can simply export the notion page in html format to be added to my weekly assignment page.

Once exported, the assignements.html file uses the iframe command to directly link the exported html file to the webpage:

    <main class="assignment-content">
        <!-- 🔥 This iframe automatically loads your Notion export -->
        <section class="week-content-blog">
            <iframe src="./notion/notion-week1.html" width="100%" height="800px" style="border:none;"></iframe>
        </section>
    </main>

This will be repeated for each week, where a new photo will be added to assignments.html page grid.

Using Git

I made regular commits on my local git environment. However, I tried to copy the folders into the clone git environment and push it to the remote server. This did not deploy at the first attempt as it was missing the “public” folder. All the website files were moved into this directory and the site was successfully deployed.

The process for pushing modified code to the remote server is as follows :

git add . 

git commit -m "explanation of the modification between previous and present commit"

git push

The site is now successfully deployed on https://fabacademy.org/2025/labs/barcelona/students/edward-woodhouse/index.html

Improving the website

I came back to the website several times to improve the structure and workflow to add weekly updates to the project and weekly assignment pages. I burnt through 2 email accounts equating to over 3000 prompts! In the end this was an incredible learning experience through trial and error.

The first version of my website was pure html with one css file for all of the webpages (index, assignments, projects, …). It differed greatly from Manuela’s website that was copied initially. It did however require copying the code for the header and the drop bar menu’s for each new page created. This isn’t optimal considering a page will be added each week and also when seeking the assistance of AI it is time consuming as it writes each line of code one by one.

Once I had a good understanding of the code it is quicker and more efficient to modify the code directly rather than asking the AI tool to modify the code directly.

The current version is easy to read, key features:

• a nice header: the fablab barcelona logo and my name are both svg files linking back to index home page on every page.

• Bio, Project and Assignment page links on the header.

• Assignment drop-down menu on all pages, and gird format for easy navigation through weekly assignment and project pages.

• Student agreement, contact details and copyright on the footer.

Choosing a final project

I decided to jot down my interests to see where they cross over:

Figure 5 : Mindmaps

I feel that optimising food production to consummation and moving back towards a zero waste model is essential for a healthy society. I therefore want to explore designing a desirable and safe means of koji fermentation.

The principle resource is the following book that I bought last year :

Koji Alchemy: Rediscovering the Magic of Mold-Based Fermentation (Soy Sauce, Miso, Sake, Mirin, Amazake, Charcuterie)

Jeremy Umansky, Rich Shih

I chose to play around with AI imagery to add a more appealing feel to the website. I asked chatgpt the following prompts:

I'd like you to create an image of koji mould under the microscope, so that I might use it as a thumnail on my project website : size 370 x 370 px

Is this actually factual representation of koji mould ? if not please change it so it is.If you could also propose an illustration, as if it was illustrated by the animator of the anime film perfect blue" (1995) please.

The images were tinified on tinypng.com before being added to the images file directory for the webpage. The complexity of the image meant that they could not be saved as an svg. You can find more information about the project idea on the following here