Personal Portfolio Website Template
From $19.00
An editorial portfolio template for product designers, consultants and creative professionals, fully bilingual: English (LTR) and Arabic with a real right-to-left layout. Six pages per language, pure HTML/CSS/JS, works offline, no build step.
- Secure payment via PayPal
- Instant digital delivery
- Clear licensing
- Support available
Overview
Personal Portfolio Website Template is a refined, editorial portfolio for independent product designers, UX consultants, design leads and other professionals who sell their expertise. It is built in two languages from the ground up: English (left-to-right) and Arabic (right-to-left), with a language switcher on every page that opens the same page in the other language. The sample content presents a fictional designer, Nora Ellis, with fictional clients, so you can swap in your own name and projects in minutes.
The design is sophisticated and calm: warm off-white and charcoal with a single vermilion accent, a soft serif for headings (Fraunces in English, Markazi Text in Arabic) and a humanist sans for reading (Source Sans 3 and Noto Sans Arabic). An asymmetric 12-column grid, oversized section numerals and subtle scroll reveals give it the feel of a printed monograph. On desktop your name and navigation sit in a fixed side column; on tablets and phones they collapse into a top bar with a full-screen menu.
What's inside
- Home: intro with key figures, client list, selected work in an asymmetric grid, four services with deliverables and engagement models, testimonials and a call to action.
- Work index: eight projects with a working category filter (product design, design systems, research, strategy), live result counts and shareable filter links.
- Case study: summary and project facts, sticky "On this page" contents, reading-progress bar, challenge, research findings, approach steps, design system, outcome metrics, client quote and credits.
- About: bio, portrait, principles, experience timeline, skills with levels, and a speaking and writing list.
- Contact: enquiry form with validation, error summary and success state, contact details and FAQ.
- 404 pages in both languages, plus a bilingual root 404 for static hosts.
Real Arabic, not just translation
Arabic pages use dir="rtl" and CSS logical properties, so the side column moves to the right, the grid mirrors and arrows flip. They use Arabic typefaces, Arabic-Indic numerals and correct Arabic plural forms in live counts, and the copy is written in Modern Standard Arabic for Arab readers.
Easy to make your own
Plain HTML, one stylesheet with clear design tokens and one small JavaScript file with no libraries. No framework, no build step and no external requests: double-click index.html or upload the folder to any static host. All artwork is original SVG (project covers, case study diagrams, portrait), and the README explains how to replace it with your own images.
The contact form validates in the browser and shows a success message. It does not send email by itself because the template is static: add the URL of a form service such as Formspree to the form's action attribute and the included script will post to it.
What's included
- Complete product files (ZIP)
Languages
The product description and details are provided in these languages.
Features
- Fully bilingual: English (LTR) and Arabic (RTL) versions of all 6 pages
- Language switcher on every page that keeps the visitor on the same page and remembers the choice
- Real RTL layout with CSS logical properties, mirrored grid and arrows, Arabic-Indic numerals
- Pages: home, work index, case study, about, contact and 404, in each language
- Fixed side column with name and navigation on desktop, top bar with full-screen menu on mobile
- Work index with a category filter, live counts, correct Arabic plural forms and shareable links
- Complete case study with sticky contents, reading-progress bar and outcome metrics
- About page with experience timeline, skill levels and a speaking list
- Contact form with validation, error summary, success state and optional form-service endpoint
- Editorial design: warm monochrome with a single vermilion accent and oversized section numerals
- Soft serif headings and humanist sans body text in both languages (Fraunces, Source Sans 3, Markazi Text, Noto Sans Arabic)
- Subtle scroll reveals that respect reduced-motion settings and work without JavaScript
- Original SVG artwork for 8 projects, the case study, the hero and the portrait
- Responsive from 390 px phones to 1440 px desktops with no horizontal scrolling
- Accessible: landmarks, skip link, keyboard-friendly menu, labelled forms, visible focus, AA contrast
- Pure HTML, CSS and vanilla JavaScript: no framework, no build step, no dependencies
- Works offline and from a double-click: fonts and images are bundled, no CDN or tracking
- Detailed README covering customisation, images, colours, fonts, the form and deployment
Requirements
Static HTML5, CSS3 and vanilla JavaScript. No build step, framework, database or server-side code. Any text editor to customise; any static web host to publish. Optional: Python 3 or any static server to preview locally.
Compatibility
Current versions of Chrome, Edge, Firefox and Safari on desktop, iOS and Android. Works from the local file system (double-click) and from any static host such as shared hosting, Netlify, Vercel, Cloudflare Pages or GitHub Pages.
Installation
- Download and unzip
personal-portfolio-website-template-1.0.0.zip. - Double-click
personal-portfolio-website-template/index.htmlto open the site (it opens the English or Arabic home page). - Optional local server: run
python3 -m http.server 8080inside thepersonal-portfolio-website-templatefolder and openhttp://localhost:8080. - To publish, upload the contents of the folder to any static host (Netlify, Vercel, Cloudflare Pages, GitHub Pages or shared hosting).
User guide
- Edit text: English pages are in
en/, Arabic pages inar/, with the same file names. - Your name and contacts: search and replace
Nora Ellis,نورا إليسandhello@noraellis.examplein all files. - Colours: change the design tokens (
--paper,--ink,--accent,--accent-ink) at the top ofassets/css/style.css. - Images: replace the SVG files in
assets/img/with your own images and updatesrcandaltin both languages. - Projects: each project card is an
<li data-cats="...">inwork.html; the filter counts update automatically. - Case studies: duplicate
case-study.htmlin both language folders for each project. - Contact form: add your form service URL to the form's
actionattribute to receive messages. - The README in the ZIP covers fonts, the language switcher, motion settings and deployment in detail.
License
| Personal$19.00 | Commercial$29.00 | Extended$99.00 | |
|---|---|---|---|
| Projects | 1 | 5 | Unlimited |
| Users or sites | 1 | 1 | 5 |
| Commercial use | Not allowed | Allowed | Allowed |
| Modification | Allowed | Allowed | Allowed |
| Resale | Not allowed | Not allowed | Not allowed |
| Redistribution | Not allowed | Not allowed | Not allowed |
| Updates | 12 months | 12 months | Lifetime |
| Support period | 6 months | 12 months | 12 months |
| License key | Yes | Yes | Yes |
Pay with PayPal or a debit or credit card. We send your product once the payment is confirmed.
Support & Updates
Support is provided through the contact details in your TowerCaty order email. Please include the template name and version (Personal Portfolio Website Template 1.0.0), your browser and a short description or screenshot of the issue.
Changelog
1.0.0
- Version 1.0.0: first release in the store.
Last Updated
- Last update
- Oct 7, 2026
- Version
- 1.0.0
