Product overview
Arcframe is a static multi-page creative-agency and portfolio template with four home concepts and one one-page version.
Folder structure
Open the root index.html for the demo selector. Pages live in /pages, styles in /assets/css, scripts in /assets/js, documentation here, and sales files in /marketing.
Available homepages
Experimental, Luxury Minimal, Motion Studio, Independent Portfolio and One-Page Agency.
Portfolio and project pages
Grid, masonry, horizontal and fullscreen portfolios; editorial, immersive and conversion-focused project stories.
Change the brand name
Open assets/js/config.js and replace brandName. Elements marked data-brand update automatically. Search remaining static titles when needed.
Change the logo
Replace the .brand-mark HTML or use an inline SVG. Keep an accessible text label alongside the mark.
Change colours
Edit CSS custom properties in assets/css/base.css. Homepage-specific palettes are in assets/css/themes.css.
Change fonts
Replace the font import at the top of base.css and update --serif, --sans and --mono. Use legally redistributable fonts and only required weights.
Change text
Open the relevant HTML page and replace the fictional copy. Keep the heading hierarchy and labels intact.
Add or remove a project
Copy or remove a complete .project-card article. Update its link, title, category, artwork class and data-category value.
Change project filters
Add a .filter-btn with data-filter and apply the matching keyword to each project card data-category.
Add a team member
Duplicate a team card, replace the fictional name, role and abstract artwork, then create or duplicate a profile page.
Social links and contact details
Update config.js for common details and replace # placeholders in headers, footers and contact sections.
Connect forms
Forms do not submit by default. Add a verified endpoint, update privacy information and remove data-demo handling when connecting production delivery.
Netlify Forms
Add data-netlify="true" and a unique name attribute to the form, include a matching hidden form-name field, and deploy to Netlify.
Formspree
Set method="POST" and action="https://formspree.io/f/YOUR_ID". Remove data-demo after verifying the endpoint.
Custom backend
Set method and action to your secure endpoint. Implement server-side validation, spam protection, rate limiting and consent handling.
Disable loader, transitions or cursor
Set loader, pageTransitions or cursor to false in assets/js/config.js.
Animation intensity
Adjust animationIntensity in config.js for custom scripts and edit duration variables in base.css.
Dark mode
Set darkMode in config.js. The theme button stores the choice in localStorage and respects device preference on first visit.
Replace artwork and add video
Replace project-art layers with optimized local SVG, WebP or AVIF files. For video, use muted playsinline controls and never autoplay audio.
Optimize media
Provide correct intrinsic dimensions, compress assets, use loading="lazy" below the fold and avoid oversized video backgrounds.
Deploy to Netlify
Drag the entire arcframe folder into Netlify Drop or connect a repository. No build command is required.
Deploy to GitHub Pages
Upload the files to a repository, enable Pages for the root branch and verify all relative paths.
Ordinary hosting
Upload the entire folder through FTP or a hosting file manager, preserving the directory structure.
Browser support
Current Chrome, Edge, Firefox, Safari, Mobile Safari and Chrome for Android. Core content remains available without advanced effects.
Accessibility and reduced motion
Use semantic landmarks, labels, focus states and keyboard controls. Test with keyboard only and enable reduced motion in the operating system to verify simplified effects.
Troubleshooting
Broken visuals usually indicate changed relative paths. Blank submissions mean no endpoint is connected. If local font loading is blocked, use the system fallbacks or self-host fonts.
Asset credits
All artwork is original. Preview fonts are open-source Google Fonts listed in credits.txt.
Included / not included
Included: source HTML, CSS, JS, SVG, docs and marketing files. Not included: CMS, backend, database, hosting, payment processing or email delivery.
Version history
Version 1.0.0 is the initial release. See changelog.txt for the complete list.
Required product disclaimer
This product is a static HTML, CSS and JavaScript website template. It does not include a CMS, database, user-account system, hosting, payment processing, email backend or administrative interface. Forms are included as frontend demonstrations and require connection to a third-party service or custom backend to deliver submissions.