Get Started
Get your portfolio website up and running in just 5 minutes
Quick Start
Follow these simple steps to customize and launch your portfolio website. No coding knowledge required!
Extract the ZIP file
Extract the downloaded ZIP file to your desired location. You'll see a folder named universal-portfolio-kit-v1
Open config.js
Open the config.js file in any text editor (Notepad, VS Code, Sublime Text, etc.)
💡 Tip: This is the ONLY file you need to edit. Don't touch HTML, CSS, or JavaScript files!
Replace placeholder text
Replace all generic placeholders with your information:
- • "Your Name" → Your actual name
- • "Your Brand" → Your brand/company name
- • "[email protected]" → Your email address
- • "+1 234 567 8900" → Your phone number
- • "Your City, Your Country" → Your location
Add your images
Replace the placeholder images with your own:
- • Profile photo →
assets/images/ - • Portfolio project images →
assets/images/portfolio/ - • Logo/favicon →
assets/images/
📌 Note: Update image paths in config.js to match your new image filenames
Add your CV files (Optional)
You can add CV download buttons to both Hero and About sections. Add your PDF files to assets/documents/ and configure them in config.js
• Same CV for both: Use the same file path in both hero.cv.file and about.cv.file
• Different CVs: Use different file paths for each section (e.g., short CV in Hero, detailed CV in About)
• Hide CV buttons: Set showHeroCV: false or showAboutCV: false in the display section
Open index.html
Double-click index.html to open it in your browser and see your customized portfolio!
What You Can Customize
✏️ Text Content
- • Name, brand, title
- • About me paragraphs
- • Services and skills
- • Portfolio projects
- • Contact information
🎨 Visual Elements
- • Profile images
- • Portfolio screenshots
- • Logo and favicon
- • CV/Resume files
🔗 Links & Social
- • Social media URLs
- • Portfolio project links
- • Contact email
- • Phone number
⚙️ Display Settings
- • Show/hide CV buttons
- • Show/hide social icons
- • Show/hide back-to-top
- • Filter button layout
Testing Your Portfolio
Desktop Testing
Open index.html in different browsers (Chrome, Firefox, Safari, Edge) to ensure everything looks good
Mobile Testing
Use browser developer tools to test responsive design:
- • Chrome: Press F12 → Click device icon
- • Firefox: Press F12 → Click responsive design mode
- • Safari: Develop menu → Enter Responsive Design Mode
Functionality Testing
- • Click all navigation links
- • Test portfolio filters
- • Try CV download buttons
- • Check social media links
- • Test contact form (opens email client)
- • Verify back-to-top button works
✅ You're all set!
Your portfolio is ready to go! For detailed configuration options and advanced customization, check out the other documentation pages.