Jack Creative
Nextjs
Introduction

About Jack Creative

Jack Creative is a website design template specifically designed for creative designers and developers. It is an ideal platform for showcasing your skills, experience, portfolio, and expertise. This template has been created to meet the industry's requirements and provide a high-quality and straightforward resume format for individuals.

Getting Started

To get started with Jack Creative, follow the steps below:

Download the Site Source Codes

  1. Download the source codes of the Jack Creative website template.

Prerequisites

Before starting with Jack Creative, make sure you have the following:

  • Node.js (opens in a new tab) version 16.14 or above:
    • During the installation of Node.js, it is recommended to check all checkboxes related to dependencies.

Start Your Site

To run the development server and launch your Jack Creative website, follow these steps:

  1. Open a command prompt or terminal.

  2. Navigate to the directory where the Jack Creative source codes are located by using the cd command. For example:

    cd jack-creative-nextjs

    This command changes the directory to the jack-creative-nextjs folder, where the site source codes are stored.

  3. Install the necessary packages for the site by running the following command:

    npm install

    This command will download and install all the required packages and dependencies for the Jack Creative website.

  4. Start the development server by running the following command:

    npm run dev

    This command will build your website locally and launch a development server. You can access your site by visiting http://localhost:3000/ (opens in a new tab) in your web browser.

    Now you can view and interact with your Jack Creative website on your local machine.

Note: Make sure to keep the command prompt or terminal open while you are working on your Jack Creative website. Any changes you make to the source codes will be automatically reflected in the browser.

Folder Structure

Jack Creative maintain nextjs 13 folder structure. Furthermore, We have use jsx to create the files. Full folder structure is geven below:

JackCreative
├─ app
│   |── layout.js
|   |── page.jsx
|   |── not-found.jsx
|   |── favicon.ico
|
|   └── blog
|       |── page.jsx
|       └── [slug]
|            |── page.jsx
|            |── relatedPost.jsx
|   └── contact
|       |── page.jsx
|   └── homepage-2
|       |── page.jsx
|   └── homepage-3
|       |── page.jsx
|   └── project
|       |── page.jsx
|       └── [id]
|            |── page.jsx
|   └── taxonomy
|       └── [slug]
|            |── page.jsx
|            |── taxonomyBlog.jsx
|
|── components
|   |── BlogPost.jsx
|   |── Counter.jsx
|   |── FeedBack.jsx
|   |── FeedBackSlider.jsx
|   |── Footer.jsx
|   |── Hero.jsx
|   |── HeroOne.jsx
|   |── HeroTwo.jsx
|   |── Navbar.jsx
|   |── ProjectArea.jsx
|   |── ProjectCard.jsx
|   |── Projects.jsx
|   |── ProjectOne.jsx
|   |── ProjectTwo.jsx
|   |── Resume.jsx
|   |── ServiceCard.jsx
|   |── Services.jsx
|
├─ data
│   |── data.js
|   └── blog
|       |── blog page's Markdown files
├─ public
|   └── Images
|       |── All image files
├─ scss
|   └── Style Related SASS Files
├─ utils
|   └── CounterUpAnimation.js
|   └── getMarkDownContent.js
|   └── getMarkdownData.js
├─ jsconfig.json
├─ package.json
Deploying SiteCreate a New Page