MyLinks - Documentation

Introduction

MyLinks is a Creator's Profile Template for creators to show off their profile and social links to their audience. The page could serve as a landing page so your followers can now easily navigate through your socials and custom links.

About

Most creators, influencer, and artists need a personal web page to increase online presence, information exchange, credibility, network reach, etc. MyLinks aims to be a platform for them to easily create their custom profile web page.

As of today, the template is composed of two unique profile template styles and more will be added soon. This web front-end template is the first step to achieve a fully user-friendly application for creators in the future, coded with PHP and MySQL.

Future Plans:

To achieve our goal, these are the features that our team is currently working on:

More Profile Designs
Working Contact Form
Easy Installation with MySQL Integration
Admin panel (easy modification/updates)

Changeable Color Scheme
Changeable Creator's Details
Changeable Contact Details
Modify Social Links
Etc.

And many more.

Do you want to contribute? Feel free to contact us!

Features

These are only some of the features of our template. More are added in future updates.

Fully Responsive

This template is fully responsive and mobile friendly design.

Fast Loading Speed

This template is fully responsive and mobile friendly design.

Easy to Customize

This template is fully responsive and mobile friendly design.

Clean and Modern Design

This template is fully responsive and mobile friendly design.

Bootstrap 5

This template is fully responsive and mobile friendly design.

Validated HTML5 and CSS3

This template is fully responsive and mobile friendly design.

Cross Browser Support

This template is fully responsive and mobile friendly design.

Well Documented

This template is fully responsive and mobile friendly design.

Resources

Bootstrap: MyLinks uses Bootstrap, a CSS Framework, to quickly develop our responsive and mobile-first website.
Lightbox: MyLinks uses Lightbox, is a simple, unobtrusive script used to overlay images on the current page. It is used for our gallery section.
ParticlesJS: MyLinks uses ParticlesJS, a JavaScript Library, to achieve the particles animations in the background.
Softr: MyLinks uses Softr to generate random blobs as for the background.
FontAwesome Icons: MyLinks uses FontAwesome Icons, an Icon Library, for the aesthetic icons.

Background

Blobs

Blobs are shapes that are generated from Softr as an image.

Customizing Blobs

Generate your own blobs from the Softr and simply replace the images found in /img/blobs/ folder.

Removing Blobs

If you want remove the blobs in background, open the file or page with an editor.

CTRL+F or Find the lines of code below, and simply delete the lines.

<!-- Blobs Background -->
<img src="img/blobs/blob-1.svg" class="blob blob-md">
<img src="img/blobs/blob-2.svg" class="blob blob-lg">
<img src="img/blobs/blob-3.svg" class="blob blob-lg">
<img src="img/blobs/blob-3.svg" class="blob blob-xs">
<img src="img/blobs/blob-4.svg" class="blob blob-xs">
<img src="img/blobs/blob-4.svg" class="blob blob-xs">
<img src="img/blobs/blob-2.svg" class="blob blob-xs">
<!-- End Blobs Background-->

ParticleJS

The particles background is made possible with ParticlesJS (a javascript library for background particles).

Customizing Particles Background

You may generate your custom Particles Background at https://vincentgarreau.com/particles.js/.

Change the current background by accessing js/main.js file and replacing the current ParticlesJS(); function with the custom code you generated from the link above.

Removing Particles Background

If you want remove the particles background, open the file or page with an editor.

CTRL+F or Find the line <div id="particles-js"></div>, and simply delete the line.

Learn more about ParticlesJS here.

Components

Buttons

MyLinks include several predefined button styles specifically for certain social links.

Examples

Button colors are achieved with the class styling of .btn-{brand}

Code

<a href="#" class="profile-card-social__item btn-facebook">
	<i class="fab fa-facebook-square icon"></i> Facebook
</a>

<a href="#" class="profile-card-social__item btn-twitter">
	<i class="fab fa-twitter-square icon"></i> Twitter
</a>

<a href="#" class="profile-card-social__item btn-instagram">
	<i class="fab fa-instagram icon"></i> Instagram
</a>
<a href="#" class="profile-card-social__item btn-youtube">
	<i class="fab fa-youtube icon"></i> Youtube
</a>

<a href="#" class="profile-card-social__item btn-behance">
	<i class="fab fa-behance icon"></i> Behance
</a>

<a href="#" class="profile-card-social__item btn-github">
	<i class="fab fa-github icon"></i> GitHub
</a>

<a href="#" class="profile-card-social__item btn-codepen">
	<i class="fab fa-codepen icon"></i> CodePen
</a>

<a href="#" class="profile-card-social__item btn-custom">
	<i class="fas fa-link icon"></i> Custom Link
</a>

MyLinks includes a .btn-circle class for circular icon buttons.

<a href="#" class="btn btn-circle btn-facebook"><i class="fab fa-facebook"></i></a>
<a href="#" class="btn btn-circle btn-twitter"><i class="fab fa-twitter-square"></i></a>
<a href="#" class="btn btn-circle btn-instagram"><i class="fab fa-instagram"></i></a>
<a href="#" class="btn btn-circle btn-youtube"><i class="fab fa-youtube"></i></a>
<a href="#" class="btn btn-circle btn-behance"><i class="fab fa-behance"></i></a>
<a href="#" class="btn btn-circle btn-github"><i class="fab fa-github"></i></a>
<a href="#" class="btn btn-circle btn-codepen"><i class="fab fa-codepen"></i></a>

Gallery

MyLinks include a gallery for designers to showcase their works.

<div class="d-flex flex-wrap justify-content-center align-items-start">
	<img src="./img/gallery/gallery-1.jpg" class="img-thumbnail img-fluid col-md-4 col-sm-5" data-toggle="lightbox"
	data-gallery="example-gallery" data-remote="./img/gallery/gallery-1.jpg">

	<img src="./img/gallery/gallery-2.jpg" class="img-thumbnail img-fluid col-md-4 col-sm-5 " data-toggle="lightbox"
	data-gallery="example-gallery" data-remote="./img/gallery/gallery-2.jpg">

	<img src="./img/gallery/gallery-3.jpg" class="img-thumbnail img-fluid col-md-4 col-sm-5 " data-toggle="lightbox"
	data-gallery="example-gallery" data-remote="./img/gallery/gallery-3.jpg">

	<img src="./img/gallery/gallery-4.jpg" class="img-thumbnail img-fluid col-md-4 col-sm-5 " data-toggle="lightbox"
	data-gallery="example-gallery" data-remote="./img/gallery/gallery-4.jpg">

	<img src="./img/gallery/gallery-5.jpg" class="img-thumbnail img-fluid col-md-4 col-sm-5 " data-toggle="lightbox"
	data-gallery="example-gallery" data-remote="./img/gallery/gallery-5.jpg">

	<img src="./img/gallery/gallery-6.jpg" class="img-thumbnail img-fluid col-md-4 col-sm-5 " data-toggle="lightbox"
	data-gallery="example-gallery" data-remote="./img/gallery/gallery-6.jpg">

	<img src="./img/gallery/gallery-7.jpg" class="img-thumbnail img-fluid col-md-4 col-sm-5 " data-toggle="lightbox"
	data-gallery="example-gallery" data-remote="./img/gallery/gallery-7.jpg">

	<img src="./img/gallery/gallery-8.jpg" class="img-thumbnail img-fluid col-md-4 col-sm-5 " data-toggle="lightbox"
	data-gallery="example-gallery" data-remote="./img/gallery/gallery-8.jpg">

	<img src="./img/gallery/gallery-9.jpg" class="img-thumbnail img-fluid col-md-4 col-sm-5 " data-toggle="lightbox"
	data-gallery="example-gallery" data-remote="./img/gallery/gallery-9.jpg">
</div>

Song Playlist

MyLinks include a playlist of songs for creators who loves music.

Example

Across The Wire

Calexico

Cold Roses

Ryan Adams & The Cardinals

Married Girl

The Slackers

Code

<!-- Sources -->
<audio id="audio" preload="none" tabindex="0">
	<source src="#" data-track-number="1" />
	<source src="#" data-track-number="2" />
	<source src="#" data-track-number="3" />
</audio>

<!-- Playlist Items -->
<div class="playlist-item" data-track-row="1">
	<div class="btn btn-playlist" data-play-track="1">
		<i class="fas fa-play"></i>
	</div>
	<div class="playlist-track">
		<a class="track-title" href="javascript:void(0)" data-play-track="1">
		Across The Wire
		</a>
		<p class="track-subtitle ">Calexico</p>
	</div>
</div>

<div class="playlist-item" data-track-row="2">
	<div class="btn btn-playlist" data-play-track="2">
		<i class="fas fa-play"></i>
	</div>
	<div class="playlist-track">
		<a class="track-title" href="javascript:void(0)" data-play-track="2">
		Cold Roses
		</a>
		<p class="track-subtitle ">Ryan Adams & 
		The Cardinals
		</p>
	</div>
</div>

<div class="playlist-item" data-track-row="3">
	<div class="btn btn-playlist" data-play-track="3">
		<i class="fas fa-play"></i>
	</div>
	<div class="playlist-track">
		<a class="track-title" href="javascript:void(0)" data-play-track="3">
			Girl
		</a>
		<p class="track-subtitle ">The Slackers</p>
	</div>
</div>

Contact Us

Do you have questions, suggestions, contributions for our project? Feel free to contact us anytime! We will respond to you as soon as we can.

Website
ThemeForest
Email Us
WhatsApp
MrJim#2389 (Discord User)