Implemented in plain HTML, CSS, and JavaScript, with no build step or framework dependencies
HTMLPortfolio
isys3004-a1-sample-1 — HTML Portfolio Template
By michael-borck
A reference implementation for Curtin University ISYS3004 Assignment 1: a student portfolio website example built with plain HTML, CSS, and JavaScript.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-13View source
What stands out
A quick read of the recorded project description.
Includes four pages: home, about, projects, and a quotes API page
Implements a responsive layout, mobile navigation, and a dark/light theme toggle
The quotes page fetches real-time data from the DummyJSON API via fetch
Comes with CODE-GUIDE.md, which explains the code section by section and lists possible oral exam questions
Provides KNOWN-ISSUES.md and W3C and Lighthouse validation reports, demonstrating a complete submission structure
Template Details
This is a reference implementation for Assignment 1 of Curtin University's ISYS3004 Business Web and Mobile Technologies unit, created by unit instructor Michael Borck. The site centers on a fictional character, Alex Rivera, and presents a sample portfolio submission that meets the assignment requirements, covering a home page, an about page, a projects page, and an API feature page that fetches quotes in real time from the DummyJSON API.
The code is deliberately kept simple: all HTML, CSS, and JavaScript are written in a style that students in the unit could produce. The site includes a responsive layout, mobile navigation, a theme toggle (dark mode), and highlighting of the current item in the navigation bar. Styles are centralized in css/styles.css with section-by-section comments, and interaction logic is split between js/main.js (site-wide) and js/api.js (the fetch logic for the quotes page).
The repository also provides supporting teaching documentation: CODE-GUIDE.md explains the code approach and possible oral exam questions, KNOWN-ISSUES.md records known shortcomings, and docs/ contains placeholder files for AI conversation logs, a reflection document, and Lighthouse and W3C validation reports. The README states that the site was developed with AI assistance, but all code and content were reviewed by a human before publication.
Regarding usage limitations: this is a teaching example, not a production site ready to deploy; the conversation logs, reflection document, and similar items in the repository are placeholders and must be replaced. The code is under the MIT license, but third-party assets such as demo images, fonts, and icons require separate license verification.
HTMLPortfolio
Is it right for your project?
Use Cases
- ISYS3004 students checking their own Assignment 1 submission against the reference implementation
- Instructors or teaching assistants demonstrating a compliant portfolio sample in class
- Other educators adapting it under the MIT license as an assignment template for a similar unit
- Beginners reading CODE-GUIDE.md to understand how HTML, CSS, and JavaScript work together
Suitable For
- Students currently completing ISYS3004 Assignment 1 who need a structural reference
- Instructors teaching introductory web units who need example code
- Beginners who want to see how a multi-page site is organized with plain HTML/CSS/JS
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Clone the repository and open index.html in a browser to view it; no dependency installation or build is required
- 2
The quotes page depends on the external DummyJSON API; offline or when the API is unavailable, that page cannot fetch data
- 3
The AI conversation logs and reflection document under docs/ are placeholders and must be replaced with your own materials before formal submission
- 4
Licenses for third-party assets such as demo images, fonts, and icons must be verified separately; the MIT license covers only the repository code
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis listing covers the free version under the MIT license in the public repository; the free scope is the code in that version and does not mean external services or third-party assets are free.
Must comply with when using
- You may use, modify, commercialize, and distribute the code in this version free of charge.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; the MIT license on the code alone is not sufficient to determine this.
- External services such as domains, hosting, databases, payments, or AI may incur separate charges.
- The repository is positioned as a learning resource for students in Curtin University's ISYS3004 unit; other educators may adapt it under the terms of the MIT license.
- Alex Rivera in the site is a fictional character; any resemblance to real Curtin students is coincidental, and the character must not be used as real-person information.
- The site and supporting documentation were developed with AI assistance (Anthropic's Claude) and were reviewed and verified by a human educator before publication.
- The quotes page relies on the external DummyJSON API for real-time data; offline or when the API is unavailable, that page cannot retrieve data.
- The files under docs/conversations/ are placeholder AI conversation logs (8 files, weeks 2–5), not real records, and must be replaced before formal use.
- docs/reflection.md is placeholder reflection content and must be replaced with your own materials.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
**Educational use:** This repository is provided as a learning resource for students enrolled in ISYS3004 at Curtin University. Other educators are welcome to adapt it under the terms of the MIT licence.
Original README
**Fictional persona:** Alex Rivera is a fictional character. Any resemblance to a real Curtin student is coincidental.
Original README
**AI assistance:** This site and its accompanying documentation were developed with AI assistance (Claude by Anthropic). All code and content was reviewed and verified by a human educator before publication.
Original README
| `quotes.html` | API feature page (live quotes via DummyJSON) |
Original README
| `docs/conversations/` | Placeholder AI conversation transcripts (8 files, weeks 2–5) |
Original README
https://github.com/michael-borck/isys3004-a1-sample-1/blob/main/LICENSEhttps://github.com/michael-borck/isys3004-a1-sample-1/blob/main/README.md| `docs/reflection.md` | Placeholder reflection document |
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 80 / 100
- Technologies
- HTML
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-04-24
- Screenshot last checked
- 2026-10-13
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-13
Inspect the recorded source material
SHA-256: 029e52cb2b967dea6c7ebc2c92e9aa282fdabe15ba6ce1e551ef48c98fa9d780
2026-10-13T09:25:27.832Z
Source file / repository# ISYS3004 Assessment 1 — Sample Portfolio A reference implementation of the Assessment 1 portfolio for **ISYS3004 Business Web and Mobile Technologies** at Curtin University. **Live site:** https://michael-borck.github.io/isys3004-a1-sample-1/ --- ## What this is This is a worked example showing what a solid Assessment 1 submission looks like — not a perfect or advanced site, but one that meets the brief professionally and demonstrates genuine understanding of the concepts covered in Modules 1–5. The site is intentionally simple. Every line of HTML, CSS, and JavaScript is something a student in this unit could have written, and every decision has a reason that can be explained in a viva. ## What's in this repo | File / Folder | Purpose | |---------------|---------| | `index.html` | Home page | | `about.html` | About page | | `projects.html` | Projects page | | `quotes.html` | API feature page (live quotes via DummyJSON) | | `css/styles.css` | All styling — heavily commented by section | | `js/main.js` | Site-wide JS: mobile nav, theme toggle, active nav | | `js/api.js` | Fetch logic for the quotes page | | `CODE-GUIDE.md` | Explanation of the code — read this before your viva | | `KNOWN-ISSUES.md` | Acknowledged shortfalls — an example of professional practice | | `docs/conversations/` | Placeholder AI conversation transcripts (8 files, weeks 2–5) | | `docs/reflection.md` | Placeholder reflection document | | `docs/validation/` | Lighthouse and W3C validation reports | ## For students Start with the [live site](https://michael-borck.github.io/isys3004-a1-sample-1/), then read [CODE-GUIDE.md](CODE-GUIDE.md). The guide explains the ideas behind the code — how HTML, CSS, and JavaScript connect, what selectors do, and how specific features like dark mode and the API fetch work. It also lists the kinds of questions you may be asked in the viva. ## Acknowledgements **Fictional persona:** Alex Rivera is a fictional character. Any resemblance to a real Curtin student is coincidental. **AI assistance:** This site and its accompanying documentation were developed with AI assistance (Claude by Anthropic). All code and content was reviewed and verified by a human educator before publication. **Educational use:** This repository is provided as a learning resource for students enrolled in ISYS3004 at Curtin University. Other educators are welcome to adapt it under the terms of the MIT licence. --- ## Licence [MIT](LICENSE) — © 2025 Curtin University / Michael Borck
Explore similar templates
Compare previews and descriptions within the same stack and category.
simplefolio
Simplefolio is a minimal single-page portfolio template for developers, built with HTML, Bootstrap, SCSS, and Parcel under the MIT license. It includes Hero, About, Projects, Contact, and Footer sections, with content edited in /src/index.html and theme colors controlled by two SCSS variables.
HTML · Portfolio
Freelancer
A bright, single-page Bootstrap portfolio template for freelancers, designers, and small studios. It includes a responsive portfolio grid with modal detail windows and an SB Forms contact form that requires an API token.
HTML · Portfolio
Resume
A single-page resume and CV template from Start Bootstrap, built on Bootstrap with a fixed sidebar and content sections.
HTML · Portfolio
Creative
A single-page marketing template by Start Bootstrap for creative agencies and product services, built on Bootstrap with SCSS, featuring a portfolio grid and call-to-action sections. It includes pre-set SB Forms markers for form integration and npm build scripts for source customization.
HTML · Corporate Website
Grayscale
A dark single-page Bootstrap template from Start Bootstrap for photography, events and brand storytelling, with a large hero and clearly separated sections.
HTML · Corporate Website
startbootstrap-stylish-portfolio
A one-page Bootstrap portfolio theme from Start Bootstrap with multiple content sections and an off-canvas navigation menu. Basic use means editing HTML/CSS under dist and opening index.html; advanced use relies on npm with Pug and SCSS build scripts.
HTML · Portfolio