Braxton - Personal Portfolio and Resume HTML Template Documentation
by:
mix_design
version: 1.0.0
created: 12.03.2024
last update: 12.03.2024
01
Thank you for choosing Braxton - personal portfolio and resume HTML template. We have prepared detailed documentation to make Braxton customization an easy task for you. If you have any questions that are beyond the scope of this help file, you can email us on support@mixdesign.club.
We would be very happy if you could rate this item here with 5 stars. Your feedback is very important so write us a line 😀!
02
Follow the steps below to setup your site template:
In order to start working with Braxton unzip the downloaded package and open HTML folder to find all ready-to-use template files. Choose one of the demo *.html files (any ready-to-use demo you like) and rename it to index.html.
Next you'll need to prepare a project for customization. Below is a list of files and folders that are required in the root directory of your project:
index.html - your chosen *.html file (renamed already);css folder - stylesheet files;js folder - JavaScript files;fonts folder - icon fonts files;img folder for project images and favicon;mail.php file for sending e-mails;.htaccess - this file contain rules for files caching on web server;The other files can be used according to your preferences.
Your project is ready to go! Now you can start adding your texts, images and video to your new awesome website.
After the customization is over, you'll need to upload the project files to your hosting web server using FTP client or cPanel interface in order to use it on your website.
03
After downloading and extracting template package you will find 3 folders:
This section describes
HTML
folder structure. More about
BraxtonGULP
folder structure you can find out in
BraxtonGULP
section.
Braxton is one page HTML template. So, mostly you will need one
*.html
file and supporting
*.css,
*.js,
*.php
files with some images. All the directories and files are well organized as it shown on the image bellow.
source-files folder contains all expanded CSS files, expanded JavaScript files, plugins and components files;mail.php file for sending e-mails is located in the root directory;.htaccess file is located in the root directory. This file contain rules for files caching on web server.Braxton is one page HTML template and comes with dark and light color themes and 4 ready-to-use demo pages:
Braxton has a simple and easy to customize structure based on Bootstrap 5.3.2 Grid. Here is a sample page structure:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
Meta tags, Title, Favicon and Icons, Facebook Metadata, CSS, Custom Browser Color
</head>
<body>
<!-- Loader Start -->
<div id="loader" class="loader">
...
</div>
<!-- Loader End -->
<!-- Header Start -->
<header id="header" class="header d-flex justify-content-between">
...
</header>
<!-- Header End -->
<!-- Avatar Side Block Start -->
<div id="avatar" class="avatar">
...
</div>
<!-- Avatar Side Block End -->
<!-- Page Content Start -->
<div id="content" class="content">
<div class="content__wrapper">
<!-- Intro Section Start -->
<section id="home" class="main intro">
...
</section>
<!-- Intro Section End -->
<!-- Portfolio Section Start -->
<section id="portfolio" class="inner inner-first portfolio">
...
</section>
<!-- Portfolio Section End -->
<!-- About Section Start -->
<section id="about" class="inner about">
...
</section>
<!-- About Section End -->
<!-- Resume Section Start -->
<section id="resume" class="inner resume">
...
</section>
<!-- Resume Section End -->
<!-- Contact Section Start -->
<section id="contact" class="inner contact">
...
</section>
<!-- Contact Section End -->
</div>
</div>
<!-- Page Content End -->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
...
</div>
<!-- Load Scripts Start -->
<script src="js/libs.min.js"></script>
<script src="js/app.js"></script>
<script src="js/gallery-init.js"></script>
<!-- Load Scripts End -->
</body>
</html>
Braxton template CSS files have a well-organized structure and a table of contents, as you can see on image below:
All CSS files are placed in
css
folder and have to be included in the
<head>
tag.
Braxton uses uncompressed CSS files.
If you want to improve Google PageSpeed Insights performance, you can use minificated files from
source-files → braxton-css-min-files.
<!-- Template Styles Start-->
<link rel="stylesheet" type="text/css" href="css/loaders/loader.css">
<link rel="stylesheet" type="text/css" href="css/plugins.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- Template Styles End-->
CSS files that have to be included in chosen .html file:
loader.css
plugins.css
main.css
If you want to customize CSS styles, We recommend to create your own
custom.css
file and include it to
Template Styles
section of the
HTML
file. This solution will help you in future updates.
All JavaScript files are placed in
js
folder and have to be included before the
</body>
tag.
libs.min.js - all JavaScript libraries that are necessary for Braxton proper work, are compiled in this file;gallery-init.js - for photoswipe gallery initialization;app.js - includes other scripts calls and settings;
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
<script src="js/gallery-init.js"></script>
<script src="js/app.js"></script>
<!-- Load Scripts End-->
We used minificated
libs.min.js
file to add all necessary JavaScript libraries to this template. The file contains:
All this uncompressed files you can find in the source-files folder.
04
In the Braxton template we used Syne Font, Fontawesome Iconic Font and Phosphor Iconic Font.
Braxton uses
The font is embedded in the main.css file:
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap");You can customize this font or embed another fonts for your project with Google Fonts. In this case, you'll also need to change the fonts in the css files per your fonts used.
Braxton uses Phosphor iconic font. You can use phosphoricons.com page to easily find the icon you want to use. All icons are already compiled in the plugins.css file and ready for use.
To insert icon in your project, just choose Web tab and copy the code: <i class="ph ph-heart"></i>, <i class="ph ph-arrow-up"></i>, <i class="ph ph-instagram-logo"></i>.
<li>
<a href="https://www.instagram.com/" target="_blank">
<i class="ph ph-instagram-logo"></i>
</a>
</li>More information about Phosphor icons you can find on official documentation website - Phosphor Docs.
Braxton uses free version of FontAwesome 6.5.1 iconic font. You can use fontawesome.com/icons page to easily find the icon you want to use. Solid, regular and brands icons are already compiled in the plugins.css file and ready for use.
To change icons, just change the class names: fa-solid fa-heart, fa-brands fa-instagram, fa-regular fa-address-book.
<li>
<a href="https://www.facebook.com/" target="_blank">
<i class="fa-brands fa-facebook"></i>
</a>
</li>More information about FontAwesome you can find on official documentation website - FontAwesome Docs.
05
Braxton covers almost all platforms design requirements for favicon and icons:
Classic favicon:
<link rel="icon" href="img/favicon/favicon.ico" sizes="any">
Android Web App Manifest & Apple Touch Icon:
<link rel="apple-touch-icon" href="img/favicon/apple-touch-icon.png">
<link rel="manifest" href="img/favicon/manifest.webmanifest">
Universal SVG Icon for All Sizes ang Dark & Light Browser Color Themes:
<link rel="icon" href="img/favicon/icon.svg" type="image/svg+xml">
Facebook Metadata:
<!-- Facebook Metadata Start -->
<meta property="og:image:height" content="1200">
<meta property="og:image:width" content="1200">
<meta property="og:title" content="Braxton - Personal Portfolio & Resume HTML Template">
<meta property="og:description" content="Show yourself brightly with Braxton - unique and creative portfolio and resume template!">
<meta property="og:url" content="http://mixdesign.club/themeforest/braxton/">
<meta property="og:image" content="http://mixdesign.club/themeforest/braxton/img/og-image.jpg">
<!-- Facebook Metadata End -->
You can use Braxton favicon as an example or generate new one with Favicon Generator or any other favicon generator by your needs.
06
Braxton template comes with easy-to-customize page elements. You can choose from 4 ready-to-use demo files, 2 color themes, various backgrounds and much more.
Loader will hide contents of your site until it's fully loaded. If you want to customize or remove loader, find this code in *.html file:
<!-- Loader Start -->
<div id="loader" class="loader">
<div id="loaderContent" class="loader__content">
<div class="loader__shadow"></div>
<div class="loader__box"></div>
</div>
</div>
<!-- Loader End -->Loader styles are included in the <head> tag:
<!-- Template Styles Start-->
<link rel="stylesheet" type="text/css" href="css/loaders/loader.css">
...
<!-- Template Styles End-->Braxton template provides 2 color themes and 4 ready-to-use demo pages. The template automatically detects the device's color theme and applies the same one - dark or light. You can change the color theme by clicking color theme switcher.
It's easy to change the dark and light color themes by changing default variables in the main.css file:
:root {
...
/* light color scheme */
--base--light: #e6ebf4;
...
/* dark color scheme */
--base--dark: #111111;
...
/* permanent colors */
--per-base: #111111;
...
}
Feel free to experiment!
The logo container is located in the avatar section of the template - div class="avatar__logo".
Please note! If you want to change the logo color with the color theme switch button,
you need to use an SVG inline code image with fill="currentColor" property or use CSS variables in the linearGradient :
<svg xmlns="http://www.w3.org/2000/svg" width="85px" height="85px" viewBox="0 0 85 85" fill="currentColor">
<path id="caption" fill="currentColor" d="..."/>
<path id="logo" fill="currentColor" d="..."/>
</svg><linearGradient id="gradientFill" gradientUnits="userSpaceOnUse" x1="9.9604" y1="75.0338" x2="75.0387" y2="9.9555">
<stop offset="0" style="stop-color:var(--accent)"/>
<stop offset="1" style="stop-color:var(--secondary)"/>
</linearGradient>Of course, you can use an ordinary <img> tag, but in this case the logo won't change it's color with the theme.
All images used in the Braxton template live demo are just for preview purpose only and they are not included in main download files. You easily can find all images on freepik.com or pexels.com. We are using placeholders from dummyimage.com instead of real images. You can easily replace placeholder URL with a path to your image like img/yourimage.jpg.
All tmplate background images you can replace in the main.css file:
/* ------------------------------------------------*/
/* Template Backgrounds Start */
/* ------------------------------------------------*/
.image-background {
background-image: url("https://dummyimage.com/2560x1440/4d4d4d/636363");
}
...
/* ------------------------------------------------*/
/* Template Backgrounds End */
/* ------------------------------------------------*/Braxton template comes with 1 header type with left aligned menu links and right aligned controls.
Desktop view:
Mobile view:
Header contains navigation list, color switch button and contact CTA. You can find the header in the beginning of the *.html file:
<!-- Header Start -->
<header id="header" class="header d-flex justify-content-between">
<!-- Navigation Menu Start -->
<div class="header__navigation">
<nav id="menu" class="menu">
<ul class="menu__list d-flex justify-content-start">
<li class="menu__item">
<a class="menu__link btn" href="#home">
<span class="menu__caption">Home</span>
<i class="ph-bold ph-house-simple"></i>
</a>
</li>
...
</ul>
</nav>
</div>
<!-- Navigation Menu End -->
<!-- Header Controls Start -->
<div class="header__controls d-flex justify-content-end">
...
</div>
<!-- Header Controls End -->
</header>
<!-- Header End -->Braxton template comes with functional layout with various animated backgrounds. Backgrouds settings you can find in the Animated Backgrounds sections of this file.
Replace this headline demo text with your own:
<!-- Headline Start -->
<div id="headline" class="headline d-flex align-items-start flex-column" data-speed="1">
<p class="headline__subtitle animate-headline">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" fill="currentColor">
<path fill="currentColor" d="M5.6,12.6c-0.5-0.8-0.7-2.4-1.7-3.5c-1-1-2.7-1.2-3.5-1.7C-0.1,7-0.1,6,0.4,5.6c0.8-0.5,2.3-0.6,3.5-1.8
C5,2.8,5.1,1.2,5.6,0.4C6-0.1,7-0.1,7.4,0.4c0.5,0.8,0.7,2.4,1.8,3.5c1.2,1.2,2.6,1.2,3.5,1.7c0.6,0.4,0.6,1.4,0,1.7
C11.8,7.9,10.2,8,9.1,9.1c-1,1-1.2,2.7-1.7,3.5C7,13.1,6,13.1,5.6,12.6z"/>
</svg>
<span>Let's meet!</span>
</p>
<h1 class="headline__title animate-headline">I'm Alex Walker<br>Digital designer and illustrator.</h1>
<div class="headline__btnholder d-flex flex-column flex-sm-row">
<a class="btn mobile-vertical btn-default btn-hover btn-hover-accent-mobile animate-headline" href="#portfolio">
<span class="btn-caption">My Works</span>
<i class="ph-bold ph-squares-four"></i>
</a>
<a class="btn mobile-vertical btn-default btn-hover btn-hover-outline-mobile animate-headline" href="#0">
<span class="btn-caption">Download CV</span>
<i class="ph-bold ph-download-simple"></i>
</a>
</div>
</div>
<!-- Headline End -->07
Braxton uses Swiper Slider Plugin for the testimonials slider. It's a simple slider with navigation buttons and slide effect:
<!-- Testimonials Slider Start -->
<div class="testimonials-slider">
<!-- slider main container -->
<div class="swiper-testimonials">
<!-- additional required wrapper -->
<div class="swiper-wrapper">
<!-- slides -->
<div class="swiper-slide">
...
</div>
<div class="swiper-slide">
...
</div>
</div>
<!-- navigation buttons -->
<div class="swiper-button-prev mxd-slider-btn-square mxd-slider-btn-square-prev animate-in-up">
...
</div>
<div class="swiper-button-next mxd-slider-btn-square mxd-slider-btn-square-next animate-in-up">
...
</div>
</div>
</div>
<!-- Testimonials Slider End -->
Find the Load Scripts section at the end of <body> and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start -->
<script src="js/libs.min.js"></script>
...
<script src="js/app.js"></script>
<!-- Load Scripts End -->
If you want to change this slider settings, find the
app.js
file in
js
folder and make the necessary changes to the swiper init lines:
const swiper = new Swiper('.swiper-testimonials', {
slidesPerView: 1,
spaceBetween: 20,
autoplay: true,
speed: 1000,
loop: true,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
More information about Swiper settings you can find in the official documentation - swiperjs.com/get-started
Portfolio gallery is made using PhotoSwipe JavaScript Gallery.
This is an example for one portfolio item, just duplicate it to add new pictures or fill it with your content:
<figure class="col-12 col-md-6 gallery__item grid-item animate-card-2" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://dummyimage.com/1400x1400/3c3c3c/636363" data-image="https://dummyimage.com/800x800/3c3c3c/636363" class="gallery__link" itemprop="contentUrl" data-size="1400x1400">
<img src="https://dummyimage.com/800x800/3c3c3c/636363" class="gallery__image" itemprop="thumbnail" alt="Image description">
</a>
<figcaption class="gallery__descr" itemprop="caption description">
<h5>Isometric House</h5>
<div class="card__tags d-flex flex-wrap">
<span class="rounded-tag opposite">Illustrations</span>
<span class="rounded-tag opposite">3D Render</span>
</div>
<p class="small">Mauris porttitor lobortis ligula, quis molestie lorem scelerisque eu. Morbi aliquam enim odio.
</p>
</figcaption>
</figure>
JavaScript files that have to be included:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
<script src="js/gallery-init.js"></script>
...
<!-- Load Scripts End-->More information about PhotoSwipe Gallery you can find in PhotoSwipe Documentation.
08
All backgrounds CSS styles are compiled in plugins.css file so you don't need to add any CSS files.
This background effect is created using 2 inline SVG objects:
background__svg01background__svg02<div id="svgBackground" class="svg-background">
<!-- top svg item -->
<div class="background__svg01" data-speed="0.8">
...
</div>
<!-- bottom svg item -->
<div class="background__svg02" data-speed="0.4">
...
</div>
</div>The loading animation for this objects is provided by simple CSS animation on loading:
<script>
const content = document.querySelector('body');
const imgLoad = imagesLoaded(content);
imgLoad.on('done', instance => {
setTimeout(() => {
document.getElementById("svgBackground").classList.add("loaded");
}, "1000");
});
</script>Parallax scroll animation is provided by GSAP and scrollTrigger. If you want to change the scroll speed for any object, just add data-speed property:
<div class="background__svg01" data-speed="0.8">
...
</div>gsap.to("[data-speed]", {
y: (i, el) => (1 - parseFloat(el.getAttribute("data-speed"))) * ScrollTrigger.maxScroll(window) ,
ease: "none",
scrollTrigger: {
start: 0,
end: "max",
invalidateOnRefresh: true,
scrub: 0
}
});Also you can change the objects color fill directly in the HTML file:
<radialGradient id="color-gradient" cx="418.5665" cy="225.9685" r="499.9326" fx="866.8251" fy="4.6162" gradientTransform="matrix(-0.6935 0.7207 -0.7207 -0.6935 953.1126 355.0528)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#CEC4EF"/>
<stop offset="1" style="stop-color:#CEC4EF;stop-opacity:0"/>
</radialGradient>Or replace it with any other object you like - the containers are animated separately from inline SVGs!
This background effect is created using a *.webp image with transparent background:
<!-- Image Background Layer Start -->
<div id="imageBackground" class="image-background" data-speed="0.4"></div>
<!-- Image Background Layer End -->Replace the placeholder with your image in the main.css file. You can use *.webp or *.png images.
.image-background {
background-image: url("../img/yourimage.webp");
}Parallax scroll animation is provided by GSAP and scrollTrigger. If you want to change the scroll speed for any object, just add data-speed property:
<div id="imageBackground" class="image-background" data-speed="0.4"></div>gsap.to("[data-speed]", {
y: (i, el) => (1 - parseFloat(el.getAttribute("data-speed"))) * ScrollTrigger.maxScroll(window) ,
ease: "none",
scrollTrigger: {
start: 0,
end: "max",
invalidateOnRefresh: true,
scrub: 0
}
});
This background effect is created using 3 blured objects, animated with GSAP:
<!-- Gradient Background Start -->
<div class="gradient-background">
<div class="blur"></div>
<div class="blur"></div>
<div class="blur"></div>
</div>
<!-- Gradient Background End -->You can adjust the speed and angle by changing this variables in the html file:
<!-- Load Scripts Start -->
...
<script>
...
const randomDelay = random(0, 50);
const randomTime = random(20, 40);
const randomTime2 = random(5, 12);
const randomAngle = random(-30, 150);
...
</script>
...
<!-- Load Scripts End -->Also you can change the gradients colors in the main.css file:
:root {
...
/* light color scheme */
...
--gradient-one--light: #CEC4EF;
--gradient-two--light: #f5c5cd;
--gradient-three--light: #ac8fe3;
/* dark color scheme */
...
--gradient-one--dark: #a287d5;
--gradient-two--dark: #E4B8BF;
--gradient-three--dark: #8b6bc5;
...
}09
Braxton template is provided with 1 working form type:
Braxton template has integrated ajax contact form.
It's very easy to set up this forms to receive feedback on your e-mail:
mail.php file is added to the root directory of your project.<form> tag with id="contact-form" in the *.html file. <!-- Contact Form Start -->
<form class="form contact-form" id="contact-form">
<!-- Hidden Required Fields -->
<input type="hidden" name="project_name" value="Braxton Template">
<input type="hidden" name="admin_email" value="support@mixdesign.club">
<input type="hidden" name="form_subject" value="Contact Form Message">
<!-- END Hidden Required Fields-->
...
</form>
<!-- Contact Form End -->JavaScript files that have to be included:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/app.js"></script>
<!-- Load Scripts End-->Done! Now you can receive messages on your e-mail.
10
If you want to totally customize Braxton, you can use our all-inclusive BraxtonGULP template. BraxtonGULP includes Bootstrap 5 Grid, Gulp, Sass, Bourbon, Autoprefixer, Browsersync, Clean-CSS, CSS Beautify, Uglify, and other packages for efficient and comfortable work.
BraxtonGULP requires node, npm and git.
Install Node Modules: npm i
Run BraxtonGULP: gulp
app directory;sass directory;dist folder is a production folder. It contains ready project with optimized HTML, CSS, JS and images.gulp: run default gulp task for web development;
build: build project to dist folder;
clearcache: clear all gulp cache.
If you have any questions about BraxtonGULP, you can email us on support@mixdesign.club.
11
12