Step 3: Visual Customization

With your Codespace open, let’s make this website yours. We will use HugoBlox Studio to visually edit your profile.

Update your Bio

1. Open the Admin Profile

   In the file explorer (left sidebar), click to open: content > authors > admin > _index.md.

2. Use the Form (Recommended)

   If the HugoBlox Studio extension is active, you might see a “Custom Editor” or a visual form.

   • Name: Enter your full name.
   • Role: Enter your job title (e.g., “PhD Candidate”).
   • Organizations: Add your university or company.

3. Use the Code (Alternative)

   If you prefer raw control, you can edit the YAML Front Matter directly at the top of the file:

   content/authors/admin/_index.md

   ---
   title: Your Name
   role: Your Job Title
   bio: A short summary for blog posts.
   interests:
     - Artificial Intelligence
     - Computational Linguistics
   social:
     - icon: envelope
       icon_pack: fas
       link: 'mailto:you@example.com'
   ---

4. See the Changes

   Press Cmd+S (Mac) or Ctrl+S (Windows) to save. Look at the Preview tab—your name and role should update instantly!

Upload your Avatar

1. Drag & Drop

   Find a photo of yourself on your computer. Drag it directly into the content/authors/admin/ folder in the VS Code sidebar.

2. Rename

   Right-click the old avatar.jpg -> Delete. Right-click your new photo -> Rename -> avatar.jpg (must be exact!).

Next: Update the Homepage »