Getting Started
Template: E-Bio - Personal Portfolio HTML Template
Created Date: 20 June, 2024
Last Update: 30 January, 2025
Version: 1.0.1
Author: Kri8thm
Email: kri8thm@gmail.com

First and foremost, I want to express my gratitude for choosing to purchase this template and for your continued loyalty as my customer. You're truly appreciated!
You are entitled to receive complimentary lifetime updates for this product, along with exceptional support directly from the author.

Introduction

Basic tips and quick guide that will help you to edit this template.

To effectively use this template, a basic understanding of HTML, CSS and Javascript is necessary. Please conduct a quick Google search or visit W3Schools for any related queries, as addressing topic-specific issues is given top priority.

Template Features
  • Built with HTML5, SCSS, Javascript
  • No CSS framework
  • No jQuery
  • CSS3 Animation
  • GSAP Animation
  • Scroll Animations
  • Smooth page transitions using Barba.js
  • Smooth scroll using Lenis.js
  • RTL support
  • W3C validated HTML5 & CSS3 coding
  • Portfolio and Blog listing & details pages
  • Fully responsive
  • Modern design
  • Clean coded
  • Working contact form
  • Google fonts
  • Form validation
  • 3 Homepage options
  • Cross-browser compatible
  • SEO optimized
  • Mobile first CSS
  • Easy to customize
  • Well documented
  • And more...
Requirements

To customize this template, you will require the following software:

  1. You will need code editing software such as VS Code, Sublime Text, or Notepad.
  2. You will also need a web browser for testing purposes, such as Google Chrome or Mozilla Firefox.
  3. You will also need an FTP tool to upload files to the server, such as FileZilla.
Download Template

Upon purchasing this template, you can access and download it through your account.

Step 1: Simply log in and click on the Download link to obtain the template.

Step 2: Upon reaching the download page, you will find a list of the items you have purchased.
Click on Download button > Click on All files & documentation

What's Included

Once you download the template, you will receive All files and documentation in a ZIP file. In the root folder of the ZIP file, you can view the contents to see what you will receive.

Template Structure

Please review the common structure of this template.

File Structure

Below is the folder structure for this project. You can explore the project using these folders:

theme/
├── assets/
|   ├── css/
|   ├── images/
|   ├── js/
|   ├── php/
|   ├── plugins/
|   └── scss/
├── about.html
├── about-rtl.html
├── blog.html
├── blog-details.html
├── blog-details-rtl.html
└── ...
HTML

Below is a common HTML code that serves as the basic skeleton for most HTML pages in this project:

Copy 
<!DOCTYPE html>
    <html lang="en">
    <head>
        <!-- Meta Tag -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Seo Meta -->
        <meta name="description" content="E-Bio - Personal Portfolio HTML Template">
        <meta name="keywords" content="portfolio template, portfolio, personal template, responsive portfolio, personal, themeforest, html portfolio template, css3, html5">
    
        <title>E-Bio - Personal Portfolio HTML Template</title>
    
        <!-- Favicon -->
        <link href="assets/images/logos/favicon.png" rel="icon">
    
        <!-- IOS Touch Icons -->
        <link rel="apple-touch-icon" href="assets/images/logos/touch-icon-iphone.png">
        <link rel="apple-touch-icon" sizes="152x152" href="assets/mages/logos/touch-icon-ipad.png">
        <link rel="apple-touch-icon" sizes="180x180" href="assets/images/logos/touch-icon-iphone-retina.png">
        <link rel="apple-touch-icon" sizes="167x167" href="assets/images/logos/touch-icon-ipad-retina.png">
    
        <!-- Google fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Rose:wght@300..700&display=swap" rel="stylesheet">

        <!-- Styles -->
        <link rel="stylesheet" href="assets/css/plugins.css" type="text/css">
        <link rel="stylesheet" href="assets/css/styles.css" type="text/css">
        ...
    </head>
    <body data-barba="wrapper" data-magic-cursor="true">
    
        <!-- Page loader [[ Find at scss/components/loader.scss ]] -->
        <div id="loader">
            <span id="loader_text" data-splitting>loading</span>
            <svg id="loader_shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800">
                <path d="M -44,-50 C -52.71,28.52 15.86,8.186 184,14.69 383.3,22.39 462.5,12.58 638,14 835.5,15.6 987,6.4 1194,13.86 1661,30.68 1652,-36.74 1582,-140.1 1512,-243.5 15.88,-589.5 -44,-50 Z" 
                data-path="M -44,-50 C -137.1,117.4 67.86,445.5 236,452 435.3,459.7 500.5,242.6 676,244 873.5,245.6 957,522.4 1154,594 1593,753.7 1793,226.3 1582,-126 1371,-478.3 219.8,-524.2 -44,-50 Z" />
            </svg>
        </div>
        <!-- End:: loader -->
        
        <div data-barba="container" data-barba-namespace="default">
        
            <!-- Start:: Header [[ Find at scss/components/header.scss ]] -->
            <header id="header">...</header>
            <!-- End:: Header -->
            
            <!-- Start:: Main [[ Find at scss/framework/core.scss ]] -->
            <main id="main">
    
                <!-- Placed all section -->
    
            </main>
            <!-- End:: Main -->

            <!-- Start:: Footer [[ Find at scss/components/footer.scss ]] -->
            <footer id="footer">...</footer>
            <!-- End:: Footer -->


            <!-- Start:: Contact modal [[ Find at scss/components/modal.scss ]] -->
            <div class="modal" id="contact_modal" tabindex="-1" aria-labelledby="contact_modal_label" aria-hidden="true">...</div>
            <!-- End:: Contact modal -->

            <!-- Form message [[ Find at scss/components/forms.scss ]] -->
            <div id="form_message"></div>
    
        </div>
    
        <!-- Script -->
        <script src="assets/js/plugins.js"></script>
        <script src="assets/js/scripts.js"></script>
    
    </body>
    </html>
SCSS

The template is constructed using the SCSS compiler, allowing for easy modification within your editor. The files are located as indicated in the provided screenshot.

JavaScript

The template is made using pure JavaScript and is located in the assets/js/ directory. If you want to edit or add script, please use the script.js file.

Edit Template

If you possess a fundamental understanding of HTML, SCSS and Javascript, you can effortlessly modify this template using editors like VS Code.

Step 1: Launch VS Code, then select File and choose Open Folder.

Step 2: Choose the project folder from your local directory.

Now, you can access and edit all the files from there.

SCSS

SCSS is a pre-compiled version of CSS, making it easy to customize this template. If you understand SCSS fundamentals, you can easily modify the SCSS files. Below are the steps to add an SCSS live compiler in VS Code to generate CSS files.

Step 1: Open the Extensions tab in VS Code.

Step 2: Search for "Live Sass Compiler" and install it.

Step 3: Now you can start the live server.

If you want to learn more, you can watch the video below.


Add the following code to your setting.json file; it aids in compiling SCSS files.

Copy 
"liveSassCompile.settings.formats": [{
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "./assets/css"
}]
Contact Form

The template includes a functional contact form, and it's important to note that the form operates only in a hosting environment. If you intend to implement changes, modify the contact.php file:

  1. Open contact.php in VS Code.
  2. Modify the value of $to on line number 9.
Form Validation

The contact form is validated using Javascript If you wish to alter the validation messages, simply open script.js where you can find all messages on line numbers 30-34.

Animations

The template incorporates impressive CSS3 animations. You can made your own animations by editing the HTML and CSS files.

Step 1: To add an animation, open the HTML file you wish to modify. Insert a data-animate attribute on the element where you want to incorporate the animation.

Step 2: Following the HTML edit, navigate to _animation.scss and define the style for the animation using the same name as specified in the data-animate attribute.

To introduce a delay to the animation, include a data-animate-delay attribute, specifying the delay duration in milliseconds.

Magic Cursor

The template comes with a custom magic cursor. If you want to use the default system cursor, simply remove data-magic-cursor from the body tag.

Exercise caution when modifying the template. Incorrect editing could result in a complete breakdown of the design layout. Please note that no assistance will be available for flawed customizations.
Deployment

This HTML template is static, allowing you to make edits using any code editor like VS Code. Once you've made your changes, you need to upload the template to bring it online.

Open your FTP client, such as FileZilla, or directly access it through cPanel. Upload the contents of the template to your server's root directory. Once the files have finished uploading, navigate to www.yourdomain.com and enjoy :)

  1. Open FTP Client
  2. Connect server and upload template here
Extras
Change Logs

Here we are mention project change and new release of the version.

1.0.1

Resolved the Safari browser loading issue

1.0.0

Initial Release

Refund Policy

To request a refund, kindly review the article provided.

The article outlines cases in which refund requests will not be accepted.

Supports

If you have any queries, please do not hesitate to contact me. Click here to email me.

WhatsApp: Link here
Telegram: Link here
Made with Love.
Don't forget to rate!