--

README.md

@@ -1,6 +1,4 @@
 # Mylinks
-Base is a fork of [Littlelink](https://github.com/sethcottle/littlelink). Changed and enhanced by @hxcde.
-
 
 ## Create your own page
 - Fork your own copy

css/skeleton-auto.css

@@ -276,4 +276,9 @@ hr {
           transform: scale(1.05);
 }
 
-.animate-top{position:relative;animation:animatetop 0.8s}@keyframes animatetop{from{top:-25px;opacity:0} to{top:0;opacity:1}}
+.animate-zoom-1 {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-2 {animation:animatezoom 0.9s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-3 {animation:animatezoom 1.2s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-4 {animation:animatezoom 1.5s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-5 {animation:animatezoom 1.8s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.animate-zoom-6 {animation:animatezoom 2.1s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

index.html

@@ -53,32 +53,15 @@ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2e3140",endCo
     <div class="row">
       <div class="column" style="margin-top: 10%">
 
-        <!-- 
-
-          ## Getting Started with LittleLink
-
-          This page has been built with every pre-designed button available in LittleLink by default. You can rearrange and delete as needed.
-
-          You can add your own brand or others brands you may need in the `css/brands.css` file. 
-
-          You can add custom icons to `images/icons/...`. It is recommended to use a 24x24 .SVG.
-
-          Edit the "Your Image Here" section to add your own personal branding, like a picture of yourself or your brand logo!
-
-          Edit the "Title" section to change the page heading. You can use something like your name, your social handle, or your brand name.
-
-          Edit the "Short Bio" section tell users about yourself or your brand.
-
-        -->
 
         <!-- Your Image Here -->
         <img src="images/avatar.png" class="avatar" srcset="images/avatar@2x.png 2x" alt="LittleLink Logo">
 
         <!-- Title -->
-        <h1>Yann Mölle</h1>
+        <h1 style="color:white;">Yann Mölle</h1>
 
         <!-- Short Bio -->
-        <p>IT specialist @ ADAC Heliservice | Hobby photographer and gearhead, technology & smart home enthusiast. <br>
+        <p style="color:white;">IT specialist @ ADAC Heliservice | Hobby photographer and gearhead, technology & smart home enthusiast. <br>
         <br> 
         <a href="https://twitter.com/search?q=%23cybersec&src=hashtag_click">#cybersec</a>
         <a href="https://twitter.com/search?q=%23teamlinux&src=hashtag_click">#teamlinux</a> 
@@ -87,53 +70,29 @@ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2e3140",endCo
         </p>
         <!--
 
-          ## Breaking down <a> attributes:
-          
-          1.) class="button button-default" | The first "button" here is telling this <a> tag that it should make this element a button and applies the default styling in `css/brands.css`.
-          The second portion, button-default, is declaring the specific brand style you would like to apply. Here we're applying the "default" style and color.
-          If you want to make this button to use the brand colors for Discord, just change "button-default" to "button-discord". Brands are found in `css/brands.css`. You can always edit & add your own there.
-
-          2.) Replace the # in href="#" with the desired target URL for the button.
-
-          3.) target="_blank" | This attribute opens links in a new tab. Remove this attribute to prevent links from opening in a new tab.
-
-          4.) rel="noopener" | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it.
-          This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
-
-          ## Breaking down the <img> attributes:
-          
-          1.) class="icon" | This class is telling the <img> tag that it should use the styling for icons found in `css/brands.css`.
-
-          2.) src="icons/[icon_name].svg" | This defines the icon you would like to display from the icons/ folder. For example, you can change this to src="icons/discord.svg" to use the Discord icon.
-          Add your own 24x24 icons to the "icons" folder to reference them. We recommend providing a SVG.
-
-          3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers. 
-
-        -->
-
-
         <!-- LinkedIn -->
-        <a class="button button-linked zoom-box animate-top" href="https://de.linkedin.com/in/yannmoelle" target="_blank" rel="noopener">
+        <a class="button button-linked zoom-box animate-zoom-1" href="https://de.linkedin.com/in/yannmoelle" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
         <br>
        
+        
         <!-- XING -->
-        <a class="button button-xing zoom-box animate-top" href="https://www.xing.com/profile/Yann_Moelle" target="_blank" rel="noopener">
+        <a class="button button-xing zoom-box animate-zoom-2" href="https://www.xing.com/profile/Yann_Moelle" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/xing.svg" alt="xing Logo">Xing</a>
         <br>
 
         <!-- Gitea -->
-        <a class="button button-gitea zoom-box animate-top" href="https://git.moelle.space/hxcde" target="_blank" rel="noopener">
+        <a class="button button-gitea zoom-box animate-zoom-3" href="https://git.moelle.space/hxcde" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/gitea.svg" alt="Gitea Logo">Gitea</a>
         <br>
 
         <!-- GitHub -->
-        <a class="button button-github zoom-box animate-top" href="https://github.com/hxcde" target="_blank" rel="noopener">
+        <a class="button button-github zoom-box animate-zoom-4" href="https://github.com/hxcde" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>
         <br>
 
         <!-- Twitter -->
-        <a class="button button-twit zoom-box animate-top" href="https://twitter.com/hxcde" target="_blank" rel="noopener">
+        <a class="button button-twit zoom-box animate-zoom-5" href="https://twitter.com/hxcde" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/twitter.svg" alt="Twitter Logo">Twitter</a>
         <br>
 
@@ -141,14 +100,14 @@ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2e3140",endCo
         <br>
 
         <!-- Email -->
-        <a class="button button-default zoom-box animate-top" href="mailto:contact@yannmoelle.de" target="_blank" rel="noopener">
+        <a class="button button-default zoom-box animate-zoom-6" href="mailto:contact@yannmoelle.de" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/email.svg" alt="Email Icon">Email</a>
         <br>
   
   <br>
   <br>
 
-     <p><a href="https://git.moelle.space/hxcde/mylinks">Diese Seite auf meinm Git</a></p>
+     <p><a href="https://git.moelle.space/hxcde/mylinks">Diese Seite auf meinem Git</a></p>
        
       </div>
     </div>