Build your portfolios through vibe coding in Gemini Canvas

Content Introduction

Vibe Coding Overview

Vibe coding shifts the focus from "how" to "what", removing the technical barriers that prevent educators from creating their own digital tools.

Traditional coding is a manual, rigid process—like building with bricks using a language that requires perfect punctuation.

Vibe coding changes this dynamic by allowing you to interact with Gemini as if it were a professional developer sitting next to you.

Gemini Canvas for Web Design

By utilising natural language prompts within the Canvas ecosystem, faculty can construct interactive web pages or academic portfolios. These portfolios serve as dynamic, living spaces that move beyond the limitations of standard text-based resumes.

Through Vibe Coding, educators can effortlessly structure distinct, interactive zones to showcase:

• Research and Publications: Filterable lists of journal articles and active project links.

• Pedagogical Achievements: Interactive sessions displaying student testimonials, multimedia lecture archives, and innovative course designs.

• Institutional Contributions: Dynamic timelines showcasing committee work, administrative milestones, and community outreach.

Demo

Practice

Now, it’s your turn to practice. Use Gemini Canvas to actively apply Vibe Coding principles to build your own personalised, interactive academic portfolio.

Step 1: Upload and Initialise Canvas

Go to gemini.google.com and select Canvas, and then click the + (Attach) icon in the Gemini chat bar and upload the resume file (PDF or Word). Then copy and paste the following prompt in the chat:

"Analyse this resume and create a professional academic portfolio webpage based on its contents. Display this in a new Canvas side-by-side view using a clean layout with a navy blue and grey colour scheme."

Step 2: Structure the Domains

Highlight specific sections directly inside the Canvas window, or type a refinement in the main chat.

Example: "Organise the portfolio content into three distinct, easy-to-read sections: 1) Research & Publications, 2) Teaching & Courses, and 3) Institutional Contributions."

Step 3: Add Interactivity

Use the prompt bar to inject functional elements into the Canvas code document.

“At the bottom of the Canvas page, add an interactive 'Request Consultation' button. When clicked, it should trigger a simple pop-up form asking for the user's name, email, and purpose of meeting.”

Step 4: Refine Directly in Canvas

Select any text or section inside the Canvas screen to prompt local edits, or use the chat for universal styling.

“Make the section headings bold, increase the paragraph spacing for better readability, and ensure the submit button matches the navy blue theme.”

Step 5: Quick review

Take a look at the results and ask yourself:

• Did the generated portfolio accurately describe your work profile?

• Does the content and layout meet your professional standards?

Reflection

Let’s take a moment to reflect on what you learned.

• In what scenarios can rapid prototyping via natural language be integrated into current teaching or research workflows to save administrative time?

• What is one thing you’ve learned today that you’ll put into practice by the end of the week?