Constructor
new PortfolioController()
PortfolioController - Main controller class for managing the portfolio site
This class provides a complete architecture for managing a data-driven portfolio site. It handles data loading, DOM caching, section building, responsive behavior, and error handling.
- Since:
- 1.0.0
Example
// Create a new portfolio instance
const portfolio = new PortfolioController({
debug: true,
dataUrl: "./data/portfolio.json",
mobileBreakpoint: 768
});
// Initialize and build the portfolio
try {
await portfolio.init();
console.log('Portfolio loaded successfully');
} catch (error) {
console.error('Portfolio failed to load:', error);
}Methods
addEventListenerAfterBuild(elementId, event, handler)
Add event listener to element after DOM is built (utility for Builder.js)
Parameters:
| Name | Type | Description |
|---|---|---|
elementId |
string | ID of the element to add listener to |
event |
string | Event type (e.g., 'click', 'change') |
handler |
function | Event handler function |
buildDevIcons()
Build dev icons (languages and tools)
buildExternalLinks()
Build external links
buildIconSet(icons, container)
Build a set of icons
Parameters:
| Name | Type | Description |
|---|---|---|
icons |
Array | Array of icon names |
container |
HTMLElement | Container element |
buildLsSection(section)
Build list section
Parameters:
| Name | Type | Description |
|---|---|---|
section |
Object | Section data |
buildNavigation()
Build navigation links with validation
(async) buildPage() → {Promise.<void>}
Build the entire page with comprehensive error handling
Throws:
-
If page building fails
- Type
- Error
Returns:
- Type
- Promise.<void>
buildPgSection(section)
Build paragraph section
Parameters:
| Name | Type | Description |
|---|---|---|
section |
Object | Section data |
buildRsSection(section)
Build resume section (with responsive behavior)
Parameters:
| Name | Type | Description |
|---|---|---|
section |
Object | Section data |
buildSections()
Build content sections with validation and error handling
cacheDOMElements()
Cache DOM elements for reuse with error handling
Throws:
-
If critical DOM elements are missing
- Type
- Error
get(selector) → {HTMLElement|null}
Query selector wrapper with validation
Parameters:
| Name | Type | Description |
|---|---|---|
selector |
string | CSS selector |
Throws:
-
If selector is not a string
- Type
- TypeError
Returns:
- Type
- HTMLElement | null
getAll(selector) → {NodeList}
Query selector all wrapper with validation
Parameters:
| Name | Type | Description |
|---|---|---|
selector |
string | CSS selector |
Throws:
-
If selector is not a string
- Type
- TypeError
Returns:
- Type
- NodeList
getDOM() → {Object}
Get DOM cache
Returns:
- Type
- Object
getData() → {Object|null}
Get current data
Returns:
- Type
- Object | null
(async) init() → {Promise.<void>}
Initialize the portfolio controller
Throws:
-
If initialization fails
- Type
- Error
Returns:
- Type
- Promise.<void>
(async) loadPageData() → {Promise.<Object>}
Load page data from JSON with proper error handling
Throws:
-
If data loading or validation fails
- Type
- Error
Returns:
The loaded data object
- Type
- Promise.<Object>
log(…args)
Debug logging utility - only logs in debug mode
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
args |
any |
<repeatable> |
Arguments to log |
logError(message, erroropt)
Error logging utility - always logs errors
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
message |
string | Error message |
||
error |
Error |
<optional> |
null | Error object for additional context |
(async) refresh() → {Promise.<void>}
Refresh the page (reload data and rebuild) with proper cleanup
Throws:
-
If refresh fails
- Type
- Error
Returns:
- Type
- Promise.<void>
refreshCache()
Refresh/rebuild the DOM cache - useful when new elements are created dynamically
toggleResumePreview(fileUrl)
Toggle resume preview iframe
Parameters:
| Name | Type | Description |
|---|---|---|
fileUrl |
string | URL of the resume file |
validateDOM()
Validate required DOM elements exist
Throws:
-
If required DOM elements are missing
- Type
- Error
validateDataStructure()
Validate data structure with comprehensive checks
Throws:
-
If data structure is invalid
- Type
- Error