Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

F/projects #13

Merged
merged 5 commits into from
Dec 10, 2023
Merged

F/projects #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1dcc2a7
Removed card background
RileyManda Dec 10, 2023
672f1ac
Remobed badhes and implememnted tech stack icons on project card
RileyManda Dec 10, 2023
b2263de
Updated tech stack icons colors
RileyManda Dec 10, 2023
4da5bad
Updated card and body font family
RileyManda Dec 10, 2023
6d0affd
Added transition to project card
RileyManda Dec 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 23 additions & 3 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@
align-content: center;
text-align: center;
margin-bottom: 12px;
font-family: var(--overpass-font-family);
}

/* projects */
Expand All @@ -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;
Expand Down Expand Up @@ -357,3 +372,8 @@
align-items: center;
justify-content: center;
}

.footer-text {
color: #000;
font-family: var(--overpass-font-family);
}
1 change: 1 addition & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
29 changes: 18 additions & 11 deletions src/api/projectData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -13,9 +14,9 @@ const projects = [
"topics": [
"react",
"react-testing-library",
"bootstrap5",
"bootstrap",
"redux-toolkit",
"react-styled-component",
"styled-components",
"Redux-toolkit"
],
"image": jetlogixImage,
Expand All @@ -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"
}

Expand Down
4 changes: 4 additions & 0 deletions src/api/projectIcons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { FaReact} from "react-icons/fa";


export const getReactIcon = () => <FaReact key="1" />;
83 changes: 51 additions & 32 deletions src/components/ProjectCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,88 @@
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: <FaReact />,
postgresql: <BiLogoPostgresql />,
'react-testing-library': <SiTestinglibrary />,
bootstrap: <FaBootstrap />,
'redux-toolkit': <SiRedux />,
'styled-components': <SiStyledcomponents />,
'Redux-toolkit': <FaBootstrap />,
'ruby on rails': <DiRuby />,
'api authentication': <FaReact />,
rails: <DiRuby />,
ruby: <FaReact />,
nodejs: <FaNodeJs />,
nextjs: <FaNodeJs />,
'tailwind - css': <SiTailwindcss />,

};

const ProjectCard = ({ image, title, description, demo, github, techarray, created, updated }) => {
const [isAccordionOpen, setIsAccordionOpen] = useState(false);
const handleDemoClick = () => {
window.open(demo, '_blank');
};

const handleGithubClick = () => {
window.open(github, '_blank');
};
const toggleAccordion = () => {
setIsAccordionOpen(!isAccordionOpen);
};

return (
<div>
<Card className="project-card" style={{ width: '23rem', marginBottom: '3rem', height: isAccordionOpen ? 'auto' : '550px' }}>
<Card className="project-card" style={{ width: '23rem', marginBottom: '3rem', height: '550px' }}>
<div className="screw top-left" />
<div className="screw top-right" />
<div className="screw bottom-left" />
<div className="screw bottom-right" />
<Card.Img variant="top" src={image} style={{ height: '250px' }} />
<Card.ImgOverlay style={{ height: '250px' }}>
<Badge bg="dark" style={{ opacity: '0.8' }}><Card.Title style={{ fontSize: '18px' }}>{title}</Card.Title></Badge>
<Card.Img variant="top" src={image} style={{ height: '250px', objectFit: 'cover' }} />
<Card.ImgOverlay style={{ height: '250px', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
<Badge bg="dark" style={{ opacity: '0.8' }}>
<Card.Title className="card-title" style={{ fontSize: '18px', color: 'white' }}>{title}</Card.Title>
</Badge>
</Card.ImgOverlay>
<Card.Body>
<Accordion style={{ width: '100%', fontSize: '14px' }}>
<Accordion.Item eventKey="0">
<Accordion.Header onClick={toggleAccordion}>About</Accordion.Header>
<Accordion.Body>
<Card.Text>{description}</Card.Text>
</Accordion.Body>
</Accordion.Item>
</Accordion>
<div className="badge-container">
<Card.Text className="card-description">{description}</Card.Text>
<div className="tech-icon">
{techarray.map((tech, index) => (
<Badge pill key={index} bg={techColors[index % techColors.length]} style={{ fontSize: '12px' }} >
{tech}
</Badge>
<span key={index} className="tech-icon" style={{ marginRight: '5px', marginBottom: '5px' }}>
{techIconMap[tech]}
</span>
))}
</div>

</Card.Body>
<Card.Footer bg="dark">
<Stack direction="horizontal" gap={3}>
<Button onClick={handleDemoClick} size="sm" variant="dark"><AiFillEye style={{ color: 'white' }} /></Button>
<Button onClick={handleGithubClick} size="sm" variant="dark"><AiFillGithub style={{ color: 'white' }} /></Button>
<small style={{ fontSize: '9px', fontWeight: 'bold', color: 'white' }}>Created: {created}</small>
<Card.Footer className="card-footer">
<Stack direction="horizontal" gap={3} className="footer-stack">
<Button onClick={handleDemoClick} size="sm" variant="dark">
<AiOutlineLink style={{ marginRight: '5px' }} />

</Button>
<Button onClick={handleGithubClick} size="sm" variant="dark">
<AiFillGithub style={{ marginRight: '5px' }} />
</Button>
<small className="footer-text">Created: {created}</small>
<div className="vr" />
<small style={{ fontSize: '9px', fontWeight: 'bold', color: 'white' }}>Updated: {updated}</small>
<small className="footer-text">Updated: {updated}</small>
</Stack>
</Card.Footer>

</Card>
</div>
);
};

ProjectCard.propTypes = {
image: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
Expand All @@ -75,4 +94,4 @@ ProjectCard.propTypes = {
created: PropTypes.string.isRequired,
};

export default ProjectCard;
export default ProjectCard;
18 changes: 18 additions & 0 deletions src/components/Projects.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -41,6 +45,20 @@ const Projects = () => {
<div className="section-title">
<h2>Projects</h2>
</div>

<Navbar expand="lg" sticky="top" variant="dark" className="search-bar">
<Nav>
<NavDropdown title="Filter by:" id="collapsible-nav-dropdown">
<NavDropdown.Item href="#react">React</NavDropdown.Item>
<NavDropdown.Item href="#redux">Redux-toolkit</NavDropdown.Item>
<NavDropdown.Item href="#js">Javascript</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#fs">Full-stack</NavDropdown.Item>
<NavDropdown.Item href="#rr">Ruby|Rails</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar>

<Stack gap={3}>
{isLoading && <Loader />}
<Row xs="auto" md="auto" className="justify-content-center">
Expand Down
37 changes: 37 additions & 0 deletions src/components/ProjectsSandbox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { Container } from "react-bootstrap";
import experienceData from "../api/experienceData";
import Stack from 'react-bootstrap/Stack';

const ProjectsSandbox = () => {
return (
<div className="experience-container">
<div className="section-title">
<h2>Experience</h2>
</div>
<Container fluid className="py-5 d-flex justify-content-center align-items-center">
<div className="main-timeline">
<ul className="timeline-with-icons">
{experienceData.map((experience, index) => (
<li className={`timeline-item mb-5 ${index % 2 === 0 ? 'left' : 'right'}`} key={index}>
<Stack direction="vertical" gap={3} className="timeline-icon">
{experience.icons.map((icon, i) => (
<div key={i} style={{ color: experience.iconColor[i] }}>
{icon}
</div>
))}
</Stack>
<h5 className="fw-bold">{experience.position}</h5>
<h5 className="fw-bold">{experience.company}</h5>
<p className="text-muted mb-2 fw-bold">{experience.date}</p>
<p className="text-muted">{experience.description}</p>
<p style={{ color: experience.iconColor }}></p>
</li>
))}
</ul>
</div>
</Container>
</div>
);
};

export default ProjectsSandbox;