Personal Portfolio and Resume Template

Show your best work, quickly

A portfolio has about ten seconds to say who you are, what you do and why you are good at it. This template keeps to that rule: a large headline, a list of selected work, a short honest about section, your experience and a way to get in touch. A second page holds a printable résumé so recruiters can take a PDF away.

Edit in the right order

1. Name and headline. Replace "Noor Ellison" and the headline with one clear sentence about the problems you solve.
2. Selected work. Keep four to six projects. For each, write what the project was, your role and the result. Replace the thumbnails with screenshots and link each row to a case study.
3. About. Be specific and human. Mention what you care about and how you work.
4. Experience. Keep it short here; the full detail belongs on the résumé page.
5. Contact. Replace the email, links and form action. Make it very easy to reach you.
6. Résumé. Update resume.html with your history, quantified achievements, skills and education.

The résumé page

The résumé is laid out for A4. On screen it appears as a paper sheet. When printed, the controls disappear and the layout fills the page, so Print and Save as PDF gives a clean, single-page document. Keep it to one page where possible and put numbers on your results.

Design notes

The layout uses a sticky left rail on desktop that collapses to a compact header on phones. Hover effects are light and respect reduced-motion settings. The one accent colour is a CSS variable, easy to change. There is no framework, so it loads almost instantly.

Going live

Upload the folder to any static host, connect a domain and add a short description to each page for search. Add real alt text if you add images. When you want a CMS, blog or case study system, DEV3 can extend this design into a full site.

Accessibility, motion and licence

The template uses semantic landmarks, a skip link, visible focus styles and readable contrast. Motion is limited to gentle fade-ins and hover states, and it switches off for visitors whose device asks for reduced motion. There is no 3D, no WebGL and nothing to load from a CDN. Everything is free for personal and commercial use, and the brand names, people and prices are fictional, so replace them before launch. The README in the zip lists every file and the first edits to make.