runlevelzero
/
rubenruiz.org
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

updated media queries, replaced cardColumns with a flexbox, updated description, and added filtering to the project pages

master
Github 3 years ago
parent
a4e4e12b0d
commit
6c531d710c
10 changed files with 465 additions and 40 deletions
Split View Show Diff Stats
  1. +159
    -2
      public/custom.css
  2. +53
    -0
      public/customMediaQuery.css
  3. +2
    -1
      public/index.html
  4. +1
    -1
      public/noscript.css
  5. +1
    -1
      src/homeScreen/GreeterJumboTron.js
  6. +5
    -7
      src/homeScreen/HomePageNav.js
  7. +38
    -0
      src/projects/FilterHeader.js
  8. +36
    -0
      src/projects/FilterTags.js
  9. +149
    -7
      src/projects/ProjectCardView.js
  10. +21
    -21
      src/projects/ProjectCards.js

+ 159
- 2
public/custom.css View File

@@ -2,12 +2,134 @@
ol.breadcrumb {
margin-bottom: 0rem;
}
.zInTop {
z-index: 99;
}
.scrollspy {
padding: 0px;
}
.filterHeader {
z-index: -1;
display: none;
height:0px;
width:100%;
}
.filterHeaderShow {
background-color: aqua;
z-index: -1;
display: block;
witdh:100%;
height:2rem;
animation: filterHeaderAnim .25s;
}
.filterHeaderHide {
z-index: -1;
display: block;
witdh:100%;
animation: filterHeaderAnimRev .25s;
}
.filterHeaderMenu {
display: none;
z-index: 1;

width:100%;
}
.filterHeaderMenuShow {
display: block;
z-index: 1;
position: absolute;
width:100%;
top:6rem;
animation: filterHeaderMenuAnim .25s;
}
.filterHeaderMenuHide {
display: block;
z-index: 1;
position: absolute;
width:100%;
top:4rem;
animation: filterHeaderMenuAnimRev .25s;
}
@keyframes filterHeaderAnim {
0% {height:0rem;}
100% {height:2rem;}
}
@keyframes filterHeaderAnimRev {
0% {height:2rem;}
100% {height:0rem;}
}
@keyframes filterHeaderMenuAnim {
0% {top:4rem;}
100% {top:6rem;}
}
@keyframes filterHeaderMenuAnimRev {
0% {top:6rem;}
100% {top:4rem;}
}
.artToggle {
height:50%;
margin-top:5px;
position: absolute;
right: 10px;
}
.badge {
margin-right: .25rem;
}
.secondary {
color:#6c757d;
}
span.filter {
position:absolute;
right:10px;
transition: .25s;
color:#6c757d;
}
span.filter:hover {
position:absolute;
right:10px;
color:#000;
transition: .25s;
}
.filler {
padding: 16px 8px;
color: white;
-webkit-transition: .35s;
transition: .35s;
}
.navLink:hover {
text-decoration: none;
}
.navActive1 {
background-color: #507DBC;
}
.navActive2 {
background-color: #A1C6EA;
}
.navActive3 {
background-color: #BBD1EA;
}
.navActive4 {
background-color: #DAE3E5;
}
.nav1:hover {
background-color: #507DBC;
}
.nav2:hover {
background-color: #A1C6EA;
}
.nav3:hover {
background-color: #BBD1EA;
color:#888;
}
.nav4:hover {
background-color: #DAE3E5;
color:#444;
}
.greeterJumbotron {
background-image: url('./stedsatnight.jpg');
background-size: cover;
background-repeat: no-repeat;
color:#fff;
height: 89vh;
background-color: #212529;
margin-bottom: 0px;
border-radius: 0px;
@@ -64,4 +186,39 @@ ul.frontPage {

.inSection {
color: blue;
}
}

.badge.badge-outlined.badge-default {
background: #fff;
color: #B0BEC5
}
.badge.badge-outlined.badge-primary {
background: #fff;
color: #2196F3
}
.badge.badge-outlined.badge-secondary {
background: #fff;
color: #323a45
}
.badge.badge-outlined.badge-success {
background: #fff;
color: #64DD17
}
.badge.badge-outlined.badge-warning {
background: #fff;
color: #FFD600
}
.badge.badge-outlined.badge-info {
background: #fff;
color: #29B6F6
}
.badge.badge-outlined.badge-danger {
background: #fff;
color: #ef1c1c
}

+ 53
- 0
public/customMediaQuery.css View File

@@ -2,4 +2,57 @@
.iconText {
display: none;
}
}
.card-img-top {
height:180px;
}
.flex-div {
width: 100%;
display: flex;
margin-top: 2rem;
flex-wrap: wrap;
align-items: center;
}
@media (max-width:1199px) and (min-width:1001px){
.cardContainer {
margin-right: 6%;
margin-left: 6%;
margin-bottom: 1rem;
}
}
@media (max-width:1000px) and (min-width:700px){
.cardContainer {
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1rem;
}
}
@media (max-width:700px) and (min-width:575px){
.cardContainer {
margin-right: 12%;
margin-left: 12%;
margin-bottom: 1rem;
}
}
@media (min-width:1200px), (max-width:574px){
.cardContainer {
margin-right: .5rem;
margin-left: .5rem;
margin-bottom: 1rem;
}
}
@media (max-height:1080px) {
.greeterJumbotron {
height: 89vh;
}
}
@media (min-height:1081px) and (max-height:1819px) {
.greeterJumbotron {
height:91vh;
}
}
@media (min-height:1820px){
.greeterJumbotron {
height:94.5vh;
}
}

+ 2
- 1
public/index.html View File

@@ -35,8 +35,9 @@

<link rel="stylesheet" href="customMediaQuery.css"/>
</head>
<body style="#3300ff">
<body >
<link rel="stylesheet" href="custom.css"/>
<noscript><h1 class="noScript">Hello, My name is Ruben Ruiz.<br>I'm a Computer Science Student at St. Edward's University.<br>To learn more about me, check out my <a class="noScript" href="https://linkedin.com/in/runlevel0">linkedin</a>, <a class="noScript" href="http://github.com/runlevelzero">github</a>, and <a class="noScript" href="https://git.rubenruiz.org">personal projects</a>.<br>Or enable JavaScript to view my portfolio</h1></noscript>
<div id="root"></div>
<!--

+ 1
- 1
public/noscript.css View File

@@ -14,5 +14,5 @@ a.noScript {
color: #333333;
}
a.noScript:hover {
color: #999999;
color: #888;
}

+ 1
- 1
src/homeScreen/GreeterJumboTron.js View File

@@ -18,7 +18,7 @@ export class GreeterJumboTron extends Component {
{this.getProperGreeting()}, my name is Ruben Ruiz.
</h1>
<h5>
I am a Computer Science student at St. Edward's University.
I am a Computer Science student at St. Edward's University.<br></br>You can scroll down to learn more about me or click the button below to
</h5>
<br/>
<Link to="/projects"><Button variant="info">Check out some of my projects</Button></Link>

+ 5
- 7
src/homeScreen/HomePageNav.js View File

@@ -6,14 +6,12 @@ class HomePageNav extends Component {
render() {
return (
<Navbar bg="dark" variant="dark" sticky="top" className="">
<Navbar bg="dark" variant="dark" sticky="top" className="scrollspy">
<Navbar.Collapse className="mr-auto">
<Navbar.Text>
<a style={{"paddingRight":"5px"}} href="#aboutMe">{<span className="">~/AboutMe</span>}</a>
<a style={{"paddingRight":"5px"}} href="#experience">{<span className="">~/Experience</span>}</a>
<a style={{"paddingRight":"5px"}} href="#relevantCoursework">{<span className="">~/Courses</span>}</a>
<a style={{"paddingRight":"5px"}} href="#Skills">{<span className="">~/Skills</span>}</a>
</Navbar.Text>
<a href="#aboutMe" className="navLink">{<div className="filler nav1">~/AboutMe</div>}</a>
<a href="#experience" className="navLink">{<div className="filler nav2">~/Experience</div>}</a>
<a href="#relevantCoursework" className="navLink">{<div className="filler nav3">~/Courses</div>}</a>
<a href="#skills" className="navLink">{<div className="filler nav4">~/Skills</div>}</a>
</Navbar.Collapse>
</Navbar>
);

+ 38
- 0
src/projects/FilterHeader.js View File

@@ -0,0 +1,38 @@
import React, { Component } from 'react';

import {Breadcrumb, Badge} from 'react-bootstrap'

import FilterTags from './FilterTags'
class FilterHeader extends Component {
state = {
showArt: true
}
toggleArt = (evt) => {
if(this.state.showArt){
evt.target.className = "artToggle badge badge-light"
evt.target.innerHTML = "Hiding Art Projects"
this.setState({showArt: false})
this.props.toggleArt()
}
else {
evt.target.className = "artToggle badge badge-info"
evt.target.innerHTML = "Showing Art Projects"
this.setState({showArt: true})
this.props.toggleArt()

}
}
render() {
return (
<React.Fragment>
<div className="filterHeader"></div>
<Breadcrumb className="filterHeaderMenu">
<FilterTags showOnly={this.props.showOnly} tags={this.props.tags}/>
<Badge variant="info" className="artToggle" onClick={this.toggleArt}>Showing Art Projects</Badge>
</Breadcrumb>
</React.Fragment>
);
}
}

export default FilterHeader;

+ 36
- 0
src/projects/FilterTags.js View File

@@ -0,0 +1,36 @@
import React, { Component } from 'react'
import {Badge} from 'react-bootstrap'

export class FilterTags extends Component {
state = {
selected: false
}
showThis = (evt) => {
if(!this.state.selected){
evt.target.className += " badge-outlined"
this.props.showOnly(this.getTagName(evt.target))
this.setState({selected:true})
}
else {
this.props.showOnly(this.getTagName(evt.target))
evt.target.className = evt.target.className.split(" ").slice(0,-1).join(' ')
this.setState({selected:false})
}
}
getTagName = (element) => {
return element.innerHTML
}
render() {
return (
<div style={{paddingLeft:"5px", paddingRight:"5px", marginBottom:"0px"}}>
{this.props.tags.map((tag)=> (
<Badge onClick={this.showThis} className={(this.state.selected)? "badge-outlined" : ""} variant={tag.variant}>
{tag.title}
</Badge>
))}
</div>
)
}
}

export default FilterTags

+ 149
- 7
src/projects/ProjectCardView.js View File

@@ -1,21 +1,163 @@
import React, { Component } from 'react'
import {Container, Breadcrumb, CardDeck, CardColumns} from 'react-bootstrap'
import {Container, Breadcrumb, CardDeck} from 'react-bootstrap'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faFilter} from '@fortawesome/free-solid-svg-icons'

import FilterHeader from './FilterHeader'
import ProjectCards from './ProjectCards'
import 'whatwg-fetch'

export class ProjectCardView extends Component {
state = {
showFilter: false,
showArt: true,
projects: [],
display:[],
tags:[],
filter:[]
}
showOnly = (tagName) => {
if(this.state.filter.length === 1 && this.state.filter[0].title === tagName) {
if(this.state.showArt) {
this.setState({filter:this.state.tags})
this.setState({display:this.state.projects})
this.updateVisibleProjects(this.state.tags)
}
else {
this.setState({showArt:true})
this.toggleArt()
}
}
else {
var newFilter = [this.findTag(tagName)]
this.setState({filter:newFilter})
this.updateVisibleProjects(newFilter)
}
}
findTag = (tagName) => {
console.log(tagName)
for(var i = 0; i < this.state.tags.length; i++) {
console.log(this.state.tags[i])
if(this.state.tags[i].title === tagName) {
return this.state.tags[i]
}
}
return
}
getProjects = async (count) => {
const response = await fetch(`https://api.rubenruiz.org/projects?count=${count}`,{method:"POST"})
const json = await response.json();
//console.log(json)
return json
//return [{"_id":"5df91e782ce8904f68a326ba","title":"Kanban","coverImageUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/Kanban/kanban.png","textUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/Kanban/README.md","shortDesc":"A Kanban board app I made with a team as an intern at Inventive","oneLiner":"Making a kanban board web app","tags":[{"title":"React","variant":"primary"}],"viewCount":77,"__v":0},{"_id":"5e463570be1e980bd1581351","title":"Crochet Tag Project","coverImageUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/CrochetTagProject/20200130_164526.jpg","textUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/CrochetTagProject/readme.md","shortDesc":"A crochet tag I placed in the CS lab at St. Eds.","oneLiner":"Taking crochet to the streets","viewCount":76,"tags":[{"title":"Crochet","variant":"info"}],"__v":0},{"_id":"5ea20178c7524c732c5a49e7","title":"Crafting Interpreters: Making a Language","coverImageUrl":"","textUrl":"","shortDesc":"Making a Lox Interpreter in Java","oneLiner":"Putting the 'j' in jLox","viewCount":2,"tags":[{"title":"Java","variant":"secondary"}]},{"_id":"5ea20257c7524c732c5a49e8","title":"Art Supply Display","coverImageUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/artSupplies/e19ba799-d5d4-47c4-b8bd-6d7805f24a6f.jpg","textUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/artSupplies/readme.md","shortDesc":"Supplies that I used for my textile arts class","oneLiner":"Let's get crafty now!","viewCount":13,"tags":[{"title":"Crochet","variant":"info"},{"title":"Embroidery","variant":"info"}]},{"_id":"5eb1bf0eeba5712c5bd97415","title":"Yarn Graffiti Project","coverImageUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/YarnGrafittiProjectFiles/cover.jpg","textUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/YarnGrafittiProjectFiles/readme.md","shortDesc":"A much larger crochet tag that was placed around my local surroundings","oneLiner":"Taking crochet to the streets once more","tags":[{"title":"Crochet","variant":"info"}],"viewCount":14},{"_id":"5eb1cb76eba5712c5bd97416","title":"String Meditation","coverImageUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/StringProject/cover.jpg","textUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/StringProject/readme.md","shortDesc":"Making some string whilst putting everything into context","oneLiner":"Breathe In... Twist Twist Twist... Breathe Out... Turn...","viewCount":18,"tags":[{"title":"Misc Art","variant":"info"}]},{"_id":"5eb1cfdaeba5712c5bd97417","title":"Embroidery Project","coverImageUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/embroideryProject/cover.jpg","textUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/embroideryProject/readme.md","shortDesc":"Taking my first steps into embroidery and putting it all in perspective","oneLiner":"Putting some perspective on boro designs","tags":[{"title":"Embroidery","variant":"info"}],"viewCount":18},{"_id":"5eb1dceeeba5712c5bd97418","title":"Mobile Programming Assignments","coverImageUrl":"","textUrl":"","shortDesc":"Some of the Homework and In class assignments for Mobile Programming","oneLiner":"Swiftly making apps","viewCount":2,"tags":[{"title":"Swift","variant":"danger"}]},{"_id":"5eb1dd80eba5712c5bd97419","title":"Mobile Programming Final Assignment","coverImageUrl":"","textUrl":"","shortDesc":"How I made Coup in Swift","oneLiner":"Swiftly making apps","viewCount":0,"tags":[{"title":"Swift","variant":"danger"},{"title":"NodeJS","variant":"primary"}]}]
//window.fetch("api.rubenruiz.org/projects")
}
getAllProjects = async () => {
await this.getProjects(-1)
.then(res => {
this.setState({projects:res})
this.setState({display:res})
this.getTags(res)
return res
})

}
updateVisibleProjects = (filter) => {
var display = []
for(var i = 0; i < this.state.projects.length; i++) {
var containsTag = false
for(var j = 0; j < this.state.projects[i].tags.length; j++) {
for (var k = 0; k < filter.length; k++) {
if(containsTag) break;
console.log(`(${this.state.projects[i].title})${this.state.projects[i].tags[j].title}: *${filter[k].title}*`)
if(this.state.projects[i].tags[j].title === filter[k].title) containsTag = true
}
}
if(containsTag) display.push(this.state.projects[i])
}
this.setState({display})
}
toggleArt =() => {
if(this.state.showArt) {
this.setState({showArt:false})
var filter = []
for(var i =0; i < this.state.tags.length; i++) {
if(this.state.tags[i].variant !== "info") {
filter.push(this.state.tags[i])
}
}

this.setState({filter})
this.updateVisibleProjects(filter)
}
else {
this.setState({showArt:true})
this.setState({filter:this.state.tags})
this.updateVisibleProjects(this.state.tags)
}
}
getNumProjects = async (num) => {
await this.getProjects(num)
.then(res => {
var projects = res
if(num < res.length) {
projects = res.slice(0,num)
}
return projects
}).then(res=> {
this.setState({projects:res})
return res
})

}
getTags = (cards) => {
var cardObj = {};
for(var i = 0; i < cards.length; i++) {
cards[i].tags.map((tag) => (
cardObj[tag.title] = tag
))
}
var cardList = Object.values(cardObj)
cardList.sort((a, b) =>{return (a.variant > b.variant)? 1 : -1})
this.setState({tags:cardList})
this.setState({filter:cardList})
}
toggleFilter = (evt) => {
if(!this.state.showFilter) {
document.querySelector(".filterHeader").className = "filterHeaderShow"
document.querySelector(".filterHeaderMenu").className = "filterHeaderMenuShow"
this.setState({showFilter:true})
}
else {
document.querySelector(".filterHeaderShow").className = "filterHeaderHide"
document.querySelector(".filterHeaderMenuShow").className = "filterHeaderMenuHide"
window.setTimeout(() => {
document.querySelector(".filterHeaderHide").className = "filterHeader"
document.querySelector(".filterHeaderMenuHide").className = "filterHeaderMenu"
},249);
this.setState({showFilter:false})
}
}
componentDidMount(){
this.getAllProjects()
}
render() {
return (
<React.Fragment>
<Breadcrumb>
<Breadcrumb.Item active>Projects</Breadcrumb.Item>
<Breadcrumb className="zInTop">
<Breadcrumb.Item active className="zInTop">Projects</Breadcrumb.Item>
<span className="filter" onClick={this.toggleFilter}><FontAwesomeIcon icon={faFilter}/></span>
</Breadcrumb>
<br/>
<FilterHeader showOnly={this.showOnly} tags={this.state.filter} toggleArt={this.toggleArt}/>
<Container>
<CardColumns>
<ProjectCards/>
</CardColumns>
<div className="flex-div">
<ProjectCards cards={this.state.display}/>
</div>
</Container>
</React.Fragment>
)

+ 21
- 21
src/projects/ProjectCards.js View File

@@ -10,10 +10,11 @@ export class ProjectCards extends Component {
projects : []
}
getProjects = async (count) => {
const response = await fetch(`https://api.rubenruiz.org/projects?count=${count}`,{method:"POST"})
const json = await response.json();
console.log(json)
return json
//const response = await fetch(`https://api.rubenruiz.org/projects?count=${count}`,{method:"POST"})
//const json = await response.json();
//console.log(json)
//return json
return [{"_id":"5df91e782ce8904f68a326ba","title":"Kanban","coverImageUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/Kanban/kanban.png","textUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/Kanban/README.md","shortDesc":"A Kanban board app I made with a team as an intern at Inventive","oneLiner":"Making a kanban board web app","tags":[{"title":"React","variant":"primary"}],"viewCount":77,"__v":0},{"_id":"5e463570be1e980bd1581351","title":"Crochet Tag Project","coverImageUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/CrochetTagProject/20200130_164526.jpg","textUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/CrochetTagProject/readme.md","shortDesc":"A crochet tag I placed in the CS lab at St. Eds.","oneLiner":"Taking crochet to the streets","viewCount":76,"tags":[{"title":"Crochet","variant":"info"}],"__v":0},{"_id":"5ea20178c7524c732c5a49e7","title":"Crafting Interpreters: Making a Language","coverImageUrl":"","textUrl":"","shortDesc":"Making a Lox Interpreter in Java","oneLiner":"Putting the 'j' in jLox","viewCount":2,"tags":[{"title":"Java","variant":"secondary"}]},{"_id":"5ea20257c7524c732c5a49e8","title":"Art Supply Display","coverImageUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/artSupplies/e19ba799-d5d4-47c4-b8bd-6d7805f24a6f.jpg","textUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/artSupplies/readme.md","shortDesc":"Supplies that I used for my textile arts class","oneLiner":"Let's get crafty now!","viewCount":13,"tags":[{"title":"Crochet","variant":"info"},{"title":"Embroidery","variant":"info"}]},{"_id":"5eb1bf0eeba5712c5bd97415","title":"Yarn Graffiti Project","coverImageUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/YarnGrafittiProjectFiles/cover.jpg","textUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/YarnGrafittiProjectFiles/readme.md","shortDesc":"A much larger crochet tag that was placed around my local surroundings","oneLiner":"Taking crochet to the streets once more","tags":[{"title":"Crochet","variant":"info"}],"viewCount":14},{"_id":"5eb1cb76eba5712c5bd97416","title":"String Meditation","coverImageUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/StringProject/cover.jpg","textUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/StringProject/readme.md","shortDesc":"Making some string whilst putting everything into context","oneLiner":"Breathe In... Twist Twist Twist... Breathe Out... Turn...","viewCount":18,"tags":[{"title":"Misc Art","variant":"info"}]},{"_id":"5eb1cfdaeba5712c5bd97417","title":"Embroidery Project","coverImageUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/embroideryProject/cover.jpg","textUrl":"https://raw.githubusercontent.com/runlevelzero/Portfolio-WriteUps/master/embroideryProject/readme.md","shortDesc":"Taking my first steps into embroidery and putting it all in perspective","oneLiner":"Putting some perspective on boro designs","tags":[{"title":"Embroidery","variant":"info"}],"viewCount":18},{"_id":"5eb1dceeeba5712c5bd97418","title":"Mobile Programming Assignments","coverImageUrl":"","textUrl":"","shortDesc":"Some of the Homework and In class assignments for Mobile Programming","oneLiner":"Swiftly making apps","viewCount":2,"tags":[{"title":"Swift","variant":"danger"}]},{"_id":"5eb1dd80eba5712c5bd97419","title":"Mobile Programming Final Assignment","coverImageUrl":"","textUrl":"","shortDesc":"How I made Coup in Swift","oneLiner":"Swiftly making apps","viewCount":0,"tags":[{"title":"Swift","variant":"danger"},{"title":"NodeJS","variant":"primary"}]}]
//window.fetch("api.rubenruiz.org/projects")
}
getAllProjects = async () => {
@@ -48,24 +49,23 @@ export class ProjectCards extends Component {
}
}
render() {

console.log(this.state.projects)
return (
this.state.projects.map((project) =>(
<Link to={`/proj/${project._id}`} style={{ textDecoration: 'none' }}>
<Card style={{width:'20rem','color':'#000'}}>
<Card.Img variant='top' src={project.coverImageUrl}/>
<CardTags tags={project.tags}/>
<Card.Title style={{padding:"5px"}}>
{project.title}
</Card.Title>
<Card.Text style={{paddingLeft:"5px", paddingRight:"5px", paddingBottom:"5px", paddingTop:"0px"}}>
{project.shortDesc}
</Card.Text>
</Card>
</Link>
this.props.cards.map((project) =>(
<div className="cardContainer">
<Link to={`/proj/${project._id}`} style={{ textDecoration: 'none' }}>
<Card style={{width:'20rem', 'color':'#000'}}>
<Card.Img variant='top' src={project.coverImageUrl}/>
<CardTags tags={project.tags}/>
<Card.Title style={{padding:"5px"}}>
{project.title}
</Card.Title>
<Card.Text style={{paddingLeft:"5px", paddingRight:"5px", paddingBottom:"5px", paddingTop:"0px"}}>
{project.shortDesc}
</Card.Text>
</Card>
</Link>
</div>
)
)
)

Write Preview
Loading…
Cancel
Save