Plainfolio

🎏 A plain portfolio template for everyone

Live Preview

Features

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

Table of Contents

• Prerequisites
• How to use
• Configuring the template
• 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

Configuring the Template

Now to change the default informations. Go to the index.html located at the root folder

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>