You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.
git clone [email protected]:shruthilayaj/my-portfolio.git
cd my-portfolio (or my-portfolio-main if you are on Windowns)
npm install
npm start
Create React App sets up your development environment and generates a template with everything you’ll need to get started with your app.
We’re going to generate a create-react-app project with an official chakra-ui typescript template with the following code:
# TypeScript using npm
npx create-react-app my-portfolio --template @chakra-ui/typescript
# or npx [email protected] my-portfolio --template @chakra-ui/typescript
Let’s see the project that was generated! Type the following commands to start your development server:
cd my-portfolio
npm start
Your app should open up on http://localhost:3000/
and should display the stuff in App.tsx
All of our React code lives in the src
folder, let’s make a views
folder in there to organize some of the views we’re going to build!
mkdir src/views
touch src/views/AboutMe.tsx
Let’s start by adding some basic code to the AboutMe.tsx
file:
import { Box } from "@chakra-ui/react"
export const AboutMe = () => (
<Box>
Hi, I'm Dameli Ushbayeva!
</Box>
)
We want to add this component to the root of the app, so in App.tsx
import the AboutMe component:
import { AboutMe } from "./views/AboutMe";
Add it to your App
component:
export const App = () => (
<ChakraProvider theme={theme}>
<Box textAlign="center" fontSize="xl">
<Grid minH="100vh" p={3}>
<AboutMe />
<ColorModeSwitcher justifySelf="flex-end" />
</Grid>
</Box>
</ChakraProvider>
)
Once you hit save, you should see the change reflected immediately on your app.
We want to add more components to the about me section - so we probably want to add something that can contain multiple components on a page - Containers, let’s checkout some of the props we can use here centerContent
, margin
import { Box, Container } from "@chakra-ui/react"
export const AboutMe = () => (
<Container centerContent={false} margin={1}>
<Box textAlign={'left'}>
Hi, I'm Dameli Ushbayeva!
</Box>
</Container>
)
Change up some css and add a few more pieces!
export const AboutMe = () => (
<Container centerContent={false} margin='1'>
<Box textAlign='left'>
<Box fontSize='30px' paddingTop='10' paddingBottom='2'>
Hi, I'm Dameli Ushbayeva!
</Box>
<p>I'm a Software Engineer at Sentry. I'm a big fan of Functional Programming and super fast applications ⚡</p>
</Box>
<Box textAlign='left'>
<Box paddingTop='10' paddingBottom='2' fontWeight='semibold'>
Education
</Box>
<Box fontSize='medium'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Box>
</Box>
<Box textAlign='left' paddingBottom={6}>
<Box paddingTop='10' paddingBottom='2' fontWeight='semibold'>
Skills
</Box>
<Box fontSize='medium'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Box>
</Box>
</Container>
)
Grid
Let’s add that little skills grid! Add [Grid](https://chakra-ui.com/docs/components/grid/usage)
to your list of imports at the top of the AboutMe.tsx
:
import { Box, Container, Grid } from "@chakra-ui/react"
Copy the example from the chakra docs, see what that looks like! Update background colours and text colours to show off your skills 🎉
<Grid templateColumns='repeat(5, 1fr)' gap={6}>
<GridItem bg='green' w='100%' p={4} color='white'>
Javascript
</GridItem>
<GridItem bg='green' w='100%' p={4} color='white'>
React
</GridItem>
<GridItem bg='green' w='100%' p={4} color='white'>
Git
</GridItem>
<GridItem bg='green' w='100%' p={4} color='white'>
Python
</GridItem>
</Grid>
We’re repeating this GridItem
component here a bunch, let’s clean this up a bit!
const SKILLS = ['Javascript', 'React', 'Git', 'Python', 'Django', 'Rust']
<Grid templateColumns='repeat(3, 1fr)' gap={1}>
{SKILLS.map((skill) => {
return (<GridItem bg='green' w='100%' p={4} color='white'>
{skill}
</GridItem>)
})}
</Grid>
NavBar
mkdir src/components
touch src/components/NavBar.tsx
Let’s go through chakra components to see what would work well here!
Tabs! Tabs! Tabs! Let’s add the sample code to our NavBar.tsx
file
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react'
export const NavBar = () => (
<Tabs>
<TabList>
<Tab>One</Tab>
<Tab>Two</Tab>
<Tab>Three</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
<TabPanel>
<p>three!</p>
</TabPanel>
</TabPanels>
</Tabs>
)
and import it into our main App.tsx
export const App = () => (
<ChakraProvider theme={theme}>
<Box textAlign="center" fontSize="xl">
<Grid minH="100vh" p={3}>
<NavBar />
<AboutMe />
<ColorModeSwitcher justifySelf="flex-end" />
</Grid>
</Box>
</ChakraProvider>
)
It’s looking good!
Tab Panel content
<Tabs>
<TabList>
<Tab>About Me</Tab>
<Tab>Projects</Tab>
<Tab>CV</Tab>
<Tab>Contact</Tab>
</TabList>
<TabPanels>
<TabPanel>
<AboutMe />
</TabPanel>
<TabPanel>
<p>Projects</p>
</TabPanel>
<TabPanel>
<p>CV</p>
</TabPanel>
<TabPanel>
<p>Contact</p>
</TabPanel>
</TabPanels>
</Tabs>
And remove the AboutMe
component from App.tsx
Projects view
Let’s create the Projects view by creating a new projects component:
touch src/views/Projects.tsx
Let’s build out a quick Project card - something with an image, title and description
import { Box, Image, Link } from "@chakra-ui/react"
export const Projects = () => (
(
<Box maxW='500px' borderWidth='1px' borderRadius='lg' overflow='hidden' alignContent='center'>
<Link href="https://placeholder.com">
<Image src="https://via.placeholder.com/500X300" />
</Link>
<Box p='4'>
<Box
mt='1'
fontWeight='semibold'
noOfLines={1}
textAlign='left'
>
Project Title
</Box>
<Box fontSize='sm' textAlign='left'>
A one or two sentence short description of the project.
</Box>
</Box>
</Box>
)
)
But we need many of these - probably a smart move to convert this into a reusable component and move it to the component folder instead!
import { Box, Image, Link } from "@chakra-ui/react"
export type ProjectCardProps = {
title: string;
description: string;
link: string;
imageUrl: string;
}
export function ProjectCard(props: ProjectCardProps) {
return (
<Box maxW='500px' borderWidth='1px' borderRadius='lg' overflow='hidden' alignContent='center'>
<Link href={props.link}>
<Image src={props.imageUrl} />
</Link>
<Box p='4'>
<Box
mt='1'
fontWeight='semibold'
noOfLines={1}
textAlign='left'
>
{props.title}
</Box>
<Box fontSize='sm' textAlign='left'>
{props.description}
</Box>
</Box>
</Box>
)
}
Now all we need to do is create a ProjectView, generate a list of projects and pass them along to this component one by one!
import { Grid } from '@chakra-ui/react'
import { ProjectCard, ProjectCardProps } from '../components/ProjectCard'
const PROJECTS: ProjectCardProps[] = [{
imageUrl: 'https://via.placeholder.com/500X300',
title: 'Sit amet porttitor eget dolor',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
link: 'https://placeholder.com',
},
{
imageUrl: 'https://via.placeholder.com/500X300',
title: 'Sit amet porttitor eget dolor',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
link: 'https://placeholder.com',
}]
export function Projects() {
return (
<Grid templateColumns='repeat(3, 1fr)' gap={6}>
{PROJECTS.map((p: ProjectCardProps, index) => {
return <ProjectCard key={index} imageUrl={p.imageUrl} title={p.title} description={p.description} link={p.link} />
}
)}
</Grid>
)
}
npm run build
creates a build
directory with a production build of your app.
Let's install netlofy
npm install netlify-cli -g
And deploy our code
netlify deploy