FolixFolix
← Back to homepage

Studio Guide

A complete, step-by-step guide to managing your Folix site from Studio.

Getting started

  • Studio lives at yoursite.folix.pro/studio (or yourdomain.com/studio if you've connected a custom domain).
  • There's no public sign-up page for Studio — your account is created for you when you buy a Folix site, and your login details are sent to you then.
  • Forgot your password? Use "Forgot password?" on the login page to get a reset link by email.
  • Every change you save in Studio goes live on your site right away — there is no separate "publish" step.

Profile

  • Open Profile at the top of the Studio sidebar.
  • Under Identity, fill in your Name, Job Title, and Tagline. Each field has an English and an Arabic tab — fill in both, or leave Arabic blank to fall back to English.
  • Tagline accepts several comma-separated phrases (e.g. "Building things., Shipping fast.") — they play one after another as a typewriter effect on your homepage.
  • Toggle "Available for new projects" on or off to show or hide that badge on your site.
  • Click the Avatar image to upload a new photo — a built-in crop/zoom tool lets you frame it before saving.
  • Under Stats, set your years of experience and your project/client/open-source counts — these appear as numbers on your site.

About

  • Open About in the sidebar.
  • Headline and Subheadline are the two lines shown under your name — both bilingual.
  • Short bio and Long bio are your About section text, also bilingual.
  • Resume URL: paste a link to your résumé or CV to show a download button on your site.
  • Status badge and Stack badge are two short text labels shown on your avatar card (e.g. "Open to Work 🟢" and "React · Node · K8s") — you can type emoji directly into either field.

About facts

  • Open About Facts in the sidebar.
  • Click "New" to add a fact card: Icon, Label, and Description.
  • Icon expects a single emoji — e.g. ⚡ 🧩 🚀 🔒 — see "Adding emojis" below if you're not sure how to type one.
  • Label and Description are bilingual short text.
  • Drag the handle on the left of a row to reorder facts, or use the Active toggle to hide one without deleting it.

Skills

  • Open Skills.
  • Click "New" to add a skill: Name, Category, Percentage (0–100), and a Color.
  • Category is searchable — start typing an existing category, or type a new name to create one on the spot.
  • Percentage controls the skill bar's fill level on your site.
  • Drag rows to reorder — the order here is the order visitors see.

Skill categories

  • Open Skill Categories.
  • Add, rename, or reorder the group headings your skills are organized under (e.g. "Frontend", "Backend").
  • Renaming a category here relabels every skill assigned to it — it doesn't unlink or delete anything.

Projects

  • Open Projects.
  • Click "New" to add a project: Title and Description (bilingual), Year, Category, and an accent Color.
  • Tags: type a tag and press Enter to add it as a chip — repeat for as many tags as you need.
  • Demo URL / GitHub URL: paste links to the live project or its repository (must start with http:// or https://).
  • Toggle Featured to pin a project to the top of your grid.
  • Drag rows to reorder, and use the category and featured filters above the table to find a project quickly.

Project categories

  • Open Project Categories — the same pattern as Skill Categories: add, rename, and reorder the groupings your projects can be filtered by.

Experience

  • Open Experience.
  • Click "New" to add a role: Role and Company (bilingual), Period (e.g. "Jan 2023 — Present"), and Location.
  • Achievements: click "Add achievement" to add a bullet point, repeat for as many as you need, drag to reorder, and remove any with its own delete button. Keep the Arabic list in the same order as the English one.
  • Stack: type a technology and press Enter to add it as a tag, same as Projects' Tags field.
  • Drag rows in the main table to reorder your timeline.

Articles

  • Open Articles.
  • Click "New" to add an article: Title and Description (bilingual), Publisher, Publish date, and the Article URL.
  • Drag rows to reorder.

Testimonials

  • Open Testimonials.
  • Click "New" to add one yourself: Name, Role (bilingual), Quote (bilingual), Avatar initials (1–4 characters), and a Star rating (1–5).
  • Visitors can also submit a testimonial through your public site's submission form — those arrive with a Pending status and won't show on your site until you approve them.
  • Use the Approve or Reject action on a pending row to moderate it, and the Active toggle to hide an approved testimonial without deleting it.

Show or hide sections

  • Open Sections.
  • This list controls which whole sections — Experience, Articles, Testimonials, and more — appear on your live site.
  • Use the toggle in each row to show or hide a section instantly; there is no separate save button, it applies as soon as you click it.
  • Edit a row's Label to change how a section's heading reads, and drag rows to reorder the sections on your page.
  • You can't add or remove rows here — every section your site supports is already listed; hiding one just removes it from view.

Theme & colors

  • Open Theme.
  • Pick one of the two preset palettes for each mode (light/dark), or choose "Custom" to use a palette you've built yourself — see Custom palettes below.
  • Primary button color is optional — leave it blank to use your palette's own accent color for buttons.
  • Custom CSS is an advanced option: paste raw CSS here to override anything the palette doesn't cover. It's applied site-wide after your theme, so check your live site after saving — invalid or unexpected CSS here can break your page's layout for visitors.

Custom palettes

  • Open Custom Palettes.
  • Click "New" to create a palette: give it a name and pick 8 colors — accent, secondary, and the background/text/border tones your site uses.
  • Once saved, your new palette appears as an option on the Theme page under "Custom".

Messages

  • Open Messages to see everything submitted through your site's contact form.
  • Messages appear here automatically — there's nothing to configure. New-message notifications are emailed straight to your own account's email address.
  • Click a message to read it (this also marks it read), and delete any you don't need to keep.

Adding emojis

  • Studio doesn't have a built-in emoji picker — you add emoji into any text field the same way you would in any other app.
  • On Windows, press Win + . (period) to open the system emoji picker; on Mac, press Ctrl + Cmd + Space. You can also copy an emoji from anywhere and paste it into the field.
  • Emoji work in any free-text field — Tagline, About's badges, Achievements, testimonial quotes, and more — but the one field Studio explicitly expects an emoji in is About Facts' Icon field: type a single emoji there, e.g. ⚡ 🧩 🚀 🔒.