https://github.com/pskinnertech/badass-links-page
This is a Bio Links Page that allows you to customize your own links, background, profile image, and more. Note: I put this together as the MVP of another project that I'll be rolling out last this month (March '23).
https://github.com/pskinnertech/badass-links-page
Last synced: 3 months ago
JSON representation
This is a Bio Links Page that allows you to customize your own links, background, profile image, and more. Note: I put this together as the MVP of another project that I'll be rolling out last this month (March '23).
- Host: GitHub
- URL: https://github.com/pskinnertech/badass-links-page
- Owner: PSkinnerTech
- Created: 2023-03-20T23:34:19.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-21T21:22:46.000Z (about 3 years ago)
- Last Synced: 2025-12-28T08:21:15.544Z (5 months ago)
- Language: HTML
- Homepage: https://links.patrickaskinner.tech
- Size: 55.7 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**GitHub Repository:** [https://github.com/PSkinnerTech/badass-links-page](https://github.com/PSkinnerTech/badass-links-page)
**Demo Link:** https://links.patrickskinner.tech
### Required Knowledge For this Project:
- **HTML**: Basic Understanding
- **CSS**: Basic Understanding
- **Javascript**: "I know what it is, but I've never used it before."
### Intro:
This is a comprehensive tutorial on how to create a "Link in Bio" / "Linktree Clone" / "Badass Links Page". The only requirement that will not be discussed in this in this tutorial is to have a text editor. I personally use [vsCode](https://code.visualstudio.com/), but any text editor will work. For you to follow along exactly with what is detailed, I recommend using vsCode if you don't currently have one picked out.
Without any further ado, let's get into the tutorial:
# Step-By-Step Guide
## Step: 1 - Create your work environment
- Create a folder that will be your working environment:
### **INSERT GIF HERE**\*
- Open your folder in your preferred text editor
### **INSERT GIF HERE**\*
- Create the necessary files:
- Index.html
- style.css
_Note: We're not going to use an image folder for the sole purpose of keeping this website as light as possible. We'll be using a decentralized file storage app called_ [_AKORD_](https://akord.com/products/web-app) _to source all of our images_
### **INSERT GIF HERE**\*
## Step 2: Create your HTML Wire Frame
\*Create your HTML wireframe starting with ``.
```xml
```
### Defining Tags:
- `` is an HTML (Hypertext Markup Language) declaration or document type declaration that specifies the version of HTML used in a web page. It is usually placed at the beginning of an HTML document and informs the web browser how to interpret the code that follows. It helps ensure that the web page is displayed correctly and consistently across different browsers and devices.
- `` is an HTML element that serves as the root element of an HTML document. It is the container for all other HTML elements, and its opening and closing tags enclose all the content of the web page, including the head and body sections. The HTML code inside the `` element describes the structure and content of the web page and is interpreted by web browsers to display the web page to users.
- `` is an HTML element that is used to contain the metadata of a web page. This metadata includes information such as the title of the web page, links to external stylesheets and scripts, and other information that helps web browsers properly render the content of the web page. The `` element is not visible on the web page and is usually located between the `` and `` elements.
- `` is an HTML element that represents the main content of a web page that is visible to users. It contains all the content that is displayed on the web page, such as text, images, videos, forms, and more. The `` element is located between the opening and closing tags of the `` element and is typically the largest section of an HTML document. It is the part of the web page that users interact with and is rendered by web browsers to display the content to users.
- `` is an HTML element that is used to represent the introductory content or navigation links at the top of a web page. It is typically used to display the logo, site title, and primary navigation links of a website. The `` element is usually located at the top of the `` section of an HTML document, but it can also be used within other sections of the page. It is a semantic element that helps search engines and screen readers better understand the content and structure of the web page.
- `` is an HTML element that is used to represent the main content of a web page. It contains the primary content that is unique to the web page and should not be repeated across multiple pages. The `` element is typically used to enclose the main article, section, or other content areas of a web page. It is a semantic element that helps search engines and screen readers better understand the structure and purpose of the web page. The `` element should only be used once per page and should not be nested within other semantic elements like `` or ``.
- `
- ` is an HTML element that is used to create an unordered list of items. It stands for "unordered list" and is used to group together related items in no particular order. The items are usually represented as bullet points, but the appearance can be customized with CSS. Each item in the list is represented by an `
- ` (list item) element, which is nested within the `
- ` element. The `
- ` is an HTML element that is used to represent an item in a list. It stands for "list item" and is typically used within `
- ` (unordered list) or `
- ` element contains the content of the list item, such as text, images, or links. The `
- ` element can also be used within other contexts, such as navigation menus, where it represents a menu item.
## Step 3: Fill in your `` tags:
- Add these 4 separate lines to your `` tags:
```xml
[Insert Name Here]'s Badass Links Page
```### Defining your `` tags baseline:
- `` is a HTML tag that specifies the character encoding for the document. The charset attribute tells the browser what character encoding the document is using, which is important for displaying text correctly. The `utf-8` value is a widely-used character encoding that supports a wide range of characters and is recommended for use in modern web development.
- `` is a HTML tag that sets the viewport, which is the visible area of a web page, on mobile devices. The `width=device-width` value sets the width of the viewport to the width of the device's screen, while `initial-scale=1` sets the initial zoom level to 100%, which is typically what users expect when viewing a web page on their mobile device. This tag is important for ensuring that the layout and content of a web page are displayed properly on mobile devices with different screen sizes and resolutions.
- `` is a HTML tag used to link an external CSS file to a web page. The rel attribute specifies the relationship between the current document and the linked resource, in this case, a stylesheet. The href attribute specifies the path to the CSS file that contains the styles to be applied to the web page. By using this tag, the styles defined in the linked CSS file can be applied to the HTML elements of the web page, allowing for better control over the visual appearance of the web page.## Step 4: Begin Filling your `` tags
- Inside the `` -> `` -> ``, add: `
Your Name
````xml
Your Name
```
- Inside the `` -> `` -> `
- ` -> `
- ` tags add:
```xml
```_Note: You don't have to add all of these if you're building this for your use. Use whatever you deem necessary_
### New Tag Definitions:
## Step 6: Importing Font-Awesome Icons
- Go to this website: https://cdnjs.com/libraries/font-awesome
- Find the very first font-awesome library link that ends in `/css/all.min.css`, then click the `>` icon to copy the import syntax
- Paste the import syntax in your `` tags.```xml
[Insert Name Here]'s Badass Links Page
```**What this does is that it gives us access to all of the free Font-Awesome icons that we could ever want to use for our website.**
- Go to this website: https://fontawesome.com/search
- Click the "Free" button that has a lightning bolt icon.
- Search for the icon you want to add to the first link.
- By default, it will show you the HTML syntax. Click on the syntax once to copy it.
- past the syntax inside of the `` tags you want the icon to be associated with.- Do this for every link you want an icon for.
### New Definitions
- `` is an HTML tag used to format text in italics. The `i` stands for "italic" and it is used to indicate that the enclosed text should be displayed in a slanted or cursive font style. However, it is important to note that the use of the `` tag has been deprecated in favor of using the `` tag to indicate emphasis, as it provides better semantic meaning to the text.
## Add Hyperlinks to Each `
- `
**To have the links work, we need to add an** `href` **inside each** `a` **tag inside the** `li` **tag.**
- Inside each <a> tag, add a `href="#"`.
```xml
-
Official Website
-
Official Website
```_Note: If you want the links to open on a page in a new tab, add_ `target="_blank"` _inside the_ `a` _tag after the_ `href`_._
```xml
```## Add an Image to the ``
**We're going to use a decentralized file storage application called AKORD.**
- Create an account here: https://akord.com/products/web-app
- Set up a **PUBLIC** folder.
- Place your preferred PFP in the public folder either with the upload button or with drag or drop. _Note: I recommend the image be square in dimensions no more than 400x400 pixels._### IMPORTANT:
**_The reason why we're using_ _AKORD_ _is that it's a great place to establish website images. You'll never need to pay for the storage monthly and it's stored on the Arweave Blockchain. So, no matter what, the image will always display on the website and you'll avoid storage server issues, payment issues, etc. Now, because it's stored on the blockchain, establishing a working link is slow. Once you upload the image, there will be an orange dot next to the image title. That orange dot means the image is still being stored on the Arweave Blockchain and you won't have a working link for it yet. the process takes roughly 30 mins before it's ready._**
- Once the orange dot has disappeared, copy the image address by right-clicking the image and clicking 'copy image address'.
- Go back to the HTML file and, within the `` tag just before the `` tag, add this: `
`
- Inside the `src=""` inside the double quotes, add the image address that you copied from AKORD.```xml
Your Name
```### Tag Definition
- `
` is an HTML tag used to insert an image into a web page. The `img` stands for "image" and it is a self-closing tag, meaning that it doesn't require a closing tag. The `src` attribute is used to specify the URL or file path of the image to be displayed on the web page. Other attributes, such as `alt` and `title` can be used to provide a description and additional information about the image for accessibility and SEO purposes.
## Step 8: Begin Styling with CSS
- Open your 'style.css' file in your text editor.
- Style your body & HTML tags with these settings:```css
body,
html {
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
}
```- Style your header tags with these settings:
```css
header {
margin-top: 1em;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
```## Stylizing the Profile Picture
**In this section, we're going to use an SVG Shape Generator from Softr.io.**
- Go to this website: [https://www.softr.io/tools/svg-shape-generator](https://www.softr.io/tools/svg-shape-generator)
- Use the tool to create a shape you'd like to have as the frame of your PFP.
- Once created, download the SVG file _(don't copy it)_.
- With the file downloaded, go to this website: [https://base64.guru/](https://base64.guru/)
- At the top navbar, mouse over "Converter", then "Base64 Encode", then "Image", then click on "SVG".
- Change the output to "Data URI -- data:content/type;base64"
- Upload the SVG file you downloaded from Softr.io.
- Click "Encode SVG to Base64".
- A code will appear in a text box labeled "Base64", copy the entire code.
- Go back to your text editor and into the style.css file. Create this CSS declaration block.```css
header > img {
width: 10em;
height: 10em;
-webkit-mask-image: url();
}
```- Inside the parenthesis of the `url()`, paste the code you copied from Base64.guru.
**Once completed, this will reshape the container of your PFP to the style that you created in the SVG Shape Generator from Softr.io.**
## Stylizing your H1
**We're going to stylize your** `H1` **to have a pill-shaped container with a white border.**
- Create a new CSS declaration box in your style.css file:
```css
header > h1 {
display: inline-block;
font-size: 1.2em;
font-weight: bold;
border-radius: 1em;
background-color: #000a;
color: #fff;
padding: 0.3em 0.6em;
border: 1px solid #fffa;
}
```
## Stylizing the Link Buttons
**Let's first create the pill-shaped container for the link buttons.**
- Create a CSS declaration block for `ul > li` in the style.css file:
```css
ul > li {
background-color: #fff;
backdrop-filter: blur(10px) saturate(160%) contrast(180%);
-webkit-backdrop-filter: blur(10px) saturate(160%) contrast(180%);
border-radius: 10em;
padding: 1em;
margin: 1.4em 0;
box-shadow: rgb(28 32 93 / 24%) 0px 2px 8px 0px;
}
```- Just above that declaration, create the CSS declaration block for `ul`:
```css
ul {
box-sizing: border-box;
list-style: none;
margin: 0 auto;
padding: 2em;
max-width: 480px;
}
```- Below the CSS declaration block for ul > li, create another CSS declaration block for `ul > li > a`:
```css
ul > li > a {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0.5em;
}
```- Lastly, create a CSS declaration block for `a`:
```css
a {
text-decoration: none;
color: #000;
}
```**The final result should look like this:**
## Stylizing the Background with Vanta.js Motion Graphics
**Let's create a background that has paper birds flying in a dark background and are responsive to mouse movement.**
- Create a new CSS declaration box in your style.css file:
```css
body {
background: #000;
background-size: cover;
}
```- Go to this website: [https://www.vantajs.com/](https://www.vantajs.com/)
- In the design navbar on the right of the screen, change the colors however you want them to be. Once done, copy the code from the bottom of the design navbar.![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679431161885/8ded9510-12df-4eff-b268-edeea1dac50c.png align="center")
### FOLLOW THESE NEXT STEPS VERY CAREFULLY
- Go back to your text editor and into your index.html file.
- Within your <head> tags, paste the code. under the other elements.```xml
Patrick Skinner - "Doc"
VANTA.BIRDS({
el: "#your-element-selector",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
scale: 1.0,
scaleMobile: 1.0,
});
```- With this code added, it will not work until you change the `src` links. Go back to the Vanta.js website, right-click each link from the code snippet, and select "Copy Link Address".
- Go back to your text editor and into your index.html file. Paste the new link to the appropriate `script` tag.```xml
```# YOU'RE DONE!
Congratulations! Let me know what you think of this build. Feel free to reach out to me directly by emailing me at me@patrickskinner.tech.
- ` tags add:
- ` (ordered list) elements to create a bulleted or numbered list of items. Each `
- ` element can also be nested within other list elements, such as `
- ` (ordered list), to create more complex list structures.
- ` - ` is an HTML element that is used to represent an item in a list. It stands for "list item" and is typically used within `