src/index.html

@@ -74,7 +74,7 @@ title: {{site.title}}
             </div>
         </div>
         <div class="row">
-            <div class="col-md-4">
+            <div class="col-lg-4">
                 <ul class="info">
                     <li><span class="first-block">{{site.strings.about.overview.name}}:</span><span
                             class="second-block">Samuel Philipp</span>
@@ -89,7 +89,7 @@ title: {{site.title}}
                     </li>
                 </ul>
             </div>
-            <div class="col-md-8">
+            <div class="col-lg-8">
                 <h2>{{site.strings.about.hello}}</h2>
                 <p>{{site.strings.about.text}}</p>
                 <ul class="social-icons my-4">
@@ -197,9 +197,9 @@ title: {{site.title}}
                 <h1>{{site.strings.skills.title}}</h1>
             </div>
         </div>
-        <div class="row mb-4">
+        <div class="row mb-4 justify-content-center">
             {%- for item in site.strings.skills.languages %}
-            <div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
+            <div class="col-lg-3 col-md-4 col-6 d-flex justify-content-center">
                 <div class="circular">
                     <div class="inner"></div>
                     <div class="number"><strong>{{item.name}}</strong><span>{{item.percent}}%</span></div>
@@ -217,7 +217,7 @@ title: {{site.title}}
         </div>
         <div class="row">
             {%- for item in site.strings.skills.technologies %}
-            <div class="col-md-6">
+            <div class="col-md-6 col-12">
                 <div class="progress-wrap">
                     <div><span class="name-left">{{item.name}}</span><span class="float-end">{{item.percent}}%</span></div>
                     <div class="progress">
@@ -238,7 +238,7 @@ title: {{site.title}}
         </div>
         <div class="row">
             {%- for item in site.strings.interests.list %}
-            <div class="col-md-3 text-center p-3">
+            <div class="col-lg-3 col-md-6 col-12 text-center p-3">
                 <a href="{{item.url}}" target="_blank" class="interest interest-{{item.image}}">
                     <div class="desc">
                         <h3>{{item.name}}</h3>

src/scss/main.scss

@@ -1,7 +1,11 @@
 $primary: #006269;
 $secondary: #444;
-
-@import "bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap-grid";
+@import "bootstrap/scss/bootstrap-reboot";
+@import "bootstrap/scss/bootstrap-utilities";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins/_breakpoints";
 
 $icomoon-font-path: "../font";
 @import "icons/style";
@@ -131,6 +135,17 @@ section {
     margin-bottom: 20px;
     position: relative;
 
+    &.timeline-heading > div h3 {
+      display: inline-block;
+      padding: 7px 15px;
+      font-size: 18px;
+      text-transform: uppercase;
+      letter-spacing: 5px;
+      font-weight: bold;
+      background: #e6e6e6;
+      border-radius: 4px;
+    }
+
     &.timeline-unverted {
       text-align: right;
     }
@@ -205,17 +220,6 @@ section {
   }
 }
 
-.timeline-heading > div h3 {
-  display: inline-block;
-  padding: 7px 15px;
-  font-size: 18px;
-  text-transform: uppercase;
-  letter-spacing: 5px;
-  font-weight: bold;
-  background: #e6e6e6;
-  border-radius: 4px;
-}
-
 .feature-left {
   color: #fff !important;
   text-decoration: none !important;
@@ -529,3 +533,29 @@ footer {
     color: #000;
   }
 }
+
+@include media-breakpoint-down(md) {
+  .timeline {
+    &::before {
+      left: 10%;
+    }
+
+    li {
+      &.timeline-heading > div h3 {
+        display: block;
+      }
+
+      .timeline-badge {
+        top: 30px;
+        left: 10%;
+      }
+
+      .timeline-panel {
+        width: auto;
+        float: none !important;
+        margin-left: 20%;
+        text-align: left;
+      }
+    }
+  }
+}