Virtual CV Portfolio Documentation

Introduction

Welcome to the documentation for the Virtual CV Portfolio of r00tmeister. This project showcases a personal CV and portfolio, built with Nuxt.js and styled using Tailwind CSS.

Table of Contents

1. Project Overview
2. Features
3. Technology Stack
4. Setup and Installation
5. Project Structure
6. Customization
7. Deployment
8. Contributing
9. License
10. Acknowledgements

Project Overview

The Virtual CV Portfolio is a web application designed to showcase personal information, professional experience, skills, and projects in an interactive and visually appealing format.

Features

• Responsive Design: Optimized for both desktop and mobile devices.
• Utility first and modular design: Built using modular utility first Tailwind and Nuxt.
• Easy Customization: Built with modular components for easy updates.

Future Considerations

• Dynamic Content: Fetch data dynamically to keep the portfolio up-to-date. Currently using objects, will in the future incorporate NoSQL DB to pull the data from. Possible inlcude LinkedIn API and Github API in the future to dynamically pull latests profile information and projects to the portfolio.

Technology Stack

• Frontend Framework: Nuxt.js
• Styling: Tailwind CSS
• Backend: N/A (Static Site)
• Hosting: [GithubPages]
• Other Tools: [Pinia]

Setup and Installation

Prerequisites

• Node.js (see package.json for version)
• npm

Installation Steps

1. Clone the Repository:

   git clone https://github.com/r00tmeister/portfolio.git

2. Navigate to the Project Directory:

   cd portfolio

3. Install Dependencies:

   npm install

4. Run the Development Server:

   npm run dev

Project configuration

• In the nuxt.config.ts file set baseURL: "/portfolio" to your repo name, this is important as Github Pages deploys the application at this root.

Project Structure

• /assets: Static assets like images and fonts.
• /components: Vue components used throughout the application.
• /layouts: Layout components that wrap around pages.
• /pages: Vue files corresponding to the app's pages.
• /static: Static files to be served as-is.
• /store: Vuex store for state management.
• /nuxt.config.js: Nuxt configuration file.

Customization

Changing Content

To update the content, modify the pages and their respective components.

Styling

Tailwind CSS is used for styling. You can customize the design by editing the /tailwind.config.js file and the component inline styles.

Deployment

Building for Production

1. Build the Project:

   npm run build

2. Generate Static Files:

   npm run generate

3. Deploy to Hosting Service:

   git add .

   git push origin main

   There is a github actions workflow file that will automatically deploy the code being pushed to the main branch.

Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Acknowledgements

• Nuxt.js for providing a great development framework.
• Tailwind CSS for the utility-first CSS framework.