Plainfolio

🎏 A plain portfolio template for everyone

Live Preview

Features

📌 Fast
📌 Simple
📌 One Page
📌 Reponsive
📌 Begginer Friendly
📌 Easy to Customize

Table of Contents

• Prerequisites
• Deploy
• How to use
• Configuring the template
• Changing site color
• HTML Sections
  • Editing HOME Section
    • Editing the Profile Picture
    • Editing the Social Medias
      • Add more Social Media Icons
    • Editing the Name
    • Editing the Bio
    • Editing the Quote
  • Editing PROJECTS section
    • PROJECT TEMPLATE
  • ABOUT SECTION
    • Changing About Image
    • Editing Your About Name
    • Editing About Social Media
    • Editing Your About Long Bio
    • Editing Your Skills
  • Others
    • Enable Scrolling
    • Remove Quote
    • Remove Hover Script

Follow the folllowing instruction to get the project and run it locally to your computer

Prerequisites

You will need the following:

• Git
• Node.js
• Visual Studio Code

Vite requires Node.js version 14.18+, 16+ or higher

• Should know basic HTML

How to use

First open your Terminal / Command Prompt

Now clone the repository by entering these

# Clone the repository
$ git clone https://github.com/notshanxx/plainfolio.git

# Change directory into the repository
$ cd plainfolio

# Remove the current origin repository
$ git remote remove origin

# open in VS Code editor
$ code .

Open the New Terminal in the Visual Studio Code at the up left corner or [Ctrl + `]

After that run

# Install dependencies
$ npm install

# Run dev server
$ npm run dev

After running the npm run dev. You should see the following below

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Congratulation!!! You can now go to the url http://localhost:5173/ and view the portfolio

Deploy

To know how to deploy this and run it online. Follow this documentation

Configuring the Template

Now to change the default informations. Go to the index.html located at the root folder and follow the following guide.

Changing Color

Go to the styles.css located at the root folder and follow the following guide.

In the first line you will see the :root

change only the variable inside it.

:root {
  --bg-color: #070a2d;
  --font-color: #cdced5;
  --link-color: lightblue;
  --text-color-1: rgba(0, 179, 119, 1); 
  --text-color-2: rgba(214, 255, 127, 1);
  --headline-color: white;
}

--bg-color -the background

--font-color -the font color

--link-color -the link color

--text-color-1 -the green color in the site

--text-color-2 -the yellow collor in the site

--headline-color -the h color

HTML Sections

There's only 3 section to add your infos The HOME, PROJECTS and ABOUT

To change or add images or svg. Put your file in the /asset folder.
For image ./asset/img
For svg ./asset/svg

Get SVG in Feathericons if you want to add socials

Editing HOME Section

THINGS TO BE EDITED IN HOME SECTION

• your image
• your name
• social media urls
• your bio
• your quote

Editing the Profile Picture

To edit the image find these in index.html. Edit the img src by adding your own image in /asset/img and copy and paste it's relative path in src like the one below.

<div class="img-container">
  <img width="80" height="80" src="./asset/img/Watashi.jpeg" alt="pfp" />
</div>

Editing the Social Medias

To edit the social medias find these in index.html. Edit the href to your own url. Get SVG in Feathericons or other sources.

<div class="social-container">
  <!-- GITHUB -->
  <a href="https://github.com/notshanxx" target="_blank"
    ><img width="24" height="24" src="./asset/svg/github.svg" alt="github"
  /></a>

  <!-- LINKEDIN -->
  <a
    href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley"
    target="_blank"
    ><img width="24" height="24" src="./asset/svg/linkedin.svg" alt="linkedin"
  /></a>
</div>

Add more Social Media Icons

To add more social media icons. Just follow this template below.
Edit it's href and the img src. Find icons online and add it atasset/svg

<a href="https://github.com/notshanxx" target="_blank">
  <img src="./asset/svg/github.svg" alt="github" />
</a>

Editing the Name

To edit the name find these in index.html. Then change it

<h1>MARCO</h1>

Editing the Bio

To edit the bio find these in index.html. Then change it

<p class="user-bio">
  I’m a Student currently pursuing my bachelor's degree in Computer Science.
  <br />
  I’m passionate about developing products that make people's lives easier and
  miserable.
</p>

Editing the Quote

To edit the quote find these in index.html. Then change it

<div class="quote-container">
  <p>
    <!-- EDIT QUOTE -->
    <i>
      You cannot use the word "possibility" without limitations <br />
      - Master Higuchi
    </i>
  </p>
</div>

Editing PROJECTS section

THINGS TO BE EDITED

• project title
• project repository url
• project short description
• project tools used
• github url

PROJECT TEMPLATE

to add more projects copy this template and edit the texts and urls

<div class="repository-container">
  <div class="repository-head">
    <!-- EDIT YOUR PROJECTS -->

    <!-- EDIT YOUR PROJECT'S SOURCE URL-->
    <a
      href="https://github.com/notshanxx/anicard"
      target="_blank"
      rel="noopener noreferrer"
    >
      <!-- EDIT YOUR PROJECT'S TITLE -->
      <h3>anicard</h3>
    </a>

    <!-- EDIT YOUR PROJECT'S SOURCE URL -->
    <a
      href="https://github.com/notshanxx/anicard"
      target="_blank"
      rel="noopener noreferrer"
    >
      <img src="./asset/svg/external-link.svg" alt="external-link" />
    </a>
  </div>

  <!-- EDIT YOUR PROJECT'S DESCRIPTION -->
  <p class="repository-description">
    Create simple cards with anime information and cover on it.
  </p>
  <!-- EDIT YOUR PROJECT TOOLS USED -->
  <div class="repository-language-used-container">
    <span class="language-used">Javascript</span>
    <span class="language-used">CSS</span>
    <span class="language-used">HTML</span>
  </div>
</div>

ABOUT SECTION

THINGS TO BE EDITED IN HOME SECTION

• your image
• your name
• social media urls
• your long bio
• your skills

Editing About Image

find these code in the index.html. change the img src

<!-- Image  -->
<div class="about-img-container">
  <img width="80" height="80" src="./asset/img/Watashi.jpeg" alt="pfp" />
</div>

Editing Your About Name

find these code in the index.html. change the name inside

<h2 class="gradient">Marco Manuel</h2>

Editing About Social Media

find these code in the index.html. change the img src and the hrefs pointing to yours

<ul class="about-social-container">
  <li>
    <img src="./asset/svg/github.svg" alt="Github" />
    <a href="https://github.com/notshanxx/">Github</a>
  </li>

  <li>
    <img src="./asset/svg/mail.svg" alt="LinkedIn" />
    <a href="https://github.com/notshanxx/">Mail</a>
  </li>

  <li>
    <img src="./asset/svg/linkedin.svg" alt="LinkedIn" />
    <a href="https://github.com/notshanxx/"> LinkedIn</a>
  </li>
</ul>

may break design if added more than 3

Editing Your About Long Bio

find these code in the index.html. change the contents

<!-- long bio -->
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam repellendus
  magnam vel deleniti ea quidem aliquid veniam minima, eveniet impedit
  consequatur nemo dolorem rerum cumque sed qui ratione culpa saepe.
</p>

Editing Your Skills

find these code in the index.html. change/add <li><li/> tags

<!-- Skills / Tools -->
<h3>Skills / Tools</h3>
<ul class="skill">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>TypeScript</li>
  <li>Phyton</li>
  <li>React</li>
  <li>Svelte</li>
  <li>Node.js</li>
  <li>Git</li>
</ul>

Others

Enable Scrolling

To enablle scrolling. Go to styles.css. Clear the overflow or comment it.

body {
  min-height: 100vh;
  background-color: var(--bg-color);
  text-align: center;
  font-family: "Work Sans", sans-serif; /* remove scroll bar and disable scroll */
  overflow: hidden;
  color: var(--font-color);
}

Remove Quote

To remove the quote. Go to index.html and find this <div> and comment it out or clear it

<div class="quote-container">
  <p>
    <i>
      You cannot use the word "possibility" without limitations <br />
      - Master Higuchi
    </i>
  </p>
</div>

Remove Hover Script

To remove the hover effect. Go to index.html and find this <script> tag and comment it out or clear it

<script type="module" src="./script/event-effect.js"></script>