ichiidev/profile

Vue based Discord styled profile

Profile

Self hosted VueJS based Discord like web-profile

How do I use it ?

You'll only need a webserver like Apache or NGINX and to follow theses few steps:

1. Clone this repository in your webserver root

Simply type the following commands:

$ git clone https://github.com/IchiiDev/profile.git profile

$ cd profile

2. Add assets to the assets\img folder

You can include your profile picture to the folder as well with Discord badges and projects icons (Exemple badges and placeholders are included with the project). You can find a list of useful Discord assets in SVG here: #ressources

Disclaimer: I highly recommend not to host any of Discord assets on your own. Always consider directly using the Discord assets links (cf: #ressources) EDIT (11/09/2021): For some reason, Discord is blocking assets for third party websites so you will need to host them on your web server.

3. Edit the assets\config.js file to manage the page's content

Open the assets\config.js file and edit the following configuration:

const config = {
    
    USERNAME: "User#0000",
    PICTURE: "assets/img/profile_picture.png",

    DESCRIPTION: "Change this bio in the <b>assets/config.js</b> file. <i>It may include HTML syntax</i>",

    BADGES: [
        { id: "HypeSquad Bravery", image: "https://discord.com/assets/64ae1208b6aefc0a0c3681e6be36f0ff.svg" },
        { id: "Nitro Sub", image: "https://discord.com/assets/386884eecd36164487505ddfbac35a9d.svg" },
    ],

    PROJECTS: [
        { id: "project-1", image: "assets/img/placeholder1.png", link: "https://discord.com", name: "Super cool project 1" },
        { id: "project-2", image: "assets/img/placeholder2.png", link: "https://discord.com", name: "Super cool project 2" },
        { id: "project-3", image: "assets/img/placeholder3.png", link: "https://discord.com", name: "Super cool project 3" },
    ],

    SOCIALS: [
        { class_name: "fab fa-github", link: "https://github.com/discord" },
        { class_name: "fab fa-twitter", link: "https://twitter.com/discord" },
    ],

}

Use Gravatar for your profile picture

You can now use a Gravatar image as your profile picture. In order to enable this feature, you'll need to have a Gravatar email. Once you registered a profile picture and an email on Gravatar, just set the email you used as parameter for the PICTURE setting. However this will make your address public and I highly recommend using an email hash instead. To use it, simply convert your e-mail address into a MD5 hash and set it as parameter for the PICTURE setting.

Here is a detailed documentation of every configuration parameters:

Key	Description
USERNAME	The user's nickname, will be used in the profile card headers & the webpage title
PICTURE	The profile picture used in the profile card headers [LINK / E-MAIL ADDRESS / HASH]
DESCRIPTION	Short biography displayed in the profile card
BADGES	Object[] Each badges displayed in the profile card header
PROJECTS	Object[] Each project displayed in the profile card
SOCIALS	Object[] Each social media icons displayed in the profile card

Ressources

Copyright © Discord 2021, I do not own any of the Discord assets and these are hosted on Discord's website

• Discord Staff Badge Disclaimer: Impersonating Discord Staffs is bad, the repository owner or contributors cannot be held responsible for any legal confrontation with Discord.
• Discord Certified Moderator Badge
• Discord Moderator Programs Alumni Badge
• Discord Partner Badge
• HypeSquad Events Badge
• HypeSquad Bravery Badge
• HypeSquad Brilliance Badge
• HypeSquad Balance Badge
• Bug Hunter Gold Badge
• Bug Hunter Badge
• Early Verified Bot Developer Badge
• Active Developer Badge
• Early Supporter Badge
• Nitro Sub Badge
• Nitro Boosting 1 Month Badge
• Nitro Boosting 2 Months Badge
• Nitro Boosting 3 Months Badge
• Nitro Boosting 6 Months Badge
• Nitro Boosting 9 Months Badge
• Nitro Boosting 12 Months Badge
• Nitro Boosting 15 Months Badge
• Nitro Boosting 18 Months Badge
• Nitro Boosting 24 Months Badge

profile's Issues

CSS Optimization

CSS Optimization

Unit of measure "px" is redundant

.projects > .project-box:hover {
    box-shadow: 0 0 7px 3px rgba(0,0,0,0.75);
    transition: box-shadow 0.1s;
}

Properties may be safely replaced with 'margin' shorthand

.profile { 
  background-color: #2C2F33;
  width: 600px;
    margin: 10% auto 50px;
    border-radius: 20px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 400px;
  padding: 0;
}

Properties may be safely replaced with 'padding' shorthand

.projects > .project-box {
    box-shadow: none;
    transition: box-shadow 0.1s;
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 5px 5px 10px;
}

Properties may be safely replaced with 'margin' shorthand

@media (max-width: 600px) { 

    body {
        overflow-y: scroll !important;
    }

    .box.profile {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .top-part { border-radius: 0; }
    .bottom-part { border-radius: 0; }
 }

Problem with scroll to bottom

Can't scroll to bottom on mobile, tested on iOS 14.4

HTML Optimization

HTML Optimization

Title

Element div is not allowed here

<title id="vue-managed">{{ username }}</title>