https://github.com/ramantehlan/moi
A simple, light and highly customizable single page personal site template. :octopus: :dizzy:
https://github.com/ramantehlan/moi
Last synced: 3 months ago
JSON representation
A simple, light and highly customizable single page personal site template. :octopus: :dizzy:
- Host: GitHub
- URL: https://github.com/ramantehlan/moi
- Owner: ramantehlan
- Created: 2019-01-26T13:45:42.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T20:27:13.000Z (almost 2 years ago)
- Last Synced: 2025-01-12T14:23:08.790Z (5 months ago)
- Language: HTML
- Homepage:
- Size: 2.02 MB
- Stars: 58
- Watchers: 1
- Forks: 12
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Moi
A simple, light and highly customizable personal site template.
# Index
1. [About](#about)
2. [Usage](#usage)
- [About Themes](#about-themes)
- [Json Design](#json-design)
- [Adding A New Section](#adding-a-new-section)
- [SEO](#seo)
3. [Development](#development)
- [Requirement](#requirement)
- [Installation](#installation)
- [Branch](#branch)
4. [Contribution](#Contribution)
5. [License](#license)
## About
Moi is a single-page personal site template created to reduce the trouble of designing, developing and maintaining your own personal site while keeping it light, customizable and simple. It is free and opensource, so you still have the freedom to add your own changes and features.
Moe is responsive with multiple themes. It uses a single JSON file to fetch data and render it, which makes it extremely simple to make changes and control the overall performance.
> Moi means "me" in french.
[Live Example](https://ramantehlan.github.io/Moi)
## Usage
To use this template for your own personal site, you can follow steps given below:
1. Fork this repository.
2. Rename your fork to `YOURUSERNAME.github.io`.
3. Update `data.json` file.
You also need to go to the *settings*, then *GitHub Pages* section and select *source* as master.
### About Themes.
To change the theme, you just need to open `data.json` and in *document* section, update the *theme* key, it will accept any numerical value, from 0 to the (maximum number of objects in *themes* section) - 1. To add more themes, just add a new object in *themes* section. Also note, right now the visitor doesn't have this option to change themes, only you can change it from your side.
### Json Design
`data.json` is the most important file in this project, as it is responsible for providing all the data. It is designed in a way the JS script could understand it. Right now, the file is already populated with sample data, but the following are the rules used:
**Sections**
Every first level key is considered as a section, while their value is considered as the data of that section. For example, to create two sections, *document* and *about*, the following is how it will be done.
``` JSON
{
"document" : {
...
},
"about": {
...
}
}
```
> Note: Every key should be in lower caps.
**Pre-defined sections**
As a personal site, there are some sections which are common, and therefore they are pre-defined in the HTML and JS Script, so in no case, they should be removed, following are the fixed sections:
No | Section Name | Type |Information
---|------|------|-----------
1 | `document` | *object* | Document information, like meta tags, default theme, first section.
2 | `themes` | *array[object]* | Css root data, to set themes.
3 | `menu` | *array[object]* | List of items in menu. *Note: they menu title should be same as section name*.
4 | `about` | *array[object]* | Section about self introduction. This is by default set as first section.
5 | `profile` | *array[object]* | Left or top section about the person, also schema information
6 | `work` | *array[object]* | Work experience.
7 | `projects` | *array[object]* | Projects you have created.
8 | `achievements` | *array[object]* | Achievements or awards you have.
9 | `contributions` | *array[object]* | Contribution you have made, or communities you are part of.
10 | `education` | *array[object]* | Education/Cources information.
11 | `blog` | *array[object]* | Blog, articles you have written.
12 | `talks` | *array[object]* | Your talks in any community or a show.
13 | `links` | *array[object]* | All your links on the internet.
**Pre-defined keys**
Sections also have an array of objects, which can only have pre-defined keys, which are already provided in the default `data.json` file. Just use only those keys, as any other key won't be rendered.
### Adding A New Section
To add a new section, steps are given below.
1. Add following HTML script to `index.html`. Here *NEW-SECTION* needs to be replaced by the new section name.
```HTML
NEW-SECTION [{{ data.NEW-SECTION.length }}]
```
2. Make a entry of new section in `data.json` inside menu, create a new object. Here *New-SECTION* needs to be replaced by the new section name, make sure it's same in html and *ICON-CLASS* needs to be replaced by [Font Awesome 5](https://fontawesome.com/) only.
```JSON
"menu": [
...
{
"title": "NEW-SECTION",
"display": true,
"icon": "ICON-CLASS"
}
...
]
```
3. Create a new first level key, which should be a array of object, where each object is single entry of that new section.
```JSON
...
'NEW-SECTION': [{
...
}]
...
```
### SEO
Moi is not a SEO friendly app right now. But here are few steps to make it more effective and personalized.
1. Verify your site by Google. Go to [Google Search Console](https://search.google.com/search-console/about) and register your site as your property, generate a *google-site-verificatin* code and add it in your `data.json` file in *document* section.
2. Add Google Analytics to your site. Go to [Google Analytics](https://analytics.google.com/analytics/web/) and register your site as your property, generate a *Tracking Id* and add it in your `data.json` file in *document* section.
## Development
To add more features to this project, you need to make sure you have all the requirements checked, this project installed, and a little understanding of this project.
### Requirement
You need to be at least familiar with the following tools and languages:
- HTML/CSS 3/JavaScript
- Vue.js
- JQuery
- Json
### Installation
Once you have all the requirements, you can now install the project and start developing. Just follow these steps:
1. Fork this project.
2. Clone your fork `git clone https://github.com/YOURUSERNAME/moi` OR `git clone https://github.com/YOURUSERNAME/YOURUSERNAME.github.io`
3. Checkout the `source` branch.
3. Branch out `git branch -b NEW-BRANCH`
4. Make your changes.
5. Create a pull request.
### Branch
There are two branches in this repository.
- **Source**: Contains the source code of the project.
- **Master**: Contains only the build.
## Contribution
You can contribute to this project in multiple way. Here are some of them mentioned below
### Help in Development
This project can be improved so much more, with new features and design. If you
are willing and intrested, feel free to help develop it for yourself and others.
### Report the issues and features
If you feel a feature is missing, or you have encounter a bug, report it in the
issues section. It will really help any one working on the development.
### Spread the words
Star this project, use it, or tell your friends about it. It will really help.
## License
GNU General Public License v3.0