## Introduction

This website was meticulously crafted from the ground up using Next.js, along with various complementary technologies. Its inception dates back to June 2023.

Ongoing enhancements, encompassing both functionality and content, are in the pipeline. This website stands as a treasured repository of my acquired knowledge, also serving as a platform for me to disseminate insights.

Feel welcome to utilize this website as a point of reference, a wellspring of inspiration, or as a template, all in accordance with the provided license. The source code is at your disposal to suit your specific requirements.

Should you find value in this resource, your consideration of leaving a rating is greatly appreciated. 😎👍🏻

If you have any questions, suggestions, input or anything else, don't hesitate to contact me🧑‍💻
 

## Features

On this website there are several features that will continue to be updated and added in the future.

### 🤖 ChatGPT AI

You can access this feature by opening the command palette [cmd+k], then typing whatever you want to search/ask for.

Note:

If you're using Chat Completions engine model of ChatGPT, please concern about this:

Due this site is using free cloud hosting services (Vercel) with certain limitations (Serverless Function Execution Timeout), sometimes an error will occur if the response from the open AI API is too long, but you can change it in the vercel.json file to upgrade memory and maxDuration to be bigger according to the capabilities of your vercel plan.

### 💻 JavaScript Playground

A no-fuss pure JavaScript playground with a live feedback loop.

### 💬 Real-time Chat

Real-Time Chat is powered by Firebase. Anyone can leave me a message in this website.

### 🎧 Spotify

Displays song information being played on spotify in real time using the Spotify API and SWR.

### 🕗 Wakatime

Data is retrieved using the Wakatime API and then displayed on the dashboard, built with Next.js API routes deployed as serverless functions.

### 📝 Blogs

The CMS Blog on this website utilizes the API from the dev.to platform. The displayed articles are one-to-one with the articles published on my dev.to blog and are updated in real-time.

The data fetching technique used to retrieve articles from dev.to involves using Client-Side Rendering (CSR) for the blog list and Server-Side Rendering (SSR) for the blog details.

### 🗳 Projects

The data projects on this blog are taken from the MySQL database connected through the Prisma Client. The database for this application is hosted on PlanetScale DB.

The data fetching method used to retrieve data projects is Incremental Static Regeneration (ISR) with 1 second revalidation and Server-Side Rendering (SSR) for the project details..
 

## Performance

### PageSpeed Insights

Report URL: https://pagespeed.web.dev/analysis/https-aulianza-id/pk0y6xcz25?form_factor=desktop

![image](https://github.com/aulianza/aulianza.id/assets/15605885/d87a6083-caf3-4b84-ba59-975c07193a9f)

### GTmetrix

Report URL: [https://pagespeed.web.dev/analysis/https-aulianza-id/pk0y6xcz25?form_factor=desktop](https://gtmetrix.com/reports/aulianza.id/REEiduoo/)

![image](https://github.com/aulianza/aulianza.id/assets/15605885/953dc131-bf52-4ef6-913c-f6eb8fb6c6a7)
 

## Getting Started

If you are interested in running this project on your local machine, you can do so in just 3 easy steps below. Additionally, remember to update the ".env.example" file to ".env" and replace the variables with your own in the ".env" file.

### 1. Clone this template using one of the three ways:

1. Clone using git

 ```bash
 git clone https://github.com/aulianza/aulianza.id
 ```

2. Using `create-next-app`

 ```bash
 npx create-next-app -e https://github.com/aulianza/aulianza.id project-name
 ```

3. Using `degit`

 ```bash
 npx degit aulianza/aulianza.id YOUR_APP_NAME
 ```

4. Deploy to Vercel or Netlify, etc

 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/aulianza/aulianza.id)
 [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/aulianza/aulianza.id)

### 2. Install dependencies

It is encouraged to use **yarn** so the husky hooks can work properly.

```bash
yarn install
```

### 3. Run the development server

You can start the server using this command:

```bash
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `src/pages/index.tsx`.
 

## License

Licensed under the [GPL-3.0 license](https://github.com/aulianza/aulianza.id/blob/master/LICENSE).

Personal website was built originally from scratch using several powerful stacks.

aulianza.id

## Introduction

This website was built from scratch using Next.js 13 App Router and was first initialized in August 2023. It will undergo regular updates in the future.

## Performance

### PageSpeed Insights : Desktop

Report URL: https://pagespeed.web.dev/analysis/https-aulianza-com/9626wfhfal?form_factor=desktop

![image](https://github.com/aulianza/aulianza.com/assets/15605885/1d67a286-eb47-41f7-9f62-d47875b4ff1b)

### PageSpeed Insights : Mobile

Report URL: https://pagespeed.web.dev/analysis/https-aulianza-com/9626wfhfal?form_factor=mobile

![image](https://github.com/aulianza/aulianza.com/assets/15605885/aebcd382-82c2-402e-a681-80358ef6fb6f)

## Getting Started

If you are interested in running this project on your local machine, you can do so in just 3 easy steps below. Additionally, remember to update the ".env.example" file to ".env" and replace the variables with your own in the ".env" file.

### 1. Clone this template using one of the three ways:

1. Clone using git

   ```bash
   git clone https://github.com/aulianza/aulianza.com
   ```

2. Using `create-next-app`

   ```bash
   npx create-next-app -e https://github.com/aulianza/aulianza.com project-name
   ```

3. Using `degit`

   ```bash
   npx degit aulianza/aulianza.com YOUR_APP_NAME
   ```

4. Deploy to Vercel or Netlify, etc

   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/aulianza/aulianza.com)
   [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/aulianza/aulianza.com)

### 2. Install dependencies

It is encouraged to use **pnpm** so the husky hooks can work properly.

```bash
pnpm install
```

### 3. Run the development server

You can start the server using this command:

```bash
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `src/pages/index.tsx`.

## License

Licensed under the [GPL-3.0 license](https://github.com/aulianza/aulianza.com/blob/master/LICENSE).


Personal landing page built with Next.js 13 App Router, TypeScript and Tailwind CSS.

aulianza.com

Simple Pomodoro and Todo List App built with Next.js, TS, Tailwind CSS and Zustand.

Pomoro

## Introduction

Introducing a simple Vite with React + Typescript and Tailwind CSS starter template. This custom-made template has been carefully designed to simplify complex configurations and time-consuming setups, allowing developers (me; especially) to focus on my work effortlessly.

If you find this amazing creation valuable, you're invited to use it for your own projects. I warmly welcome any helpful feedback or suggestions you may have. You can easily make your own version by copying or downloading this code repository and contribute your own fantastic ideas by submitting a Pull Request.

## Features

This repository is packed with:

- ⚡️ Vite 4.3
- ⚛️ React 18
- 🔰 TypeScript
- 💠 Tailwind CSS 3
- 🛢 Jest — Configured for unit testing
- 🧿 Absolute Import and Path Alias — Import components using `@/` prefix
- 📏 ESLint — Find and fix problems in the code, also will **auto sort** the imports
- ✨ Prettier — Format your code consistently
- 🐶 Husky & Lint Staged — Run scripts on your staged files before committed
- 📌 Conventional Commit Lint — Make sure to follow conventional commit
- ♻️ Snippets — A collection of most useful snippets
- 🌚 Dark Mode & Light Mode - Switch theme just one click


## Getting Started

### 1. Clone this template using one of the three ways:

1. Use this repository as template
2. Using `degit`

   ```bash
   npx degit aulianza/vite-react-starter YOUR_APP_NAME
   ```

3. Deploy to Vercel or etc

   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/aulianza/vite-react-starter)

### 2. Install dependencies

It is encouraged to use **pnpm** so the husky hooks can work properly.

```bash
pnpm install
```

### 3. Run the development server

You can start the server using this command:

```bash
pnpm dev
```

Open [http://localhost:5173](http://localhost:5173) with your browser to see the result. You can start editing the page by modifying `src/App.tsx`.

### 4. Change defaults

There are some things you need to change including title, urls, favicons, etc. Don't forget to change the package name in package.json

### 5. Commit Message Convention

This starter is using [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/), it is mandatory to use it to commit changes.


## License

Licensed under the [MIT license](https://github.com/aulianza/vite-react-starter/blob/master/LICENSE).

Vite + React + TypeScript + Tailwind CSS starter template.

vite-react-starter

## Introduction

Introducing a simple Next.js with Typescript and Tailwind CSS starter template. This custom-made template has been carefully designed to simplify complex configurations and time-consuming setups, allowing developers (me; especially) to focus on my work effortlessly.

If you find this amazing creation valuable, you're invited to use it for your own projects. I warmly welcome any helpful feedback or suggestions you may have. You can easily make your own version by copying or downloading this code repository and contribute your own fantastic ideas by submitting a Pull Request.

## Features

This repository is packed with:

- 🎉 Next.js 13.4
- ⚛️ React 18
- 🔰 TypeScript
- 💠 Tailwind CSS 3
- 🛢 Jest — Configured for unit testing
- 🧿 Absolute Import and Path Alias — Import components using `@/` prefix
- 📏 ESLint — Find and fix problems in the code, also will **auto sort** the imports
- ✨ Prettier — Format your code consistently
- 🐶 Husky & Lint Staged — Run scripts on your staged files before committed
- 📌 Conventional Commit Lint — Make sure to follow conventional commit
- ♻️ Snippets — A collection of most useful snippets
- 🌚 Dark Mode & Light Mode - Switch theme just one click


## Getting Started

### 1. Clone this template using one of the three ways:

1. Use this repository as template
2. Using `create-next-app`

   ```bash
   npx create-next-app -e https://github.com/aulianza/next-tailwind-starter project-name
   ```

3. Using `degit`

   ```bash
   npx degit aulianza/next-tailwind-starter YOUR_APP_NAME
   ```

4. Deploy to Vercel or etc

   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/aulianza/next-tailwind-starter)

### 2. Install dependencies

It is encouraged to use **yarn** so the husky hooks can work properly.

```bash
yarn install
```

### 3. Run the development server

You can start the server using this command:

```bash
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `src/pages/index.tsx`.

### 4. Change defaults

There are some things you need to change including title, urls, favicons, etc. Don't forget to change the package name in package.json

### 5. Commit Message Convention

This starter is using [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/), it is mandatory to use it to commit changes.


## License

Licensed under the [MIT license](https://github.com/aulianza/next-tailwind-starter/blob/master/LICENSE).

Next.js + TS + Tailwind CSS starter template packed with useful development features.

next-tailwind-starter

Personal portfolio, integrated with Google Spreadsheet. Design inspired by...

Astri Yulianti Portfolio Site

Log platform developed for PT. PLN (Persero) UP2B Central Java & DIY.

PLN Log Dispatcher

A platform where you can find job opportunities at Mitech company.

Mitech Career Platfrom

Official website of Mitech, a company operating in the technology industry. 

Mitech Landing Page

My personal blog, a directory of wonderful things.

Aulianza Blog

Linktree Clone built with React and Emotion Styled.

Linktree Clone

A pokemon list app allows view and catch the Pokemon.

Ryan Aulia

Projects

Loading...