React Portflio Website Basic to Advance

To build a React-based portfolio website with Tailwind CSS, follow these steps to integrate Tailwind and style your components.

1. Set Up Tailwind CSS in Your React Project

First, create a new React project and install Tailwind CSS.

 
 npx create-react-app portfolio-website
 cd portfolio-website
 npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init

After running , npx tailwindcss init a tailwind.config.js file will be created. Now, configure Tailwind to purge unused styles by editing tailwind.config.js as follows:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. Add Tailwind Directives to CSS

Create a new file src/index.css (or edit the existing one) to include the Tailwind directives:

`src/index.css`

 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

3. Run the Application

Now that everything is set up, you can run the app using the following command:

 npm start

This will open your portfolio website with Tailwind CSS applied

 http://localhost:3000/

To create a portfolio website using React.js with various components like `About`, `Blog`, `Footer`, `Hero`, `Navbar`, `Portfolio`, `Service`, `Testimonial`, and pages like `About`, `Blog`, `Home`, and `Portfolio`, you can structure your React app with multiple components and use React Router for navigation.

Final Structure

Here’s a quick recap of the structure

src/
├── components/
│   ├── About.js
│   ├── Blog.js
│   ├── Footer.js
│   ├── Hero.js
│   ├── Navbar.js
│   ├── Portfolio.js
│   ├── Service.js
│   ├── Testimonial.js
├── pages/
│   ├── AboutPage.js
│   ├── BlogPage.js
│   ├── HomePage.js
│   ├── PortfolioPage.js
├── App.js
├── index.css
└── tailwind.config.js

Additional Features

Responsive Design: Tailwind’s utility classes make it easy to add responsive design by breakpoints.

Dark Mode: Tailwind has built-in support for dark mode.

Animations: You can use framer-motion or Tailwind’s built-in animations libraries like to make your website more interactive.

2. Install React Router

You will need React Router to navigate between pages.

Next install React Router from npm:

npm i react-router-dom

In this setup, all routing is centralized in App.js, which makes it easy to manage your application's navigation. By defining your routes with react-router-dom, you ensure that each page is mapped to its respective URL, and by using Tailwind CSS, your design will be responsive and visually appealing with minimal effort

App.js

managing all the routes url in app.js

import React from 'react'
import { BrowserRouter, Routes, Route } from "react-router";
import Home from './page/Home';
import Blog from './page/Blog';
import About from './page/About';
import Portflio from './page/Portflio';
import Navbar from './Components/Navbar';
import Footer from './Components/Footer';

const App = () => {
return (
<BrowserRouter>
<Navbar /> // render in everypage
<Routes>
<Route path='/' element={<Home />}/>
<Route path='/About' element={<About />} />
<Route path='/blog' element={<Blog />}/>
<Route path='/portflio' element={<Portflio />}/>
</Routes>
<Footer />
</BrowserRouter>
)
}

export default App

Since the Navbar and Footer components are the same across all pages in your application, it makes sense to place them outside of the Routes component. This way, both the Navbar and Footer will be rendered on every page, and you can keep the routing logic cleaner.

Homepage.js

import all the components in homepage

import React from 'react'
import Hero from '../Components/Hero'
import Service from '../Components/Service'
import Tesitmonial from '../Components/Tesitmonial'
import About from '../Components/About'
import Portflio from './Portflio'

const Home = () => {
    return (
        <div>
            <Hero />
            <About />
            <Service />
            <Portflio />
            <Tesitmonial />
        </div>
    )
}

export default Home

How to Used Font in our Website

This detailed guide provides several methods for integrating fonts into your React app, covering both web-safe and custom fonts. Let’s summarize and clarify the steps involved in each method:

1.Using Web Fonts (Google Fonts, etc.)

This is a simple way to use fonts from web font services such as Google Fonts.

Steps:

1. **Add Google Fonts Link in `index.html`**:

Add the link to Google Fonts within the `<head>` tag of your `public/index.html`.

html

2. Import the Font in CSS:**

Alternatively, you can import the font directly into a CSS file.

css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

3. Apply the Font in Your CSS**:

Use the font in your app by defining it globally or specifically for elements.

css

* {
  font-family: 'Roboto', sans-serif;
}

2. Using Custom Fonts with `@font-face`

For custom font files that you want to include in your React app.

Steps:

1. Add Your Font Files:

Place your font files (e.g., `.woff2`, `.woff`, `.ttf`) inside the `public/assets/fonts/` folder.

Example folder structure:

public/
├── assets/
│   └── fonts/
│       ├── MyCustomFont.woff2
│       ├── MyCustomFont.woff
│       └── MyCustomFont.ttf
│   └── image/
│       ├── img1.png
│       ├── img2.jpg

2. Define `@font-face` in Your CSS:

Add the `@font-face` rule to your CSS to load and apply the custom font.

  
@font-face {
    font-family: nbinternational;
    src: url('./fonts/NBInternationalProBoo.woff2');
}

@font-face {
    font-family: rejoice;
    src: url('./fonts/Rejouice-Headline.woff2');
}

*{
  font-family: nbinternational;
}

3. Using Fonts with a CSS Framework (e.g., Tailwind CSS)

Tailwind CSS allows you to extend its configuration to include custom fonts.

Steps:

1. Install Tailwind CSS:

Follow the official [Tailwind installation guide](https://tailwindcss.com/docs/installation).

2. Extend Tailwind Configuration:

Add the custom font to the Tailwind configuration in `tailwind.config.js`.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        custom1: ['nbinternational', './fonts/NBInternationalProBoo.woff2'],
        custom2: ['rejoice', './fonts/Rejouice-Headline.woff2'],
      },
    },
  },
  plugins: [],
} 

3. Apply the Custom Font in Your Components:

Use Tailwind's utility classes to apply the custom font to your elements.

import React from 'react'

import { NavLink } from "react-router";

const Navbar = () => {
  return (
    <div>
      <div>
        <NavLink to="/about" className="font-custom">Technical krish</NavLink>
      </div>
    </div>
  )
}

export default Navbar

4. Using Fonts with Styled Components (CSS-in-JS)

Styled Components provides an approach to apply custom fonts within React components using JavaScript.

Steps:

1. Install Styled Components

 npm install styled-components

2. Define Global Styles with `@font-face`

Use `createGlobalStyle` from Styled Components to apply global styles.

 import React from 'react'
 import { createGlobalStyle } from 'styled-components';

   const GlobalStyle = createGlobalStyle`
     @font-face {
       font-family: 'MyCustomFont';
       src: url('./assets/fonts/MyCustomFont.woff2') format('woff2'),
            url('./assets/fonts/MyCustomFont.woff') format('woff');
       font-weight: normal;
       font-style: normal;
     }

     * {
       font-family: 'MyCustomFont', sans-serif;
     }
   `;

const App = () => {
  return (
    <div>
        <GlobalStyle />
    </div>
  )
}

export default App

How To used Icon in React js

1. Using React Icons Library

React Icons is a popular library that provides easy access to a wide variety of icons, including popular icon sets like Font Awesome, Material Design, and more.

Steps to Add React Icons:

1) Install the React Icons Library: First, you need to install the react-icons library via npm:

 npm install react-icons

2) Import Icons in Your React Component: After installation, you can import specific icons you want to use from the library. For example, to use Font Awesome icons:

 import { FaHome, FaUser } from 'react-icons/fa';

2. Using Font Awesome (CDN)

Font Awesome is a popular icon library that can be used by linking to a CDN in your index.html file.

Steps to Add Font Awesome Icons:

Add Font Awesome CDN: In your public/index.html, add the following <link> tag inside the <head>:

2. Use Font Awesome Icons in Your Components: You can now use Font Awesome icons by simply adding the appropriate class to an HTML element in your React components.

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Welcome to Technical krish!</h1>
      <div>
        <i className="fas fa-home"></i> Home
      </div>
      <div>
        <i className="fas fa-user"></i> User Profile
      </div>
    </div>
  );
};

export default MyComponent;

Used full Vs code Extension Extension

1. Get IntelliSense for Tailwind CSS

To enable IntelliSense for Tailwind CSS in your code editor (e.g., Visual Studio Code), install the Tailwind CSS IntelliSense extension.

For Visual Studio Code

Open VS Code and go to the Extensions Marketplace.
Search for "Tailwind CSS IntelliSense".
Click Install.

After installation, it will automatically provide autocompletion, syntax highlighting, and linting for Tailwind CSS classes in your project.

2. ES7 React/Redux/React-Native/JS snippets:

Once installed, this extension will provide several useful snippets. Here are some of the most common ones:

React Snippets

Component snippets:
rafce: Creates a functional component with an export.
rafcp: Creates a functional component with a prop type definition.
rcc: Creates a class component.
rconst: Creates the constructor method for a class component.

3. React Theme Extension

Choosing the best theme for React development in Visual Studio Code (VS Code) depends on your personal preferences for syntax highlighting, visual aesthetics, and comfort during long coding sessions. However, here are some of the most popular and widely recommended themes for React development:

One Dark 
Pro,Dracula
Official
Palenight
Ayu
Night Owl
Cobalt2
Solarized Dark
Material Theme

All of these themes are available in the Visual Studio Code Extensions Marketplace, so you can easily install and experiment with them to see which one suits your React development style best!

How to write reusable tailwind css code

To write dynamic and reusable CSS or Tailwind CSS code, you can follow different approaches depending on your project structure and needs. Below are a few techniques to make your styles flexible, reusable, and maintainable.

1. Reusable Tailwind Classes with Custom CSS

You can use the @apply directive in your CSS files to create reusable custom classes that combine multiple Tailwind utility classes. This allows you to group common styles into a single class, making your code more maintainable and reusable.

/* styles.css */

.btn {
  @apply px-4 py-2 text-white;
}

.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700;
}

.btn-green {
  @apply bg-green-500 hover:bg-green-700;
}

2. Creating Custom Tailwind CSS Utility Classes with `@layer`

You can extend Tailwind's default utility classes by adding your own custom utilities in your tailwind.config.js or by using @layer in your CSS file. This allows you to define reusable utilities for things like custom margins, paddings, or text sizes.

Example: Custom Utility Classes in Tailwind

tailwind.config.js:

dynamic css code

const { Link } = require('react-router-dom')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors:{
        'body':'#4B5563',
        'card':'#4B5563'
      },
      fontFamily: {
        'custom': ['nbinternational', './src/fonts/NBInternationalProBoo.woff2'],
        'custom2': ['rejoice', './src/fonts/Rejouice-Headline.woff2'],
      },
      margin:{
        
      },
    },
  },
  plugins: [],
}