ASTROLIO: A responsive one-page portfolio template

🚀 Get Started  ✦  🧞 Site Commands  ✦  🔑 License  ✦  🔗 Author

🛠️ Stack

• Astro - Web framework
• Typescript - JavaScript with typed syntax
• Ninja Keys - Drop-down menu with keyboard shortcuts made in pure Javascript

🚀 Get Started

0. Ensure you have the proper dev tools:

• For Astro to run on your system, you will also need to have Node.js installed, version v18.17.1 or v20.3.0 or later. (v19 is not supported.)

# Check if you already have a compatible version of Node.js installed
node -v

• If the command returns a version number higher than v18.17.1 or v20.3.0 (excluding any v19), you’re good to go!

• If the command returns an error message like Command 'node' not found, or a version number lower than the required, then you need to install a compatible Node.js version.

1. Use this repo as a template for an Astro project:

• Using the command line:

# Initialize the project
npm create astro@latest -- --template dakodonnell/astrolio

• Or, simply clone as a template from Github

2. Add your content:

Add your Portfolio/CV to the template

• The file for the printable Portfolio/CV must be named cv.json and located in the src folder
• The file cv.json must follow the JSON Resume schema. More information can be found at https://jsonresume.org/
• A sample JSON resume used in the demo is provided in the template repo, which can be edited for your use, or replaced by your own JSON resume
• JSON resumes can be built with the official registry editor, but this toolkit works pretty well too

(Helpful tip: Add isActive and GitHub attributes to your projects section in your JSON Resume.)

"isActive": true,
"GitHub": "https://github.com/GitHubUsername/GitHubRepo"

3. Launch the development server:

# See the result
npm run dev

• Open http://localhost:4321 in your browser to see the result 🚀

• If you wish to deploy your portfolio site to the web, continue to step 4

4. Push your portfolio to the web:

Connect your portfolio repo to a platform that deploys static web applications (Netlify or Vercel are good options)

• If you know what you are doing, you can deploy your portfolio site directly from here:

🧞 Site Commands

You can print or save your portolio to PDF by accessing site command palette, which also contains social media and website links from your JSON resume. The menu hotkeys automatically match their respective links.

Relevant links are automatically added to the site command palette, accessed with cmd+k

🔑 License

MIT - Go crazy.

🫂 Special Thanks

• Melissa Turner, for her feedback and for being a delight

• Bartosz Jarocki, for inspiring the project

• Miguel Ángel Durán, for the shoulders I stand on