React landing page

Creating landing page

After completing steps 2-6 of the Cloud Resume Challenge and deploying my index.html resume as an Amazon S3 static website, I decided to explore React with Three.js, a JavaScript library that enables the creation of 3D graphics in a browser. Inspired by this, I decided to enhance my resume by creating a React landing page using Three.js components. To host this new landing page, I opted to utilize AWS Amplify, a service that simplifies the deployment of web applications.

To begin, I created a new React project locally and incorporated the necessary Three.js components into my code. I developed an interactive and visually appealing landing page that showcases my skills and experience.

Next, I proceeded to configure AWS Amplify to deploy and host my React landing page. I followed the Amplify documentation to set up the necessary build and deployment configurations. Amplify provided me with a convenient way to manage the hosting environment and handle the deployment process. Below are the steps to host a React app website in AWS Amplify.

1. Set up an AWS account if you haven’t already: Go to the AWS Management Console (console.aws.amazon.com) and create an account if needed.
2. Install the AWS Amplify CLI: Open your command line interface and run the following command to install the Amplify CLI globally

npm install -g @aws-amplify/cli.

3. Initialize Amplify in your React app’s root directory: Navigate to your React app’s root directory using the command line interface and run the following command:

amplify init.

4. You will want to Follow the prompts to set up your Amplify environment. This includes selecting your desired AWS region, configuring your AWS profile, and specifying a unique name for your Amplify project.

5. Add hosting to your project: Run the following command to add hosting capabilities to your project:

amplify add hosting

6. You want to select the hosting type that suits your needs, such as Amazon S3 and Amazon CloudFront.

7. Configure the hosting options: Amplify will guide you through a series of prompts to configure the hosting options. You can specify the build settings, custom domains, and SSL certificate settings. Follow the prompts and choose the options that best fit your requirements.

8. Build and deploy your React app: After configuring the hosting options, run the following command to build and deploy your React app:

amplify publish.

Amplify will build your React app and deploy it to the specified hosting environment. It will provide you with the deployment details, including the URL where your app is hosted.

Once my React landing page was successfully deployed, I wanted to create a link on my landing page that directs visitors to my HTML resume. To achieve this, I utilized the subdomain feature in AWS Route 53. I created a subdomain called “resume.johnathancloudspace.com” and configured it to point to the URL of my original HTML resume.

Now, on my React landing page, I added a prominent and intuitive link to my resume. When visitors click on this link, they are redirected to the new page, which displays my original HTML resume hosted on the subdomain “resume.johnathancloudspace.com.” This ensures a seamless transition for users who wish to view my detailed resume.

By combining the power of React with Three.js and leveraging AWS Amplify and Route 53, I have created an engaging and interactive landing page for my resume while maintaining access to my original HTML resume for those who desire a more detailed overview of my skills and experience.

With this setup in place, I was able to incorporate React components into my landing page. For instance, I utilized Three.js to generate 3D models such as a rotating cube. To accomplish this, I imported Three.js and created a canvas element in my App component. I then used Three.js to define the cube and added an animation to make it spin. It was a fascinating and entertaining addition to my resume.

Overall, integrating React and Three.js into my Cloud Resume Challenge project was an excellent way to hone my skills and enhance the functionality of my resume. I highly recommend exploring these technologies to enrich your web projects.