A deployment ready web app to showcase your coding portfolio.
Codefolio is a Jamstack portfolio web application for programmers. It is built using Nuxt.js and leverages @nuxt/content module to use user data placed in
/content directory and generate production ready static assets.
The entire code is written keeping modules and reusability in mind.
The primary feature of this app is it supporting static deployment. Coding portfolios doesn’t require that many changes so a static site is a better choice than a normal SPA or a Full-Stack app.
Codefolio’s user interface is designed while keeping user friendliness in mind. It is completely responsive and uses mobile-first approach.
The assets/aprite/svg directory contains individual svg icon files. You can use these icons (or place your own svg icons in this directory) to reference icon name in
<icon> vue component.
Codefolio supports custom user data. Apart from the personal details, users can also customize other cool thins such as external links and the resume button URL in the top navbar.
Static site generators take raw user data (usually in markdown or JSON format) to generate production ready HTML, so you’ll be needing this guide as a reference while adding your content to Codefolio.
Here’s how the structure of content folder looks like.
content | navbar.json | about.md | social-icons.json | user.json | └───projects project1.json project2.json project3.json /* so on... */
Let’s see what each file or folder is for.
This file is used for optional data related to top navbar.
||Resume file URL for navbar resume button.|
||An array containing objects to generate external links in the top navbar. Each external link object needs to have
This markdown file is used for about page.
This file is used to generate social icons in about page.
||An array containing objects to generate social icons in the contact page. Each object needs to have
This file is used for user details required for the home page.
||A little bit about the user.|
||User image URL, preferably a
||User position or role.|
This file is used to generate contact page.
||Custom form action for the contact form. Check formspree.io.|
||User location string.|
||User email address.|
||User phone number.|
This folder contains all the projects as individual files in json format. Each file in this folder will represent a different project.
Following table contains the format of each file in the projects folder.
||A unique identifier for the ordering.|
||Details about the project.|
||Project image URL.|
||An object that contains external links of the project. It can has optional
||An array containing all the technologies (strings) used in the project.|
Note: Create new files to add more projects and name them as project name.
See existing dummy files in the content folder for reference.
Nuxt.js provides efficient ways to optimize your site for search engines. Please refer to Nuxt.js SEO guide for more details.
After customizing the content according to your needs, you need to deploy the app to production.
Let’s see how to generate build files.
Start by cloning the repository on your local machine using git (or download it manually):
git clone https://github.com/0xaliraza/codefolio
Install the dependencies
Generate build files
npm run generate
At this point you’ll have a
./build folder containing all the production ready files for deployment. You can deploy these files to some hosting server or CDN.
If you want to see the app locally run
npm run dev
You need prior github/coding experience to deploy this using github actions or some other CI/CD platform.
This is a template repository so you can just click the “Use this template” button at the top right to clone this repository. Customize content files according to your needs and head to actions tab to add required workflows. You can reuse existing ci.yml and cd.yml files.
See github actions to learn more.
Feel free to create a pull-request or an issue if you need anything changed or fixed. Or you can just directly contact me using below links.
Find Me Online
Feel free to contact me for any kind of help or information. Let’s get connected! 🙂
See the LICENSE file for license rights and limitations (MIT).