diff --git a/README.md b/README.md index 1212cfb..76b0853 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,67 @@ # linkinbio + Link In Bio Page for Instagram, Twitter, Tumblr etc + +## Introduction + +As many of you will know, you can only have one link on your Instagram and Twitter Bios. To overcome this, many users use third party link in bio apps to show multiple links. However, the downside of this is your are distracting people from your brand by linking to another site rather than your own. + +Some of these third party options allow for you to use a custom domain but that is usually a premium option you need to pay for. + +Given that many of these third party link in bio pages are just a list of links I decided to roll my own. + +You can see an example of what this looks like here: [https://alexhyett.com/links](https://alexhyett.com/links). + +## How to use + +You first need to update the profile section by changing the `h1` tag to your own name as well as changing the location and bio information. You will also want to add in your own profile photo. Your profile photo should be square. + +Next you need to add in links to all your profiles. + +You can do this by copy and pasting one of the link blocks and updating the text and links. + +``` + +
+
+
+ +
+
+
+

Instagram

+
@alexhyettdev
+
+
+ +
+ +``` + +### Social Media Colors + +The following CSS classes have been added which can be used to show the correct colors for the beacon and image shadow. + +- `amazon` +- `dev` +- `facebook` +- `github` +- `google` +- `instagram` +- `linkedin` +- `medium` +- `paypal` +- `twitter` +- `youtube` + +### Beacon + +If you want one or more of the links to stand out you can apply the beacon div to just above the `image` div so that it will pulsate. + +``` +
+``` + +### Images + +I have included logos for all the sites mentioned above in the social media colors section. diff --git a/images/amazon.svg b/images/amazon.svg new file mode 100644 index 0000000..ae98fd8 --- /dev/null +++ b/images/amazon.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + diff --git a/images/dev.png b/images/dev.png new file mode 100644 index 0000000..be0ef7f Binary files /dev/null and b/images/dev.png differ diff --git a/images/facebook.svg b/images/facebook.svg new file mode 100644 index 0000000..001f628 --- /dev/null +++ b/images/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/github.svg b/images/github.svg new file mode 100644 index 0000000..26400a9 --- /dev/null +++ b/images/github.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + diff --git a/images/google.svg b/images/google.svg new file mode 100644 index 0000000..f3cf2d7 --- /dev/null +++ b/images/google.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + diff --git a/images/instagram.svg b/images/instagram.svg new file mode 100644 index 0000000..ad5d718 --- /dev/null +++ b/images/instagram.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + diff --git a/images/linkedin.svg b/images/linkedin.svg new file mode 100644 index 0000000..92adaca --- /dev/null +++ b/images/linkedin.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + diff --git a/images/medium.svg b/images/medium.svg new file mode 100644 index 0000000..7068ce0 --- /dev/null +++ b/images/medium.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/paypal.svg b/images/paypal.svg new file mode 100644 index 0000000..3f073f2 --- /dev/null +++ b/images/paypal.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + diff --git a/images/profile.jpg b/images/profile.jpg new file mode 100644 index 0000000..f517c99 Binary files /dev/null and b/images/profile.jpg differ diff --git a/images/twitter.svg b/images/twitter.svg new file mode 100644 index 0000000..79deae0 --- /dev/null +++ b/images/twitter.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + diff --git a/images/youtube.svg b/images/youtube.svg new file mode 100644 index 0000000..015158b --- /dev/null +++ b/images/youtube.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..8941142 --- /dev/null +++ b/index.html @@ -0,0 +1,132 @@ + + + + + + + Links + + + + + +
+
+
+
+ profile photo +

Alex Hyett | Developer

+
+ London, United Kingdom +
+
+
💻 Sharing my developer journey & love of tech
+
👨🏻‍🔬 Physics Graduate & Tech Enthusiast
+
+
+
+ + Email + +
+
+ +
+
+
+ +
+
+
+

Instagram

+
@alexhyettdev
+
+
+ +
+ + + + +
+

Twitter

+
@alexhyettdev
+
+
+ +
+ + + +
+
+ +
+
+
+

Medium

+
alexhyett.medium.com
+
+
+ +
+ + + +
+
+ +
+
+
+

GitHub

+
github.com/alexhyett
+
+
+ +
+ + + +
+
+ +
+
+
+

DEV

+
dev.to/alexhyettdev
+
+
+ +
+ + + +
+
+ +
+
+
+

LinkedIn

+
linkedin.com/in/alexhyett
+
+
+ +
+ +
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3a73edc --- /dev/null +++ b/styles.css @@ -0,0 +1,301 @@ +h1, +h2, +h3, +h4, +h5 { + color: white; +} + +blockquote, +body, +dd, +dl, +dt, +fieldset, +figure, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +html, +iframe, +legend, +li, +ol, +p, +pre, +textarea, +ul { + margin: 0; + padding: 0; +} + +body { + color: #7f8d9e; + font-size: 21px; + font-weight: 400; + line-height: 1.58; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + background-color: #191b21; + font-family: sans-serif; + display: block; +} + +a { + color: #3273dc; + cursor: pointer; + text-decoration: none; +} + +a:hover { + color: #3273dc; +} + +.outer { + text-align: center; + margin: 0 auto; +} + +.content { + max-width: 1000px; + min-height: 90vh; + margin: 56px auto; + padding-left: 20px; + padding-right: 20px; +} + +.block { + text-align: center; + background-color: #2d2f39; + padding: 30px; +} + +.profile { + margin-top: -60px; +} + +.profile h1 { + font-size: 1.6em; +} + +.profile img { + width: 200px; + height: 200px; + border-radius: 50%; + margin: 0 1em; +} + +.profile .location { + margin-top: 10px; + font-size: 0.9em; +} + +.profile .bio { + color: white; + margin-top: 10px; + font-size: 0.9em; +} + +.links { + margin-top: 25px; +} + +.links .contactbutton { + background-color: #2d2f39; + color: #7f8d9e; + border: #7f8d9e 1px solid; + cursor: pointer; + justify-content: center; + padding-bottom: 0.5em; + padding-left: 0.75em; + padding-right: 0.75em; + padding-top: 0.5em; + text-align: center; + white-space: nowrap; +} + +.links .contactbutton:hover { + color: white; + border: white 1px solid; +} + +.link { + position: relative; + margin-top: 30px; + margin-left: 10px; + text-align: left; + padding: 20px; + padding-left: 70px; + display: block; + font-size: 0.8em; +} + +.link h2 { + font-size: 0.9em; + margin: 0px; + line-height: 1em; +} + +.link .image-float { + position: absolute; + width: 60px; + height: 60px; + left: -10px; + margin-top: -12px; +} + +.link .image-float .image img { + width: 60px; + height: 60px; +} + +.link .arrow { + position: absolute; + height: 100%; + right: 20px; + top: 0px; + padding-top: 28px; +} + +.link > .arrow, +.link > .image-float { + -webkit-transition: transform 0.3s ease; + transition: transform 0.3s ease; +} + +.link:hover .arrow { + transform: translateX(50%); +} + +.link:hover .image-float { + transform: translateY(-5%); +} + +a.link { + color: #7f8d9e; + cursor: pointer; + text-decoration: none; + display: block; +} + +a.link:hover { + color: #3273dc; +} + +.beacon { + position: absolute; + -webkit-animation: beacon 2s ease infinite, tr 2s ease-out infinite; + animation: beacon 2s ease infinite, tr 2s ease-out infinite; + opacity: 0.85; + width: 60px; + height: 60px; + border-radius: 3px; +} + +@-webkit-keyframes beacon { + from { + opacity: 0.85; + } + to { + opacity: 0; + } +} +@keyframes beacon { + from { + opacity: 0.85; + } + to { + opacity: 0; + } +} +@-webkit-keyframes tr { + from { + transform: scaleX(1) scaleY(1); + } + to { + transform: scaleX(1.5) scaleY(1.5); + } +} +@keyframes tr { + from { + transform: scaleX(1) scaleY(1); + } + to { + transform: scaleX(1.5) scaleY(1.5); + } +} +@-webkit-keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.amazon { + background-color: #c13584; + box-shadow: 8px 8px 14px -8px #c13584; +} + +.dev { + background-color: #000000; + box-shadow: 8px 8px 14px -8px #000000; +} + +.facebook { + background-color: #3b5998; + box-shadow: 8px 8px 14px -8px #3b5998; +} + +.github { + background-color: #2b3137; + box-shadow: 8px 8px 14px -8px #2b3137; +} + +.google { + background-color: #ffffff; + box-shadow: 8px 8px 14px -8px #ffffff; +} + +.instagram { + background-color: #c13584; + box-shadow: 8px 8px 14px -8px #c13584; +} + +.linkedin { + background-color: #0077b5; + box-shadow: 8px 8px 14px -8px #0077b5; +} + +.medium { + background-color: #000000; + box-shadow: 8px 8px 14px -8px #000000; +} + +.paypal { + background-color: #3b7bbf; + box-shadow: 8px 8px 14px -8px #3b7bbf; +} + +.twitter { + background-color: #1da1f2; + box-shadow: 8px 8px 14px -8px #1da1f2; +} + +.youtube { + background-color: #ff0000; + box-shadow: 8px 8px 14px -8px #ff0000; +}