About portfolYOU v2.3.0
portfolYOU is a free modern open-source Jekyll portfolio and blogging theme that works with GitHub Pages.
Features
- Works 100% with GitHub Pages as a remote theme.
- Minimal design and animations.
- Responsive design using Bootstrap.
- Support Repository metadata, FontAwesome, GitHub Buttons and many more.
- Support all image orientations (landscape, portrait or square) as a landing image.
- Automatic importing for GitHub Repositories as Projects.
- Search posts by title, tags or descriptions.
- Tags archive for posts.
- Disqus support for blog posts.
- Skills progress bars and education/experience timeline.
- Support large number of social networks.
- Quick including for various elements as videos, lists, figures, buttons and many more.
- Attractive 404 page.
- Well Documented.
Installation
The following steps demonstrate how to use portfolYOU as GitHub Pages remote theme.
- Download portfolYOU as .zip from official repo then extract it.
- Rename
portfolYOU-master/
to<your-username>.github.io/
- Remove everything except the
docs/
directory. - Lift up the
docs/
directory’s content to the root directory (i.e move them to<your-username>.github.io/
). - Remove documentation stuff:
_elements/
documentation/
-
_config.yml
: any line commented as# For Documentation Only
-
Your directory structure should be:
<your-username>.github.io/ ├── _data/ ├── _posts/ ├── _projects/ ├── pages/ ├── _config.yml ├── .gitignore └── Gemfile
- Update
_config.yml
with your data (follow the comments for more help). - Update your site content (posts, projects and about page).
- Finally, test portfolYOU locally then publish it to GitHub Pages.
-
[Optional] To use a specific version of portfolYOU (defaults to latest version):
remote_theme: yousinix/portfolYOU@v1.0.0
Customization
Simply override the file you want to change by matching the same file name and path.
Example 1: New Favicon
- Generate your own using favicon or any other tool.
- Copy your new
favicon.ico
file into your own project with the same file pathassets/favicon.ico
.
Example 2: Custom Style
- Create
assets/css/style.scss
. -
Add the following lines:
--- --- /* Add your custom style here */ @import "portfolYOU";
Adding Content
Local Projects
- Add
project-name.md
orproject-name.html
to_projects/
. -
Add front matter to the top of your new project file.
--- name: Awesome Project tools: [Tool1, Tool2] image: image url or path here. description: Write project description here. ---
- Add project body in markdown or html. Check available elements to enjoy extra customization.
- Check more projects templates from here.
Remote Projects
Remote Projects are imported automatically from GitHub. The name, description and topics are fetched from the given repository name. Note that the repository must be public and on your own account. To add a Remote Project, add the following lines to your existing front matter in pages/projects.html
:
---
remote_projects:
- repo-name-1
- repo-name-2
---
Posts
- Add
YYYY-MM-DD-post-name.md
to_posts/
. -
Add front matter to the top of your new post file.
--- title: Awesome Title tags: [TAG 1, TAG 2] style: fill / border (choose one only) color: primary / secondary / success / danger / warning / info / light / dark (choose one only) description: Write post description here, or it will be the first 25 words of the post's body. ---
- If you left both the style and color empty, the post’s style is set to default style.
- Add post body in markdown or html. Check available elements to enjoy extra customization.
- Check more posts templates from here.
Pages
- Add
page-name.html
orpage-name.md
topages/
,new subfolder
or toroot directory
of your project. -
Add front matter to the top of your new page.
--- layout: default title: Page Name permalink: /page_permalink/ (the output path for the page) weight: 2 (the order of the page in the navigation bar) ---
- The new page will be added to the navigation bar automatically.
- Check more pages templates from here.
External Content
If you want your project, post or even the page to refer to an external resource, google.com for example, just add the following attribute to your front matter:
---
external_url: https://google.com/
---
💡 Pro Tip
You can changeexternal_new_tab
in_config.yml
to make the external URLs open in a new tab.
Skills
Add the following lines to _data/programming-skills.yml
or _data/other-skills.yml
.
- name: Awesome Skill
percentage: 95
color: secondary / success / danger / warning / info / light / dark (choose one only, default is primary)
Skills Categories
- Add
category_name-skills.yml
to_data/
. - Add skills to the file using the previously mentioned method.
- Open
pages/about.md
. - Add the following lines to the skills section between
<div class="row">
and</div>
:
{% include about/skills.html title="Category_Name Skills" source=site.data.category_name-skills %}
Timeline Events
Add the following lines to _data/timeline.yml
:
- title: Awesome Item
from: 2016
to: 2018
description: Write item description here.
Social Networks
portfolYOU provides a good number of social networks, but if you want to add your own, go on.
-
Add the following lines to
_data/social-media.yml
:network_name: url : https://www.network_name.com/ icon : fab fa-icon # From FontAwesome (https://fontawesome.com/icons) color : 1da1f2 # Hex color code for hover
-
Then add the following to
_config
under theauthor
key:author: network_name : your_username_here
-
The new network will be added to your footer automatically.
Dependencies
Dependency | Version |
---|---|
Animate.css | v3.7.0 |
Bootstrap | v4.3.1 |
FontAwesome | v5.6.3 |
GitHub Buttons | v2.2.9 |
jQuery | v3.3.1 |
Popper.js | v1.14.6 |
pygments-css | autumn |
Simple Jekyll Search | v1.7.2 |
wow.js | v1.1.2 |
Credits
- 404 svg animated page A pen by Vladimir Gashenko.
- CSS3 Animated Skill Progress bar A pen by Shah Zobayer Ahmed.
- How to Create Bootstrap Card Hover Effect (jQuery) A video by Daily Tuition.
- Vertical Timeline (HTML-SCSS-CSS) A video by DevPen.