- Adding the limit of interest as a config

README.md

@@ -91,6 +91,7 @@ Your website comes pre-configured with three topics (e.g. "Web design" and "Sass
 
 - `web_url`: The web address you'd like to your topic to link to (e.g. `https://github.com/topics/sass`).
 - `image_url`: The web address of an (ideally square) image that you'd like to appear with your topic.
+- `limit`: The maximum number of topics that will be displayed in the "My Interests." section. Out of the box, this number is set to `6`.
 
 #### Social media
 

_config.yml

@@ -36,13 +36,15 @@ social_media:
   # twitter: your_username
   # youtube: your_username
 
-topics:
-  - name: CSS
-    web_url: https://github.com/topics/css
-    image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png
-
-  - name: Web design
-
-  - name: Sass
-    web_url: https://github.com/topics/sass
-    image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/sass/sass.png
+interest:
+  limit: 6
+  topics:
+    - name: CSS
+      web_url: https://github.com/topics/css
+      image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png
+
+    - name: Web design
+
+    - name: Sass
+      web_url: https://github.com/topics/sass
+      image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/sass/sass.png

_includes/interests.html

@@ -1,7 +1,7 @@
 <h2 {% if site.style == 'dark' %}class="text-white"{% endif %}>My Interests</h2>
 <p class="f4 mb-4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">Topics that I want to learn more about.</p>
 <div class="d-flex flex-wrap gutter-condensed mb-4">
-  {% for topic in site.topics limit: 4 %}
+  {% for topic in site.interest.topics limit: site.interest.limit %}
     <div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3">
       {% include topic-card.html %}
     </div>

_layouts/home.html

@@ -12,7 +12,7 @@
       {% include projects.html %}
     </div>
 
-    {% if site.topics %}
+    {% if site.interest.topics %}
       <div class="my-6">
         {% include interests.html %}
       </div>
@@ -40,7 +40,7 @@
 
         {% include projects.html %}
 
-        {% if site.topics %}
+        {% if site.interest.topics %}
           {% include interests.html %}
         {% endif %}