Tomotoes

🎃一个坏掉的番茄个人主页~

7 Stars 2 Forks Last release: Not found GNU Lesser General Public License v3.0 4 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Readme

Tomotoes-HomePage

Name: HomePage
Brand: HomePage
SKU: //Tomotoes/homepage
Rating: 1 (7 reviews)

中文版说明

Introduction

一个坏掉的番茄
home page.

Online browsing

Do you want to install such a cool homepage for your website?

Let's start now!

Prerequisites

Nodejs 6.0 above
Git available

Install

git clone https://github.com/Tomotoes/HomePage.git
cd HomePage
npm install
npm run dev

Features

Highly encapsulates all the information in the page
Use WebGL-Fluid-Simulation as background
Use
```
scss
```
as
```
css
```
preprocessor
Use
```
pug
```
as
```
html
```
preprocessor
Use
```
gulp
```
as a build tool and configure the build script
Comfortable animation and beautiful UI
Responsive, mobile support
The referenced
```
css
```
and
```
js
```
files do not exceed
```
18.5
```
kb in total!
Delayed response switch page event
There are many features left for you to explore...

Structure

According to the characteristics of the project, it is divided into two categories： 1.

intro

First screen 2.

main

Secondary screen

The corresponding functions, styles and configurations are also based on this standard.

Basic configuration

Each key name in the config.json file

config.json

corresponds to the corresponding component name.

such as：

{ "head": { "title": "一个坏掉的番茄", "description": "Author:SimonMa,Category:Personal Blog", "favicon": "favicon.ico" } }

The above configuration information corresponds to the information in the following

layout/head.pug

component.

html
head
    title #{head.title}
    meta(charset="utf-8")
    meta(name="Description" content=`${head.description}`)
    link(rel="icon" href=`${head.favicon}` type="image/x-icon")

Advanced configuration

WebGL-Fluid-Simulation

Use WebGL-Fluid-Simulation as background at home.

If you want to turn it off, set

intro.background: false

supportAuthor

The

supportAuthor

option is turned on by default for configuration information, that is, authors are supported.

All support items are as follows：

The
```
octopus cat
```
will be displayed in the upper right corner of the home page.
The console prints the author's site information

If you want to turn it off, set

intro.author: false

Icon replacement

Icons in the project, all from 阿里巴巴矢量图标库

The replacement steps are as follows:

Please select your icon, add it to the project, and change the color to white.
Click Font Class method
Copy the contents of the generated link
Replace the contents of the file
```
/src/css/common/icon.scss
```
, where the contents of the
```
icon
```
selector must be preserved.
Config.json the corresponding item in the
```
config.json
```
file
```
main.ul. * .icon
```

.icon {
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
    fill: currentColor;
    font-family: 'iconfont' !important;
    font-size: inherit;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Deployment

After executing

npm run build

under the root directory, the project file will be generated to the

dist

directory.

You can then deploy the dist directory to your favorite server hosting provider.

The following is an example of

GithubPage

create
```
userName.github.io
```
Repo

cd dist
git init 
git add -A
git commit -am"init"
git remote add origin https://github.com/userName/userName.github.io.git
git push -f origin master

Then set the repo's Github Page option in GitHub.
Visit
```
username.github.io
```
to browse!

If your previous

username. github.io

repo already has content, you can create another repo, such as

blog

Then migrate the occupied items to

blog

and set the

GithubPage

option for this repo.

The repo became a subdirectory of

username. github.io/blog

In this way, your

username. github.io

repo can be left to the home page!

Sponsor

I spent a lot of time and energy to develop this project.

If this project has brought you help, welcome to sponsor,

star

Thank you!

License

The Project is released under the

LGPL-3.0

license.

HomePage

by Tomotoes