How to add an "about me" page?

[oculos]

Hi,

Thanks for this gorgeous theme! I am using it, and was hoping to add another button on the side of the "blog" button, just so I can have a link to the "about me" page. I managed to get the button, but how can I display a page content instead of blog posts on the panel when users click on "about"? I would like to do that while retaining the blog functionality. Is that possible?

Best,

Francis

[jrphub]

I also need the same feature. I must say, the theme is simple and elegant. Thanks for the theme :)

[jrphub]

ok, after spending some time, I did it myself, it's easy

1. create an about-me.html file at the root of the project Let's have content like below

---
layout: default
robots: noindex
---
<div>
This is about me
</div>

2. Add below line in index.html

<ul class="navigation">
              <li class="navigation__item"><a href="{{ site.baseurl }}/about-me" title="link to {{ site.title }} about-me" class="about-button">/about-me</a></li>
            </ul>

3. add below in main.js file, so that when "about-me" button is clicked, panel should be collapsed

$('a.about-button').click(function (e) {
    if ($('.panel-cover').hasClass('panel-cover--collapsed')) return
    currentWidth = $('.panel-cover').width()
    if (currentWidth < 960) {
      $('.panel-cover').addClass('panel-cover--collapsed')
      $('.content-wrapper').addClass('animated slideInRight')
    } else {
      $('.panel-cover').css('max-width', currentWidth)
      $('.panel-cover').animate({'max-width': '530px', 'width': '40%'}, 400, swing = 'swing', function () {})
    }
  })

if (window.location.hash && window.location.hash == '#about') {
    $('.panel-cover').addClass('panel-cover--collapsed')
  }

PS: I have little knowledge on javascript and css, so please excuse my poor coding skill

[ashbyca]

For step #2 you actually add the code to "header.html" located in "_includes" directory and not index.html.

Full path would be "/_includes/header.html"

[MatthewThomasMiller]

Thanks for this fix. I too needed some sort of "About Me" page added to this theme.

Quick question though: I added the code above and the "About Me" button shows up. It works, but there is one remaining (and annoying) issue. When clicking on the "About Me" button the animation is different than when I click on the "blog" button. The animation with the blog button is smooth and gradual, but the animation when clicking on the "About Me" button is abrupt and jerky (i.e., it jumps to the collapsed version of the display instead of slowly readjusting). Any ideas on the reason for this or how to fix it?

[TalkinWhip]

Hey @MatthewThomasMiller I'm late to the party but was trying to figure this out for my own needs and I figured it could help you or someone else. It's a bit longer of a solution, so I can't just post the code in the comments. But the idea is to split your index in a few parts and use ajax to load those separately to the display area, so you avoid switching pages.

I did this for 3 pages on my site - Projects, Resume and Blog. Projects and Resume are treated as separate blogs (through category filtering) and blog filters out those 2 categories to retain the blog itself. (You could just have a static page using the same logic (sections of index)) You can check out or copy the code here: https://github.com/TalkinWhip/TalkinWhip.github.io The relevant parts are in main.js (line 6 ff., until the mobile portion) and in index.html (the whole <ol class="post-list"> has been expanded into 3 sections for each "page"). And of course the buttons in the header.html as jrp posted earlier.

It's not a particularly elegant solution as I am not a very good programmer but it works for me and hopefully it helps someone in a pinch.

[vmorenoluna]

I followed the approach suggested by @TalkinWhip, and managed to add the new button with a consistent animation. Required changes can be seen in this PR: https://github.com/vmorenoluna/vmorenoluna.github.io/pull/1/files

I'm not a frontend developer, I'm sure it can be improved.

edit: this PR fixes a couple of page transaction issues introduced in the first PR https://github.com/vmorenoluna/vmorenoluna.github.io/pull/2/files