Skip to content

Latest commit

 

History

History
376 lines (301 loc) · 9.16 KB

follow_along.mdx

File metadata and controls

376 lines (301 loc) · 9.16 KB

Before we get started

You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.

If you are cloning the repository

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

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

Some organization

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>
  )
}

building your app

npm run build creates a build directory with a production build of your app.

Deploying your app on netlify

Let's install netlofy

npm install netlify-cli -g

And deploy our code

netlify deploy