Personal Portfolio (https://nedas.codes/)
Over complicated portfolio that is simple to edit and deploy using vercel
- Fully customisable/Editable config files to meet your requirements
- Spotify implementation showing the current song you are listening to
- Most importantly written in Vite using Vue 3 with Vercel serverless functions
- About
- Skills
- Projects
- Socials
- Contact Info
- Vue- The JavaScript framework for building user interfaces
- SASS - The CSS preprocessor
- Three.js - The JavaScript 3D library
- Vercel - The serverless platform for deploying Vite apps
Required command line tools:
npm - The package manager for Node.js
yarn - The package manager for Yarn
vercel - The serverless platform for deploying Vite apps\
$ git clone https://github.com/LegendNed/portfolio
$ cd portfolio
$ yarn install
$ yarn build
$ vercel
? Set up and deploy “~\Desktop\portfolio”? [Y/n] y
? Which scope do you want to deploy to? <YOUR NAME>
? Link to existing project? [y/N] n
? What’s your project’s name? portfolio
? In which directory is your code located? ./
? Want to modify these settings? [y/N] n
- Files must be modified to meet you're requirements, else youre creating clones of me o-o
- Modify the configuration files found in
src/assets/windows/
, which allows you to change each window details. - Dont forget to change the photo, of me, for details window, found in
src/images/me.png
- Lastly change details within
index.html
to match your needs. - (Optional) Change the qoutes as they they were randomly generated, found in
src/assets/quotes.json
- Modify the configuration files found in
- Changing contact tab ReCaptcha and Form URI.
- Spotify currently listening setup
- Create an application on Spotify Developer Portal
- Choose edit settings then in website field, enter your webiste URL (e.g. https://nedas.codes/) then in the Redirect URIs enter your website URL ending with
/api/callback
(e.g. https://nedas.codes/api/callback) - Using the URL provided from vercel command or vercel dashboard access the portfolio application then go to Settings - Envrioment Variables and add the following:
(If you proceed to work on this project, edit the
.env.example
file and runvercel dev
to open a development enviroment)
- Set up temporary data store for spotify data/tokens using Upstash by clikcing Add integration and choosing the project it should belong to. (Nothing needs to be done afterwards)
- Run
vercel dev
to open a development enviroment - VISIT
<YOUR DOMAIN\>/api/listening
to authenticate your spotify account for the first build!
(This only has to be done once and can never be reauthenticated unless redis database is cleared)