Skip to content

The profile-site is a personal website template, which is macos terminal style. The project is built by React, and provides user to easily customize the website.

License

Notifications You must be signed in to change notification settings

chi-0828/profile-site

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

78 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

profile-site

image GitHub repository GitHub top language GitHub stars GitHub commit activity (branch) GitHub last commit (by committer) MIT License
npm version node version
profile-site is a template of MacOS terminal-style personal profile website

  • star ⭐ this project if you enjoy this template

Demo

Demo website link

see the demo website

Demo screenshot

Some demo images

ASCII art can be generated on an online tool, e.g., patorjk image image

Usage

download the source

git clone https://github.com/chi-0828/profile-site.git

run npm

cd profile-site
npm install
npm run start

customize your website
modify the title of public/index.html, change User to your name

<head>
    <meta charset="UTF-8">
    <!-- some codes -->
    <title>User</title>
    <!-- Put your name here -->
    <!-- some codes -->
</head>

src/img/me5.png is your personal image, src/customization/*.json is your personal information

cd src/customization
# change the introduction in *.json to your own information
# change the images in img/* to your own photo and your school/company logo

example-1: customize Experience.json

{
    "companies" : [
        {
            "logo" : "path related to src",
            "name" : "your company name",
            "position_time" : "your job title, when",
            "description" : "what you do"
        },
        {
            "logo" : "./img/patere-removebg-preview.png",
            "name" : "XXXX Co.",
            "position_time" : "Software Engineering Intern, Aug. 2021 - Jun. 2022",
            "description" : "Computer vision and deep learning project, e.g., implementing an object detection application for patient assistance"
        }
    ]
}

example-2: customize Introduction.json

{
    "intro" : "write your portfolio here",
    "github" : "your GitHub",
    "googlescholar" : "your google scholar (or your Gmail)",
    "linkedin" : "your LinkedIn",
    "orcid" : "your orcid (or any other social account, e.g., FB, IG)"
}

if you don't have npm on your PC, I recommend you download it or use the HTML version (the HTML version is no longer maintained)

git clone --branch html https://github.com/chi-0828/profile-site.git

if you want to deploy the site on your GitHub page

git clone https://github.com/chi-0828/profile-site.git
cd profile-site
vim package.json

configure package.json

{
    "//": "name is your project name",
    "name": "profile-site",
    "version": "0.1.0",
    "//": "change 'your-account' to your GitHub account and 'profile-site' to repository",
    "homepage": "https://your-account.github.io/profile-site",
    "..." : "..."
}
npm run deploy

There will be a new branch gh-pages on your repository; you can host the branch to be the GitHub page in setting
see the tutorial

Update

2323/06/28 | Add new tab "Project

customize Project.json to show your projects image

TODO

The project is under-going

  • add the animation of terminal-style text printing
  • add a new tab for "Project"
  • change the source code to React project (done)