Hello! This website serves as a platform for creating both a CV and a personal website.
I was inspired by a tweet by Guillermo Rauch and a comment from Sebastian Rojo.
By no means I am a professional developer. I am sure that an experienced eye can see many bad design patterns, bad code etc. but I had fun while making it and wanted to create something that can be used by others and not hard to setup.
Astro.js, React.js, Typescript, Tailwind, Lucide Icons
With this project, you can use your LinkedIn data to create a personal website and a CV.
- Clone/download the repo
- Use this browser extension to download your data from LinkedIn profile.
- Rename the downloaded
.json
file todata.json
- Go to
/src/data/
and put yourdata.json
file there
Note: I highly recommend using npm
as the package manager because yarn
and pnpm
caused me some problems with Astro.js.
- Install every dependencies with
npm install
(make sure you have Node installed) - To start the development server, run
npm run dev
and go to localhost:4321 - You will see that your website is working!
runnpm run build
after complition, runnpm run preview
Go to the localhost link in the terminal- Press Windows
CTRL+P
, Mac⌘ + P
to open up the print dialog. - From there, you can save your website as .pdf and use it as your CV.
Sometimes, if your website is long in terms of height, a section gets between the end of first page and the beginning of second page. In order to fix this, you need to add page-break
class to that section's card parent tag. This will force that section to go down and not stuck. Not a perfect solution but something at least. For an example, take a look /src/components/skills/skills-card.tsx:17:107
I personally use Vercel but I also recommend Netlify.
You need an adapter for Vercel! Also, Vercel users should read Selecting you theme section down below.
If you don't know how to host a website on Vercel or Netlify, I am sure that YouTube can help you!
- You have the flexibility to alter the sequence of components in
/src/pages/index.astro
to adjust their order. - Also, you can delete or comment-out elements in
/src/pages/index.astro
that you do not want to show.
While making this projects, I made it possible to add custom themes. Default theme is created by me in /src/data/themes.ts
file and also I created two other themes as well.
- I used GitHub profile picture in the demo. Picture has to be a link and public. You should paste the URL in
/src/data/data.json
underbasics -> image
If you want to create your own theme, I have a few suggestions.
-
If you don't know Tailwind, go to
/src/data/themes.ts
and copy thedefault_theme
object, then ask ChatGPT to change the theme for you. Then copy the response and change thedefault_theme
object with the response. -
If you know what you are doing, just take a look
themes
object at/src/data/themes.ts
. (I still advice you to use ChatGPT, easier.)
- Go to
.env
file and change thedefault_theme
to your theme name.
While the downloaded resume file is good, it maybe not perfectly populated. Please take a look.
As long as the JSON layout is same, adding things won't break the website!
Should you wish to add or modify something, opening an issue would be sufficient.