A Modern Portfolio Template for Developers!
Features
- Modern UI Design + Reveal Animations + Hover Effects
- Well organized documentation
- One Page Layout
- Custom SCSS
- Fully Responsive
- Valid HTML5 & CSS3
- Fast and SEO Optimized
To view a demo example, Click Here.
To view a live example, Click Here.
To view the live example repo, Click Here.
Getting Started
Here’s a Complete Guide to walk you through the process of setting your own Portfolio Website with this minimal template on your local machine as well as hosting it on GitHub.
Prerequisites
You will need VSCode and Git installed on your computer.
You’ll also need these two extensions:
These extensions will be automatically prompted for installation once you open this project in VSCode.
How To Use
To kick-start your journey in creating your portfolio, follow these steps:
1. Open the terminal in VSCode (Ctrl + `) and clone the DevFolio Repo:
# Clone this repository
$ git clone https://github.com/AnilSeervi/DevFolio.git
# Go into the repository
$ cd DevFolio
# Remove current origin repository
$ git remote remove origin
2. Delete the ‘.github’ folder as it’s not needed.
3. Now, simply click on Watch Sass in the bottom status bar to watch all your .scss file changes and compile them to vanilla .css.
Viewing Your Changes
You can open index.html and right-click in the file to select Show Preview, to start a preview at http://127.0.0.1:3000.
Alternatively, press Ctrl + K + Ctrl + Shift + P or F1 to Show Command Palette, search for Live Sass: Watch Sass and turn it on. Then, select Live Preview: Start Server to start the live server.
Template Instructions
Step 1 – STRUCTURE
In index.html, fill in your information. There are 6 sections:
Head Section
- Add a title to your Portfolio website within the title tag.
- Include coding keywords and a brief description in the meta tags to improve your SEO.
- Remember to remove the Google Analytics tag before pushing it to GitHub.
Hero Section
Add a custom title and call-to-action button in the hero section.
About Section
Include your profile picture (recommended size: 450 x 450px) and a brief introduction.
Projects Section
List your projects, including their details and links.
Contact Section
Encourage users to connect with you via your email address.
Footer Section
Customize social media links and add icons as needed.
Step 2 – STYLES
To change the color theme, modify stylebase_variables.scss and adjust the $main-color and $secondary-color variables.
Utilize UI Gradient to explore gradient variations.
Deployment
Create a new repository on GitHub, set a new remote for your template repository, and push your changes using the following commands:
# Set a new remote
$ git remote add origin https://github.com/user.repo.git
# Commit changes
$ git commit -m "created my portfolio"
# Push the changes
$ git push -u origin master
Go to your repository settings and set GitHub Pages source to ‘master’. Your Portfolio should now be live!
It should be accessible at https://username.github.io/repoName.
Technologies Used
- Sass – CSS extension language
- ScrollReveal.js – JavaScript library
- Tilt.js – JavaScript tiny parallax library
Authors
**Anil Seervi** – GitHub Profile
License
This project is licensed under the MIT License – see the LICENSE file for details.
Acknowledgments
Motivated and inspired by the ZTM: Complete Web Developer course, I created a simpler version of simplefolio for those who didn’t know Node and packages.
Have Fun Creating Your Own Portfolio Website
Troubleshooting
If you encounter any issues during installation, ensure:
- Both VSCode and Git are updated to their latest versions.
- The necessary VSCode extensions are properly installed and enabled.
- You followed each step in the correct order.
For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.
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.