# Simple Portfolio

<figure><img src="/files/bsIx1ruf3VsNKBIW8DuP" alt=""><figcaption></figcaption></figure>

### Key Features

* **About & Skills Section**\
  Introduce yourself and highlight what you do best. This section gives visitors a quick overview of your background, professional journey, and core competencies. Whether it's coding, content creation, consulting, or creative work, it's your chance to make a strong first impression
* **Showcase Section**\
  Showcase your best work. This is where you present past projects, case studies, or client collaborations. Include visuals, descriptions, and outcomes to help potential clients understand your style, capabilities, and the value you bring to each project.
* **FAQ Section**\
  Clear up common questions. Use this space to answer things like your availability, pricing model, preferred communication methods, or turnaround times. It helps build transparency and saves time for both you and your potential clients.

### Notes

{% hint style="warning" %}
**Important note**: After purchasing this template and customizing it, be sure that you had a chance to learn how to set up data security.

Check all privacy settings by the following link before launch: [***Bubble Privacy***](https://manual.bubble.io/help-guides/data/the-database/protecting-data-with-privacy-rules)

Since access to objects differs in each application and is unique for each case, ensure you have established all the privacy rules.
{% endhint %}

### Reusable Elements

Reusable elements are modular components that can be created once and reused across multiple pages or workflows within your application. They help streamline development and maintain consistency.

{% hint style="info" %}
**Nested Reusable Elements\***

In Bubble, you can **nest reusable elements** — meaning you place one reusable inside another. This is powerful for modular design and clean architecture.
{% endhint %}

* **logo:** Ensures the same logo size, placement, and styling across your app.
* **logo\_white:** Typically refers to an alternate version of your logo — maybe a monochrome version, a simplified icon, or one used when branding is minimized. Making this a reusable element gives you control and flexibility across your app.
* **header:** This reusable element is the desktop and mobile header. It contains **logo\*** and navigation links through the app.
* **footer:** This reusable element is the footer of your app. It contains your **logo\_white\*** and social links.
* **feature\_card:** The **Featured Card** is a reusable visual block designed to highlight key content in a compact, elegant format. It’s ideal for showcasing items, tools, or categories with clarity and style. This reusable element accepts the following dynamic inputs:

| Parameter  | Type | Purpose                                              |
| ---------- | ---- | ---------------------------------------------------- |
| `title`    | text | The main label or headline of the card               |
| `subtitle` | text | A brief supporting description or context            |
| `icon`     | text | A symbolic graphic that visually represents the item |

{% hint style="success" %}
To change the icon in the Featured Card reusable element, simply visit [**Heroicons**](https://heroicons.com/) — a library of beautifully crafted SVG icons. Browse through the available icons, and once you find one that fits your use case, **copy its name** (e.g. `academic-cap`, `chart-bar`, `rocket-launch`). Use that name as the input value for the `icon` parameter in your Bubble editor to update the visual symbol dynamically.
{% endhint %}

* **work\_card:** A **work card** is a compact, visually striking UI component that highlights key content. This reusable element accepts the following dynamic inputs:

  | Parameter     | Type    | Description                                                           |
  | ------------- | ------- | --------------------------------------------------------------------- |
  | `title`       | text    | The main heading of the card (e.g. project name or highlight)         |
  | `description` | text    | A short description or supporting detail                              |
  | `hero`        | image   | A large visual that represents the featured content                   |
  | `show_badge*` | boolean | Controls whether a status badge is displayed (e.g. “New”, “Premium”)  |
  | `Link`        | text    | Destination URL for the CTA button (e.g. “View Project”, “Read More”) |
* **regular\_badge:** A **badge** is a great example of a reusable element. It’s typically a small visual tag used to show status, category, or achievement—like “New,” “Verified,” “Premium,” etc.

### Consistent Look for Built-In Pages

In **Bubble**, a *page* is the foundational canvas where you design and build the user interface of your web application. Think of it like a blank sheet where you place all the visual and interactive elements that users will engage with.

* **index**: The default homepage of your app.
* **404**: Shown when a user visits a non-existent URL.
* **reset\_pw**: Used for password recovery flows.

{% hint style="success" %}

All default page types in your Bubble app — **404** and **reset\_pw** — are designed to **match the styles of the selected template**. This includes consistent use of:

* Typography and color schemes
* Layout structure and spacing
* Buttons, inputs, and other UI elements
  {% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://danielmoriya.gitbook.io/bubble-templates/simple-portfolio/simple-portfolio.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.