diff --git a/src/App.css b/src/App.css index 40ddb36..d69b6cb 100644 --- a/src/App.css +++ b/src/App.css @@ -180,6 +180,7 @@ align-content: center; text-align: center; margin-bottom: 12px; + font-family: var(--overpass-font-family); } /* projects */ @@ -190,22 +191,36 @@ display: flex; justify-content: center; align-items: center; - margin-left: 20px; + margin-left: 55px; } .project-card { - background: linear-gradient(135deg, #3f51b5, #363c48); - box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 1px; border-color: var(--border-color); color: var(--white-font-color); cursor: pointer; + transition: transform 0.3s ease-in-out; +} + +.card-title { + font-family: var(--overpass-font-family); } .project-card:hover { transform: translateY(-5px); } +.card-description { + color: #090808; + font-family: var(--overpass-font-family); +} + +.tech-icon { + font-size: 40px; + color: var(--brand); +} + /* timeline */ .timeline-container { margin: 6px 0; @@ -357,3 +372,8 @@ align-items: center; justify-content: center; } + +.footer-text { + color: #000; + font-family: var(--overpass-font-family); +} diff --git a/src/App.jsx b/src/App.jsx index 366eff9..dfda0d9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,6 +2,7 @@ import { useState, useRef } from 'react'; import { BrowserRouter } from 'react-router-dom'; import Header from './components/Header'; import Home from './components/Home'; +// import Projects from './components/Projects'; import Projects from './components/Projects'; import Experience from './components/Experience'; import 'bootstrap/dist/css/bootstrap.min.css'; diff --git a/src/api/projectData.js b/src/api/projectData.js index 88f24bb..d498947 100644 --- a/src/api/projectData.js +++ b/src/api/projectData.js @@ -1,9 +1,10 @@ import jetlogixImage from '../assets/project-images/jetlogix.png' // import PortfolioImage from '../assets/project-images/portfolio.png' // import CoincraftImage from '../assets/project-images/coincraft-home.png' -// import CixhubImage from '../assets/project-images/cixhub.png' +import CixhubImage from '../assets/project-images/cixhub.png' import JetLogixSchema from '../assets/project-images/jetlogix-db-schema.png' -import EventHarborImage from '../assets/project-images/eventharbor.webp' +// import EventHarborImage from '../assets/project-images/eventharbor.webp' + const projects = [ { "name": "JetLogix-frontend", @@ -13,9 +14,9 @@ const projects = [ "topics": [ "react", "react-testing-library", - "bootstrap5", + "bootstrap", "redux-toolkit", - "react-styled-component", + "styled-components", "Redux-toolkit" ], "image": jetlogixImage, @@ -38,13 +39,19 @@ const projects = [ "updated_at": "2023-11-05T15:30:00Z" }, { - "name": "EventHarbor", - "description": "Currently building Event Harbor, a Rails web application that allows users to add, update, and delete events.The application is a work in progress and is built using Ruby on Rails and PostgreSQL as the database,TailwindUI and Tailwindcss for styling, and Rspec for testing.", - "homepage": "https://github.com/RileyManda/event-harbor", - "html_url": "https://github.com/RileyManda/event-harbor", - "topics": ["rails","devise","cancancan","ruby","tailwind - css"], - "image": EventHarborImage, - "created_at": "2023-12-01T12:00:00Z", + "name": "CixHub", + "description": "Cixhub's official website MVP", + "homepage": "https://cixhub.netlify.app/", + "html_url": "https://github.com/RileyManda/cixhub", + "topics": [ + "react", + "react-testing-library", + "nextjs", + "redux-toolkit", + "styled-components", + ], + "image": CixhubImage, + "created_at": "2022-12-01T12:00:00Z", "updated_at": "2023-12-05T15:30:00Z" } diff --git a/src/api/projectIcons.jsx b/src/api/projectIcons.jsx new file mode 100644 index 0000000..c4fdb62 --- /dev/null +++ b/src/api/projectIcons.jsx @@ -0,0 +1,4 @@ +import { FaReact} from "react-icons/fa"; + + +export const getReactIcon = () => ; diff --git a/src/components/ProjectCard.jsx b/src/components/ProjectCard.jsx index 868e4c2..bcdce8d 100644 --- a/src/components/ProjectCard.jsx +++ b/src/components/ProjectCard.jsx @@ -1,16 +1,37 @@ -import { useState } from 'react'; import PropTypes from 'prop-types'; import Button from 'react-bootstrap/Button'; import Card from 'react-bootstrap/Card'; import Badge from 'react-bootstrap/Badge'; -import { AiFillEye, AiFillGithub } from 'react-icons/ai'; -import Accordion from 'react-bootstrap/Accordion'; +import { FaReact, FaNodeJs, FaBootstrap } from "react-icons/fa"; import Stack from 'react-bootstrap/Stack'; +import { AiOutlineLink, AiFillGithub } from 'react-icons/ai'; +import { SiRedux, SiStyledcomponents, SiTestinglibrary, SiTailwindcss } from "react-icons/si"; +import { DiRuby } from "react-icons/di"; +import { BiLogoPostgresql } from "react-icons/bi"; -const techColors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark']; + + +// const techColors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark']; + +const techIconMap = { + react: , + postgresql: , + 'react-testing-library': , + bootstrap: , + 'redux-toolkit': , + 'styled-components': , + 'Redux-toolkit': , + 'ruby on rails': , + 'api authentication': , + rails: , + ruby: , + nodejs: , + nextjs: , + 'tailwind - css': , + +}; const ProjectCard = ({ image, title, description, demo, github, techarray, created, updated }) => { - const [isAccordionOpen, setIsAccordionOpen] = useState(false); const handleDemoClick = () => { window.open(demo, '_blank'); }; @@ -18,52 +39,50 @@ const ProjectCard = ({ image, title, description, demo, github, techarray, creat const handleGithubClick = () => { window.open(github, '_blank'); }; - const toggleAccordion = () => { - setIsAccordionOpen(!isAccordionOpen); - }; + return (
- +
- - - {title} + + + + {title} + - - - About - - {description} - - - -
+ {description} +
{techarray.map((tech, index) => ( - - {tech} - + + {techIconMap[tech]} + ))}
- - - - - Created: {created} + + + + + Created: {created}
- Updated: {updated} + Updated: {updated} -
); }; + ProjectCard.propTypes = { image: PropTypes.string.isRequired, title: PropTypes.string.isRequired, @@ -75,4 +94,4 @@ ProjectCard.propTypes = { created: PropTypes.string.isRequired, }; -export default ProjectCard; \ No newline at end of file +export default ProjectCard; diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx index f10593b..0fdc06c 100644 --- a/src/components/Projects.jsx +++ b/src/components/Projects.jsx @@ -7,6 +7,10 @@ import Col from 'react-bootstrap/Col'; import Stack from 'react-bootstrap/Stack'; import Loader from './Loader'; import { format } from 'date-fns'; +// import SearchField from './SearchField'; +import Nav from 'react-bootstrap/Nav'; +import NavDropdown from 'react-bootstrap/NavDropdown'; +import Navbar from 'react-bootstrap/Navbar'; import ProjectData from '../api/projectData'; const Projects = () => { @@ -41,6 +45,20 @@ const Projects = () => {

Projects

+ + + + + {isLoading && } diff --git a/src/components/ProjectsSandbox.jsx b/src/components/ProjectsSandbox.jsx new file mode 100644 index 0000000..6caa571 --- /dev/null +++ b/src/components/ProjectsSandbox.jsx @@ -0,0 +1,37 @@ +import { Container } from "react-bootstrap"; +import experienceData from "../api/experienceData"; +import Stack from 'react-bootstrap/Stack'; + +const ProjectsSandbox = () => { + return ( +
+
+

Experience

+
+ +
+
    + {experienceData.map((experience, index) => ( +
  • + + {experience.icons.map((icon, i) => ( +
    + {icon} +
    + ))} +     +
    {experience.position}
    +
    {experience.company}
    +

    {experience.date}

    +

    {experience.description}

    +

    +
    • + ))} +
+
+ +
+ ); +}; + +export default ProjectsSandbox;