Creating a React Portfolio Website with Codex Visual IDE

In this special episode, we will be exploring how to create a visually appealing React portfolio website using Codex, a visual IDE sponsored by Kodex. This IDE allows you to create and style React components visually, similar to Figma.

Getting Started with Codex

To begin, head over to godox.com and download the free version of Codex. It is available for Linux, Mac, and Windows. Once downloaded, you can install it on your system.

One of the standout features of Codex is the ability to render any React project quickly and in real-time, even if it is just a single component. You can also edit components and their properties, as well as live edit styles. All changes are immediately reflected. Furthermore, Codex comes integrated with various third-party libraries and offers the option to push code to GitHub. It even seamlessly connects with VS Code, allowing you to continue coding and adding logic in that environment.

Setting up a Project with Codex

After launching Codex, go to the download page and select the appropriate version for your operating system. In our case, we will choose the Windows version. However, if you are using Mac or Linux, feel free to download the corresponding versions.

Once you have installed Codex, create a new project. Codex supports both Create React App and Vita frameworks, with plans to include Next.js support in the near future. This flexibility allows you to choose the framework that suits your preferences.

In the project setup, you can select the project name and the directory where it will be saved. You can also specify the technologies you will be using.

After creating the project, run the command npm run install to set up the necessary components.

Exploring Codex Components

By default, Codex creates an "app" component in your project. This component is rendered on the main canvas.

Before we delve further into the project, let's familiarize ourselves with the different elements and functionalities of Codex.

• Elements: These are the components in your project. The cube-shaped icon represents the "app" component. You can add new elements by dragging and dropping them from the top panel.

• Editing Components: To edit a component, select it and click on the "Edit" tool. This will open a properties tab where you can modify the elements and their attributes.

• Preview and Testing: Codex provides a preview icon that allows you to test your website's functionality. You can add and remove elements, and make changes in real-time.

• Styling: Codex offers multiple ways to style your components, such as using cscss, CSS modules, Tailwind, and styleable. It even generates an SCSS file for each component you create.

Creating Components with Codex

To demonstrate the functionality of Codex, let's create multiple components for our portfolio website.

First, let's create an "intro" component. After deleting the default elements in the "app" component, drag and drop an "H1" element into it. To edit the text, select the "text" option and make the necessary changes.

Additionally, Codex allows you to apply custom styling to each component. By clicking the plus icon in the styles tab, you can create a new SCSS module associated with the component.

Repeat this process to create other components like "portfolio", "navbar", "animation", and "contact form". You can organize these components within folders for better management and maintainability.

Integrating Codex with VS Code

Codex provides a seamless integration with VS Code. You can directly open a component in VS Code for further editing by selecting it and choosing the "Open in VS Code" option.

Previewing the Portfolio Website

With all the components created and styled, we have our finished project. The "navbar" component represents the navigation bar, followed by the "intro" section with a title and an animation element. The "portfolio" section showcases our portfolio items, and there are also social links and a "contact" page with an animation element.

Codex's ability to render components in isolation, combined with its efficient visual editing and styling capabilities, make it an invaluable tool for building React portfolio websites.

Codex empowers developers to quickly create and iterate on React projects, utilizing the visual IDE's features and a wide array of integrated third-party libraries. It streamlines the development process, allowing for real-time changes and easy deployment to platforms like GitHub.

Adding the Home Page

To create a home page for our application, we need to include a navigation bar, an introduction section, and a portfolio section. Let's start building these components.

In our App component, we can add the intro component by simply dragging and dropping it into the page. It's as easy as that! Alternatively, we can also add and modify components directly in the code.

To structure the content of the intro section, we'll start by adding a div block. Inside this div, we'll include an H2 element as the title, which will be "Dimitri Marco". Below the title, we'll add an H3 element that will display the text "Software Engineer and Designer".

Next, we want to include an SVG line to animate the intro section. We can copy the code for the SVG line from the provided GitHub repository. The line will serve as a visual element between the title and the description.

After the SVG line, we'll add a couple of paragraphs to provide some text content. We can use a P tag for this purpose, and the text can be "Freelance providing services for programming and design work".

To complete the intro section, we'll add a button as a call to action. We can search for a button component and add it below the paragraphs. We can also rename the button to something like "Let's Get in Touch" or "Let's Collaborate" for a more engaging call to action. We can even add an emoji to make it more fun and attention-grabbing.

Once we have added all the necessary components, we can begin styling them. We can start by adding some padding to the root div using the visual editor in Codex. We can also utilize the display: flex property to vertically align the components and center them on the page.

For the title (H2) and subtitle (H3), we can create custom classes and apply styling using CSS properties. We can increase the font size and font weight of the title to make it more prominent. We can also adjust the font size and font weight of the subtitle to complement the title.

To style the button, we can utilize the visual editor's color picker feature. We can choose a background color and even create a gradient effect if desired. We can also change the text color to white for better visibility. Additionally, we can adjust the padding of the button to ensure it has adequate spacing.

With all the components and their respective styles in place, we can now proceed to adding the animation of a hand. For this, we'll use the Lottie library. We need to install the necessary plugins for Lottie, React Router Dom for navigation, and Framer Motion for animation.

To include the hand animation, we'll import the Lottie component from the Lottie React library. We'll also import the animation file from our assets folder. We can rename the animation file to "hand animation" and place it in the assets folder within our project.

To further enhance the visual appeal, we'll also utilize Framer Motion to add a fade-in and fade-out effect when navigating to the home page.

By following these steps and making required adjustments, we can create an engaging and visually appealing home page for our application.

Adding Animation and Portfolio to the Website

In this section, we will be discussing how to add animation and portfolio to your website using React.

Importing Lottie Animation

To start, we need to import the Lottie library from Latia React. Additionally, we will import the hand animation from the assets folder. By importing the animation, we can use it later in our code.

importLottiefrom'latia-react';importhandAnimationfrom'./assets/animation';

Implementing Framer Motion

Next, we will integrate Framer Motion library into our project. The purpose of using Framer Motion is to add fade-in and fade-out effects when the page is entered. To get started, import the motion component from Framer Motion library.

import{motion}from'framer-motion';

Now, we can create a motion div and render the Lottie animation inside it. The animation data that we imported earlier will be passed as a prop to the Lottie player component.

<motion.div
  initial={{ opacity: 0, scale: 0 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{ duration: 0.6 }}
>
  <Lottie animationData={handAnimation} />
</motion.div>

Integrating Animation into Intro Component

To make our animation a part of the intro section, we need to import it into our Intro component. Import the Animation component and include it within the Intro component.

import Animation from './components/Animation';

// ...

<Intro>
  <Animation />
  // Other content
</Intro>

Creating Portfolio Section

Now, let's move on to adding the portfolio section to our website. We will start by import the necessary images and SVG icons. These assets can be found in the assets folder.

importimage1from'./assets/image1.jpg';importimage2from'./assets/image2.jpg';importimage3from'./assets/image3.jpg';importimage4from'./assets/image4.jpg';importyoutubeIconfrom'./assets/youtube.svg';importtwitterIconfrom'./assets/twitter.svg';importlinkedinIconfrom'./assets/linkedin.svg';

Implementing Portfolio Grid

To display the portfolio items, we will create a grid using CSS Grid. Let's create a div with the class name "grid-items" and add our images and other elements inside it.

<div className="grid-items">
  <div className="grid-item">
    <img src={image1} alt="Project 1" />
    <div className="visit-portfolio">
      <h4>Buzz - Full Stack Project</h4>
      <a href="#">Visit Portfolio</a>
    </div>
  </div>
  // Add more grid items here
</div>

To make the grid responsive, we can define the grid layout using the repeat(auto-fill, minmax(321px, 1fr)) property. This will automatically adjust the number of columns based on the available viewport width.

Styling the Grid Items

Next, let's add some styling to the grid items. Apply the following styles to the images and the "visit-portfolio" div.

.grid-itemimg{width:100%;border-radius:12px;}.visit-portfolio{display:flex;justify-content:center;align-items:center;gap:12px;}

Adding Social Links

Finally, let's add social links at the bottom of the website. We can place the social links right after the portfolio section.

<div className="social-links">
  <a href="#"><img src={youtubeIcon} alt="YouTube" /></a>
  <a href="#"><img src={twitterIcon} alt="Twitter" /></a>
  <a href="#"><img src={linkedinIcon} alt="LinkedIn" /></a>
</div>

How to Add Social Links to Your Application

In this article, we will learn how to add social links to your application. We will start by importing the necessary components and creating a div for the social links. Then, we will style the links and adjust their size. Finally, we will hook up the navigation and add a form for contact information.

Importing Components and Creating the Social Links

To begin, we need to import the necessary components and create a div for the social links. Here is the code snippet for creating the socials div:

<div className="socials">
  {/* Add social links here */}
</div>

Inside the socials div, we will add anchor tags with SVG icons for different social media platforms. For example:

<div className="socials">
  <a href="https://www.facebook.com">
    <svg>
      {/* Facebook icon */}
    </svg>
  </a>
  <a href="https://www.twitter.com">
    <svg>
      {/* Twitter icon */}
    </svg>
  </a>
  {/* Add more social media icons */}
</div>

Styling the Social Links

By default, the social icons may appear too large. To fix this, we can add some CSS styling. First, we will set the display property of the socials div to flex to make the icons appear in a row:

.socials{display:flex;}

Next, we can adjust the size of the icons by setting the height property to 2.5rem:

.socialssvg{height:2.5rem;}

Hooking Up the Navigation

In our application, we already have a navigation component. We can hook it up by importing the necessary components and updating the JSX code. Here is an example of how our navigation component can look like:

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/portfolio">Portfolio</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

Make sure to import the required components from react-router-dom. Additionally, you will need to wrap your application with the BrowserRouter component and add routes for each page.

Adding a Contact Form

To create a contact form, we can use the form component provided by React. Here is an example of how the form can be structured:

<form>
  <label htmlFor="name">Name</label>
  <input type="text" id="name" />

  <label htmlFor="email">Email</label>
  <input type="email" id="email" />

  <label htmlFor="message">Message</label>
  <textarea id="message"></textarea>

  <button type="submit">Submit</button>
</form>

You can customize the form by adding additional fields or modifying the existing ones. To handle form submission, you can add an onSubmit event handler to the form component.

Using Animations in your Code

Animations can add an extra touch of interactivity and engagement to your website or application. In this article, we will explore how to incorporate animations into your code using React and some popular animation libraries.

Importing Dependencies

To get started, we need to import a few dependencies. We will be using the useState hook from the React library to manage our form data. Additionally, we will import a specific animation library called "Lottie" and a custom animation called "Form Animation". To import these dependencies, add the following code to your project:

import React, { useState } from 'react';
import Lottie from 'lottie-react';
import FormAnimation from '../assets/form-animation.json';

Managing Form Data

First, we need to set up our form and manage its data using the useState hook. We will create a state variable called query to store the form data. The query state will contain the following fields: name, email, and message. Additionally, we will create another state variable called submitted to keep track of whether the form has been successfully submitted. Here is the code to set up the form data:

const [query, setQuery] = useState({
  name: '',
  email: '',
  message: ''
});

const [submitted, setSubmitted] = useState(false);

Handling Form Input

To handle user input in the form, we will create a function called handleParam. This function will take in an event and the corresponding input value. It will update the query state with the new value for the respective input field. This allows us to reuse this function for multiple inputs. Here is the code for the handleParam function:

const handleParam = (event, value) => {
  setQuery(prevQuery => ({...prevQuery, [event.target.name]: value}));
}

Submitting the Form

To submit the form and send the data to a server, we will be using a service called "getform.io". This service allows you to create endpoints and receive form data. To submit the form, we will create a function called formSubmit that takes an event as an argument. Inside this function, we will prevent the default form behavior, create a new form data object, and append the form data from the query state. We will then use the fetch function to send a POST request to the API endpoint provided by "getform.io". Finally, we will update the query state to clear the form data and set submitted to true. Here is the code for the formSubmit function:

const formSubmit = async (event) => {
  event.preventDefault();

  const formData = new FormData();

  Object.entries(query).forEach(([key, value]) => {
    formData.append(key, value);
  });

  const response = await fetch('https://api.getform.io/your-endpoint', {
    method: 'POST',
    body: formData
  });

  setQuery({ name: '', email: '', message: '' });
  setSubmitted(true);
}

Rendering the Form

To render the form, we will use conditional rendering based on the submitted state. If the form has been submitted, we will display a success message with a Lottie animation. Otherwise, we will display the form inputs. Here is the code to render the form:

{submitted ? (
  <div>
    <Lottie animationData={FormAnimation} loop={false} />
    <p>Form Submitted. Thank you!</p>
  </div>
) : (
  <form onSubmit={formSubmit}>
    <label htmlFor="name">Name:</label>
    <input type="text" id="name" name="name" value={query.name} onChange={(event) => handleParam(event, event.target.value)} required />

    <label htmlFor="email">Email:</label>
    <input type="email" id="email" name="email" value={query.email} onChange={(event) => handleParam(event, event.target.value)} required />

    <label htmlFor="message">Message:</label>
    <textarea id="message" name="message" value={query.message} onChange={(event) => handleParam(event, event.target.value)} required ></textarea>

    <button type="submit">Submit</button>
  </form>
)}

Codex provides an efficient and user-friendly environment for developing visually appealing react portfolio websites. its integration with vs code enhances the coding experience, while its various styling options and component isolation make it a powerful tool for web development.

so don't hesitate to give codex a try and unlock your creativity in building stunning react portfolio websites!

note: this article has been written by the authors to naturally expand on the given text and provide additional insights and information.
By following the steps outlined in this article, you can easily add animation and portfolio sections to your website using react and related libraries. this will enhance the visual appeal and functionality of your website, making it more engaging for users.
In this article, we have learned how to add social links to our application. we started by importing the necessary components and creating a div for the social links. then, we styled the links and adjusted their size. finally, we hooked up the navigation and added a contact form. by following these steps, you can enhance the functionality and user experience of your application.

In this article, we explored how to incorporate animations into your code using React and the "Lottie" animation library. We learned how to set up form data using the useState hook, handle form inputs, submit the form to a server, and render the form with conditional rendering. Animations can greatly enhance the user experience and engagement of your website or application. Give it a try and see the difference it makes!

To learn more about animation libraries and other useful tools for web development, check out kodux.com. As always, happy coding!