![react background with animation home screen react background with animation home screen](https://madewithreact.com/content/images/2019/02/Captur--de-ecran-din-2019.02.14-la-17.14.22.png)
Use the Button component in Hero.tsx Show solution Configure Sass # To add the button, create a new folder inside the components folder called Button and add the three files (index file. Layout of the Hero component Create the Button component As all buttons will share the same style in the portfolio, let's create a component for it. There are no links involved, as we'll handle scrolling through JavaScript.Īt the end of the container, we'll have the heroCTA, but we're currently missing the button. Lines 15-27: We'll use a hamburger menu for the navigation.We'll use h2 tags for the projects and contact sections. Line 13: The subtitle is wrapped in a strong tag.As the title variable that is exported from the config file contains HTML tags, we need to use the dangerouslySetInnerHTML prop to correctly render the HTML elements inside the h1 tag. Line 12: The title will be displayed within an h1 tag.Since this image is above the fold, there's no need for lazy loading. For images, always provide an alt tag to improve accessibility, as well as width and height attributes to prevent layout shifts. Lines 5-10: In Vite, we can reference static assets from the root of the public folder.We'll achieve this by setting the max-width of the container to 1200px. hero section to ensure that the main content of the portfolio remains centered for larger screen sizes. Line 3: We're using a container inside the.Let's review what we did for this component: This means you should end up with the following project structure: tsx file with the component's name, and an. Inside each of these subfolders, create an index.ts file, a. Inside the editor, create a new folder named components, and add three subfolders for the three different sections: Hero, Projects, and Contact.
![react background with animation home screen react background with animation home screen](https://wallpapercave.com/wp/wp7718053.png)
Let's begin at the very start by setting up the project. We'll use this in conjunction with the TypeScript configuration file to create absolute imports later on. : Vite comes with its own configuration file where we can set up plugins, build configurations, and import aliases.
![react background with animation home screen react background with animation home screen](https://1.bp.blogspot.com/-XmzeDjkp8MQ/W6iVAHYBS7I/AAAAAAAAB60/HZoE9qBOi3ouuXn8x7RJhAjfAwXr5YonQCLcBGAs/s1600/bck1.png)
We'll use it later to set up absolute imports. tsconfig.json: Since this is a TypeScript project, we have a tsconfig.json file at the project's root that configures how TypeScript behaves.src: The source code of the project, including components, utility functions, and styles, will be created within the src folder.This means these files will not be bundled or minified. Anything placed here will remain unaltered by Vite and will be copied to the build folder as-is. public: The public folder is where we can store static assets such as fonts, images, or icons.Each Vite project comes with the following folders and files that we'll make use of: Open the sidebar to view the current project files. If you're interested in seeing what a brand new React + TypeScript Vite project looks like, you can check out the following StackBlitz project: React + TypeScript template If you're new to any of them, we recommend checking out our roadmaps, where you can learn everything from the start.Ĭommand for creating a new Vite project with React + TypeScript
![react background with animation home screen react background with animation home screen](https://i.stack.imgur.com/ngk1r.gif)
This course won't cover how to use these technologies from scratch. While we'll go into detail and cover most aspects, this course assumes you have a basic understanding of HTML, CSS, JavaScript, and React. Scroll-animated portfolio in React + TypeScript Prerequisites