40 |
47 |
48 |
56 | Projects
57 |
58 |
66 | View some of my latest projects
67 |
68 |
69 |
70 | {projects.map((item, i) => (
71 |
72 |
84 |
97 |
106 |
124 |
125 |
135 |
141 | {item.name}
142 |
143 |
144 | {item.description}
145 |
146 |
147 | {item.tags.map((tag, i) => (
148 |
166 | ))}
167 |
168 |
169 |
190 | }
191 | >
192 | Source Code
193 |
194 |
195 |
196 |
197 |
198 |
199 | ))}
200 |
201 |
202 |
203 |
204 | );
205 | };
206 |
207 | export default Projects;
208 |
--------------------------------------------------------------------------------
/frontend/src/components/Technologies.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import axios from 'axios';
3 |
4 | // Material UI
5 | import Box from '@mui/material/Box';
6 | import Card from '@mui/material/Card';
7 | import CardMedia from '@mui/material/CardMedia';
8 | import CardContent from '@mui/material/CardContent';
9 | import Divider from '@mui/material/Divider';
10 | import Grid from '@mui/material/Grid';
11 | import Typography from '@mui/material/Typography';
12 | import { useTheme } from '@mui/material/styles';
13 |
14 | const Technologies = () => {
15 | const theme = useTheme();
16 |
17 | const [technologies, setTechnologies] = useState([]);
18 |
19 | const fetchTechnologies = () => {
20 | axios
21 | .get('http://127.0.0.1:8000/technologies', {
22 | headers: {
23 | Accept: 'application/json',
24 | },
25 | })
26 | .then((response) => {
27 | setTechnologies(response.data);
28 | })
29 | .catch((error) => console.log(error));
30 | };
31 |
32 | useEffect(() => {
33 | fetchTechnologies();
34 | }, []);
35 |
36 | return (
37 |