This project is intended to provide a template for a digital portfolio satisfying the requirements of the UCLA MLIS program, but feel free to use it however you like!
Making use of the template will require knowledge of web development technologies (HTML, CSS, and JavaScript) and workflows (using an integrated development environment (IDE) and command-line applications). LinkedIn Learning has an introductory web development course, and it is available for free through UCLA and many library systems. Experience with frameworks including Vue.js and Bulma will be helpful, but not required to get up and running.
This guide will go through an example of how to build your own portfolio from this template using the popular IDE Visual Studio Code. The guide assumes you have Visual Studio Code installed on your computer, and that you've got the GitHub integration set up. You'll also need Node.js installed.
After cloning this project and getting it set up in Visual Studio Code, open a new terminal (shortcut ctrl + shift + `) and run
npm install
This will install all the project's dependencies. Once the installations complete, run
npm run serve
This will start a local development server on your computer. You should be able to navigate to the server port on localhost in your browser and see the active template site!
From here, you can add your own content to the various Vue templates in the src/views directory. There should be a Vue file corresponding to each of the required components of the MLIS portfolio.
With the local development server up and running, your project should be reloaded each time you save a file, reflecting changes on the local site.
The public/index.html file is the project's main HTML index file. Update the <meta> and <title> tags in that file to reflect your portfolio's metadata.
Once you've added all your content to the Vue files under src/views, run
npm run build
This will build the project for production, creating a dist directory with all the material from the src directory bundled up for deployment to the web.
After building your portfolio, you can deploy it to GitHub Pages (or anyway else you'd like).
Follow the instructions here to set up a GitHub Pages site, then push your portfolio's dist directory to the GitHub repository for your GitHub Pages site. It might take a few minutes, but your portfolio site should now be deployed on GitHub pages (normally at .github.io)!