A modern React project built with Vite and styled using Tailwind CSS.

This project is a simple portfolio web page built using React, Vite as the build tool, and Tailwind CSS for styling. It is designed to provide a fast and efficient development experience.

This portfolio features several content menus such as:

• Home
• Profile
• Project
• Content
• Contact

Make sure you have Node.js version 14.18+ or later installed, along with npm, pnpm, or yarn as the package manager before proceeding.

Follow the steps below to install and run the project in your development environment:

1. Clone Repository to your local directory:

git clone https://github.com/dediindrawan/dediindrawan.git

2. Navigate to the project directory:

cd dediindrawan

3. Install the required dependencies:

# If using npm:
- npm install

# If using pnpm:
- pnpm install

# If using yarn:
- yarn install

4. Run the project in development mode:

# If using npm:
- npm run dev

# If using pnpm:
- pnpm run dev

# If using yarn:
- yarn dev

5. Open http://localhost:5173 in your browser to view the running application. Alternatively, check the URL provided in the terminal of your code editor.

Here is an overview of the directory structure of this project:

dediindrawan/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── data/
│   ├── hooks/
│   ├── 404.jsx
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── README.md
├── tailwind.config.js
└── vite.config.js

• src/: The main folder for the application's source files
• tailwind.config.js: Tailwind CSS configuration file
• vite.config.js: Vite configuration file

After installing the project, you can add new components, manage state, and customize the appearance using Tailwind CSS. Here's an example of how you can create a simple component:

// src/components/Button.jsx
import React from 'react';

const Button = ({ children }) => {
  return (
    <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      {children}
    </button>
  );
};

export default Button;

Usage in App.jsx:

import React from 'react';
import Button from './components/Button';

function App() {
  return (
    <div className="flex justify-center items-center h-screen bg-gray-100">
      <Button>Click Me!</Button>
    </div>
  );
}

export default App;

View the live demo of this website by visiting: https://dediindrawan.vercel.app/

Here are some screenshots of this web page:

• Desktop view:

• Tablet view:

• Smartphone view:

If you want to contribute to this project, please follow these steps:

1. Fork this Repository
2. Create a new branch (git checkout -b feature-branch)
3. Commit your changes (git commit -m 'Add new feature')
4. Push to the branch (git push origin feature-branch)
5. Open a Pull Request on GitHub

• Description: This section provides a general overview of the project.
• Prerequisites: Specifies the required Node.js version and the package manager used.
• Installation: Steps to clone the repository, install dependencies, and run the project.
• Project Structure: Provides a general overview of the project's directory structure.
• Usage: Example of how to use components or features in the project.
• Demo Link: Provides a link to the deployed application for visitors to see the application live.
• Screenshots: Adds images showing the application's interface.
• Contribution: Steps to contribute to the project.