- Easy to Setup π―
- Modern UI Design + Reveal Animations π
- OpenSource π
- No Additional Frameworks π€π»
- No Additional Libraries π
- Multi Page π
- Fully Responsive π
- Super Fast and Optimized for SEO β‘
- Valid HTML5 & CSS3 ποΈ
- A method of self discovery and confidence building
- Professional way to showcase your work
- Increases your visibility and online presence
- Shows youβre more than just a resume
From your command line, first clone Simplefolio:
# Clone the repository
$ git clone https://github.com/krvaibhaw/proxyfolio.git
# Move into the repository
$ cd proxyfolio
# Remove the current origin repository
$ git remote remove origin
# Open the index.html file
$ firefox index.html
Go to /index.html
and put your information, there are 5 sections:
-
Header Section
- On
img/stuffs.jpg
, Add your own Image, Better if the background of the image is transparent so the background can match the theme color. - Add your own name and custom portfolio title.
- On
<h4>
tag mention your Career Statement/Summary.
- On
<div class="header__title">
<!-- <h1 onclick="alert('HTML alert')"> -->
<h1>
Hey, my name is
<!-- Green highlight effect -->
<!-- Your Name Here -->
<span class="highlight">Proxy</span>
<br>I'm a
<span class="highlight">Web</span>
Developer
</h1>
<!-- Your Career Statement/Summary -->
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
<button class="btn--text btn--scroll-to">Learn more ↓</button>
<img src="img/stuffs.jpg" class="header__img" alt="Minimalist items" />
</div>
-
About Section
- On
<span>
tag underclass="operations"
mention your skills. - On
<h5 class="operations__header">
mention your skill title. - On
<p>
tag which is below<h5 class="operations__header">
tag, put a short description about your skill, I recommend to put 1 to 2 line of short and crisp details about your skills. - Copy
class="operations__content operations__content--n
with n being thenth
skill, you can also add more skills to your liking.
- On
<section class="section" id="section--1">
<div class="section__title">
<h2 class="section__description">About Me</h2>
<h3 class="section__header">
This is where you can describe Yourself.
</h3>
</div>
<div class="operations">
<div class="operations__tab-container">
<button class="btn operations__tab operations__tab--1 operations__tab--active" data-tab="1">
<span>01</span>Skill 1
</button>
...
<button class="btn operations__tab operations__tab--3" data-tab="3">
<span>n</span>Skill n
</button>
</div>
<div class="operations__content operations__content--1 operations__content--active">
<div class="operations__icon operations__icon--1">
<svg><use xlink:href="img/icons.svg#icon-upload"></use></svg>
</div>
<h5 class="operations__header">
<!-- Skill Title -->
</h5>
<p>
<!-- Skill Summary -->
</p>
</div>
...
<!-- Add more skills accordingly as above -->
</div>
</section>
-
Projects Section
- On
<img>
tag with class nameclass="features__img lazy-img"
add your project image. - On
<h5>
tag with class nameclass="features__header"
, include your project title. - On
<p>
tag below<h5>
tag, include your project description. - Replicate
<div> ... </div>
with classclass="features"
to add more projects.
- On
<section class="section" id="section--2">
<div class="section__title">
<h2 class="section__description">Projects</h2>
<h3 class="section__header">
Talk about your projects and Open Source contributions.
</h3>
</div>
<div class="features">
<!-- Project featured image -->
<img src="img/digital-lazy.jpg" data-src="img/digital.jpg" alt="Computer"
class="features__img lazy-img" />
<div class="features__feature">
<div class="features__icon">
<svg><use xlink:href="img/icons.svg#icon-monitor"></use></svg>
</div>
<!-- Project Title -->
<h5 class="features__header">Project 1</h5>
<p>
<!-- Project Descriptions and links -->
</p>
</div>
<!-- Add more projects accordingly as above -->
</div>
</section>
-
Publication Section
- On
<h5>
tag with class nameclass="testimonial__header"
, include your publications title. - On
<blockquote>
tag with class nameclass="testimonial__text"
, include your publications description. - On
<h6>
tag with class nameclass="testimonial__name"
, include your username for the publishing site. - On
<p>
tag with classclass="testimonial__location"
, to include publisher name. - Replicate
<div> ... </div>
with classclass="slide"
to add more publications.
- On
<section class="section" id="section--3">
<div class="section__title section__title--testimonials">
<h2 class="section__description">Publications</h2>
<h3 class="section__header">
Talk about your Publications here.
</h3>
</div>
<div class="slider">
<div class="slide">
<div class="testimonial">
<!-- Publication Title -->
<h5 class="testimonial__header">Publication Title 1</h5>
<blockquote class="testimonial__text">
<!-- Publication Descriptions and links -->
</blockquote>
<address class="testimonial__author">
<img src="img/user-1.jpg" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Proxy</h6> <!-- Your Name -->
<p class="testimonial__location">On Medium</p> <!-- Publisher Name -->
</address>
</div>
</div>
<!-- Add more publications accordingly as above -->
<button class="slider__btn slider__btn--left">←</button>
<button class="slider__btn slider__btn--right">→</button>
<div class="dots"></div>
</div>
</section>
-
Contact Section
- On
<h3>
tag with class nameclass="section__header"
, include some custom call-to-action message.
- On
<section class="section section--sign-up">
<div class="section__title">
<h3 class="section__header">
<!-- Mention different ways to contact you -->
</h3>
</div>
<button class="btn btn--show-modal">Contact Me</button>
</section>
-
Footer Section
- Can add link to your blogs and other sites using
<a>
tag with classclass="footer__link"
. - Here you can also put your Social Media URL using
href
attribute of the<a>
tags.
- Can add link to your blogs and other sites using
<footer class="footer">
<ul class="footer__nav">
<li class="footer__item">
<a class="footer__link" href="#section--1">About</a>
</li>
<li class="footer__item">
<a class="footer__link" href="#section--2">Projects</a>
</li>
<li class="footer__item">
<a class="footer__link" href="#section--3">Publications</a>
</li>
...
</footer>
-
Contact Page
- This is a custom contact me page.
- Mention your custom message in
<h2>
withclass="modal__header"
.
<div class="modal hidden">
<button class="btn--close-modal">×</button>
<h2 class="modal__header">
Will reply within <br /> <!-- Your message -->
<span class="highlight">a day</span>
</h2>
<form class="modal__form">
<label>First Name</label>
<input type="text" />
<label>Last Name</label>
<input type="text" />
<label>Email Address</label>
<input type="email" />
<button class="btn">Next step →</button>
</form>
</div>
<div class="overlay hidden"></div>
Go to css/style.css
and tweaks value to change tp different colors and see which color suits you the most.
If you want to get some gradients inspiration I highly recommend you to check this website UI Gradient.
// Default values
background-color: #f3f3f3;
color-primary: #5ec576;
Once you finish your setup. You need to put your website online!
I highly recommend to use Netlify because it is super easy.
- HTML
- CSS
- JavaScript
This project is licensed under the GPL-3.0 License - see the LICENSE file for details
This work is inspired by Bankist project from complete JavaScript course by Jonas Schmedtmann.
Special thanks to Jacobo MartΓnez for creating Simplefolio which is another great Portfolio website Template for Developers.