Make the work
your own.
A small, complete student portfolio: two case studies, a readable résumé, and room to explain how you think.
1. Start with the files
Extract the ZIP and open index.html in a browser. No package installation or build command is required. Keep the assets folder next to the HTML files. You can also preview with a local static server:
cd fieldnotes-student
python3 -m http.server 8080
# Open http://localhost:8080/index.html: introduction, project cards, coursework, experience and contact.campus-path.htmlandpantry-notes.html: two complete sample case studies.resume.html: readable résumé with a print stylesheet.avery-chen-resume.txt: editable text download. Keep it aligned with the HTML résumé.assets/style.css: colors, typography and layout customizations.assets/app.js: mobile menu, project filters and print button.assets/vendorandassets/fonts: local Bootstrap 5.3.8 CSS and Inter font, with their licenses.
2. Replace the sample identity
Avery Chen, the college, internship and project stories are fictional. Replace the name, email, dates, availability, qualifications and sample results everywhere, including the résumé download and page titles. Use coursework, volunteering or personal projects if you do not have an internship. Do not invent experience to fill a section.
Contact links use mailto: and open the visitor’s email application. There is no form backend. Replace avery@example.com with an address you want public. A portfolio does not need your home address or personal phone number.
3. Turn a project into a case study
Choose two or three projects you can explain. A class assignment can be useful when your contribution and reasoning are clear. Use these prompts to replace the sample copy:
What was the problem, and what was your role?
Write the original question in one sentence. Name the audience, timeframe and constraints. If it was a team project, identify your work and credit your teammates. Separate the assignment from what you personally changed.
What evidence shaped your decisions?
Show a sketch, interview theme, code experiment or before-and-after comparison. Describe what you actually observed, how many people or records were involved, and the limitations. Label invented or illustrative data clearly.
What did you choose, and what did you leave out?
Pick one decision worth explaining. Describe the alternatives and why one fit the constraints better. A short account of a trade-off tells a reader more than a long list of tools.
What happened, and what would you do next?
Report only outcomes you can support. A prototype, peer critique or lesson learned is a valid outcome; you do not need a fabricated conversion rate. Distinguish launched work from concepts, and describe one specific next test.
4. Add your own visuals
The two included SVGs are original static concept illustrations, not interactive apps. Replace them with your work, write descriptive alt text, and keep width and height attributes aligned with the new image. Ask permission before including team or client material. Remove personal data from screenshots.
For another project, duplicate a case-study HTML file and its card in index.html. Set data-project="coursework" or data-project="personal" to use the existing filters. Add a new filter button only if you also add a matching category. Without JavaScript all projects and navigation links remain visible.
5. Publish the portfolio
Upload the contents of the extracted folder to a static host or your web server. There is no WordPress theme installer or database. Preserve relative paths and test the uploaded case-study pages directly, not only from the home page. Set your own domain in page metadata if you add canonical or social tags.
The distributed demo pages contain <meta name="robots" content="noindex,follow">. After replacing the sample content, remove that tag from your real public portfolio pages if you want them indexed. Keep this setup page private or remove it from the deployed site and footer.
Before sharing your URL
- Check every project link, navigation anchor and email address.
- Read the résumé in HTML, download the text file, and inspect print preview.
- Try the mobile menu and project filters with a keyboard and on a phone.
- Check color contrast and focus visibility after changing the palette.
- Replace fictional details, sample notices and the demo artwork where appropriate.
- Retain the required Colorlib credit and third-party license files.
License & credits
Fieldnotes Student’s original layout, copy, script and SVG artwork are by Colorlib, licensed under CC BY 3.0. Retain appropriate attribution and indicate changes. Bootstrap CSS is MIT licensed; Inter uses the SIL Open Font License. Their license files are included. See LICENSE.txt.
For inspiration, read the student portfolio examples or browse portfolio website templates.