Skip to content

Commit

Permalink
Merge pull request #108 from Albert-2/height-fixed
Browse files Browse the repository at this point in the history
Height fixed
  • Loading branch information
TheAvinashK authored Oct 15, 2023
2 parents 5cf9c95 + 78a6137 commit 20fb27b
Show file tree
Hide file tree
Showing 5 changed files with 6,053 additions and 7,851 deletions.
9 changes: 7 additions & 2 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-scripts": "^5.0.1",
"web-vitals": "^1.0.1"
},
"scripts": {
Expand All @@ -34,5 +34,10 @@
"last 1 firefox version",
"last 1 safari version"
]
}
},
"description": "If you're looking at this section, chances are that you wanted to know how the website functions.",
"main": "index.js",
"devDependencies": {},
"author": "",
"license": "ISC"
}
8 changes: 4 additions & 4 deletions website/src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@
transform: rotate(360deg);
}
}
body{
body {
color: white;
}
h1{
h1 {
padding: 20px;
}
.button{
.button {
margin-bottom: 30px;
}
}
108 changes: 75 additions & 33 deletions website/src/App.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { Suspense } from 'react';
import { useState } from 'react';
import './App.css';
const Cardui = React.lazy(() => import('./Cardui'));
import React, { Suspense } from "react";
import { useState } from "react";
import "./App.css";
const Cardui = React.lazy(() => import("./Cardui"));
// import * as data from 'https://raw.githubusercontent.com/Open-Source-Community-VIT-AP/OpenSource101/master/.data/complete-data.json';

function App() {
Expand All @@ -10,49 +10,91 @@ function App() {
const [data, setdata] = useState([]);

const getapi = () => {

fetch('https://raw.githubusercontent.com/Open-Source-Community-VIT-AP/OpenSource101/master/.data/complete-data.json')
fetch(
"https://raw.githubusercontent.com/Open-Source-Community-VIT-AP/OpenSource101/master/.data/complete-data.json"
)
.then((response) => response.json())
.then((json) => {
setdata(json);

})
}
});
};
getapi();
return (
<div className="App">
<h1>Awesome Contributors</h1>
<a href="https://github.com/Open-Source-Community-VIT-AP/OpenSource101" target="_blank">

<svg className="button" xmlns="http://www.w3.org/2000/svg" width="143.674" height="38.874" viewBox="0 0 143.674 38.874">
<g id="Group_67" data-name="Group 67" transform="translate(-1468.11 -450.911)">
<rect id="Rectangle_493" data-name="Rectangle 493" width="143.674" height="38.874" rx="10" transform="translate(1468.11 450.911)" fill="#fff" />
<g id="Group_66" data-name="Group 66" transform="translate(1479.326 459.072)">
<path id="Icon_awesome-github" data-name="Icon awesome-github" d="M7.847,18.981c0,.095-.109.17-.246.17-.156.014-.265-.061-.265-.17s.109-.17.246-.17S7.847,18.872,7.847,18.981Zm-1.471-.213c-.033.095.061.2.2.232a.222.222,0,0,0,.293-.095c.028-.095-.061-.2-.2-.246A.243.243,0,0,0,6.376,18.768Zm2.091-.08c-.137.033-.232.123-.218.232s.137.156.279.123.232-.123.218-.218S8.6,18.673,8.467,18.688ZM11.579.563A11.342,11.342,0,0,0,0,12.1,11.858,11.858,0,0,0,8.017,23.418c.605.109.818-.265.818-.572s-.014-1.911-.014-2.9c0,0-3.311.709-4.006-1.41,0,0-.539-1.376-1.315-1.731,0,0-1.083-.743.076-.728A2.5,2.5,0,0,1,5.4,17.292a2.5,2.5,0,0,0,3.448.989,2.629,2.629,0,0,1,.757-1.594c-2.644-.293-5.312-.676-5.312-5.227A3.585,3.585,0,0,1,5.411,8.674a4.469,4.469,0,0,1,.123-3.212C6.523,5.155,8.8,6.74,8.8,6.74a11.174,11.174,0,0,1,5.941,0S17.014,5.151,18,5.463a4.467,4.467,0,0,1,.123,3.212,3.677,3.677,0,0,1,1.22,2.786c0,4.564-2.786,4.929-5.43,5.227a2.8,2.8,0,0,1,.8,2.195c0,1.594-.014,3.566-.014,3.954,0,.307.218.681.818.572a11.749,11.749,0,0,0,7.937-11.3A11.6,11.6,0,0,0,11.579.563ZM4.6,16.876c-.061.047-.047.156.033.246s.184.109.246.047.047-.156-.033-.246S4.659,16.815,4.6,16.876Zm-.511-.383c-.033.061.014.137.109.184a.141.141,0,0,0,.2-.033c.033-.061-.014-.137-.109-.184C4.2,16.431,4.12,16.446,4.087,16.493Zm1.533,1.684c-.076.061-.047.2.061.293.109.109.246.123.307.047s.033-.2-.061-.293C5.823,18.115,5.681,18.1,5.619,18.177Zm-.539-.7c-.076.047-.076.17,0,.279s.2.156.265.109a.216.216,0,0,0,0-.293C5.279,17.467,5.156,17.42,5.08,17.482Z" transform="translate(0 -0.563)" />
<text id="GitHub_repo" data-name="Source Code" transform="translate(29.674 15.943)" font-size="16" font-family="ProductSans-Bold, Product Sans" font-weight="700" letter-spacing="0.01em"><tspan x="0" y="0">GitHub repo</tspan></text>
<a
href="https://github.com/Open-Source-Community-VIT-AP/OpenSource101"
target="_blank"
rel="noreferrer"
>
<svg
className="button"
xmlns="http://www.w3.org/2000/svg"
width="143.674"
height="38.874"
viewBox="0 0 143.674 38.874"
>
<g
id="Group_67"
data-name="Group 67"
transform="translate(-1468.11 -450.911)"
>
<rect
id="Rectangle_493"
data-name="Rectangle 493"
width="143.674"
height="38.874"
rx="10"
transform="translate(1468.11 450.911)"
fill="#fff"
/>
<g
id="Group_66"
data-name="Group 66"
transform="translate(1479.326 459.072)"
>
<path
id="Icon_awesome-github"
data-name="Icon awesome-github"
d="M7.847,18.981c0,.095-.109.17-.246.17-.156.014-.265-.061-.265-.17s.109-.17.246-.17S7.847,18.872,7.847,18.981Zm-1.471-.213c-.033.095.061.2.2.232a.222.222,0,0,0,.293-.095c.028-.095-.061-.2-.2-.246A.243.243,0,0,0,6.376,18.768Zm2.091-.08c-.137.033-.232.123-.218.232s.137.156.279.123.232-.123.218-.218S8.6,18.673,8.467,18.688ZM11.579.563A11.342,11.342,0,0,0,0,12.1,11.858,11.858,0,0,0,8.017,23.418c.605.109.818-.265.818-.572s-.014-1.911-.014-2.9c0,0-3.311.709-4.006-1.41,0,0-.539-1.376-1.315-1.731,0,0-1.083-.743.076-.728A2.5,2.5,0,0,1,5.4,17.292a2.5,2.5,0,0,0,3.448.989,2.629,2.629,0,0,1,.757-1.594c-2.644-.293-5.312-.676-5.312-5.227A3.585,3.585,0,0,1,5.411,8.674a4.469,4.469,0,0,1,.123-3.212C6.523,5.155,8.8,6.74,8.8,6.74a11.174,11.174,0,0,1,5.941,0S17.014,5.151,18,5.463a4.467,4.467,0,0,1,.123,3.212,3.677,3.677,0,0,1,1.22,2.786c0,4.564-2.786,4.929-5.43,5.227a2.8,2.8,0,0,1,.8,2.195c0,1.594-.014,3.566-.014,3.954,0,.307.218.681.818.572a11.749,11.749,0,0,0,7.937-11.3A11.6,11.6,0,0,0,11.579.563ZM4.6,16.876c-.061.047-.047.156.033.246s.184.109.246.047.047-.156-.033-.246S4.659,16.815,4.6,16.876Zm-.511-.383c-.033.061.014.137.109.184a.141.141,0,0,0,.2-.033c.033-.061-.014-.137-.109-.184C4.2,16.431,4.12,16.446,4.087,16.493Zm1.533,1.684c-.076.061-.047.2.061.293.109.109.246.123.307.047s.033-.2-.061-.293C5.823,18.115,5.681,18.1,5.619,18.177Zm-.539-.7c-.076.047-.076.17,0,.279s.2.156.265.109a.216.216,0,0,0,0-.293C5.279,17.467,5.156,17.42,5.08,17.482Z"
transform="translate(0 -0.563)"
/>
<text
id="GitHub_repo"
data-name="Source Code"
transform="translate(29.674 15.943)"
font-size="16"
font-family="ProductSans-Bold, Product Sans"
font-weight="700"
letter-spacing="0.01em"
>
<tspan x="0" y="0">
GitHub repo
</tspan>
</text>
</g>
</g>
</svg>
</a>

<div className="cards">
{data.filter((val) => {
return val
}).map((val, key) => {
return (
<Suspense fallback={<div>Loading...</div>}>

<Cardui
name={val["github-username"]}
game={val["favourite-game"]}
lang={val["favourite-language"]}
color={val["favourite-color"]}
/>
</Suspense>
);
})}
{data
.filter((val) => {
return val;
})
.map((val, key) => {
return (
<Suspense fallback={<div>Loading...</div>}>
<Cardui
name={val["github-username"]}
game={val["favourite-game"]}
lang={val["favourite-language"]}
color={val["favourite-color"]}
/>
</Suspense>
);
})}
</div>

</div>
);
}
Expand Down
128 changes: 65 additions & 63 deletions website/src/cardui.css
Original file line number Diff line number Diff line change
@@ -1,80 +1,82 @@
body{
background-color: #000;
body {
background-color: #000;
}

.cards{
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: auto;
.cards {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: auto;
}
.card{
background-color: #558bff;
border-radius: 20px;
border: 1px solid white;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.178);
/* max-width: 250px; */
width: 280px;
margin: 20px;
.card {
background-color: #558bff;
border-radius: 20px;
border: 1px solid white;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.178);
/* max-width: 250px; */
width: 280px;
height: 500px;
/* height: fit-content; */
margin: 20px;
}
.container{
position: relative;
clip-path: polygon(0 0,100% 0, 100% 85%, 0 100%);
.container {
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
.imgc{
width: 100%;
display: block;
border-radius: 20px 20px 0 0;
.imgc {
width: 100%;
display: block;
border-radius: 20px 20px 0 0;
}
.container:after{
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 20px 20px 0 0;
opacity: 0.7;
.container:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 20px 20px 0 0;
opacity: 0.7;
}

.details{
padding-top: 10px;
padding-left: 20px;
padding-bottom: 10px;
.details {
padding-top: 10px;
padding-left: 20px;
padding-bottom: 10px;
}
.details>h3{
color: #ffffff;
font-weight: 600;
font-size: 18px;
margin: 10px 0 15px 0;
text-transform: uppercase;
letter-spacing: 1.2px;
text-align: left;
-ms-word-break: break-all;
.details > h3 {
color: #ffffff;
font-weight: 600;
font-size: 18px;
margin: 10px 0 15px 0;
text-transform: uppercase;
letter-spacing: 1.2px;
text-align: left;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
}
.details>p{
color: #121212;
font-size: 15px;
line-height: 30px;
font-weight: 600;
text-align: left;
-ms-word-break: break-all;
.details > p {
color: #121212;
font-size: 15px;
line-height: 30px;
font-weight: 600;
text-align: left;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
}
.details>p>span{
/* padding: 1px; */
border-radius: 500px;
border: 1px solid #ffffff;
.details > p > span {
/* padding: 1px; */
border-radius: 500px;
border: 1px solid #ffffff;
}
a{
text-decoration: none;
a {
text-decoration: none;
}
.fadein {
transition: all 0.5s ease-in-out;
}
.fadein{
transition: all 0.5s ease-in-out;
}
Loading

0 comments on commit 20fb27b

Please sign in to comment.