A clean, stylish, and fully responsive animated portfolio template for any professional or freelancer. Easily customizable with your own name, services, skills, colors, and fonts — no coding knowledge required for basic edits.
- 🎨 Customizable color scheme and fonts
- 📱 Fully responsive layout (mobile-friendly)
- ✨ Smooth section animations & hover effects
- 💡 Minimal, professional aesthetic
- 📄 Sections for About, Services, Skills, Contact
- ⚡ Light JS-free performance (pure HTML & CSS)
- 🚀 Ready for GitHub Pages or any static hosting
/
├── index.html # Main portfolio file
├── README.md # Instructions and documentation
-
Option A: Download ZIP
- Click the green
Codebutton >Download ZIP - Extract it on your computer
- Click the green
-
Option B: Clone via Git
git clone https://github.com/your-username/portfolio-template.git
cd portfolio-template- Use a code editor like VS Code, Sublime Text, or Notepad++.
- Open the
index.htmlfile to begin editing.
<h1>Your Name Here</h1>
<p>Your Professional Title | Tagline or Motto 🤎</p>Edit the content in:
<section>
<h2>About Me</h2>
<p>Brief summary of your background and expertise.</p>
</section>Replace the sample services with your actual offerings:
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>Add or remove skills as needed:
<span class="skill">Skill One</span>
<span class="skill">Skill Two</span>List your unique selling points:
<li>✅ Experience</li>
<li>✅ Reliable</li>
<li>✅ Efficient</li>Edit the contact info and link:
<a href="mailto:youremail@example.com" class="contact-btn">Contact Me</a>
<p>Email, LinkedIn, Calendly or your preferred method.</p>In the <style> section, you’ll find CSS variables under :root. Change them to match your branding:
:root {
--primary-color: #4b2e2a;
--secondary-color: #fdf6f0;
--accent-color: #6a4e42;
--highlight-color: #e8dcd1;
--text-color: #4a3c31;
--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}-
🎨 Use Coolors or any color picker tool to choose your palette.
-
🖋️ Change the
font-familyto use Google Fonts:- Go to Google Fonts
- Choose a font and get the
@importor<link>tag - Add it in the
<head>of your HTML
Open index.html in your browser to preview the portfolio.
You can double-click the file or drag it into a browser window.
- Push your code to a GitHub repository.
- Go to
Settings > Pages. - Select the
mainbranch and/ (root)folder. - Click Save.
- Visit your live site at
https://your-username.github.io/repo-name
- Go to Netlify
- Drag and drop the folder into the dashboard
- Instant deployment and custom domain support
Same as above — just upload your files as a static site.
- ✔️ Keep your text concise and professional.
- 🧠 Use bullet points to organize content.
- 🖼️ Add a profile image (optional).
- 📱 Test responsiveness on mobile and tablet.
- 💬 Keep contact info visible and simple.
You can add a screenshot to this README with:
MIT License — free to use and modify. Attribution appreciated but not required.
Feel free to open an issue, suggest changes, or fork and customize it for your needs.
Happy building your dream portfolio! 🚀