Next.js Template

Danial Khakbaz's portfolio built with Next.js, showcasing his skills as a Front-end developer with a journey toward becoming a Full-stack developer. This project highlights his ambition for continuous learning and crafting seamless web applications using modern technologies.

Project Overview

This portfolio website serves as a professional platform to showcase Danial’s work, skills, and personal philosophy on balanced living. It is optimized for performance and utilizes several popular tools and libraries for a smooth, interactive user experience.

Table of Contents

• Features
• Technologies Used
• Installation
• Development Scripts

Features

• Responsive Design: Fully responsive layout with smooth animations.
• Interactive Animations: Seamless transitions powered by Next View Transition.
• Tailwind CSS Integration: Utility-first CSS framework for rapid UI development.
• TypeScript Support: Enhanced type safety and development experience.
• Image Optimization: Efficient image handling with Sharp for performance.
• Linting and Formatting: Code quality maintained with ESLint and Prettier.

Technologies Used

• Next.js - React framework for server-side rendering and static website generation.
• React - JavaScript library for building user interfaces.
• Tailwind CSS - Utility-first CSS framework for rapid UI development.
• TypeScript - JavaScript with static typing.
• Sharp - High-performance image processing.
• Knip - Tool for managing your Next.js project's file and folder structure.

Installation

To set up this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Danielkhakbaz/Nextjs-Template
   cd daniel-portfolio

2. Install dependencies:

   yarn

3. Run the development server:

   yarn dev

4. Open http://localhost:3000 in your browser to see the project.

Development Scripts

Here are some helpful scripts to assist in the development and maintenance of this project:

• dev: Runs the app in development mode.
• build: Compiles the app for production.
• start: Starts the production server.
• lint: Lints and fixes files using ESLint.
• fix: Formats files using Prettier.
• knip: Analyzes the project structure and provides suggestions for improvement.
• check-prettier: Checks the code format without making changes.