Powered by

# Homepage Configuration

The Homepage refers to the index.html file located in your project root directory. This file controls the main landing page of your website.

Below is a complete sample code for the homepage. You can copy and paste it into your project, then customize the site title and meta tags as needed. Avoid editing anything outside of these areas to ensure your site functions correctly.

# Sample Homepage Code

Here is the full code for the homepage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- README
    Hi, thanks for using our template. You can customize the site title.
    Feel free to edit the Meta tags and their description as well.
    -->
    
    <!-- HTML Meta Tags -->
    <title>My Social Profile</title>
    <meta name="description" content="My amazing social profile - Powered by Profilie">
    <meta name="keywords" content="websites-templates, personal websites, open-source, portfolio, online ventures, web hosting, dns, website, free websites, website maker, website builder">

    <!-- Google / Search Engine Tags -->
    <meta itemprop="name" content="My Social Profile">
    <meta itemprop="description" content="My amazing social profile - Powered by Profilie">
    <meta itemprop="image" content="https://domains.is-a.shop/media/banner.png">

    <!-- Links -->
    <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=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">

    <!-- favicon.ico -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    
    <!-- Styles
    You can customize your style, currently there are 4 styles available in total.
    Uncomment your desired themes below and don't forget to comment on others. 
    Only one theme can be used at a time otherwise it will cause problems.
    -->
    <!-- <link rel="stylesheet" href="//cdn.harys.is-a.dev/profilie/lib/themes/mint.css"> -->
    <!-- <link rel="stylesheet" href="//cdn.harys.is-a.dev/profilie/lib/themes/maple.css"> -->
    <!-- <link rel="stylesheet" href="//cdn.harys.is-a.dev/profilie/lib/themes/azure.css"> -->
  
    <link rel="stylesheet" href="//cdn.harys.is-a.dev/profilie/lib/themes/sapphire.css">
    <link rel="stylesheet" href="//cdn.harys.is-a.dev/profilie/lib/styles/social-icon.css">
</head>
<body>
    <noscript>This page requires JavaScript to work, please enable it or ask the website owner.</noscript>
    
    <canvas id="particles-canvas"></canvas>

    <!-- README
    Everything will be populated via JavaScript.
    𝗗𝗼𝗻'𝘁 𝗲𝗱𝗶𝘁 𝗮𝗻𝘆𝘁𝗵𝗶𝗻𝗴 𝗵𝗲𝗿𝗲 𝗶𝗳 𝘆𝗼𝘂'𝗿𝗲 𝗻𝗼𝘁 𝘀𝘂𝗿𝗲 𝘄𝗵𝗮𝘁 𝘆𝗼𝘂'𝗿𝗲 𝗱𝗼𝗶𝗻𝗴.
    -->
    
    <div class="info-box">
        <img alt="Profile Picture" class="center-img" id="profile-img">
        <h1 class="title" id="profile-name"></h1>
        <p class="details" id="profile-description"></p>
        <div class="social-icons" id="social-icons"></div>
    </div>

    <footer>
        <p id="footer-text"></p>
    </footer>

    <!-- Scripts -->
    <script src="config.js"></script> <!-- Your config.js file [REQUIRED] -->
    <script src="//cdn.harys.is-a.dev/profilie/lib/scripts/sound-effect.js"></script> <!-- Sound effect on images hover [OPTIONAL] -->
    <script src="//cdn.harys.is-a.dev/profilie/lib/scripts/social-icon.js"></script> <!-- All social icons data [REQUIRED] -->
    <script src="//cdn.harys.is-a.dev/profilie/lib/profilie.min.js"></script> <!-- Main script file that controls the whole website [REQURIED] -->
</body>
</html>

# Important Notes

  • The profilie.min.js and config.js files located in your project root are required for the website to work correctly.
  • The social-icon.js file, which contains all social media icons, is also required.
  • One of the theme's stylesheet files must be included to ensure proper styling.
  • For more details, visit our Learn more!

# Support

If you need help or have questions, feel free to open an issue or participate in discussions on our GitHub Repository.