0xAliRaza.github.io

<h1 align="center">Codefolio as 0xAliRaza.github.io</h1> <p align="center"> <a href="https://github.com/0xAliRaza/codefolio/blob/main/LICENSE"><img src="https://img.shields.io/github/license/0xaliraza/codefolio?sanitize=true" alt="License"></a> <a href="https://github.com/0xAliRaza/0xAliRaza.github.io/actions/workflows/ci.yml"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/0xaliraza/0xAliRaza.github.io/CI" alt="Build Status"></a> <a href="https://github.com/0xAliRaza/0xAliRaza.github.io/actions/workflows/cd.yml"><img src="https://github.com/0xAliRaza/0xAliRaza.github.io/actions/workflows/cd.yml/badge.svg" alt="Build Status"></a> </p> <p align="center"> <a href="https://0xali.com/codefolio">Live Demo</a> | <a href="#deployment">Deployment</a> | <a href="#about">About</a> | <a href="#features">Features</a> | <a href="#contribution">Contribution</a> </p> <p align="center">A deployment ready web app to showcase your coding portfolio.</p>

About

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.

Features

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.

User Interface

Codefolio's user interface is designed while keeping user friendliness in mind. It is completely responsive and uses mobile-first approach.

The design is based on the 7-1 Sass pattern and leverages partially loaded Bootstrap 5 for layout and utilities.

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.

Content

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.

Content Guide

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.

navbar.json

This file is used for optional data related to top navbar.

| Property | Type | Description | | ----------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | resumeUrl | string | Resume file URL for navbar resume button. | | externalLinks | array | An array containing objects to generate external links in the top navbar. Each external link object needs to have text and url string properties to function properly. |

about.md

This markdown file is used for about page.

social-icons.json

This file is used to generate social icons in about page.

| Property | Type | Description | | --------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | icons | array | An array containing objects to generate social icons in the contact page. Each object needs to have name and url properties(strings). The name property should have a matching svg file in /assets/sprite/svg/ directory. Most of the social icons are already available but feel free to add your custom svg icons. In dev mode, you can visit /_icons route to list all the available icons. |

user.json

This file is used for user details required for the home page.

| Property | Type | Description | | ------------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fullname | string | User name. | | about | string | A little bit about the user. | | image | string | A valid image URL starting from http or a name (including extension) of an image which is placed in assets/images directory. Please crop the image to 500x500 for better results. | | title | string | User position or role. |

contact.json

This file is used to generate contact page.

| Property | Type | Description | | -------------- | -------- | ------------------------------------------------------------------------------------ | | formAction | string | Custom form action for the contact form. Check formspree.io. | | location | string | User location string. | | email | string | User email address. | | phone | string | User phone number. |

projects

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.

| Property | Type | Description | | ---------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | id | integer | A unique identifier for the ordering. | | title | string | Project name. | | description | string | Details about the project. | | image | string | A valid image URL starting from http or a name (including extension) of an image which is placed in assets/images directory. | | links | object | An object that contains external links of the project. It can has optional liveDemo, videoDemo and sourceCode properties for URLs. | | technologies | array | 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.

SEO

Meta Tags

Nuxt.js provides efficient ways to optimize your site for search engines. Please refer to Nuxt.js SEO guide for more details.

Sitemaps

This project uses @nuxtjs/sitemap to auto generate sitemap.xml file. Please refer to their configuration guide if you need further information.

Deployment

After customizing the content according to your needs, you need to deploy the app to production.

Manual deployment

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

Then, navigate to the root directory of the repository and install the dependencies

npm install

Generate build files

npm run generate

At this point you'll have a ./build