first personalization

Author: RubyFore

_config.yml

@@ -1,12 +1,12 @@
 # Site settings
-title: Grayscale
+title: Ruby Fore
 email: your-email@domain.com
 url: https://example.github.io
-description: "Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description."
+description: Statistics M.Sc. 
 
 # Color settings (hex-codes without the leading hash-tag)
 color:
-  primary-dark: '#000000'
+  primary-dark: '#FAF9F6'
   links: '#219ab3'
 
 # Footer settings

_includes/css/grayscale.css

@@ -8,7 +8,7 @@ body {
     width: 100%;
     height: 100%;
     font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
-    color: #fff;
+    color: #000;
     background-color: {{ site.color.primary-dark }};
 }
 
@@ -77,7 +77,7 @@ a:focus {
     outline: 0;
 }
 
-.navbar-custom .navbar-brand .navbar-toggle {
+.bar-custom .navbar-brand .navbar-toggle {
     padding: 4px 6px;
     font-size: 16px;
     color: #fff;
@@ -123,7 +123,7 @@ a:focus {
 
     .top-nav-collapse {
         padding: 0;
-        background-color: {{ site.color.primary-dark }};
+        background-color: rgba(153, 157, 160);
     }
 
     .navbar-custom.top-nav-collapse {
@@ -138,12 +138,13 @@ a:focus {
     padding: 100px 0;
     text-align: center;
     color: #fff;
-    background: url(/img/intro-bg.jpg) no-repeat bottom center scroll;
+    background: url(/img/IMG_3378.jpg) no-repeat bottom center scroll;
     background-color: {{ site.color.primary-dark }};
     -webkit-background-size: cover;
     -moz-background-size: cover;
     background-size: cover;
     -o-background-size: cover;
+    background-position: left;
 }
 
 .intro .intro-body {
@@ -155,6 +156,10 @@ a:focus {
     font-size: 40px;
 }
 
+.brand-heading {
+    color: rgb(153, 157, 160);
+    text-align: center
+}
 .intro .intro-body .intro-text {
     font-size: 18px;
 }
@@ -365,3 +370,73 @@ img::-moz-selection {
 body {
     webkit-tap-highlight-color: rgba(255,255,255,.2);
 }
+
+.container,
+.container-fluid,
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
+  /*width: 135%;*/
+  padding-right: var(--bs-gutter-x, 0.75rem);
+  padding-left: var(--bs-gutter-x, 0.75rem);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 300px) {
+  .container {
+    width: 140%;
+    max-width: 375px;
+  }
+}
+@media (min-width: 576px) {
+  .container-sm, .container {
+    width: 120%;
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    width: 120%;
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1140px;
+  }
+}
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
+
+
+.bg-image-full {
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+  
+    background-position: 25% 68%;
+    background-size: cover;
+  }
+
+  .row {
+    --bs-gutter-x: 1.5rem;
+    --bs-gutter-y: 0;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: calc(var(--bs-gutter-y) * -1);
+    margin-right: calc(var(--bs-gutter-x) * -1);
+    margin-left: calc(var(--bs-gutter-x) * -1);
+  }
+  #resume {
+    width: 100%;
+    }

_includes/header.html

@@ -1,11 +1,11 @@
     <!-- Intro Header -->
     <header class="intro">
         <div class="intro-body">
-            <div class="container">
+            <div class="bg-image-full">
                 <div class="row">
-                    <div class="col-md-8 col-md-offset-2">
+                    <div class="col-md-8 col-md-offset-2"> 
                         <h1 class="brand-heading">{{ site.title }}</h1>
-                        <p class="intro-text">{{ site.description }}<br>
+                        <!---<p class="intro-text">{{ site.description }}<br>--->
                         <a href="#about" class="btn btn-circle page-scroll">
                             <i class="fa fa-angle-double-down animated"></i>
                         </a>

_includes/nav.html

@@ -2,12 +2,10 @@
     <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
         <div class="container">
             <div class="navbar-header">
-                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
+                <!---<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                     <i class="fa fa-bars"></i>
-                </button>
-                <a class="navbar-brand page-scroll" href="#page-top">
-                    <i class="fa fa-play-circle"></i>  <span class="light">Start</span> Bootstrap
-                </a>
+                </button> --->
+ 
             </div>
 
             <!-- Collect the nav links, forms, and other content for toggling -->

_layouts/default.html

@@ -5,7 +5,7 @@
     {% include nav.html %}
     {% include header.html %}
     {% include about.html %}
-    {% include download.html %}
+    {% include resume.html %}
     {% include contact.html %}
     {% include map.html %}
     {% include footer.html %}