Build And Deploy a Modern Personal Portfolio with ReactJS and TailwindCSS | React Beginner Tutorial

Key Concepts

• React.js: A JavaScript library for building user interfaces.
• Tailwind CSS: A utility-first CSS framework for rapidly styling web applications.
• Vit: A build tool that aims to provide a faster and leaner development experience for modern web projects.
• Lucid React: An icon library for React applications.
• React Router DOM: A library for handling routing in React applications.
• Tailwind Merge: A utility for merging Tailwind CSS class names.
• Radix UI: A set of unstyled, accessible UI primitives.
• Toaster: A UI component for displaying notifications.
• CSS Variables (HSL): Custom properties in CSS that store values like colors, defined using HSL (Hue, Saturation, Lightness).
• Keyframes: CSS rules that define the stages of an animation.
• Utility Classes: CSS classes that apply a specific style or set of styles, often used in CSS frameworks like Tailwind CSS.
• Media Queries: CSS rules that apply styles based on the characteristics of the device, such as screen size.
• Local Storage: A web storage API that allows websites to store key-value pairs in a web browser, providing persistent data storage.
• Event Listener: A mechanism in JavaScript that allows you to listen for specific events on an element and execute a function when that event occurs.
• CSS Grid: A CSS layout module that allows you to create complex grid-based layouts.
• CSS Flexbox: A CSS layout module that provides a flexible way to align and distribute space among items in a container.
• Toaster (Radix UI): A UI component for displaying notifications.
• Vercel: A platform for deploying and hosting web applications.
• GitHub: A web-based platform for version control and collaboration using Git.

Building a Personal Portfolio Website with React.js and Tailwind CSS

Project Setup

1. Create a React Project with Vit:

   • Run npx create vite in the terminal.
   • Select React as the framework and JavaScript as the variant.
   • Run npm install to install dependencies.
   • Run npm run dev to start the development server.

2. Install Tailwind CSS and Plugins:

   • Run npm install -D tailwindcss postcss autoprefixer.
   • Run npx tailwindcss init -p to generate tailwind.config.js and postcss.config.js.
   • Install the Tailwind CSS Vit plugin: npm install -D @tailwindcss/vite.
   • Import the plugin in vite.config.js:

   import tailwindcss from '@tailwindcss/vite'
   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [react(), tailwindcss()],
   })
   

   • Add Tailwind directives to index.css:

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

3. Set Up Path Aliases:

   • Import path in vite.config.js: import path from 'path'.
   • Configure the alias in vite.config.js:

   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
   },
   

   This allows importing modules from the src directory using the @ symbol (e.g., import Component from '@/components/Component').

4. Install Additional Packages:

   • npm install lucid-react react-router-dom tailwind-merge @radix-ui/react-toast clsx
     • Lucid React: For icons.
     • React Router DOM: For routing.
     • Tailwind Merge: For merging Tailwind CSS class names.
     • Radix UI React Toast: For displaying notifications.
     • clsx: A utility for constructing class name strings conditionally.

5. Clean Up:

   • Delete App.css.

Defining Routes

1. Set up React Router:

   • Import BrowserRouter, Routes, and Route from react-router-dom.
   • Define routes in App.jsx:

   import { BrowserRouter, Routes, Route } from 'react-router-dom';
   import Home from './pages/Home';
   import NotFound from './pages/NotFound';
   
   function App() {
     return (
       <BrowserRouter>
         <Routes>
           <Route index element={<Home />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </BrowserRouter>
     );
   }
   
   export default App;
   

   • Create Home.jsx and NotFound.jsx in the pages directory.
   • The * path in the Route component is a wildcard that matches any path that hasn't been defined, and it's used to render the NotFound component.

Styling with Tailwind CSS and Customization

1. Define Custom Theme in index.css:
   • Define CSS variables for colors (border, background, foreground, primary, secondary, card) using HSL.
   • Define keyframes for animations (fade-in, float, pulse-subtle, meteor).
2. Define Base Layer:
   • Use the @layer base directive to define the root and dark themes, assigning HSL values to the CSS variables.
3. Create Utility Classes:
   • Use the @layer utilities directive to define custom utility classes:
     • .container: Sets margin-inline: auto and padding-inline: 2rem, and defines responsive max-width using media queries.
     • .text-glow: Adds a text shadow for a glowing effect.
     • .card-hover: Adds a transform transition and hover effect to scale cards up.
     • .gradient-border: Creates a gradient border for cards.
     • .cosmic-button: Styles buttons with padding, rounded corners, background color, text color, and hover effects.
     • .star: Styles the star elements with absolute positioning, rounded corners, white color, and box shadow.
     • .meteor: Styles the meteor elements with absolute positioning, a linear gradient background, rounded corners, and a box shadow.
4. Apply Base Styles:
   • Apply styles to all elements (*) to set the border color.
   • Apply scroll-smooth to the html element for smooth scrolling.
   • Apply background color, foreground color, and transition colors to the body element.
5. Apply Styles to Root Element:
   • Set max-width: 100%, margin: 0 auto, padding: 0, and text-align: center to the root element.

Theme Toggle Component

1. Create ThemeToggle.jsx in the components directory.
2. Implement Theme Switching Logic:
   • Use useState to manage the isDarkMode state.
   • Use useEffect to read the theme from local storage on component mount.
   • Implement the toggleTheme function to switch between dark and light modes:
     • Add or remove the dark class from the document.documentElement.classList.
     • Store the theme preference in local storage.
3. Render the Toggle Button:
   • Display a sun icon in dark mode and a moon icon in light mode.
   • Apply styles to the icons using Tailwind CSS classes.
4. Position the Toggle Button:
   • Use the cn (class name) utility to combine Tailwind CSS classes for positioning and styling the button.

Star Background Component

1. Create StarBackground.jsx in the components directory.
2. Generate Stars:
   • Use useState to manage the stars array.
   • Implement the generateStars function to create an array of star objects with random sizes, positions, opacities, and animation durations.
   • Calculate the number of stars based on the window size.
3. Render Stars:
   • Map through the stars array and render div elements for each star.
   • Apply the star utility class and inline styles for positioning, size, opacity, and animation duration.
4. Generate Meteors:
   • Use useState to manage the meteors array.
   • Implement the generateMeteors function to create an array of meteor objects with random sizes, positions, delays, and animation durations.
5. Render Meteors:
   • Map through the meteors array and render div elements for each meteor.
   • Apply the meteor and animate-meteor utility classes and inline styles for positioning, size, and animation delay.
6. Handle Window Resize:
   • Use useEffect to add a resize event listener to the window.
   • Implement the handleResize function to regenerate the stars and meteors when the window is resized.
   • Clean up the event listener on component unmount.

Navbar Component

1. Create Navbar.jsx in the components directory.
2. Define Navigation Items:
   • Create an array of objects representing the navigation links, including the name and href (ID of the target section).
3. Implement Scroll Detection:
   • Use useState to manage the isScrolled state.
   • Use useEffect to add a scroll event listener to the window.
   • Implement the handleScroll function to update the isScrolled state based on the scroll position.
4. Render the Navbar:
   • Use a nav element with a container div to center the content.
   • Render the logo with a glowing effect.
   • Render the desktop navigation links by mapping through the navItems array.
   • Render the mobile navigation menu by mapping through the navItems array.
   • Render the menu button to toggle the mobile menu.
5. Style the Navbar:
   • Use Tailwind CSS classes to style the navbar with fixed positioning, full width, transition effects, and conditional styling based on the isScrolled state.
   • Style the logo with text size, font weight, and color.
   • Style the navigation links with color, hover effects, and transition effects.
   • Style the mobile menu with fixed positioning, background color, blur effect, and conditional styling based on the isMenuOpen state.
   • Style the menu button with padding, color, and z-index.

Hero Section Component

1. Create HeroSection.jsx in the components directory.
2. Render the Hero Section:
   • Use a section element with an ID of hero.
   • Render the title with a glowing effect and different colors for each part.
   • Render the description with a muted foreground color and a fade-in animation.
   • Render the "View My Work" button with the cosmic-button style.
   • Render the scroll indicator with a bouncing animation.
3. Style the Hero Section:
   • Use Tailwind CSS classes to style the section with relative positioning, minimum height, flex layout, and padding.
   • Style the title with text size, font weight, and tracking.
   • Style the description with text size, muted foreground color, and max width.
   • Style the "View My Work" button with the cosmic-button style and a fade-in animation.
   • Style the scroll indicator with absolute positioning, bottom alignment, and a bouncing animation.

About Section Component

1. Create AboutSection.jsx in the components directory.
2. Render the About Section:
   • Use a section element with an ID of about.
   • Render the title with a span for the "me" part to apply a different color.
   • Render the description with a paragraph and a list of skills.
   • Render the "Get in Touch" and "Download CV" buttons.
3. Style the About Section:
   • Use Tailwind CSS classes to style the section with padding, relative positioning, and a container.
   • Style the title with text size, font weight, and color.
   • Style the description with text size, muted foreground color, and max width.
   • Style the "Get in Touch" and "Download CV" buttons with the cosmic-button style and custom styles.

Skills Section Component

1. Create SkillsSection.jsx in the components directory.
2. Define Skills Data:
   • Create an array of objects representing the skills, including the name, level, and category.
3. Implement Category Filtering:
   • Use useState to manage the activeCategory state.
   • Create a categories array with the available categories.
   • Filter the skills array based on the activeCategory state.
4. Render the Skills Section:
   • Use a section element with an ID of skills.
   • Render the title with a span for the "skills" part to apply a different color.
   • Render the category filter buttons by mapping through the categories array.
   • Render the skills by mapping through the filtered skills array.
5. Style the Skills Section:
   • Use Tailwind CSS classes to style the section with padding, relative positioning, and a container.
   • Style the title with text size, font weight, and color.
   • Style the category filter buttons with padding, rounded corners, transition effects, and conditional styling based on the activeCategory state.
   • Style the skills with padding, rounded corners, shadow, and hover effects.

Projects Section Component

1. Create ProjectsSection.jsx in the components directory.
2. Define Projects Data:
   • Create an array of objects representing the projects, including the ID, title, description, image, tags, GitHub URL, and demo URL.
3. Render the Projects Section:
   • Use a section element with an ID of projects.
   • Render the title with a span for the "projects" part to apply a different color.
   • Render the projects by mapping through the projects array.
4. Style the Projects Section:
   • Use Tailwind CSS classes to style the section with padding, relative positioning, and a container.
   • Style the title with text size, font weight, and color.
   • Style the projects with padding, rounded corners, shadow, and hover effects.

Contact Section Component

1. Create ContactSection.jsx in the components directory.
2. Render the Contact Section:
   • Use a section element with an ID of contact.
   • Render the title with a span for the "touch" part to apply a different color.
   • Render the contact information (email, phone, location).
   • Render the social media links.
   • Render the contact form.
3. Style the Contact Section:
   • Use Tailwind CSS classes to style the section with padding, relative positioning, and a container.
   • Style the title with text size, font weight, and color.
   • Style the contact information with muted foreground color and hover effects.
   • Style the social media links with muted foreground color and hover effects.
   • Style the contact form with padding, rounded corners, and shadow.

Footer Component

1. Create Footer.jsx in the components directory.
2. Render the Footer:
   • Use a footer element.
   • Render the copyright information.
   • Render the "Scroll to Top" button.
3. Style the Footer:
   • Use Tailwind CSS classes to style the footer with padding, background color, border top, and flex layout.
   • Style the copyright information with text size and muted foreground color.
   • Style the "Scroll to Top" button with padding, rounded corners, background color, hover effects, and color.

Deployment to Vercel

1. Push the code to a GitHub repository.
2. Create an account on Vercel.
3. Connect Vercel to your GitHub account.
4. Import the GitHub repository into Vercel.
5. Deploy the project.