Multi-Page Portfolio Template with Firebase Admin

CodeCanva - Multi-Page Professional Portfolio Template
Elevate your online presence with this dynamic, customizable portfolio template, complete with an intuitive admin dashboard for easy content management!

A stunning, responsive, and data-driven portfolio solution for developers and creatives.

Table of Contents
Overview

Features

Technologies Used

What's Included

Live Demo

Getting Started

Prerequisites

Installation

Firebase Setup (Crucial!)

Admin Dashboard Usage

Logging In

Updating Personal Info

Updating Skills

Managing Projects

Updating Resume Details

Updating Contact Details

Customization Guide

1. Changing Colors & Fonts (Tailwind CSS)

2. Modifying Styles (CSS)

3. Extending Functionality (JavaScript)

Deployment

Advanced Features (Ideas for Extension)

License

Support & Contact

Credits & Attribution

Overview
This CodeCanva Multi-Page Professional Portfolio Template is a sophisticated, responsive, and easy-to-manage solution for showcasing your work. Unlike static templates, this product comes with a built-in Admin Dashboard that allows you to manage your personal information, skills, projects, resume, and contact details directly through a user-friendly interface, with all data securely stored in Firebase Firestore.

It's perfect for developers, designers, freelancers, and anyone who needs a professional online presence that can be updated without touching a single line of HTML!

Features
Multi-Page SPA Architecture: Seamless navigation between Home, Projects, Resume, and Contact sections without full page reloads.

Built-in Admin Dashboard: Easily add, edit, and delete projects, and update all your personal and professional details via intuitive forms.

Firebase Firestore Integration: Securely store and retrieve all your portfolio content in a NoSQL cloud database.

Firebase Authentication: Basic authentication (anonymous or custom token) to secure your admin panel.

Fully Responsive Design: Adapts beautifully to desktops, tablets, and mobile devices, ensuring a great user experience on any screen size.

Modern & Clean Aesthetic: Contemporary design that puts your work front and center, focusing on readability and visual appeal.

Utility-First Styling with Tailwind CSS: Rapidly customize styles and extend the design with ease, leveraging Tailwind's powerful utility classes.

Clean & Modular JavaScript: Well-organized code split into logical modules (app.js, firebaseConfig.js, firestoreService.js, uiService.js) for easy understanding, maintenance, and extension.

Dynamic Content Loading: All public-facing content is loaded from Firestore, making updates instant across your live portfolio once saved in the admin dashboard.

Integrated Font Awesome Icons: Easily use a wide range of professional icons.

Technologies Used
HTML5: For the core semantic structure of the application.

CSS3: For custom styling and layout, including transitions and responsive adjustments.

Tailwind CSS: A utility-first CSS framework for rapidly building custom designs directly in your markup.

JavaScript (ES Modules): For dynamic interactivity, application logic, data management, and client-side routing.

Firebase Firestore: Google's flexible, scalable NoSQL cloud database used for storing all portfolio content (personal info, skills, projects, resume, contact).

Firebase Authentication: Used for managing user sessions and securing access to the admin dashboard.

Google Fonts: For modern and legible typography (Inter and Roboto Mono).

Font Awesome: A popular icon library for scalable vector icons.

What's Included
Upon purchase, you will receive a .zip file containing the following well-organized project structure:

your-portfolio-template/
├── .firebase/                  # Firebase CLI configuration files
├── .gitignore                  # Standard Git ignore file to exclude unnecessary files
├── assets/                     # Folder for static assets like images
│   └── images/                 # Placeholder images for profile, projects, etc.
│       ├── profile-placeholder.png
│       ├── project-placeholder-1.png
│       ├── project-placeholder-2.png
│       └── project-placeholder-3.png
│       # Add any other placeholder images you include in your template
├── css/                        # Output folder for compiled CSS
│   └── style.css               # The compiled and optimized Tailwind CSS + your custom CSS
├── js/                         # JavaScript modules for application logic
│   ├── app.js                  # Main application logic, event handling, and orchestration
│   ├── firebaseConfig.js       # Firebase initialization and authentication setup
│   ├── firestoreService.js     # Functions for interacting with Firebase Firestore (CRUD operations)
│   └── uiService.js            # Functions for rendering UI elements and managing view states
├── node_modules/               # Node.js dependencies (installed via npm install)
├── src/                        # Source folder for Tailwind CSS input
│   └── input.css               # The main input file for Tailwind CSS (imports base, components, utilities)
├── .firebaserc                 # Firebase project configuration
├── 404.html                    # Custom 404 error page for Firebase Hosting
├── firebase.json               # Firebase project configuration for hosting, functions, etc.
├── index.html                  # The main HTML file (your single-page application entry point)
├── LICENSE.txt                 # The MIT License file
├── package-lock.json           # Records the exact versions of dependencies installed
├── package.json                # Defines project dependencies (Tailwind CSS) and build scripts
└── tailwind.config.js          # Tailwind CSS configuration file for theme customization

Live Demo
Experience the template in action and test the admin dashboard (note: data will be saved to your Firebase project, and if you're not authenticated with your own setup, it might be shared or reset based on demo environment rules):

Live Demo URL Here: https://multi-page-portfolio-template.web.app

Getting Started
Follow these steps to set up the template on your local machine and connect it to your own Firebase project.

Prerequisites
A modern web browser: (e.g., Chrome, Firefox, Edge, Safari) for viewing and testing.

A code editor: (e.g., VS Code) for editing the template files.

Basic understanding of HTML, CSS, and JavaScript: To customize and extend the template.

Node.js and npm (Node Package Manager) installed: Download Node.js (npm is included). This is essential for building and compiling Tailwind CSS.

A Google Account: Required to set up and manage your Firebase project.

Installation
Download the Template: After purchasing, download the [Your Template Name].zip file from Gumroad.

Unzip the Files: Extract the contents of the .zip file to your desired project folder on your computer (e.g., my-new-portfolio).

Open in Editor: Open the extracted project folder in your code editor (e.g., VS Code).

Install Dependencies: Open your terminal or command prompt, navigate to the root of your project folder (where package.json is located), and run:

npm install

This command will download and install Tailwind CSS and other necessary development dependencies defined in package.json.

Start Tailwind CSS Development Server: To compile your CSS and enable live reloading of styles during development, run:

npm run dev

Keep this terminal window open while you are developing. This command watches for changes in src/input.css and tailwind.config.js and automatically generates the compiled css/style.css file.

View Locally: With the npm run dev command running, you can now open index.html directly in your web browser. The template should load with its default content.

Firebase Setup (Crucial!)
This template uses Firebase Firestore to store all your portfolio content (personal information, projects, resume, contact details). You must set up your own Firebase project to use the admin dashboard and persist your data.

Create a Firebase Project:

Go to the Firebase Console.

Click "Add project" and follow the on-screen prompts to create a new project.

Give your project a descriptive name (e.g., "My Professional Portfolio Data").

Register a Web App:

Once your project is created, click the "Web" icon (</>) on the project overview page to add a new web app to your Firebase project.

Follow the steps to register your app. You can skip the Firebase Hosting setup for now if you plan to deploy elsewhere.

Crucially, copy your Firebase configuration object. It will look similar to this:

const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "your-project-id.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "...",
  appId: "1:..."
};

Enable Firestore Database:

In the Firebase Console, navigate to the "Build" section in the left-hand menu, then select "Firestore Database".

Click "Create database".

Choose "Start in production mode". Select a suitable location for your database.

Set Firestore Security Rules:

After creating the database, go to the "Rules" tab within the Firestore Database section.

Replace the default rules with the following to allow authenticated users to read and write their own data. This ensures your portfolio data is private to your authenticated user ID.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Allow authenticated users to read and write their own private data
    // Data will be stored under: /artifacts/{appId}/users/{userId}/{documents=**}
    match /artifacts/{appId}/users/{userId}/{documents=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
    // If you want to make certain data publicly readable (e.g., for a shared demo),
    // you would add additional rules. For this template, all user data is private.
  }
}

Click "Publish" to apply the rules.

Enable Anonymous Authentication:

In the Firebase Console, navigate to "Build" > "Authentication".

Go to the "Sign-in method" tab.

Under the "Native providers" section, enable the "Anonymous" provider. Click "Save".

(Note: This template uses anonymous authentication for simplicity in allowing users to manage their own content without complex signup. For a more robust solution, you could implement Email/Password authentication in Firebase and modify the app.js login logic.)

Update index.html with your Firebase Config:

Open your index.html file in your code editor.

Scroll to the very bottom of the <body> tag, where you'll find a <script type="module"> block that initializes Firebase.

Replace the placeholder firebaseConfig object with the actual configuration you copied from your Firebase Console in step 2.

// Replace this placeholder with your actual Firebase config from Firebase Console
const firebaseConfig = {
  apiKey: "YOUR_API_KEY_HERE",
  authDomain: "YOUR_AUTH_DOMAIN_HERE",
  projectId: "YOUR_PROJECT_ID_HERE",
  storageBucket: "YOUR_STORAGE_BUCKET_HERE",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID_HERE",
  appId: "YOUR_APP_ID_HERE"
};
// Keep the __app_id and __initial_auth_token lines as they are for Canvas environment compatibility.
// When deployed outside Canvas, __app_id will default to 'default-app-id'.
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;

Important: The appId variable used in Firestore paths (artifacts/{appId}/users/{userId}/...) will use the value provided by the Canvas environment (__app_id) when running there. When you deploy this template on your own hosting, __app_id will be undefined, and it will default to default-app-id. If you want a specific appId for your deployed Firebase data (e.g., matching your Firebase projectId), you can explicitly set const appId = "your-firebase-project-id"; in firebaseConfig.js or ensure your firebaseConfig.appId matches the default-app-id if you rely on that fallback.

Run Locally (if not already):

Ensure npm run dev is still running in your terminal.

Open index.html in your web browser.

Your portfolio should now load. You can proceed to the Admin Dashboard to start adding your content.

Admin Dashboard Usage
The Admin Dashboard is your central place to manage all your portfolio content without directly editing any code files. All changes made here are saved to your Firebase Firestore database.

Logging In
Navigate to the Admin section by clicking "Admin" in the desktop navigation bar or the mobile menu.

You will see a simple login form. Enter the default admin password: admin123.

Security Note: This is a simple, hardcoded password for easy template setup and demonstration. For a truly secure production environment, you would implement a more robust authentication method (e.g., Firebase Email/Password Authentication) and remove this simple password check. This template primarily focuses on content management via Firestore once a user is authenticated (even if anonymously).

Click "Login". If successful, the content management forms will appear, and your unique User ID (from Firebase Authentication) will be displayed.

Updating Personal Info
Use the "Update Personal Info" form to set your name, tagline, profile image, about me description, and interests.

Your Name/Brand: The primary name displayed on your portfolio.

Tagline/Specialization: A short phrase describing what you do (e.g., "Web Developer & Digital Creator").

Profile Image URL: For simplicity, this template uses a URL for your profile image. You can upload your image to a service like Imgur, Cloudinary, or Firebase Storage (requires additional setup, see Advanced Features) and paste the direct image URL here.

About Me Description: Your introduction paragraph.

Interests: Enter as a comma-separated list (e.g., "Web development, Open source, Hiking, Photography").

Updating Skills
Use the "Update Skills" form to list your programming languages, web technologies, tools & platforms, and soft skills.

Format: For each category, enter skills as a comma-separated list of items (e.g., "JavaScript, Python, C++").

Managing Projects
The "Manage Projects" section allows you to add new projects or edit/delete existing ones.

Add New Project:

Fill out all the fields in the "Project Form" (Title, Short Description, Long Description, Technologies Used, Key Features, Image URL, Live Demo URL, Source Code URL).

Click "Save Project". A new project card will appear on your public Projects page.
<!-- end list -->

Image URL: Provide a direct URL to your project screenshot or mockup.

Technologies Used / Key Features: Enter as comma-separated lists.

Edit Existing Project:

In the "Existing Projects" list below the form, click the "Edit" button next to the project you want to modify.

The project's current data will automatically populate the "Project Form" above.

Make your desired changes in the form fields.

Click "Save Project" again to update the existing project.

Delete Project:

In the "Existing Projects" list, click the "Delete" button next to the project you want to remove.

A confirmation modal will appear. Click "OK" to confirm the deletion.

Updating Resume Details
The "Update Resume Details" form requires you to input your resume data as a JSON array. This allows for flexible structuring of your education, experience, and awards sections.

Format: The expected format is a JSON array of objects. Each object should have a type field ("education", "experience", or "award") and relevant details.

Example Structure (Copy and paste this into the textarea and modify):

[
  {
    "type": "education",
    "institution": "University Name",
    "location": "City, State",
    "years": "2020-2024",
    "degree": "Bachelor of Science in Computer Science",
    "coursework": ["Data Structures", "Algorithms", "Web Development", "Database Systems"]
  },
  {
    "type": "experience",
    "title": "Frontend Developer",
    "company": "Innovate Solutions Inc.",
    "dates": "Jan 2023 - Present",
    "responsibilities": [
      "Developed responsive user interfaces using React and Tailwind CSS.",
      "Collaborated with UX/UI designers to implement new features.",
      "Optimized web performance, reducing load times by 15%."
    ]
  },
  {
    "type": "award",
    "title": "Dean's List",
    "organization": "University of Technology",
    "date": "Spring 2021",
    "description": "Achieved academic excellence with a GPA of 3.9/4.0, demonstrating strong commitment to studies."
  }
]

Validation: The form will attempt to parse your input as JSON. An error message will be shown below the textarea if the format is invalid.

Updating Contact Details
Use the "Update Contact Details" form to provide your email, LinkedIn, and GitHub URLs, and customize your contact section's introductory text.

Email: Your professional email address.

LinkedIn URL: Direct link to your LinkedIn profile.

GitHub URL: Direct link to your GitHub profile.

Intro Text: A short message displayed at the top of your contact section.

Customization Guide
This template is built with customization in mind, leveraging Tailwind CSS for easy styling modifications and modular JavaScript for extending functionality.

1. Changing Colors & Fonts (Tailwind CSS)
The quickest and most efficient way to change the template's overall look and feel is by modifying your tailwind.config.js file.

Open tailwind.config.js located in the root of your project folder.

Modify theme.extend.colors:

You'll find custom color names like primary-blue, light-gray-bg, accent-teal, etc., each mapped to a hex code (#RRGGBB).

Change these hex codes to your desired brand colors. These changes will automatically apply to all elements using these Tailwind color classes throughout your HTML.

Example: To change the primary blue to a vibrant red, you would modify 'primary-blue': '#3F72AF' to 'primary-blue': '#FF0000'.

Modify theme.extend.fontFamily:

You can extend Tailwind's default font stack (sans, mono) or add new custom font families.

Important: If you add new fonts, ensure they are imported from Google Fonts (or self-hosted) in your index.html file for them to be available.

Rebuild CSS: After any changes to tailwind.config.js, you must rebuild your CSS. In your terminal (where npm run dev is running), stop it (Ctrl + C) and then run:

npm run build

If npm run dev is already running, it should automatically detect changes in tailwind.config.js and recompile your css/style.css.

2. Modifying Styles (CSS)
For more specific styling or overrides that are not easily achievable with Tailwind utility classes, you can edit css/style.css.

Open css/style.css located in the css/ folder.

You'll find sections with comments (e.g., "Base Styles & Global Variables," "Navigation & Header Styles").

You can modify existing CSS rules or add new ones. Remember that Tailwind's utility classes often have high specificity, so you might need to use more specific CSS selectors or, in some cases, !important (though generally avoid !important if possible) if you're trying to override a Tailwind class.

The CSS variables defined in :root (e.g., var(--primary-color)) provide an easy way to use your custom colors in your manual CSS.

3. Extending Functionality (JavaScript)
The JavaScript logic is organized into modular files in the js/ directory, making it easier to understand and extend.

app.js: Contains the main application flow, event listeners for UI interactions, and orchestrates calls to other modules.

firebaseConfig.js: Handles Firebase app initialization and authentication state management.

firestoreService.js: Encapsulates all data (CRUD) operations with Firebase Firestore.

uiService.js: Responsible for all UI rendering, DOM manipulation, and managing view states.

To extend functionality:

Adding new sections/pages: You'll need to modify index.html to add the new section's HTML structure. Then, update js/uiService.js to include logic for showing/hiding this new section. You might also need to define new data models and Firestore interactions in js/firestoreService.js and add corresponding forms in index.html with event handling logic in js/app.js.

New interactive elements: Add event listeners in js/app.js and implement the interaction logic, potentially using js/uiService.js for DOM manipulation.

Customizing existing logic: Review the comments in each JavaScript file to understand its purpose and modify functions as needed.

Deployment
Once you've customized your template, added all your content via the Admin Dashboard, and are ready to make your portfolio live, you can deploy it to a web hosting service.

Build for Production: Before deploying, generate an optimized, minified CSS file. In your terminal, stop the npm run dev process (Ctrl + C) and run:

npm run build

This command will create a production-ready css/style.css file.

Upload Files: Upload the entire contents of your project folder to your web hosting provider.

Important: You typically do not need to upload the node_modules/ folder or the src/ folder (as css/style.css is already compiled).

Recommended Hosting Options:

Netlify / Vercel: Excellent choices for static sites. You can connect your GitHub repository, and they will automatically build and deploy your site on every push.

GitHub Pages: Free hosting directly from your GitHub repository.

Traditional Web Hosting: Upload the files via FTP to any standard web hosting provider.

Advanced Features (Ideas for Extension)
This template provides a robust foundation. Here are some ideas for advanced features you or your buyers could implement to further enhance the portfolio:

Firebase Storage for Image Uploads: Instead of requiring image URLs, implement direct image uploads to Firebase Storage for project screenshots and profile photos. This would involve more complex JavaScript to handle file inputs and storage interactions within the admin dashboard.

Custom Admin Password/User Management: Implement a more robust password change mechanism for the admin dashboard, possibly using Firebase Email/Password Authentication or a Cloud Function for user creation/management.

Rich Text Editor for Descriptions: Integrate a WYSIWYG (What You See Is What You Get) editor (e.g., TinyMCE, Quill.js) for project long descriptions and resume details to allow for richer text formatting (bold, italics, lists, etc.).

SEO Enhancements: Dynamically update meta tags (<meta name="description">, <meta property="og:title">, etc.) based on the current section or project being viewed, improving search engine visibility and social sharing.

Contact Form Submission: Integrate a serverless function (e.g., Firebase Cloud Functions, Netlify Functions, AWS Lambda) to handle contact form submissions, send emails, or save inquiries to a database.

Multi-User Support: Modify Firestore rules and data structure to allow multiple users to create and manage their own distinct portfolios within the same application instance, potentially with separate login credentials.

Analytics Integration: Add Google Analytics or another analytics tool to track visitor behavior and engagement.

Animations and Transitions: Implement more advanced CSS animations or JavaScript-based animation libraries (e.g., GSAP, ScrollReveal.js) for a more dynamic visual experience.

License
This template is licensed under the MIT License.

You are free to:

Use this template for personal and commercial projects.

Modify and adapt the template to your specific needs.

Distribute the final compiled product (your completed portfolio website) built using this template.

You are NOT permitted to:

Resell or redistribute this template (or its core components) in a standalone or template form.

Claim original authorship of the template code.

For the full license text, see the LICENSE.txt file in the root of the project.

Support & Contact
If you encounter any issues or have questions regarding the template's functionality or setup, please don't hesitate to reach out!

Email: rishavendrasharma9353@gmail.com

We aim to respond within 3 business days.

Credits & Attribution
Designed and Developed by CodeCanva

Built with Tailwind CSS

Powered by Firebase

Icons from Font Awesome

Fonts from Google Fonts

Placeholder images from placehold.co (if used in demo or initial setup)

11. LICENSE.txt
MIT License

Copyright (c) 2025 CodeCanva

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.