Skip to content

Commit 33fa249

Browse files
bobellobobobellobo
committed
made generic
1 parent 122c7c0 commit 33fa249

35 files changed

Lines changed: 674 additions & 523 deletions

‎README.md‎

Lines changed: 121 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,122 @@
1-
Bilingual portfolio website built with Vue 3, Vite, and TypeScript.
1+
Bilingual portfolio template built with Vue 3, Vite, and TypeScript.
2+
3+
Live site: [Template preview](https://bobellobo.github.io/resume-template-bootstrap/)
4+
5+
This repo was templated from my own personal portfolio website, hosted on github pages.
6+
The goal is to allow anyone to use this repo as a template to do the same, editing and deploying to github pages easily.
7+
Because most CV designer websites suck and not very customizable, plus they are not always free.
8+
9+
The website also has an export feature to export all the content from the website to a pdf resume. This way while editing the content of the website you can also update your resume and export it easily.
10+
11+
Below is a quickstart guide to get you up and running, and details on how to edit the content and theme of the website without touching any code.
12+
13+
The requisites are :
14+
- having an existing GitHub account to use this repo as a template for creating your own.
15+
- basic use of github for this ( basic commit + push will do ). Every change you make to the template content will have to be pushed to your remote branch to be deployed on github pages.
16+
17+
## 5-Minute Quickstart
18+
19+
1. Use this repository as a template on GitHub:
20+
- Click "Use this template" button on the repo page and follow the instructions to create your own repository based on this template.
21+
- Name it as you wish, for example "my-portfolio"
22+
23+
24+
2. Clone your new repository from its URL (if you don't what that means, click [here](https://docs.github.com/fr/repositories/creating-and-managing-repositories/cloning-a-repository)).
25+
26+
On your desktop or in your code editor terminal, run this command (replace `YOUR_USERNAME` and `YOUR_REPOSITORY_NAME` with your actual GitHub username and repository name):
27+
28+
```bash
29+
git clone https://github.com/YOUR_USERNAME/YOUR_REPOSITORY_NAME.git
30+
```
31+
3. In the same terminal change directory:
32+
33+
```bash
34+
cd YOUR_REPOSITORY_NAME
35+
```
36+
You can now install all the dependencies with npm (make sure you have Node.js and npm installed on your machine, if not check [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)).
37+
38+
```bash
39+
npm install
40+
```
41+
42+
4. Start local dev server:
43+
44+
```bash
45+
npm run dev
46+
```
47+
Once you run this command, you should see a local URL in the terminal (something like `http://localhost:5173/`).
48+
Open it in your browser to see the website (sometimes your code editor might open it automatically).
49+
You can now edit the content files and see the changes live in your browser.
50+
51+
This is just the local version of the website, it is not live on the internet yet. To make it live, we still need to deploy it using GitHub pages. So let's configure that next.
52+
53+
54+
5. GitHub Pages Deployment
55+
56+
This repo includes a GitHub Actions workflow file in `.github/workflows/deploy.yml`.
57+
58+
What it means is that whenever you push to the `main` (or `master`) branch, GitHub will automatically build the project and deploy the `dist` folder to GitHub Pages for you, hosting your website live.
59+
60+
To configure, simply go to your GitHub repository, then to : Settings -> Pages -> Source = GitHub Actions.
61+
62+
So when you're happy with the changes you have made locally, just push to `main` (or `master`) and wait for the workflow to publish the `dist` artifact.
63+
You will see the live url of the hosted page appear once this is done. Something like `https://YOUR_USERNAME.github.io/YOUR_REPOSITORY_NAME/`. Congratulations, your site is now live! You can now share this link with who you want.
64+
65+
66+
Default behavior:
67+
- On GitHub Pages project sites, the build uses `/{repo-name}/` as base path automatically.
68+
- For root-domain or custom-domain deployments, edit `.github/workflows/deploy.yml` and set `VITE_BASE_PATH: /` in the Build step.
69+
70+
----------------------------
71+
72+
73+
## What To Edit (No Code Needed)
74+
75+
Most users only need to edit JSON files under [content](content).
76+
You usually do not need to change files in src. You can obviously do it if you want to customize the website further, but the content files are designed to be edited without touching code.
77+
78+
| Goal | File to edit |
79+
| --- | --- |
80+
| Name, profile image, email, links, intro text | [content/profile/profile.json](content/profile/profile.json) |
81+
| Work experience entries | [content/experiences/experiences.json](content/experiences/experiences.json) |
82+
| Skills and categories | [content/skills/skills.json](content/skills/skills.json) |
83+
| Project cards and project details | [content/projects/projects.json](content/projects/projects.json) |
84+
| English UI text | [content/i18n/en.json](content/i18n/en.json) |
85+
| French UI text | [content/i18n/fr.json](content/i18n/fr.json) |
86+
87+
## Common mistakes
88+
89+
1. Invalid JSON (extra comma, missing quote) breaks parsing.
90+
2. Wrong image path under [content](content) causes missing images.
91+
3. Updating only one locale can make text inconsistent between EN/FR.
92+
4. Very long text can impact layout and export readability.
93+
94+
### Analytics
95+
You could also add your Google Analytics tracking ID in the index.html file to monitor traffic on your portfolio page.
96+
There are other analytics tools, like Plausible for example. But since Google Analytics is the most widely used, here is how to add it :
97+
98+
1. Create a Google Analytics account and get your tracking ID (something like `G-XXXXXXXXXX`).
99+
2. Open `index.html` and add the following code snippet in the `<head>` section, replacing `G-XXXXXXXXXX` with your actual tracking ID:
100+
101+
```html
102+
<!-- Global site tag (gtag.js) - Google Analytics -->
103+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
104+
<script>
105+
window.dataLayer = window.dataLayer || [];
106+
function gtag(){dataLayer.push(arguments)};
107+
gtag('js', new Date());
108+
109+
gtag('config', 'G-XXXXXXXXXX');
110+
</script>
111+
```
112+
113+
3. Save the file and push your changes to GitHub.
114+
115+
Your analytics should now be active and you can monitor traffic on your portfolio page on the Google Analytics dashboard. It may take some time to actually see all the data coming.
116+
But what you do to test if your analytics flow is correclty wired is to open your portfolio page (in an incognito tab and without AdBlock) and go to the Reports > Real-time section of your Google Analytics dashboard. You should see at least one active user (yourself) on the page.
117+
Then wait 24 to 48 hours so see more detailed analytics data about your website.
118+
You can track a lot of differents metrics and even set up custom events to track, or alers.
119+
For example, you could track the source of the traffic : social media like Linkedin, or "Direct" which means people who direclty clicked on the link without coming from another website (if they clicked it on your resume for example).
120+
121+
2122

3-
**Live Site:** https://bobellobo.github.io/resume/

‎content/experiences/experiences.json‎

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,42 @@
33
"id": 1,
44
"content": {
55
"en": {
6-
"period": "Jan 2024 — Jan 2026",
7-
"role": "Full-stack Engineer",
8-
"company": "STMicroelectronics - System Research & Application",
9-
"location": "Catania, Italy",
6+
"period": "June 2021 — Present",
7+
"role": "Role 1",
8+
"company": "Organization 1",
9+
"location": "City, Country",
10+
"description": "Describe your most recent experience here.",
11+
"technologies": ["Technology A", "Technology B", "Technology C"],
1012
"sections": [
1113
{
12-
"title": "API integration tools - Lead Developer",
13-
"description": "Agnostic approach for API oriented systems integration and inter-operability. Part of the STM32 Motor Control SDK. \nLed to a patent application.",
14-
"technologies": ["TypeScript", "Node.js", "REST APIs", "STM32 SDK"]
14+
"title": "Project stream 1",
15+
"description": "Add details about a key initiative, your responsibilities, and the impact produced.",
16+
"technologies": ["Technology A", "Technology B"]
1517
},
1618
{
17-
"title": "Full stack development",
18-
"description": "Design and delivery of end-to-end web applications, from requirement definition to deployment, with a strong focus on clean interfaces and performance. Strong emphasis on functional programming paradigms and development best practices.",
19-
"technologies": ["Vue.js", "TypeScript", "Functional Programming", "CI/CD"]
19+
"title": "Project stream 2",
20+
"description": "Add a second concrete contribution with outcomes, scope, and collaboration context.",
21+
"technologies": ["Technology C", "Technology D"]
2022
}
2123
]
2224
},
2325
"fr": {
24-
"period": "Janvier 2024 — Janvier 2026",
25-
"role": "Développeur Full-stack",
26-
"company": "STMicroelectronics - System Research & Application",
27-
"location": "Catane, Italie",
26+
"period": "Juin 2021 — Aujourd'hui",
27+
"role": "Role 1",
28+
"company": "Organisation 1",
29+
"location": "Ville, Pays",
30+
"description": "Décrivez ici votre expérience la plus récente.",
31+
"technologies": ["Technologie A", "Technologie B", "Technologie C"],
2832
"sections": [
2933
{
30-
"title": "Outils d'intégration d'API - Lead Developer",
31-
"description": "Approche agnostique pour l'intégration de systèmes orientés API et l'interopérabilité. Partie du SDK STM32 Motor Control. \nA conduit à une demande de brevet.",
32-
"technologies": ["TypeScript", "Node.js", "SDK STM32", "Effect-TS"]
34+
"title": "Volet projet 1",
35+
"description": "Ajoutez ici les détails d'une initiative clé, vos responsabilités et les résultats obtenus.",
36+
"technologies": ["Technologie A", "Technologie B"]
3337
},
3438
{
35-
"title": "Développement fullstack",
36-
"description": "Conception et livraison d'applications web de bout en bout, de la définition du besoin jusqu'au déploiement, avec une grande attention portée à la propreté des interfaces et la performance. Fort accent sur les paradigmes de programmation fonctionnelle et les bonnes pratiques de développement.",
37-
"technologies": ["Angular", "React", "Docker", "D3.js", "AWS", "fp-ts"]
39+
"title": "Volet projet 2",
40+
"description": "Ajoutez une seconde contribution concrète avec résultats, périmètre et contexte de collaboration.",
41+
"technologies": ["Technologie C", "Technologie D"]
3842
}
3943
]
4044
}
@@ -44,41 +48,41 @@
4448
"id": 2,
4549
"content": {
4650
"en": {
47-
"period": "Sept 2022 — Aug 2023",
48-
"role": "Full-stack Engineer",
49-
"company": "Sopra Steria - Aeroline",
50-
"location": "Bordeaux, France",
51-
"description": "Development tasks in a challenging and large, international context. Part of a team of 3 developers and one product owner. Agile environment with a lot of ownership and responsibilities given to the developers.",
52-
"technologies": ["Angular", "Java", "Spring", "Agile Scrum"]
51+
"period": "August 2017 — April 2021",
52+
"role": "Role 2",
53+
"company": "Organization 2",
54+
"location": "Location",
55+
"description": "Describe your experience here.",
56+
"technologies": ["Technology E", "Technology F", "Technology G"]
5357
},
5458
"fr": {
55-
"period": "Septembre 2022 — Août 2023",
56-
"role": "Développeur Full-stack",
57-
"company": "Sopra Steria - Aeroline",
58-
"location": "Bordeaux, France",
59-
"description": "Tâches de développement dans un projet d'envergure du secteur de l'aéronautique en contexte agile. Dans la continuité du travail déjà fourni avec toujours un ownership important et des responsabilités accrues.",
60-
"technologies": ["Angular", "Java", "Spring", "Agile Scrum"]
59+
"period": "Août 2017 — Avril 2021",
60+
"role": "Role 2",
61+
"company": "Organisation 2",
62+
"location": "Lieu",
63+
"description": "Décrivez votre expérience ici.",
64+
"technologies": ["Technologie E", "Technologie F", "Technologie G"]
6165
}
6266
}
6367
},
6468
{
6569
"id": 3,
6670
"content": {
6771
"en": {
68-
"period": "May 2022 - Aug 2022",
69-
"role": "Full-stack Developer Intern",
70-
"company": "Sopra Steria - Aeroline",
71-
"location": "Bordeaux, France",
72-
"description": "Took part in development tasks as a member of a team of 4, contributing to a project for a major actor in the aeronautical industry. Developed a new module for the core application from start to finish, including design, development, testing and deployment. Gained experience in working in a large codebase and following best practices for maintainable code.",
73-
"technologies": ["Angular", "Java", "SQL", "JUnit"]
72+
"period": "May 2015 — April 2017",
73+
"role": "Role 3",
74+
"company": "Organization 3",
75+
"location": "City, Country",
76+
"description": "Describe your experience here.",
77+
"technologies": ["Technology H", "Technology I", "Technology J"]
7478
},
7579
"fr": {
76-
"period": "Mai 2022 - Août 2022",
77-
"role": "Stagiaire Développeur Full-stack",
78-
"company": "Sopra Steria - Aeroline",
79-
"location": "Bordeaux, France",
80-
"description": "Développement fullstack en tant que membre d'une équipe de 4 personnes, contribuant à un projet pour un acteur majeur de l'industrie aéronautique. Développement de A à Z d'un nouveau module pour l'application, y compris la conception, les tests et le déploiement. Codebase très large, respect des bonnes pratiques et revues de code.",
81-
"technologies": ["Angular", "Java", "SQL", "JUnit"]
80+
"period": "Mai 2015 — Avril 2017",
81+
"role": "Role 3",
82+
"company": "Organisation 3",
83+
"location": "Ville, Pays",
84+
"description": "Décrivez votre expérience ici.",
85+
"technologies": ["Technologie H", "Technologie I", "Technologie J"]
8286
}
8387
}
8488
}

‎content/i18n/en.json‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
"contact": "Contact"
1414
},
1515
"profile": {
16-
"universityLabel": "Ecole Nationale Supérieure de Cognitique",
1716
"skillsTitle": "Skills Overview"
1817
},
1918
"projects": {
@@ -30,7 +29,7 @@
3029
"description": "Feel free to reach out for collaborations or just to say hi!"
3130
},
3231
"footer": {
33-
"copyright": "© 2026 Titouan Guedon. All rights reserved.",
32+
"copyright": "© {year} {name}. All rights reserved.",
3433
"links": {
3534
"linkedin": "LinkedIn",
3635
"github": "GitHub",
@@ -58,8 +57,8 @@
5857
"actionsLabel": "Export actions",
5958
"backToPortfolio": "Back to portfolio",
6059
"exportPdfJpeg": "Export PDF / JPEG",
61-
"documentLabel": "Titouan Guedon export view",
62-
"role": "Full-stack Engineer - Cognitive Science Engineer",
60+
"documentLabel": "{name} export view",
61+
"role": "Professional title",
6362
"contactLinks": "Contact links",
6463
"attribution": "This resume was exported from my personal portfolio website: {link}",
6564
"previewOn": "Preview Print",
@@ -68,6 +67,6 @@
6867
"previewOffHint": "Disable print preview mode",
6968
"switchToFrench": "Switch language to French",
7069
"switchToEnglish": "Switch language to English",
71-
"photoAlt": "Portrait of Titouan Guedon"
70+
"photoAlt": "Portrait of {name}"
7271
}
7372
}

‎content/i18n/fr.json‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
"contact": "Contact"
1414
},
1515
"profile": {
16-
"universityLabel": "Ecole Nationale Supérieure de Cognitique",
1716
"skillsTitle": "Aperçu des compétences"
1817
},
1918
"projects": {
@@ -30,7 +29,7 @@
3029
"description": "N'hésitez pas à me contacter, je suis toujours ouvert à de nouveaux projets ou opportunités de collaboration"
3130
},
3231
"footer": {
33-
"copyright": "© 2026 Titouan Guedon. Tous droits réservés.",
32+
"copyright": "© {year} {name}. Tous droits réservés.",
3433
"links": {
3534
"linkedin": "LinkedIn",
3635
"github": "GitHub",
@@ -58,8 +57,8 @@
5857
"actionsLabel": "Actions d'export",
5958
"backToPortfolio": "Retour au portfolio",
6059
"exportPdfJpeg": "Exporter PDF / JPEG",
61-
"documentLabel": "Vue d'export de Titouan Guedon",
62-
"role": "Développeur Full-stack - Ingénieur cogniticien",
60+
"documentLabel": "Vue d'export de {name}",
61+
"role": "Titre professionnel",
6362
"contactLinks": "Liens de contact",
6463
"attribution": "Ce CV a été exporté depuis mon site portfolio : {link}",
6564
"previewOn": "Apercu Impression",
@@ -68,6 +67,6 @@
6867
"previewOffHint": "Desactiver le mode apercu impression",
6968
"switchToFrench": "Passer la langue en français",
7069
"switchToEnglish": "Passer la langue en anglais",
71-
"photoAlt": "Portrait de Titouan Guedon"
70+
"photoAlt": "Portrait de {name}"
7271
}
7372
}

‎content/profile/images/profile-placeholder.svg‎

Lines changed: 34 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)