LC Development

Portfolio made using NuxtJS, TailwindCSS and Sanity CMS.
Visit Website · Report Bug · Fork Project

📝 About The Project

I made this project during Hack Club Arcade to learn more about how to use a content management system, such as Sanity CMS together with tools I'm already familiar with, which in this case is NuxtJS and TailwindCSS. I also wanted to create a portfolio of my own for my development group, LC Development. So win win on my end!

This is going to be updated and continued to be worked on since it will remain as our main portfolio for the group. If you have any suggestions or improvements, feel free to open an issue or fork the project and create a pull request. Thanks!

Some stuff in here will be quite quirky, so don't be surprised if you see some weird stuff in the code. I'm still learning and I'm trying to improve as much as I can. This is only like my third project or something using Vue/Nuxt. Thanks for understanding!

(back to top)

🛠️ Made using

This section contains some of the most notable tools/libraries used in this project.

• 
• 
• 
• 

(back to top)

🏗️ Getting Started

How to run this project locally.

Prerequisites

• Create an project on Sanity and get the project ID and dataset name. You can find theese on the project dashboard. The Dataset will be under Dataset in the navigation bar.

• Proceed to creating your read API token which will be used by the website to get data. You can do this by going to API in the navigation bar and then Add API Token under the Tokens section. Give it a name and select Viewer under permissions. Save the token for the next step.

• IMPORTANT! Do not forget to add http://localhost:3000 to CORS Origins on the same API page. This is necessary for the website to fetch data from the Sanity API correctly. (Only localhost:3000 is necessary for development)

Installation

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.

1. First of all, run the following command in both the app and studio folder to install the necessary dependencies.

   npm install

2. Fill out the fields studio/.env with your own project ID, dataset name and studio URL. (http://localhost:3333)

    SANITY_STUDIO_PROJECT_ID="XXXXXXX"
    SANITY_STUDIO_DATASET="production"
    SANITY_STUDIO_PREVIEW_URL="http://localhost:3333"

3. Copy app/.env.example to app/.env and fill out the fields with your own project ID, dataset name and read API token.

    # Optional - The URL of your Sanity Studio
    NUXT_SANITY_STUDIO_URL="http://localhost:3333"
   
    # Required - The ID of your Sanity project
    NUXT_SANITY_PROJECT_ID="XXXXXXXX"
    # Required - The dataset of your Sanity project
    NUXT_SANITY_DATASET="production"
    # Required - The generated read token, used to fetch data on the server.
    NUXT_SANITY_API_READ_TOKEN="XXXXXXXX"

4. Run the following command in the studio folder to deploy the Sanity Studio.

   npm run deploy

   It will give you a URL to access the studio where you can input dummy information to show on the website.
5. Run the following command in the app folder to start the NuxtJS dev server.

   npm run dev

   Congrats! You now have the project running locally. You can access the website on http://localhost:3000 and the studio on the link you got from the console when doing step 4.

(back to top)

🗺️ Roadmap

• 🚢 Release project
• 🌿 Create Development branch
• 📱 Full mobile support (responsiveness)
• 🪵 Add Changelog
• 🧹 Clean up the code
• 🌙 Dark Mode/Light mode
• 📖 Improve the project post page
• ✒️ Multi-language Support
  • 🇸🇪 Swedish
  • 🇺🇸 English

(back to top)

⛑️ Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make the portfolio better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks!

1. Fork the Project
2. Change the project and add your files or changes (git add *)
3. Commit your Changes (git commit -m 'Feat | Added XXXX to the XXX')
4. Push to the Branch (git push)
5. Open a Pull Request

🏆 Top contributors:

(back to top)

💌 Contact

Lazyllama - @Lazyllamaa - [email protected]

Project Link: https://github.com/lcholdings/lcdevelopment-portfolio

(back to top)

🌟 Acknowledgments

Thanks to the following people for their help and inspiration:

• Readme Template
• Grid/Dot Background Pattern
• Sanity - Nuxt Template

(back to top)