Need help with ptemplate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

nethruster
135 Stars 41 Forks MIT License 213 Commits 3 Opened issues

Description

A personal website template that's not a pain in the ass to setup and use

Services available

!
?

Need anything else?

Contributors list

ptemplate

Dependencies DevDependencies

A personal website template that's not a pain in the ass to setup and use.

Demo

Example screenshot alt text

Requirements

  • You need to have
    yarn
    (recommended) or
    npm
    installed.

Useful commands

Yarn

  • yarn
    - Install and update dependencies.
  • yarn dev
    - Launch local web server with hot compiling. Ideal to work on the project easily.
  • yarn build
    - Build the website in production mode to the
    dist/
    folder.
  • yarn build-gz
    - Builds a gzip compressed version of the built app in the dist/ folder.
  • yarn build-render
    - Build the website in production mode and pre-render it to the
    dist/
    folder.
  • yarn pre-render
    - Pre-renders the previously built website.

NPM

  • npm install
    - Install and update dependencies.
  • npm run dev
    - Launch local web server with hot compiling. Ideal to work on the project easily.
  • npm run build
    - Build the website in production mode to the
    dist/
    folder.
  • npm run build-gz
    - Builds a gzip compressed version of the built app in the dist/ folder.
  • npm run build-render
    - Build the website in production mode and pre-render it to the
    dist/
    folder.
  • npm run pre-render
    - Pre-renders the perviously built website.

Customization

Note: To apply all of these changes you must rebuild the app.

If you're not hosting the app at the root of the server

Go to

webpack.config.js
and change the constant
BASE_URL
, be sure it ends with a
/
.
PRE-RENDER DOESN'T WORK WITH CUSTOM BASE_URL

Favicons

You can replace them at

src/assets/icons/
.

Avatar

You can replace it at

src/assets/
. If the name or the extension is different to "avatar.svg", you need to modify it in
src/config.js
and
src/assets-imports.js
.

Title

Change the

 tag in 
src/index.html
.

Most of the UI (description, work content, contact icons...)

Modify

src/config.js
. You can add, remove or modify its contents.

ReCATPCHA public key

Change it in

src/config.js
.

Translations

Customize them in the

src/assets/lang/
folder. Add a new lang file named by the IEC_15897 standard, paste contents from your source locale and translate it. To activate a language copy the contents from the source locale to
src/asssets/lang.json
.

Add icons

Add new icon paths with the desired ID in the

src/assets/icons.svg
file.

Usage

Once everything is compiled and built the last step is to serve the contents of the

dist/
folder as static files with your web server of choice and you're done!

Form API

The form of the contact page is sended to the address specified in

src/config.js
as
formUrl
. The request have: * Method:
POST
* Header:
Content-Type: "application/json; charset=UTF-8"
* Body:
json
{
    "name": "Name introduced in the form",
    "mail": "Email introduced in the form",
    "msg": "Text/Message introduced in the form",
    "g-recaptcha-response": "Google's reCAPTCHA v2 response for server-side validation"
}
You can implement your own backend, or use any of the compatible backends listed below.

Compatible form backends

Run on Repl.it

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.