theppitak.me

theppitak.me , my portfolio site with markdown blogs built with React, NPM, and Next.js. Design with cleanliness and simplicity in mind.

Table of Contents

• theppitak.me
  • Table of Contents
  • Features
  • Demo
  • Getting Started
    • Prerequisites
    • Installation
    • Running the Project
    • Now Playing Bar
    • Blogs
  • Technologies Used
  • Contributing
  • License

Features

• Responsive design
• Dark mode support
• Projects showcase
• Markdown Blog Post with SSR for better SEO / OpenGraph sharing with preview

Demo

Check out the live demo here.

Getting Started

Follow these instructions to set up and run the project on your local machine.

Prerequisites

Ensure you have the following tools installed:

• Node.js

Installation

1. Clone or create your own respository from template:

   git clone https://github.com/mmmmmob/www.git
   cd www
   

2. Install dependencies using NPM:

   npm install
   

Running the Project

Start the development server:

npm run dev

Open your browser and visit http://localhost:3000 or the address as shown in your terminal to see your portfolio.

Now Playing Bar

The Now Playing Bar at the bottom pf the page uses Spotify's Now Playing API to retrieve information about your current listening song and render the data live on your site

Refer to the .env.example file to learn how to obtain your credential tokens from the Spotify Developer website. Use these tokens in production by creating a .env.local file in your folder. Remember to set the actual environment variables on your deployment platform.

You can opt-out of this feature by removing the <NowPlaying/> component from page.tsx in /src/app.

(special thanks for initial code reference before adjustments from @theodorusclarence blog post)

Blogs

The blog system supports rendering Markdown files with front matter metadata. This allows clean formatting, SEO optimization, and easy content management.

To create a new blog post:

1. Create a Markdown file
   Save your post in the src/posts/ directory with a .md extension, e.g. my-first-post.md.

2. Add front matter to the top of the file
   Use the following structure to define metadata for the post:

   ---
   title: "My First Blog Post"
   date: "2025-05-25"
   slug: "test-post"
   excerpt: "A brief description of what this post is about."
   image: "/path/to/image.jpg" //optional
   draft: false //optional
   ---
   

3. Write your content Below the front matter, write your blog content in standard Markdown.

4. Preview your post Run the development server with:

   npm run dev
   

Then navigate to the Blogs section to see your post. Posts marked with draft: true will not be shown in production.

Technologies Used

• UI Library: React, Tailwind CSS, daisyUI and react-icons
• Main Framework + Bundler: Next.js
• JavaScript Runtime + Package Manager: Node.js

Contributing

Contributions are welcome! Please fork this repository and submit a pull request for any feature requests, bug fixes, or improvements.

1. Fork the repository
2. Create your feature branch: git checkout -b feature/YourFeature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin feature/YourFeature
5. Open a pull request

License

This project is licensed under the Creative Commons license. See the LICENSE file for details.