Introduction
Thank you for purchasing PortSpace!
For questions: priharshdesign@gmail.com
PortSpace
Premium Portfolio Template
PortSpace is a premium portfolio template built with SCSS and JavaScript. It features dark/light mode toggle and fully customizable SCSS architecture.
🌓 Dark/Light Mode
100% Customizable
📱 Responsive
Features
Dark/Light Mode
Built-in theme switcher with localStorage
SCSS Variables
Easy color & typography customization
Fully Responsive
Perfect on all devices
Fast Loading
Optimized code
File Structure
PortSpace/ │ ├── index.html # Main HTML file │ ├── 📁 assets/ │ ├── 📁 css/ │ │ ├── main.css # Main CSS (compiled) │ │ │ │ │ ├── 📁 js/ │ │ ├── app.js # Custom JS │ │ │ ├── 📁 scss/ │ │ ├── main.scss # Main SCSS │ │ ├── _variables.scss # Colors & variables │ │ └── _more.scss # Dark mode + styles │ │ │ └── 📁 images/ # All images │ └── 📁 documentation/ # This documentation
SCSS Guide
Change Colors
// assets/scss/_variables.scss
:root {
--primary-500: #6366F1; // Main color
--accent-500: #8B5CF6; // Accent color
}
[data-theme="light"] {
--bg-primary: #ffffff;
--text-primary: #0a0a0a;
}
Compile SCSS
# Using VS Code Live Sass Compiler 1. Install "Live Sass Compiler" 2. Click "Watch Sass" # Command line cd PortSpace sass --watch assets/scss/main.scss:assets/css/main.css
Variables
| Variable | Purpose | Default |
|---|---|---|
--primary-500 |
Main color | #6366F1 |
--accent-500 |
Accent color | #8B5CF6 |
--font-primary |
Body font | 'Inter', sans-serif |
--font-secondary |
Heading font | 'Clash Display', sans-serif |
Dark/Light Mode
<html data-theme="dark"> <!-- Default -->
<html data-theme="light"> <!-- Light mode -->
// assets/js/app.js
const themeToggle = document.getElementById('themeToggle');
themeToggle.addEventListener('click', () => {
const html = document.documentElement;
const newTheme = html.dataset.theme === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
});
Sections
01
Hero Section
Main landing section
_components.scss
02
About Section
Bio & skills
_components.scss
03
Portfolio
Projects gallery
_components.scss
04
Services
What I offer
_components.scss
05
Contact
Form & info
_components.scss
06
Footer
Footer section
_more.scss
Credits
| Resource | Link |
|---|---|
| Font Share (Clash Display) | fontshare.com |
| Google Fonts (Inter) | fonts.google.com |
| Font Awesome Icons | fontawesome.com |
| Unsplash Images | unsplash.com |