Kristian-Roopnarine

const Projects = () => {
    return (
        <>
            <h2>Project Component</h2>
            <div className="ui three cards">
                <ProjectCard /> 
                <ProjectCard />
                <ProjectCard />
                <ProjectCard />
                <ProjectCard />

Kristian-Roopnarine

import React from 'react'

const ProjectCard = () => {
    return (
        <div className="card"> 
            <div className= "image">
                <img></img>
            </div>
            <div className="content">
                <div className="header">

Kristian-Roopnarine

const Skills = () => {

    const frontend = {
        name:'Frontend Stack',
        skills:['JavaScript','React/Redux','HTML','CSS','Bootstrap','SemanticUI']
    }
    const backend = {
        name: "Backend Stack",
        skills: ['Python', 'Django', 'AWS', 'PostgreSQL']
    }

Kristian-Roopnarine

import React from 'react'
import SkillsList from './SkillsList'

const SkillsCard = (props) => {

    return (
        <div className="card">
            <div className ="content">
                <div className= "center aligned header">
                    {props.skills.name}

Kristian-Roopnarine

const Skills = () => {

    const frontend = ['JavaScript','React/Redux','HTML','CSS','Bootstrap','SemanticUI']
    const backend = ['Python', 'Django', 'AWS', 'PostgreSQL']
    const gameDev = ['Unity','Phaser','PyGame']

    return (
        <>
            <h1 className="ui center aligned basic segment">Skills</h1>
            <div className="ui centered raised cards">

Kristian-Roopnarine

const Skills = () => {
  return (
    <div className="ui three column grid">
       <h2>Skills Component</h2>
      <div className="row">
        <div className="column">
             <SkillsList skills = {frontend}/>
         </div>
          <div className="column" >
              <SkillsList skills = {backend}/>

Kristian-Roopnarine

const SkillsList = (props) => {

    return (
        <div className="ui list">
            {props.skills.map(skill => (
                <div className="item" key={skill}>
                    {skill}
                </div>  
            ))}
        </div>

Kristian-Roopnarine

import React from 'react'
import Header from './Header'
import Projects from './Projects'
import Skills from './Skills'

const App = () => {
    return (

        <div>
            <Header />

Kristian-Roopnarine

from django.contrib import admin
from django.urls import path
from rest_framework import routers
from .api import ProjectInfoViewSet

router = routers.DefaultRouter()
router.register('api/projects',ProjectInfoViewSet)

urlpatterns = router.urls

Kristian-Roopnarine

from backend.models import ProjectInfo
from rest_framework import viewsets
from .serializers import ProjectInfoSerializer

# Project Info viewset
# allows us to create a CRUD api without specifying methods for functionality

class ProjectInfoViewSet(viewsets.ModelViewSet):

    queryset = ProjectInfo.objects.filter(show=True)