BranchesTags

Repository files navigation

Personal CV — Giulio Giusteschi

Live demoLicense: MITMade with Bootstrap 5GitHub API

A dynamic, api-driven portfolio website: it automatically fetches your repositories, displays your code activity, and presents your professional profile in a responsive, bilingual interface. The project is designed to be offline-ready (with caching) and highly customizable via simple JSON configuration files.

Just clone, add your token, and let the API build your portfolio.

Why this architecture?

I wanted a CV that updates itself. Instead of manually adding every new project to a static HTML file, this site queries the GitHub API to fetch my latest work, stars, and language statistics. It combines the structure of a traditional résumé with the interactivity of a modern web app.

Main features

  • GitHub API Integration: Automatically fetches repository lists, descriptions, star counts, and language statistics.
  • Smart Caching: Implements localStorage caching logic (1-hour TTL) to prevent API rate-limiting and ensure instant loading on repeat visits.
  • Integrated Code Viewer: Browse repository files and view code syntax directly within the portfolio modal without leaving the page.
  • Bilingual Engine: Instant switching between Italian and English via translations.js, persisting user preference, with the possibility to add easly new languages.
  • Dark Mode: System-aware theme switching with persistent state.
  • Dynamic Filtering: Filter projects by programming language or search by name/description in real-time.
  • Responsive Design: Built on Bootstrap 5, optimized for mobile, tablet, and desktop.

Quick setup

  1. Clone the repository.
  2. Configuration: The project uses a separate file for authentication to avoid rate limits.
    • Create a file named api_token.js in the root folder.
    • Add your GitHub Personal Access Token (Fine-grained or Classic):
    constgitHubToken={token: "YOUR_GITHUB_TOKEN_HERE"};
    (Note: The site works without a token via the public API, but you will hit rate limits quickly).
  3. Run: Open index.html in your browser.

Interactions & UI

  • Theme Toggle: Switch between Light/Dark mode via the floating pill menu.
  • Language: Toggle IT/EN. The site updates the DOM instantly without reloading.
  • Repo Navigation:
    • Click a Repository Card to open the details view.
    • Click Files to view source code with basic syntax presentation.
    • Use the Back button to return to the grid.
  • Search: Type in the search bar to filter repositories by name or description instantly.

Customization

Content & Translations All text content is separated from the HTML structure. Edit translations.js to modify the bio, experience, education, or add new languages.

Styling The visual identity is controlled via CSS variables in style.css. You can easily change the palette:

:root {
--primary-color:#4f46e5; /* Indigo */--secondary-color:#64748b; /* Slate */--font-heading:'Poppins', sans-serif;
/* ... */
}

License

The source code for this project is licensed under the MIT License.

The content (text, images, and personal data) is licensed under CC BY-NC-SA 4.0.

About

My personal Curriculum Vitae site

t0ls.github.io/CV/

Topics

curriculum-vitae

Resources

Readme
MIT license
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Personal CV — Giulio Giusteschi
Live demoLicense: MITMade with Bootstrap 5GitHub API
A dynamic, api-driven portfolio website: it automatically fetches your repositories, displays your code activity, and presents your professional profile in a responsive, bilingual interface. The project is designed to be offline-ready (with caching) and highly customizable via simple JSON configuration files.
Just clone, add your token, and let the API build your portfolio.
Why this architecture?
I wanted a CV that updates itself. Instead of manually adding every new project to a static HTML file, this site queries the GitHub API to fetch my latest work, stars, and language statistics. It combines the structure of a traditional résumé with the interactivity of a modern web app.
Main features
  • GitHub API Integration: Automatically fetches repository lists, descriptions, star counts, and language statistics.
  • Smart Caching: Implements localStorage caching logic (1-hour TTL) to prevent API rate-limiting and ensure instant loading on repeat visits.
  • Integrated Code Viewer: Browse repository files and view code syntax directly within the portfolio modal without leaving the page.
  • Bilingual Engine: Instant switching between Italian and English via translations.js, persisting user preference, with the possibility to add easly new languages.
  • Dark Mode: System-aware theme switching with persistent state.
  • Dynamic Filtering: Filter projects by programming language or search by name/description in real-time.
  • Responsive Design: Built on Bootstrap 5, optimized for mobile, tablet, and desktop.
Quick setup
  1. Clone the repository.
  2. Configuration:
The project uses a separate file for authentication to avoid rate limits.

    • Create a file named api_token.js in the root folder.
    • Add your GitHub Personal Access Token (Fine-grained or Classic):
    constgitHubToken={token: "YOUR_GITHUB_TOKEN_HERE"};
    (Note: The site works without a token via the public API, but you will hit rate limits quickly).
  3. Run: Open index.html in your browser.
Interactions & UI
  • Theme Toggle: Switch between Light/Dark mode via the floating pill menu.
  • Language: Toggle IT/EN. The site updates the DOM instantly without reloading.
  • Repo Navigation:

    • Click a Repository Card to open the details view.
    • Click Files to view source code with basic syntax presentation.
    • Use the Back button to return to the grid.
  • Search: Type in the search bar to filter repositories by name or description instantly.
Customization
Content & Translations
All text content is separated from the HTML structure. Edit translations.js to modify the bio, experience, education, or add new languages.
Styling
The visual identity is controlled via CSS variables in style.css. You can easily change the palette:
:root {
--primary-color:#4f46e5; /* Indigo */--secondary-color:#64748b; /* Slate */--font-heading:'Poppins', sans-serif;
/* ... */
}
License
The source code for this project is licensed under the MIT License.
The content (text, images, and personal data) is licensed under CC BY-NC-SA 4.0.
About
My personal Curriculum Vitae site
t0ls.github.io/CV/
Topics
curriculum-vitae
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Personal CV — Giulio Giusteschi
Live demoLicense: MITMade with Bootstrap 5GitHub API
A dynamic, api-driven portfolio website: it automatically fetches your repositories, displays your code activity, and presents your professional profile in a responsive, bilingual interface. The project is designed to be offline-ready (with caching) and highly customizable via simple JSON configuration files.
Just clone, add your token, and let the API build your portfolio.
Why this architecture?
I wanted a CV that updates itself. Instead of manually adding every new project to a static HTML file, this site queries the GitHub API to fetch my latest work, stars, and language statistics. It combines the structure of a traditional résumé with the interactivity of a modern web app.
Main features
  • GitHub API Integration: Automatically fetches repository lists, descriptions, star counts, and language statistics.
  • Smart Caching: Implements localStorage caching logic (1-hour TTL) to prevent API rate-limiting and ensure instant loading on repeat visits.
  • Integrated Code Viewer: Browse repository files and view code syntax directly within the portfolio modal without leaving the page.
  • Bilingual Engine: Instant switching between Italian and English via translations.js, persisting user preference, with the possibility to add easly new languages.
  • Dark Mode: System-aware theme switching with persistent state.
  • Dynamic Filtering: Filter projects by programming language or search by name/description in real-time.
  • Responsive Design: Built on Bootstrap 5, optimized for mobile, tablet, and desktop.
Quick setup
  1. Clone the repository.
  2. Configuration:
The project uses a separate file for authentication to avoid rate limits.

    • Create a file named api_token.js in the root folder.
    • Add your GitHub Personal Access Token (Fine-grained or Classic):
    constgitHubToken={token: "YOUR_GITHUB_TOKEN_HERE"};
    (Note: The site works without a token via the public API, but you will hit rate limits quickly).
  3. Run: Open index.html in your browser.
Interactions & UI
  • Theme Toggle: Switch between Light/Dark mode via the floating pill menu.
  • Language: Toggle IT/EN. The site updates the DOM instantly without reloading.
  • Repo Navigation:

    • Click a Repository Card to open the details view.
    • Click Files to view source code with basic syntax presentation.
    • Use the Back button to return to the grid.
  • Search: Type in the search bar to filter repositories by name or description instantly.
Customization
Content & Translations
All text content is separated from the HTML structure. Edit translations.js to modify the bio, experience, education, or add new languages.
Styling
The visual identity is controlled via CSS variables in style.css. You can easily change the palette:
:root {
--primary-color:#4f46e5; /* Indigo */--secondary-color:#64748b; /* Slate */--font-heading:'Poppins', sans-serif;
/* ... */
}
License
The source code for this project is licensed under the MIT License.
The content (text, images, and personal data) is licensed under CC BY-NC-SA 4.0.
About
My personal Curriculum Vitae site
t0ls.github.io/CV/
Topics
curriculum-vitae
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Personal CV — Giulio Giusteschi
Live demoLicense: MITMade with Bootstrap 5GitHub API
A dynamic, api-driven portfolio website: it automatically fetches your repositories, displays your code activity, and presents your professional profile in a responsive, bilingual interface. The project is designed to be offline-ready (with caching) and highly customizable via simple JSON configuration files.
Just clone, add your token, and let the API build your portfolio.
Why this architecture?
I wanted a CV that updates itself. Instead of manually adding every new project to a static HTML file, this site queries the GitHub API to fetch my latest work, stars, and language statistics. It combines the structure of a traditional résumé with the interactivity of a modern web app.
Main features
  • GitHub API Integration: Automatically fetches repository lists, descriptions, star counts, and language statistics.
  • Smart Caching: Implements localStorage caching logic (1-hour TTL) to prevent API rate-limiting and ensure instant loading on repeat visits.
  • Integrated Code Viewer: Browse repository files and view code syntax directly within the portfolio modal without leaving the page.
  • Bilingual Engine: Instant switching between Italian and English via translations.js, persisting user preference, with the possibility to add easly new languages.
  • Dark Mode: System-aware theme switching with persistent state.
  • Dynamic Filtering: Filter projects by programming language or search by name/description in real-time.
  • Responsive Design: Built on Bootstrap 5, optimized for mobile, tablet, and desktop.
Quick setup
  1. Clone the repository.
  2. Configuration:
The project uses a separate file for authentication to avoid rate limits.

    • Create a file named api_token.js in the root folder.
    • Add your GitHub Personal Access Token (Fine-grained or Classic):
    constgitHubToken={token: "YOUR_GITHUB_TOKEN_HERE"};
    (Note: The site works without a token via the public API, but you will hit rate limits quickly).
  3. Run: Open index.html in your browser.
Interactions & UI
  • Theme Toggle: Switch between Light/Dark mode via the floating pill menu.
  • Language: Toggle IT/EN. The site updates the DOM instantly without reloading.
  • Repo Navigation:

    • Click a Repository Card to open the details view.
    • Click Files to view source code with basic syntax presentation.
    • Use the Back button to return to the grid.
  • Search: Type in the search bar to filter repositories by name or description instantly.
Customization
Content & Translations
All text content is separated from the HTML structure. Edit translations.js to modify the bio, experience, education, or add new languages.
Styling
The visual identity is controlled via CSS variables in style.css. You can easily change the palette:
:root {
--primary-color:#4f46e5; /* Indigo */--secondary-color:#64748b; /* Slate */--font-heading:'Poppins', sans-serif;
/* ... */
}
License
The source code for this project is licensed under the MIT License.
The content (text, images, and personal data) is licensed under CC BY-NC-SA 4.0.
About
My personal Curriculum Vitae site
t0ls.github.io/CV/
Topics
curriculum-vitae
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Personal CV — Giulio Giusteschi
Live demoLicense: MITMade with Bootstrap 5GitHub API
A dynamic, api-driven portfolio website: it automatically fetches your repositories, displays your code activity, and presents your professional profile in a responsive, bilingual interface. The project is designed to be offline-ready (with caching) and highly customizable via simple JSON configuration files.
Just clone, add your token, and let the API build your portfolio.
Why this architecture?
I wanted a CV that updates itself. Instead of manually adding every new project to a static HTML file, this site queries the GitHub API to fetch my latest work, stars, and language statistics. It combines the structure of a traditional résumé with the interactivity of a modern web app.
Main features
  • GitHub API Integration: Automatically fetches repository lists, descriptions, star counts, and language statistics.
  • Smart Caching: Implements localStorage caching logic (1-hour TTL) to prevent API rate-limiting and ensure instant loading on repeat visits.
  • Integrated Code Viewer: Browse repository files and view code syntax directly within the portfolio modal without leaving the page.
  • Bilingual Engine: Instant switching between Italian and English via translations.js, persisting user preference, with the possibility to add easly new languages.
  • Dark Mode: System-aware theme switching with persistent state.
  • Dynamic Filtering: Filter projects by programming language or search by name/description in real-time.
  • Responsive Design: Built on Bootstrap 5, optimized for mobile, tablet, and desktop.
Quick setup
  1. Clone the repository.
  2. Configuration:
The project uses a separate file for authentication to avoid rate limits.

    • Create a file named api_token.js in the root folder.
    • Add your GitHub Personal Access Token (Fine-grained or Classic):
    constgitHubToken={token: "YOUR_GITHUB_TOKEN_HERE"};
    (Note: The site works without a token via the public API, but you will hit rate limits quickly).
  3. Run: Open index.html in your browser.
Interactions & UI
  • Theme Toggle: Switch between Light/Dark mode via the floating pill menu.
  • Language: Toggle IT/EN. The site updates the DOM instantly without reloading.
  • Repo Navigation:

    • Click a Repository Card to open the details view.
    • Click Files to view source code with basic syntax presentation.
    • Use the Back button to return to the grid.
  • Search: Type in the search bar to filter repositories by name or description instantly.
Customization
Content & Translations
All text content is separated from the HTML structure. Edit translations.js to modify the bio, experience, education, or add new languages.
Styling
The visual identity is controlled via CSS variables in style.css. You can easily change the palette:
:root {
--primary-color:#4f46e5; /* Indigo */--secondary-color:#64748b; /* Slate */--font-heading:'Poppins', sans-serif;
/* ... */
}
License
The source code for this project is licensed under the MIT License.
The content (text, images, and personal data) is licensed under CC BY-NC-SA 4.0.
About
My personal Curriculum Vitae site
t0ls.github.io/CV/
Topics
curriculum-vitae
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Personal CV — Giulio Giusteschi
Live demoLicense: MITMade with Bootstrap 5GitHub API
A dynamic, api-driven portfolio website: it automatically fetches your repositories, displays your code activity, and presents your professional profile in a responsive, bilingual interface. The project is designed to be offline-ready (with caching) and highly customizable via simple JSON configuration files.
Just clone, add your token, and let the API build your portfolio.
Why this architecture?
I wanted a CV that updates itself. Instead of manually adding every new project to a static HTML file, this site queries the GitHub API to fetch my latest work, stars, and language statistics. It combines the structure of a traditional résumé with the interactivity of a modern web app.
Main features
  • GitHub API Integration: Automatically fetches repository lists, descriptions, star counts, and language statistics.
  • Smart Caching: Implements localStorage caching logic (1-hour TTL) to prevent API rate-limiting and ensure instant loading on repeat visits.
  • Integrated Code Viewer: Browse repository files and view code syntax directly within the portfolio modal without leaving the page.
  • Bilingual Engine: Instant switching between Italian and English via translations.js, persisting user preference, with the possibility to add easly new languages.
  • Dark Mode: System-aware theme switching with persistent state.
  • Dynamic Filtering: Filter projects by programming language or search by name/description in real-time.
  • Responsive Design: Built on Bootstrap 5, optimized for mobile, tablet, and desktop.
Quick setup
  1. Clone the repository.
  2. Configuration:
The project uses a separate file for authentication to avoid rate limits.

    • Create a file named api_token.js in the root folder.
    • Add your GitHub Personal Access Token (Fine-grained or Classic):
    constgitHubToken={token: "YOUR_GITHUB_TOKEN_HERE"};
    (Note: The site works without a token via the public API, but you will hit rate limits quickly).
  3. Run: Open index.html in your browser.
Interactions & UI
  • Theme Toggle: Switch between Light/Dark mode via the floating pill menu.
  • Language: Toggle IT/EN. The site updates the DOM instantly without reloading.
  • Repo Navigation:

    • Click a Repository Card to open the details view.
    • Click Files to view source code with basic syntax presentation.
    • Use the Back button to return to the grid.
  • Search: Type in the search bar to filter repositories by name or description instantly.
Customization
Content & Translations
All text content is separated from the HTML structure. Edit translations.js to modify the bio, experience, education, or add new languages.
Styling
The visual identity is controlled via CSS variables in style.css. You can easily change the palette:
:root {
--primary-color:#4f46e5; /* Indigo */--secondary-color:#64748b; /* Slate */--font-heading:'Poppins', sans-serif;
/* ... */
}
License
The source code for this project is licensed under the MIT License.
The content (text, images, and personal data) is licensed under CC BY-NC-SA 4.0.
About
My personal Curriculum Vitae site
t0ls.github.io/CV/
Topics
curriculum-vitae
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Personal CV — Giulio Giusteschi
Live demoLicense: MITMade with Bootstrap 5GitHub API
A dynamic, api-driven portfolio website: it automatically fetches your repositories, displays your code activity, and presents your professional profile in a responsive, bilingual interface. The project is designed to be offline-ready (with caching) and highly customizable via simple JSON configuration files.
Just clone, add your token, and let the API build your portfolio.
Why this architecture?
I wanted a CV that updates itself. Instead of manually adding every new project to a static HTML file, this site queries the GitHub API to fetch my latest work, stars, and language statistics. It combines the structure of a traditional résumé with the interactivity of a modern web app.
Main features
  • GitHub API Integration: Automatically fetches repository lists, descriptions, star counts, and language statistics.
  • Smart Caching: Implements localStorage caching logic (1-hour TTL) to prevent API rate-limiting and ensure instant loading on repeat visits.
  • Integrated Code Viewer: Browse repository files and view code syntax directly within the portfolio modal without leaving the page.
  • Bilingual Engine: Instant switching between Italian and English via translations.js, persisting user preference, with the possibility to add easly new languages.
  • Dark Mode: System-aware theme switching with persistent state.
  • Dynamic Filtering: Filter projects by programming language or search by name/description in real-time.
  • Responsive Design: Built on Bootstrap 5, optimized for mobile, tablet, and desktop.
Quick setup
  1. Clone the repository.
  2. Configuration:
The project uses a separate file for authentication to avoid rate limits.

    • Create a file named api_token.js in the root folder.
    • Add your GitHub Personal Access Token (Fine-grained or Classic):
    constgitHubToken={token: "YOUR_GITHUB_TOKEN_HERE"};
    (Note: The site works without a token via the public API, but you will hit rate limits quickly).
  3. Run: Open index.html in your browser.
Interactions & UI
  • Theme Toggle: Switch between Light/Dark mode via the floating pill menu.
  • Language: Toggle IT/EN. The site updates the DOM instantly without reloading.
  • Repo Navigation:

    • Click a Repository Card to open the details view.
    • Click Files to view source code with basic syntax presentation.
    • Use the Back button to return to the grid.
  • Search: Type in the search bar to filter repositories by name or description instantly.
Customization
Content & Translations
All text content is separated from the HTML structure. Edit translations.js to modify the bio, experience, education, or add new languages.
Styling
The visual identity is controlled via CSS variables in style.css. You can easily change the palette:
:root {
--primary-color:#4f46e5; /* Indigo */--secondary-color:#64748b; /* Slate */--font-heading:'Poppins', sans-serif;
/* ... */
}
License
The source code for this project is licensed under the MIT License.
The content (text, images, and personal data) is licensed under CC BY-NC-SA 4.0.
About
My personal Curriculum Vitae site
t0ls.github.io/CV/
Topics
curriculum-vitae
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Personal CV — Giulio Giusteschi
Live demoLicense: MITMade with Bootstrap 5GitHub API
A dynamic, api-driven portfolio website: it automatically fetches your repositories, displays your code activity, and presents your professional profile in a responsive, bilingual interface. The project is designed to be offline-ready (with caching) and highly customizable via simple JSON configuration files.
Just clone, add your token, and let the API build your portfolio.
Why this architecture?
I wanted a CV that updates itself. Instead of manually adding every new project to a static HTML file, this site queries the GitHub API to fetch my latest work, stars, and language statistics. It combines the structure of a traditional résumé with the interactivity of a modern web app.
Main features
  • GitHub API Integration: Automatically fetches repository lists, descriptions, star counts, and language statistics.
  • Smart Caching: Implements localStorage caching logic (1-hour TTL) to prevent API rate-limiting and ensure instant loading on repeat visits.
  • Integrated Code Viewer: Browse repository files and view code syntax directly within the portfolio modal without leaving the page.
  • Bilingual Engine: Instant switching between Italian and English via translations.js, persisting user preference, with the possibility to add easly new languages.
  • Dark Mode: System-aware theme switching with persistent state.
  • Dynamic Filtering: Filter projects by programming language or search by name/description in real-time.
  • Responsive Design: Built on Bootstrap 5, optimized for mobile, tablet, and desktop.
Quick setup
  1. Clone the repository.
  2. Configuration:
The project uses a separate file for authentication to avoid rate limits.

    • Create a file named api_token.js in the root folder.
    • Add your GitHub Personal Access Token (Fine-grained or Classic):
    constgitHubToken={token: "YOUR_GITHUB_TOKEN_HERE"};
    (Note: The site works without a token via the public API, but you will hit rate limits quickly).
  3. Run: Open index.html in your browser.
Interactions & UI
  • Theme Toggle: Switch between Light/Dark mode via the floating pill menu.
  • Language: Toggle IT/EN. The site updates the DOM instantly without reloading.
  • Repo Navigation:

    • Click a Repository Card to open the details view.
    • Click Files to view source code with basic syntax presentation.
    • Use the Back button to return to the grid.
  • Search: Type in the search bar to filter repositories by name or description instantly.
Customization
Content & Translations
All text content is separated from the HTML structure. Edit translations.js to modify the bio, experience, education, or add new languages.
Styling
The visual identity is controlled via CSS variables in style.css. You can easily change the palette:
:root {
--primary-color:#4f46e5; /* Indigo */--secondary-color:#64748b; /* Slate */--font-heading:'Poppins', sans-serif;
/* ... */
}
License
The source code for this project is licensed under the MIT License.
The content (text, images, and personal data) is licensed under CC BY-NC-SA 4.0.
About
My personal Curriculum Vitae site
t0ls.github.io/CV/
Topics
curriculum-vitae
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages