Are you a developer looking for a stylish and functional multi-page portfolio? Look no further than Dopefolio, a blazing fast portfolio template perfect for showcasing your skills and projects. This article will guide you through setting up your very own Dopefolio with ease!
Demo Link
Before we dive in, you might want to check out the Demonstration of Dopefolio to see its potential in action!
Key Features of Dopefolio
- Easy to Setup
- Free to Use (Open Source)
- No Additional Frameworks Required
- Multi-Page Support
- Fully Responsive and SEO-Optimized
- Great Audits Score
How to Use Dopefolio
Ready to create your portfolio? Follow these three simple steps!
Step 1: Clone the Repository
From your command line, start by cloning the Dopefolio repository:
# Clone this repository
$ git clone https://github.com/rammcodes/dopefolio
# Go into the repository
$ cd dopefolio
# Remove current origin repository
$ git remote remove originStep 2: Install Dependencies
Using NPM, install the required dependencies:
# Install dependencies
$ npm install
# Listen to changes in SASS files
$ npm run compile:scssOnce you run this command, open index.html in your favorite browser to see your portfolio in action!
Step 3: Customize Your Portfolio
You have now successfully set up the basic template. Next, let’s personalize it!
Changing the Color Scheme
Go to sass/abstracts/_variables.scss and alter the value of the SASS variable $themeClrPrimary to your preferred HEX color:
$themeClrPrimary: #0062b9;Feel free to experiment with different colors in the Playground to see which suits your style.
Filling Out the Homepage Sections
The template includes various homepage sections such as the Header, Hero Section, and About Section. Here’s an analogy to simplify it:
Think of your portfolio as a well-organized exhibition in an art gallery. Each section of the portfolio represents a particular room. The Header is like the entrance, welcoming visitors; the Hero Section works as the main showcasing area, where your most extraordinary works (like headlines of your career) are put on display. Sections like About and Projects tell the story of your artistic journey, revealing not just what you do but who you are. Add your images, titles, and descriptions as if you are labeling your masterpieces!
Troubleshooting
If you encounter issues along the way, consider the following troubleshooting tips:
- Ensure that Node.js and NPM are correctly installed and up to date.
- Verify that the paths to your images and other resources are correct in your HTML code.
- If changes aren’t reflecting, check to see if your browser cache needs to be cleared or try using an Incognito window.
For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.
Final Touches
Once you have made all your customizations and are satisfied with your portfolio, it’s time to deploy! A popular choice is Netlify. Create a new site, link your GitHub account, and select your repository for hosting. Don’t forget to set your Build Command to npm run build and specify the correct publish directory.
At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.
Give a Star!
If you enjoy using Dopefolio, show your appreciation by giving it a star on GitHub!
Author
Written by Ram Maheshwari. You can find me on LinkedIn, Twitter, and GitHub.
Special Thanks
A special shoutout to Jacobo Martínez for inspiring me to create this template. You may want to check out his project Simplefolio, another excellent portfolio site template!
License
This project is licensed under the GPL-3.0 License – see the LICENSE file for details.