Dopefolio
Dopefolio 🔥 - Portfolio Template for Developers 🚀
Install / Use
/learn @rammcodes/DopefolioREADME
Dopefolio 🔥
A Blazing Fast Multipage Portfolio Template for Developers 🚀
Demo Link 🔗
<div align="center"> <img src="https://i.postimg.cc/CxZXqhWM/ezgif-com-video-to-gif-1.gif" alt="Dopefolio Demo" width="100%" /> <br> </div> <br/> <br/><br/>
( Update ): Project Achievement 🏆
Dopefolio has been listed as the Hottest Frontend Tool of 2021 According to CSS Tricks 🥳. Thanks to all of you for supporting this project 🙌
Link to the CSS tricks article on Dopefolio
<br/><br/>
Features
-
Easy to Setup 💯
-
Free to Use ( OpenSource ) 🥳
-
No Additional Frameworks 🤘
-
No Additional Libraries 🙌
-
Multi Page 💎
-
Fully Responsive 🚀
-
Super Fast and Optimized for SEO ⚡
-
Great Audits Score 🎖️
Test the template with different colors on the playground link 🚀
Playground Link 🔗
<div align="center"> <img src="https://i.postimg.cc/xjsqN9GG/ezgif-com-gif-maker-2.gif" alt="Dopefolio Playground" width="100%" /> <br> </div> <br/><br/>
Technologies used 🛠️
- HTML 🚀
- CSS 🚀
- JavaScript 🚀
- SASS 🚀
<br/>
How To Use 🔧
From your command line, first clone Dopefolio:
# Clone this repository
$ git clone https://github.com/rammcodes/dopefolio
# Go into the repository
$ cd dopefolio
# Remove current origin repository
$ git remote remove origin
Then you can install the dependencies
Using NPM:
# Install dependencies
$ npm install
# Listen to changes in CSS Preprocessor files ( SASS files )
$ npm run compile:scss
Once you run npm run compile:scss, then open the index.html inside your favorite browser or using the live server extension.
<br>
Template Instructions:
Step 1 - STYLES
Make sure you have started the SASS to CSS compilation by running
$ npm run compile:scss
Change the color theme of the website.
Go to sass/abstracts/_variables.scss and change the value of this sass variable called $themeClrPrimary to your preferred HEX color.
// Default value
$themeClrPrimary: #0062b9;
NOTE: I highly recommend to checkout the Dopefolio Playground Link to test the template with different colors and see which color do you like the most.
<br/><br/>
Step 2 - Homepage
Go to /index.html and fill your information, there are 6 sections:
Header of Homepage
- On
.header__logo-img, Add your own Image, Better if the background of the image is transparent so the background can match the theme color. To remove the background of your image, you can visit remove.bg where you can upload your image and it will remove the background of it. - On
.header__logo-sub, Add your own Name.
<!-- **** Header of Homepage **** -->
<header class="header">
<div class="header__content">
<div class="header__logo-container">
<div class="header__logo-img-cont">
<img
src="./assets/png/john-doe.png"
alt="Ram Maheshwari Logo Image"
class="header__logo-img"
/>
</div>
<span class="header__logo-sub">John Doe</span>
</div>
<div class="header__main">
<ul class="header__links">
<li class="header__link-wrapper">
<a href="./" class="header__link"> Home </a>
</li>
<li class="header__link-wrapper">
<a href="./#about" class="header__link">About </a>
</li>
<li class="header__link-wrapper">
<a href="./#projects" class="header__link"> Projects </a>
</li>
<li class="header__link-wrapper">
<a href="./#contact" class="header__link"> Contact </a>
</li>
</ul>
<div class="header__main-ham-menu-cont">
<img
src="./assets/svg/ham-menu.svg"
alt="hamburger menu"
class="header__main-ham-menu"
/>
</div>
</div>
</div>
<div class="header__sm-menu">
<div class="header__sm-menu-content">
<ul class="header__sm-menu-links">
<li class="header__sm-menu-link">
<a href="./"> Home </a>
</li>
<li class="header__sm-menu-link">
<a href="./#about"> About </a>
</li>
<li class="header__sm-menu-link">
<a href="./#projects"> Projects </a>
</li>
<li class="header__sm-menu-link">
<a href="./#contact"> Contact </a>
</li>
</ul>
</div>
</div>
</header>
<!-- END Header -->
Hero Section of Homepage
- On
.heading-primary, put your custom title. - On
.text-primary, put a short description about yourself. - On
.home-hero__social-icon-link, fill the href attribute with a link related to your social media account.
<!-- **** Hero Section of Homepage **** -->
<section class="home-hero">
<div class="home-hero__content">
<h1 class="heading-primary">Hey, My name is John Doe</h1>
<div class="home-hero__info">
<p class="text-primary">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis
tempora explicabo quae quod deserunt eius sapiente solutions for complex
problems
</p>
</div>
<div class="home-hero__cta">
<a href="./#projects" class="btn btn--bg">Projects</a>
</div>
</div>
<div class="home-hero__socials">
<div class="home-hero__social">
<a href="#" class="home-hero__social-icon-link">
<img
src="./assets/png/linkedin-ico.png"
alt="icon"
class="home-hero__social-icon"
/>
</a>
</div>
<div class="home-hero__social">
<a href="#" class="home-hero__social-icon-link">
<img
src="./assets/png/github-ico.png"
alt="icon"
class="home-hero__social-icon"
/>
</a>
</div>
<div class="home-hero__social">
<a href="#" class="home-hero__social-icon-link">
<img
src="./assets/png/twitter-ico.png"
alt="icon"
class="home-hero__social-icon"
/>
</a>
</div>
<div class="home-hero__social">
<a href="#" class="home-hero__social-icon-link">
<img
src="./assets/png/yt-ico.png"
alt="icon"
class="home-hero__social-icon"
/>
</a>
</div>
<div class="home-hero__social">
<a
href="#"
class="home-hero__social-icon-link home-hero__social-icon-link--bd-none"
>
<img
src="./assets/png/insta-ico.png"
alt="icon"
class="home-hero__social-icon"
/>
</a>
</div>
</div>
<div class="home-hero__mouse-scroll-cont">
<div class="mouse"></div>
</div>
</section>
<!-- /END Hero Section -->
About Section
- On
.heading-sec__sub, put a short description about the section. - On
.about__content-details-para, put your details here and use<strong></strong>tag to highlight specific keywords. - On
.skills__skill, mention your skill one by one.
<!-- **** About Section of Homepage **** -->
<section id="about" class="about sec-pad">
<div class="main-container">
<h2 class="heading heading-sec heading-sec__mb-med">
<span class="heading-sec__main">About Me</span>
<span class="heading-sec__sub">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis
tempora explicabo quae quod deserunt eius sapiente
</span>
</h2>
<div class="about__content">
<div class="about__content-main">
<h3 class="about__content-title">Get to know me!</h3>
<div class="about__content-details">
<p class="about__content-details-para">
Hey! It's
<strong>John Doe</strong>
and I'm a <strong> Frontend Web Developer </strong> located in Los
Angeles. I've done
<strong> remote </strong>
projects for agencies, consulted for startups, and collaborated with
talented people to create
<strong>digital products </strong>
for both business and consumer use.
</p>
<p class="about__content-details-para">
I'm a bit of a digital product junky. Over the years, I've used
hundreds of web and mobile apps in different industries and
verticals. Feel free to
<strong>contact</strong> me here.
</p>
</div>
<a href="./#contact" class="btn btn--med btn--theme dynamicBgClr"
>Contact</a
>
</div>
<div class="about__content-skills">
<h3 class="about__content-title">My Skills</h3>
<div class="skills">
<div class="skills__skill">HTML</div>
<div class="skills__skill">CSS</div>
<div class="skills__skill">JavaScript</div>
<div class="skills__skill">React</div>
<div class="skills__skill">SASS</div>
<div class="skills__skill">GIT</div>
<div class="skills__skill">Shopify</div>
<div class="skills__skill">Wordpress</div>
<div class="skills__skill">Google ADS</div>
<div class="skills__skill">Facebook Ads</div>
<div class="skills__skill">Android</div>
<div class="skills__skill">IOS</div>
</div>
</div>
</div>
</div>
</section>
<!-- END About Section -->
Projects
- On
.heading-sec__sub, put a short description about the section. .projects__rowis the row for each project in your portfolio.- One
.projects__rowfor each project in your portfolio ( so for example, if you have 3 projects then you need
