fix: add missing alt text for people portraits (2.0)

README.md

@@ -1,19 +1,57 @@
 # p5.js Website
 
+## About This Repository 
+
+Hi there! Welcome to the p5.js-website repository! Here are a few things to know:
+
+This is the repository for the [p5js.org](https://p5js.org/) and the [beta.p5js.org](https://beta.p5js.org/) websites, including:
+
+- Reference pages and documentation
+- Examples and embedded sketches used on the site
+- Website-specific UI, layout, and accessibility improvements
+
+If you have a general question or bug programming with p5.js please post it in the [p5.js forum](https://discourse.processing.org/c/p5js) or ask in our [Discord server](https://discord.p5js.org) (check the #contribute-to-p5 channel).
+
+Please make sure you are posting to the correct repository. See [this section](https://github.com/processing/p5.js/blob/main/README.md#issues) for a list of all p5.js repositories.
+
+Please be sure to review our [community statement](https://p5js.org/about/#community-statement) and [code of conduct](https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md). These things are very important to us. Check out the [contributor docs](https://p5js.org/contribute/) for more in-depth details about contributing code, bug fixes, and documentation.
+
+### p5.js-website and p5.js
+If you are seeing an issue about unclear wording, missing explanations, outdated examples, or reference structure, please open an issue in this repository. If the issue appears to be a bug or behavior change in the p5.js library itself, please open an issue in the [core p5.js repository](https://github.com/processing/p5.js). If you’re unsure where an issue belongs, feel free to open it here with as much context as possible, and a maintainer can help route it.
+
 ## How To Contribute
 Known bugs and intended new features are tracked using [GitHub issues](https://github.com/processing/p5.js-website/issues). If you'd like to start working on an existing issue, comment on the issue that you plan to work on it so other contributors know it's being handled and can offer help. Once you have completed your work on this issue, [submit a pull request (PR)](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#pull-requests) to the p5.js main branch. In the description field of the PR, include "resolves #XXXX" tagging the issue you are fixing. If the PR addresses the issue but doesn't completely resolve it (ie the issue should remain open after your PR is merged), write "addresses #XXXX".
 
 If you discover a bug or have an idea for a new feature you'd like to add, begin by submitting an issue. Please do not simply submit a pull request containing the fix or new feature without making an issue first, we will probably not be able to accept it. Once you have gotten some feedback on the issue and a go ahead to address it, you can follow the process above to add the fix or feature.
 
+If you’ve been assigned to an issue and are working on it, the p5.js stewards or maintainers (you can check who this is in the [p5.js stewards table](https://github.com/processing/p5.js/blob/main/README.md#stewards)) might comment and tag you in that comment to check in. Please reply within 1 week with any questions or updates; if you don’t respond in a week, stewards or maintainers may reassign the issue. This doesn’t mean you need to finish the work in 1 week: only to confirm you’re still on it.
+
 ### Content Changes
 If you are here to edit or translate content, please do so inside [the `src/content/` folder](/src/content).
+The English reference files in `src/content/reference/en/` are auto-generated from JSDoc comments in the p5.js library source code and should not be edited directly in this repository. Any changes made here will be overwritten the next time the reference is generated.
+To fix or improve English reference content, make your changes in the p5.js library repository instead. [See the Contributing to the p5.js Reference guide](https://beta.p5js.org/contribute/contributing_to_the_p5js_reference/).
+Exception: Translation files such as `src/content/reference/es/`  are stored directly in this repository and can be edited here directly.
 
 ### Code Changes
 For making code changes, please check out the [technical overview](./docs/technical_overview.md) to get started.
 
 ### Adding Libraries
 Follow the steps in the <a href="./docs/contributing_libraries.md">Contributing Libraries</a> doc if you would like to add your library to the collection!
 
+### Get Assigned Before Working on an Issue
+Please read the [contributor guidelines](https://p5js.org/contribute/contributor_guidelines/) before contributing.
+
+When an issue is first created, it may be labeled "Awaiting Maintainer Approval", which means it is still being reviewed by maintainers and is not yet ready for work. Please do not start work on these issues. Once an issue has been reviewed and approved, it will be labeled "Help wanted". Only issues with this label should be requested for assignment. When a contributor is set as "Assignee", they can start working on it. If you file a PR for an issue that has not been approved for contribution, or while someone else is already working on it, your PR may be closed.
+
+When working on multiple issues, please create a separate branch for each one. This ensures each PR only contains the files related to that specific issue. Opening a PR from a branch that contains work from multiple issues makes it difficult to review and merge cleanly.
+
+When you are ready to open a PR, please keep the following in mind:
+- Link the issue your PR fixes using "Fixes #" followed by the issue number in your PR description
+- Only include files related to the issue you are working on
+- Do not include `package-lock.json` unless your PR is specifically about updating dependencies
+- Test your changes locally before opening a PR
+- Test against the correct branch, either `main`, `2.0`, or both depending on the issue
+
 ## Add Yourself to p5.js Contributors
 We recognize all types of contributions. This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Add yourself to the [p5.js repository readme](https://github.com/processing/p5.js/blob/main/README.md#contributors) by following the [instructions here](https://github.com/processing/p5.js/issues/2309)!
 

src/content/examples/en/11_3D/04_Filter_Shader/code.js

@@ -28,7 +28,7 @@ void main() {
 function setup() {
   createCanvas(700, 400, WEBGL);
   video = createVideo(
-    'https://upload.wikimedia.org/wikipedia/commons/d/d2/DiagonalCrosswalkYongeDundas.webm'
+    '/assets/DiagonalCrosswalkYongeDundas.webm'
   );
   video.volume(0);
   video.hide();

src/content/examples/en/11_3D/07_Filter_Shader_p5strands/code.js

@@ -4,7 +4,7 @@ let displaceColors;
 function setup() {
   createCanvas(700, 400, WEBGL);
   video = createVideo(
-    'https://upload.wikimedia.org/wikipedia/commons/d/d2/DiagonalCrosswalkYongeDundas.webm'
+    '/assets/DiagonalCrosswalkYongeDundas.webm'
   );
   video.volume(0);
   video.hide();

src/content/people/en/kenneth-lim.yaml

@@ -2,7 +2,7 @@ name: Kenneth Lim
 url: https://limzykenneth.com/
 category: mentor
 image: ../images/kenneth-lim.jpeg
-imageAlt: WRITE ALT TEXT HERE
+imageAlt: Portrait of Kenneth Lim
 role: p5.js Mentor, 2023-present
 order: 4
 blurb: >

src/content/people/en/stalgia-grigg.yaml

@@ -1,7 +1,7 @@
 name: Stalgia Grigg
 category: alumni
 image: ../images/stalgia-grigg.png
-imageAlt: WRITE ALT TEXT HERE
+imageAlt: Portrait of Stalgia Grigg
 url: https://stalgiagrigg.name/
 role: p5.js Fellow 2019
 order: 9

src/content/tutorials/en/setting-up-your-environment.mdx

@@ -13,6 +13,7 @@ relatedContent:
 authors:
   - Layla Quiñones
   - Jaleesa Trapp
+  - Shaikh Irtiza Nasar
 ---
 
 import EditableSketch from "../../../components/EditableSketch/index.astro";
@@ -304,22 +305,39 @@ Once your project is saved, you can share it!
 ### Step 2: Install the p5.js library extension
 
 - Open VS Code and navigate to the extensions manager on the left toolbar.
-- Type [*p5.vscode*](https://marketplace.visualstudio.com/items?itemName=samplavigne.p5-vscode) in the search bar, select the extension, and click the install button.
-- Familiarize yourself with details for this extension [here](https://github.com/antiboredom/p5.vscode/blob/master/README.md).
+- Type [*p5.js 2.x Project Generator*](https://marketplace.visualstudio.com/items?itemName=Irti.p5js-project-generator) in the search bar, select the extension, and click the install button.
+- Familiarize yourself with details for this extension [here](https://github.com/IrtizaNasar/p5-2.vscode/blob/main/README.md).
 
+**This extension provides:**
+- Quick project setup with p5.js 2.0
+- IntelliSense and autocomplete for p5.js functions  
+- Online/offline library options
+- Parameter hints for most p5.js functions
 
 ### Step 3: Create a p5.js project
 
-- Click on *View* on the top toolbar and select Command Palette.
-- Type *Create p5.js Project* in the search bar and select the folder on your machine in which you would like to save your project.
+#### Method 1 - From Command Palette:
+- Click on *View* on the top toolbar and select Command Palette or Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on macOS)
+- Type *Create a new p5.js 2.x Project* in the search bar and select the folder on your machine in which you would like to create your project.
+- Follow the prompts to configure your project
+- **When prompted, click "Open Project"** to open the new project in your current VS Code window, or **"Open in New Window"** if you prefer to keep your current work open
+- **For beginners, "Open Project" is recommended**
 
 
-### Step 4: View your first sketch
+#### Method 2 - From Explorer Context Menu:
+- Right-click on a folder in the Explorer
+- Select "Create p5.js 2.x Project Here"
+- Follow the prompts to configure your project
+- **When prompted, click "Open Project"** to open the new project in your current VS Code window, or **"Open in New Window"** if you prefer to keep your current work open
+- **For beginners, "Open Project" is recommended**
+
+
+### Step 4: Preview your sketch
 
 To view the preview for your code:
 
-- Right click on the *index.html* file in the *VSCODE* tab on the left Explorer panel.
-- Select *Open Live Server*. 
+- Right click on the `index.html` file in the *VSCODE* tab on the left Explorer panel.
+- Select *Open Live Server* (this will start a local development server). 
 - A window will open in your default browser with the output of your project.
 
 A *p5.js sketch* is a text file with code written in the *JavaScript* programming language. *JavaScript* is a programming language used to make web pages interactive. p5.js is a library written in *JavaScript* – which is why it ends in “*.js*” for *JavaScript*. With p5.js, you can create programs that are colorful and animated, with features that users can interact with! To learn more about some of the things you can do with p5.js, watch the [p5.js Welcome Video!](https://hello.p5js.org/) To learn more about JavaScript, you can visit [this resource.](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
@@ -328,19 +346,19 @@ The editor begins with the following code in the *sketch.js* file and preview:
 
 <EditableSketch code={`
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(800, 600);
 }
 function draw() {
   background(220);
 }
 `} />
 
-The code above creates a canvas element in the preview that is 400 pixels wide and 400 pixels high. It also sets the background to a shade of gray. 
+The code above creates a canvas element in the preview that is 800 pixels wide and 600 pixels high. It also sets the background to a shade of gray. 
 
 
 #### `createCanvas()`
 
-Computer screens are made up of tiny lights called *pixels*, which are the smallest elements that make up any image. The line of code that creates a canvas in the preview window is [`createCanvas(400, 400)`](/reference/p5/createCanvas). Without this line of code, there will be no canvas to draw on! The numbers 400, 400 correspond to the width and the height of the canvas in pixels. These numbers are also known as *arguments* for the [`createCanvas()`](/reference/p5/createCanvas) function. 
+Computer screens are made up of tiny lights called *pixels*, which are the smallest elements that make up any image. The line of code that creates a canvas in the preview window is [`createCanvas(800, 600)`](/reference/p5/createCanvas). Without this line of code, there will be no canvas to draw on! The numbers 800, 600 correspond to the width and the height of the canvas in pixels. These numbers are also known as *arguments* for the [`createCanvas()`](/reference/p5/createCanvas) function. 
 
 Any values that you place within parentheses of a function are called *arguments*: any value used to customize functions. [`createCanvas()`](/reference/p5/createCanvas) appears within the [`setup()`](/reference/p5/setup) function to create an HTML canvas element that you can draw on. 
 
@@ -350,16 +368,16 @@ To learn more, visit the [p5.js reference](/reference/) pages for [`setup()`](/r
 ### Step 5: Change the color of the canvas
 
 - Change the background color of your canvas by changing the *argument* for the [`background()`](/reference/p5/background) function. 
-  - Change `background(220);` to `background("aqua");` and press *Play*.
+  - Change `background(220);` to `background("yellow");` and press *Play*.
 
 Your code should look like this:
 
 <EditableSketch code={`
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(800, 600);
 }
 function draw() {
-  background("aqua");
+  background("yellow");
 }
 `} />
 
@@ -386,12 +404,13 @@ Your code should look like this:
 
 <EditableSketch code={`
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(800, 600);
 }
 function draw() {
-  background(220);
-  //circle in the center with a width of 100
-  circle(200,200,100);
+// Set background color to yellow as shown in Step 5
+  background("yellow");
+  //Draw a circle in the center with a width of 100
+  circle(400,400,100);
 }
 `} />
 
@@ -400,7 +419,7 @@ function draw() {
 
 You can draw shapes on the canvas by typing specific commands for shapes within the curly brackets `{}` after [`function draw()`](/reference/p5/draw). 
 
-The sketch above draws a circle on the canvas by calling the [`circle()`](/reference/p5/circle) function within [`draw()`](/reference/p5/draw). The first two *arguments* – `200, 200` – place the circle in the center of the canvas, and the last *argument* – `100` – indicates that the circle is 100 pixels wide. The comments embedded in the sketch in the lines above the [`circle()`](/reference/p5/circle)` `function describe what the code does. To learn more, visit the [p5.js reference](/reference/) pages for [`draw()`](/reference/p5/draw) and [`circle()`](/reference/p5/circle).
+The sketch above draws a circle on the canvas by calling the [`circle()`](/reference/p5/circle) function within [`draw()`](/reference/p5/draw). The first two *arguments* – `400, 400` – place the circle in the center of the canvas, and the last *argument* – `100` – indicates that the circle is 100 pixels wide. The comments embedded in the sketch in the lines above the [`circle()`](/reference/p5/circle)` `function describe what the code does. To learn more, visit the [p5.js reference](/reference/) pages for [`draw()`](/reference/p5/draw) and [`circle()`](/reference/p5/circle).
 
 
 ### Step 7: Create!
@@ -425,18 +444,19 @@ Your code should look like this:
 
 <EditableSketch code={`
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(800, 600);
 }
 function draw() {
-  background(220);
+// Set background color to yellow as shown in Step 5
+  background("yellow");
   //when mouse button is pressed, circles turn black
 if (mouseIsPressed === true) {
     fill(0);
   } else {
     fill(255);
   }
 
- //white circles drawn at mouse position
+ //Draw a white circle at mouse position (mouseX, mouseY) with a width of 100 similar to Step 6
   circle(mouseX, mouseY, 100);
 }
 `} />