I have built an engaging personal portfolio and blog website using the newest version of Next.js (version 13). Taking inspiration from the movie "La La Land," my website displays my journey in web development and showcases my projects. By using meaningful color codes from the film, I've created a visually attractive and appealing website. I've utilized server components and kept up with the latest trends in Next.js, allowing me to become skilled in server-side rendering (SSR) and client-side rendering (CSR).
Built an application using Next.js and React, leveraging the latest version, Next.js 13. Implemented CSS styling using twin.macro, which enabled the use of both Tailwind CSS and styled-components.
First, run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses [next/font](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details
This page showcases my interests and the tech stacks I am proficient in. Discover what fascinates me and explore the range of technologies I can handle.
This page shows articles that I studied and wrote about tech stacks or thoughts in front-end development. I delve into my studies and provide insights into the world of software development.
This page features the front-end projects I have undertaken during my studies. Explore a collection of my completed projects, each demonstrating my proficiency in front-end development
This page allows you to get in touch with me by sending an email. Feel free to reach out with any inquiries, collaborations, or questions.
Implemented a design inspired by the movie "La La Land" to showcase my personal interests. Incorporated the distinct color palette from the movie, which infuses each scene with its own personality. Applied these colors to enhance the visual appeal of my blog project.
At first, I organized my code using Atomic Design. However, using Atomic Design for the sake of convenience made it difficult to distinguish between molecules and organisms.
Atomic Design aims to increase reusability by breaking down components into smaller parts. However, in my blog project, there weren't many components that could be reused. For example, buttons were only used a couple of times, and attempting to apply Atomic Design without considering reusability took more time to separate the components.
Although I failed to implement Atomic Design in this project, it seems to be a good approach in theory, especially for applications that heavily prioritize reusability. It might be worth trying out.
Feeling a bit uncomfortable with implementing code solely using Tailwind CSS, I used a CSS library called Twin.macro, which allows combining Tailwind with Styled Components. Using Twin.macro made it more convenient and easier to style components. After setting the overall structure with Tailwind, I implemented the detailed elements using Styled Components.
When using Next.js 13 router, I considered using Server Components for the first time. Through bundle analysis, I discovered that Markdown libraries require a significant bundle size.
To reduce bundle size and achieve faster JavaScript loading speed, I implemented the usage of Markdown libraries as server components.
Applied Dark mode functionality to the application, enhancing the overall user experience
Ensured code quality and adherence to coding conventions by implementing ESLint, Prettier, and Husky. Utilized the issue tracking system to enable gradual progress and consistent development of the project.