Personal Website

This is personal website hosted here built with Next.js, Tailwind CSS and hosted with Vercel.

🛠 Installation & Set Up

1. Clone this repository

   git clone https://github.com/ugistelmokaitis/charm.git

2. Change directories

   cd charm

3. Install dependencies

   yarn install

4. Create a .env.local and following the example input some environment variables so that can run normally.

   NEXT_PUBLIC_SITE_URL=    
   NEXT_PUBLIC_PRISMIC_ENDPOINT=""    
   NEXT_PUBLIC_PRISMIC_ACCESS_TOKEN=""    
   NEXT_PUBLIC_EMAIL_PASSWORD=""      
   NEXT_PUBLIC_EMAIL_ADDRESS=""       
   TWITTER_BEARER_TOKEN=""        

🔐 Verify Prismic

1. Verify acc in terminal

   prismic login

2. See Customization Prismic section

🏗️ Building and Running for Production

1. Generate a full static production build

   yarn run dev

2. Preview the site as it will appear once deployed

   yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

3. Access Prismic Slicemachine

yarn run slicemachine

Open http://localhost:9999 with your browser to see the result.

More details What is prismic slice machine?

✍️ Customization Prismic

1. Settings - Header, Footer & Theme customization.
2. About - pages/about
3. Blog - pages/blog
4. Home - pages/index.tsx
5. Gear - pages/gear
6. Extensions - pages/extensions
7. Contact - pages/contact
8. Privacy - pages/privacy
9. Terms - pages/terms
10. Server error - pages/500.tsx
11. NotFound - pages/404.tsx

! Create blog posts on prismic - green button on right hand side "Create New"

📝 Files to customize

• public/manifest.json - specify basic metadata about your extension such as the name...

• public/* - replace all png files which contains my logo with your own logo.

• fonts - ensure you have the license for the fonts I use for this website. The font I use find here.

• components/layout.tsx - update: name, username, type: to your personal information .

• pages/_app.tsx - update meta information content section.

• public/ - store assets such as images and favicons.

• components/externalLink.tsx - change link to your own website link.

• tailwind.config.js and styles/* - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site if needed.

• pages - pages to route to. Read the Next.js documentation for more information.

• next.config.js - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.

• utils/gtag.ts - add your own google tag

  export const GA_TRACKING_ID = ".....";

📚 Tech Stack

Tool	Link
Framework	Next.js
CMS	Prismic
Deployment	Vercel
CSS Framework	Tailwindcss
Favicon	realfavicongenerator

🚀 Deploy

Vercel
The easiest way to deploy the template is to use the Vercel Platform from the creators of Next.js. Check out the Next.js deployment documentation for more details.

! Also ensure that Environment Variables are appropriately copied and saved from .env.local file to vercel before deploying.

✌️ Protecting Copyright of designer work

Note that most of website icons belongs to © Copyright 2022-2099 Bonnie Hong