Welcome to the journey of building your personal website! In this article, we’ll guide you through the process of creating your own site using an array of modern technologies, including Next.js, TypeScript, Tailwind CSS, and more. By the end of it, you’ll have a sleek platform to showcase your projects, share your insights, and interact with visitors. Let’s dive in!

Introduction

This website is a creation crafted meticulously from the ground up, initiated in June 2023. It serves as a personal space for sharing insights and improvements that I’m constantly working on. You can use this site as a template or reference, enriching your own digital footprint.

Tech Stack

Here’s the mix of technologies that power the website:

• Next.js 13.5.6
• React 18
• TypeScript
• Tailwind CSS 3
• Firebase
• Prisma Client
• SWR
• And much more!

Features

This website boasts several exciting features, each designed to enhance user experience:

• ChatGPT AI (Unavailable): A future feature where you can interact by typing commands in the palette.
• JavaScript Playground: An interactive JavaScript environment with real-time feedback.
• Realtime Guestbook: Powered by Firebase, it allows visitors to leave you messages.
• Spotify Status: Shows the song you’re playing in real-time using Spotify’s API.
• Projects: Data from a PostgreSQL database retrieved via Prisma Client, displaying your projects effectively.

Performance Optimization

Performance is important for a seamless user experience. The site has been analyzed for speed and efficiency:

• PageSpeed Insights
• GTmetrix Report

Getting Started

Ready to run this project locally? Follow these three steps:

1. Clone the Template:

You can clone using any of the following methods:

• git clone https://github.com/aulianza/aulianza.id
• npx create-next-app -e https://github.com/aulianza/aulianza.id project-name
• npx degit aulianza/aulianza.id YOUR_APP_NAME
• Deploy to Vercel
• Deploy to Netlify

2. Install Dependencies:

Usage of yarn is highly encouraged:

yarn install

3. Configure the Environment Variables:

Make sure to copy .env.example to .env and fill in the necessary values:

BUNDLE_ANALYZER=false
SITE_URL=https://aulianza.id
# Add other API keys and configuration here

4. Run the Development Server:

Use the following command to start the server:

yarn dev

Then visit http://localhost:3000 in your browser to see your new site!

Troubleshooting

If you encounter issues during the setup, here are some suggestions:

• Make sure your Node.js version is compatible with Next.js.
• Double-check your environment variable values for typos.
• Look through your terminal output for error messages and address them accordingly.
• Search for similar issues on forums like Stack Overflow for insights.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

Building your website with Next.js is not just empowering; it also serves as a platform for creativity and expression. By using the tools and technologies mentioned here, you’re setting the stage for a streamlined and efficient web experience.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.