Giter Club home page Giter Club logo

port's Introduction

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 <title> 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:
{
    "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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.