Back to Projects Menu

znovandap.com

This website contains detailed information about me as a front-end web developer.

December 31, 2023 - 8 months ago

🐻
Website
|
Image cover blog znovandap.com

Backstory Why Me Made This Project?

Project znovandap.com is a personal website, znovandap.com contains my biographical about me Zidane Novanda Putra as auhtor/creator for this project and journey how to become a front-end web developer. This project is upgrade version from project znovandap-portfolio v1
Different from previous version, znovandap.com was build with one of modern technology front-end web development the technology is one of React framework that framework is NEXTJS combined with TypeScript. znovandap.com is my first time project which build on NEXTJS + TS. There are some additional package dependencies for supporting this project. These include MDX building blog and projects detail, Zustand for state management, SWR for fetching data, TailwindCSS for styling, and FramerMotion for animation. znovandap.com build with SPA (Single Page Appliacation) architecture.

Goals Build This Project

Main goals for building this project, including the following:
  • To exercise and implement NEXTJS + TypeScript after i learn this technology.
  • Learning about how to build website with blog using MDX
  • Learning about how to using Zustand for state management
  • known whats different between Zustand and Redux
  • Learning about how to fetching data with SWR
  • Learning about how to implementation animation with FramerMotion
I was learning a lot about front-end web development while build this project, after i finish this project, i think my programming skills are improved over time.

Feature on znovandap.com Project

The znovandap.com Project has several features, including the following:
  • Has implemented web responsive for multiple device
  • Has feature dark mode
  • Home Page
  • About Me Page
  • Projects Page
  • Blog Page
  • Contact Page
  • Entertaiment Page

How to Start this project

1. Clone repository using git

git clone https://github.com/ZnovandaP/znovandap.com.git

2. Install all dependencies

pnpm install

3. Run development server

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

Responsive Web Design on Multiple Devices

Ilustration responsive design znovandap.com Project

Last but not least

if you interested on this project, you can visit this project directly znovandap.com Project, also you can visit on Github Repository znovandap.com Project, last if you wanna give me suggesstion or advice you can go to contact page directly. Thankyou so much.

Tech Stack: