🎏 A plain portfolio template for everyone
📌 Fast
📌 Simple
📌 One Page
📌 Reponsive
📌 Begginer Friendly
📌 Easy to Customize
- Prerequisites
- Deploy
- How to use
- Configuring the template
- Changing site color
- HTML Sections
Follow the folllowing instruction to get the project and run it locally to your computer
You will need the following:
Vite requires Node.js version 14.18 , 16 or higher
- Should know basic HTML
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 devAfter 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
To know how to deploy this and run it online. Follow this documentation
Now to change the default informations.
Go to the index.html located at the root folder and follow the following guide.
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
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
THINGS TO BE EDITED IN HOME SECTION
- your image
- your name
- social media urls
- your bio
- your quote
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>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>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>To edit the name find these in index.html. Then change it
<h1>MARCO</h1>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>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>THINGS TO BE EDITED
- project title
- project repository url
- project short description
- project tools used
- github url
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>THINGS TO BE EDITED IN HOME SECTION
- your image
- your name
- social media urls
- your long bio
- your skills
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>find these code in the index.html. change the name inside
<h2 class="gradient">Marco Manuel</h2>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
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>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>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);
}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>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>