Personax template guide

Documentation that gets you started quickly.

A complete guide to installing, editing, and publishing Personax—with no build process, package manager, or JavaScript framework required.

Version 1.0HTML · CSS · JavaScriptResponsiveLast updated: September 13, 2026

01 · Quick start

Up and running in three steps.

Personax is a static template. You do not need to install dependencies. Extract the ZIP, open the folder, and run it through a local web server.

Extract the ZIP

Extract personax-template.zip and open the personax folder.

Run it locally

Use Live Server or the Python command below so every browser feature works as expected.

Edit and publish

Replace the content, assets, and SEO settings, then upload the entire folder to your hosting provider.

Run with Python

Terminal — from the personax folder

cd personax
python3 -m http.server 8000

Open http://localhost:8000. On Windows, use py -m http.server 8000 if python3 is unavailable.

Run with VS Code

Open the personax folder in Visual Studio Code.
Install the Live Server extension.
Right-click index.html and select Open with Live Server.

Can I open the files directly?

Yes. Basic pages work through file://. A local server is still recommended so the Clipboard API, query-string URLs, and browser behavior match production hosting.

02 · Requirements

Lightweight and uncomplicated.

You only need a text editor and a modern browser to customize the template. There is no compilation step or build command.

Component	Requirement	Notes
Editor	VS Code, Cursor, Sublime, or similar	Used to edit HTML, CSS, and JavaScript.
Browser	Recent Chrome, Edge, Firefox, or Safari	Supports modern CSS, Intersection Observer, and animation.
Local server	Optional, but recommended	Live Server, Python HTTP server, or another static server.
Hosting	Static hosting or a web server	Netlify, Cloudflare Pages, Vercel, GitHub Pages, Nginx, Apache, and shared hosting are all suitable.

The template loads fonts from Google Fonts and interface icons from the Lucide CDN. The primary brand logos are stored locally as SVG files in assets/brands.

03 · File structure

Where everything lives.

Folder structure

personax/
├── index.html              # Home page
├── services.html           # Services
├── work.html               # Project listing
├── project.html            # Dynamic project detail template
├── process.html            # Design process
├── blog.html               # Article listing
├── article.html            # Dynamic article template
├── about.html              # About page
├── contact.html            # Contact details and form
├── privacy.html            # Privacy policy
├── documentation.html      # This documentation
├── style.css               # Main template styling
├── script.js               # Interactions and dynamic data
├── favicon.svg             # Browser icon
├── robots.txt              # Crawler directives
├── sitemap.xml             # SEO URL index
├── site.webmanifest        # Web app metadata
└── assets/
    ├── *.png                  # Photography and project visuals
    └── brands/              # Local SVG brand logos

Important rule

Keep the relative relationship between the HTML files, style.css, script.js, and the assets folder. If you move a page into another subfolder, update its asset and navigation paths as well.

04 · Included pages

Everything included in the package.

File / URL	Purpose	Main content source
`index.html`	Homepage, services, featured work, tools, testimonials, and articles.	Written directly in HTML.
`services.html`	Services and engagement details.	Written directly in HTML.
`work.html`	Complete portfolio listing.	HTML cards linked to detail URLs.
`project.html?case=natura`	Case-study details selected by the `case` parameter.	The `projectData` object in `script.js`.
`process.html`	Working method and design process.	Written directly in HTML.
`blog.html`	Article listing.	HTML cards linked to article URLs.
`article.html?post=clarity`	Article selected by the `post` parameter.	The `articleData` object in `script.js`.
`about.html`	Profile, principles, and experience.	Written directly in HTML.
`contact.html`	Contact details and project brief form.	HTML plus the form handler in `script.js`.
`privacy.html`	Privacy policy.	Written directly in HTML.

05 · Brand & appearance

Change the identity without rebuilding the layout.

Replace the Personax name

Search for PERSONAX, Personax, Arka Wijaya, and hello@personax.design across all HTML files and script.js. Use your editor's Search in Files feature so no reference is missed.

Replace the header logo

The current geometric mark is drawn with CSS through the .logo-mark class. To use your own image, replace the logo markup in the header and footer of every page:

HTML

<a class="logo" href="index.html" aria-label="Brand home">
  <img src="assets/logo.svg" alt="Brand name" width="34" height="34">
  <span>BRAND NAME</span>
</a>

Change the color palette

The global palette sits at the top of style.css. Editing these variables updates the entire template.

style.css

:root {
  --bg: #070908;
  --bg-soft: #0b0e0d;
  --panel: #0f1211;
  --text: #f5f7f4;
  --muted: #9ba29e;
  --accent: #baff35;
  --accent-2: #76f2b7;
  --radius: 22px;
  --container: 1180px;
}

Change the fonts

Replace the Google Fonts URL inside the <head> of every page.
Update font-family on body, the headings, and the .serif class in style.css.
Make sure the weights used by the template—400, 500, 600, and 700—are loaded.

06 · General content

Edit directly and stay consistent.

Standard page content is written directly in each HTML file. Keep the existing classes in place so styling and responsive behavior remain intact.

Change the navigation

The header and footer are included in every HTML file because the template does not use a component system. After changing one navigation area, copy the same change to every page.

Navigation link example

<nav class="site-nav" aria-label="Primary">
  <a href="index.html">Home</a>
  <a href="services.html">Services</a>
  <a href="work.html">Work</a>
  <a href="process.html">Process</a>
  <a href="blog.html">Blog</a>
  <a href="about.html">About</a>
</nav>

The current navigation item is detected automatically from the file name by script.js. You do not need to add aria-current manually.

Add a standard page

Duplicate the page whose structure is closest to what you need.
Replace its <title>, description, canonical URL, Open Graph metadata, and <main> content.
Add the page link to the header or footer of every file when needed.
Add the final URL to sitemap.xml.
Test the result on desktop and mobile.

07 · Project / case study

One template, multiple case studies.

project.html reads the ?case=... URL parameter. Every project variation is stored in the projectData object inside script.js.

Add a new project

Prepare a cover and a secondary image inside assets.
Open script.js and find const projectData = {.
Add a new object with a short, lowercase key containing no spaces.
Add a card to work.html or index.html.
Add the detail URL to sitemap.xml.

script.js — project example

aurora: {
  title: 'Aurora',
  category: 'Product design · 2026',
  year: '2026',
  duration: '12 weeks',
  tagline: 'A short description of the project.',
  services: 'Strategy · UX/UI · Design system',
  role: 'Lead Product Designer',
  cover: 'assets/aurora-cover.webp',
  second: 'assets/aurora-detail.webp',
  briefTitle: 'Brief section heading.',
  intro: 'The project context and objective.',
  challengeTitle: 'Challenge section heading.',
  challenge: 'The primary problem the team faced.',
  challengeExtra: 'Additional challenge context.',
  approachTitle: 'Approach section heading.',
  approach: 'Your process and design decisions.',
  stats: [
    ['32%', 'Faster completion'],
    ['24%', 'Higher conversion'],
    ['41%', 'Fewer support tickets']
  ],
  outcomeTitle: 'Outcome section heading.',
  outcome: 'The final result and measurable impact.',
  quote: '“A testimonial from the client.”',
  quoteAuthor: 'Name · Role, Company',
  next: 'natura'
}

HTML — project card

<a class="project-card" data-category="product"
   href="project.html?case=aurora">
  <img src="assets/aurora-cover.webp" alt="Aurora product interface">
  <div class="project-content">
    <span class="project-tag">Product</span>
    <h3>Aurora</h3>
    <p>A short description of the project.</p>
  </div>
</a>

Check the next value

It must match an existing project key. If it does not, the “Next project” section cannot render correctly.

08 · Blog articles

Dynamic articles without a CMS.

article.html reads the ?post=... parameter. Article data lives in the articleData object inside script.js. The table of contents is generated automatically from each <h2> heading in the article body.

Add an article

Add the article image to assets.
Find const articleData = { in script.js.
Add a new entry. Use backticks for the body value.
Add a card to blog.html or the homepage.
Add the URL to the sitemap.

script.js — article example

discovery: {
  title: 'How discovery creates product focus',
  category: 'Product strategy',
  date: 'Sep 13, 2026',
  time: '7 min read',
  dek: 'A concise summary for cards and metadata.',
  image: 'assets/article-discovery.webp',
  alt: 'Product discovery workshop',
  body: `
    <p>Your opening paragraph.</p>
    <h2>Start with the decision</h2>
    <p>The first section of your article.</p>
    <blockquote>An important quotation.</blockquote>
    <h2>Turn insight into direction</h2>
    <ul><li>First point</li><li>Second point</li></ul>
  `
}

The article URL becomes article.html?post=discovery. If the URL key is not found, the template displays the clarity article as a fallback.

09 · Images & logos

Use sharp, efficient assets.

Asset locations

assets/*.png contains the hero photography, workstation image, and project visuals.
assets/brands/*.svg contains the Figma, Slack, Adobe, LinkedIn, and other brand logos.
assets/woners-logo.png is used for the “Made by Woners” credit.
favicon.svg is the browser-tab icon.

Image recommendations

Use	Ideal size	Format
Hero / wide cover	1600 × 1000 px or larger	High-quality WebP, AVIF, or PNG
Project card	1200 × 800 px	WebP or AVIF
Brand logo	Vector	SVG with a correct viewBox
Raster logo/footer mark	At least 256 × 256 px	Transparent PNG

Always give the alt attribute a meaningful description. For purely decorative imagery, use alt="".

Do not hotlink third-party logos

Store permitted logos locally in assets/brands. This prevents missing artwork when an external URL changes or is blocked.

10 · Contact form

Connect it before your website goes live.

The included form is a front-end demonstration. On submission, JavaScript only displays a success message and resets the fields; no data is sent to an email address or database.

Integration options

Form service: Formspree, Basin, Getform, or Netlify Forms.
Your own backend: send data with fetch() to your API endpoint.
Email link: use mailto: for very simple requirements.

Example using a form endpoint

Add action and method, then remove or adapt the contactForm?.addEventListener('submit', ...) handler in script.js.

contact.html

<form id="contact-form"
      action="https://form-provider.example/your-form-id"
      method="POST">
  <!-- Keep the existing form fields here -->
</form>

Testing is essential

Use your own endpoint, enable spam protection, provide a clear error state, and make sure your privacy policy explains what data is collected.

11 · Animation & parallax

Purposeful motion, ready to use.

The main interactions live in script.js, while animation styling is located in the Motion section of style.css.

Feature	How it works	How to use it
Reveal on scroll	Intersection Observer adds the `visible` class.	Add the `reveal` class to an element.
Parallax	The element position changes with scroll progress.	Add `data-parallax="0.12"` to an element.
Card tilt	A perspective transform follows pointer movement.	Already applied to the appropriate cards.
Counter	Numbers animate when they enter the viewport.	Use the counter attributes shown on the existing statistics.
Testimonial slider	The track moves through previous and next controls.	Keep the included slider structure.

The template respects the prefers-reduced-motion setting. Do not remove that media query; it is important for accessibility.

12 · SEO

Replace every URL before publishing.

Every page includes a title, description, canonical URL, Open Graph metadata, Twitter Card metadata, and structured data. The current demo origin is https://template.woners.com/personax.

Domain replacement checklist

Replace SEO_BASE in script.js.
Replace the canonical URL, og:url, and social image URLs in every HTML file.
Replace every URL in sitemap.xml.
Replace the sitemap location in robots.txt.
Update start_url in site.webmanifest.

script.js

const SEO_BASE = 'https://yourdomain.com';

Minimum metadata for every page

HTML head

<title>Page Title — Brand Name</title>
 <meta name="description" content="A unique description between 140 and 160 characters.">
 <link rel="canonical" href="https://yourdomain.com/page.html">
 <meta property="og:title" content="Page Title — Brand Name">
 <meta property="og:description" content="A concise description for social sharing.">
 <meta property="og:image" content="https://yourdomain.com/assets/cover.jpg">
 <meta property="og:url" content="https://yourdomain.com/page.html">

After publishing, submit sitemap.xml to Google Search Console and Bing Webmaster Tools. Use absolute HTTPS URLs for all social metadata.

13 · Deployment

Deploy it as a static website.

Shared hosting / cPanel

Open File Manager and go to public_html or the domain's document root.
Upload the entire contents of the personax folder, not only the HTML files.
Make sure index.html sits directly in the document root.
Open the domain and test all navigation links and assets.

Netlify, Cloudflare Pages, or Vercel

Deploy the personax folder as a static site. Leave the build command empty. Set the output/publish directory to that folder, or to . when the project root is already inside personax.

Nginx

Example server block

server {
  listen 80;
  server_name yourdomain.com www.yourdomain.com;
  root /var/www/personax;
  index index.html;

  location / {
    try_files $uri $uri/ =404;
  }
}

Enable HTTPS through your hosting provider or Certbot. Make sure ports 80 and 443 are publicly accessible.

Hosting in a subfolder

The template uses relative paths, so it can be deployed at a URL such as https://yourdomain.com/personax/. Copy the complete template into that subfolder's document root.

Example server file location

/var/www/html/
└── personax/
    ├── index.html
    ├── style.css
    ├── script.js
    └── assets/

For a subfolder deployment, include the full path in the SEO origin:

script.js

const SEO_BASE = 'https://yourdomain.com/personax';

Also change the manifest start_url to /personax/ and point the sitemap declaration to https://yourdomain.com/personax/sitemap.xml.

14 · Testing checklist

Check everything before launch.

Every menu item opens the correct page.
Project and article queries display the correct content.
Images load correctly and include alt text.
Brand logos load from the local assets folder.
The layout works at 375 px, tablet, and desktop widths.
The mobile menu opens and closes correctly.
The contact form actually delivers submitted data.
Email addresses and social links have been replaced.
Canonical URLs and metadata use the final domain.
robots.txt and the sitemap are accessible.
HTTPS works without mixed-content warnings.
The browser console contains no errors.
Motion remains comfortable with reduced motion enabled.
A missing URL returns an appropriate 404 response.

15 · Troubleshooting

Solutions to common problems.

Problem	Likely cause	Solution
CSS or JavaScript does not load	The file path is wrong or the folder structure changed.	Keep `style.css` and `script.js` beside the HTML files, then inspect the Network panel.
Images or logos are missing	The file name differs, capitalization does not match, or the asset was not uploaded.	Linux servers are case-sensitive. Match each `src` value to the exact file name.
Interface icons are blank	The Lucide CDN is blocked or the browser is offline.	Make sure the Lucide URL is accessible, or host the Lucide library locally.
A project card opens Natura	The key after `?case=` does not exist in `projectData`.	Match the URL value to the object key, for example `?case=aurora`.
An article opens the default post	The `?post=` key is incorrect or has not been registered.	Check the key in `articleData` and the card's href value.
A `reveal` element stays hidden	A JavaScript error occurs before the observer starts.	Open the browser console, fix the earliest error, and refresh.
The form looks successful, but no email arrives	The included form is only a front-end demonstration.	Connect it to a form provider or backend endpoint as explained in the contact form section.
The website returns 404 in a subfolder	The folder sits in the wrong document root.	Make sure the public URL matches the server structure, such as `/personax/index.html`.
Social previews still show old content	The social platform cached the previous metadata.	Update the metadata, then use the platform's sharing validator to refresh its cache.
HTTPS reports mixed content	An external asset still uses `http://`.	Use HTTPS URLs or store the asset locally.

How to inspect an error

Open the page that has the problem.
Press F12 or choose Inspect.
Check the Console panel for JavaScript errors.
Open the Network panel, refresh, and look for red or 404 requests.
Fix the first error before the others, because later errors may only be side effects.

Backup tip

Before a major change, duplicate the template folder or use Git. You will be able to compare edits and return to a working version when necessary.

You are ready

Make the template your own.

Begin with the brand identity, content, and contact details. Then add your best work, connect the form, complete the SEO setup, and run the testing checklist before launch.

Back to the template ↗