AtHeartEngineer/website
1
0
Fork 0
mirror of https://github.com/tlsnotary/website.git synced 2026-01-09 14:58:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Updated cards and background

Browse Source
This commit is contained in:
AtHeartEngineer
2022-05-24 10:49:05 -04:00
parent fe81b07596
commit ee278760b5
15 changed files with 152 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.tsx
View File

@@ -1,13 +1,17 @@
import EthLogo from './EthLogo';
import Starter from './Starter';
import Projects from './Projects';
import './App.css';
function App() {
return (
<div className="App container-sm">
{Starter()}
{Projects()}
<EthLogo />
<Starter />
<Projects />
</div>
);
}

6
src/EthLogo.css Normal file
View File

@@ -0,0 +1,6 @@
.eth-diamond-logo {
position: fixed;
max-width: 5vh;
bottom: 1rem;
left: 1rem;
}

12
src/EthLogo.tsx Normal file
View File

@@ -0,0 +1,12 @@
import eth from './images/eth-diamond-color.png';
import './EthLogo.css';
function EthLogo() {
return (
<img className="eth-diamond-logo" src={eth} alt="Ethereum logo" />
);
}
export default EthLogo;

3
src/Project.css → src/ProjectCard.css
View File

@@ -1,5 +1,7 @@
.card {
border-radius: .35rem;
box-shadow: -22px 10px 0px var(--gray);
border-color: var(--gray);
}
.card-footer {
@@ -7,6 +9,7 @@
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
gap: 1.0rem;
background-color: transparent;
border-top: 3px solid var(--gray);
}
.link {

8
src/Project.tsx → src/ProjectCard.tsx
View File

@@ -3,7 +3,7 @@ import github from './images/github.svg';
import discord from './images/discord.svg';
import twitter from './images/twitter.svg';
import telegram from './images/telegram.svg';
import './Project.css'
import './ProjectCard.css'
export interface ProjectProps {
name: string;
@@ -30,7 +30,7 @@ function renderLink(url: string, source: string, icon: string): any {
);
}
function Project(props: ProjectProps) {
function ProjectCard(props: ProjectProps) {
let links = props.links.map((link) => {
if (link.github) {
return renderLink(link.github, 'github', github);
@@ -48,7 +48,7 @@ function Project(props: ProjectProps) {
});
return (
<div className="card">
<div className="card border border-5 border-dark p-3">
<div className="card-body">
<h5 className="card-title">{props.name}</h5>
<p className="card-text">{props.description}</p>
@@ -58,4 +58,4 @@ function Project(props: ProjectProps) {
);
}
export default Project;
export default ProjectCard;

2
src/Projects.css
View File

@@ -1,5 +1,5 @@
.Projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 1.5rem;
gap: 2.5rem;
}

4
src/Projects.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import Project, { ProjectProps } from './Project';
import ProjectCard, { ProjectProps } from './ProjectCard';
import ProjectData from './Projects.json';
import './Projects.css';
@@ -11,7 +11,7 @@ function Projects() {
}, []);
let _projects = projects.map((project) => {
return (<Project key={project.name} {...project} />);
return (<ProjectCard key={project.name} {...project} />);
})
return (

7
src/Starter.css
View File

@@ -37,4 +37,11 @@
.arrow img {
height: auto;
width: 48px;
}
.intro {
max-width: 45rem;
border-radius: .35rem;
border-color: var(--gray);
box-shadow: -22px 10px 0px var(--gray);
}

50
src/Starter.tsx
View File

@@ -3,13 +3,15 @@ import logo from './images/pse-logo.svg';
import arrow from './images/arrow.svg';
import discord from './images/discord.svg';
import twitter from './images/twitter.svg';
import './Starter.css'
import './Starter.css';
function Starter() {
return (
<div className="starter">
<img src={logo} alt="eth pse logo" className="ethlogo" />
<h1>
<div className="starter">
<img src={logo} alt="eth pse logo" className="pselogo" />
<div className="intro h-100 p-3 bg-light-purple border border-5 border-dark">
<h1 className="pt-3 pb-5">
Welcome to
<br />
Privacy & Scaling Explorations
@@ -18,30 +20,30 @@ function Starter() {
A multidisciplinary team supported by the Ethereum Foundation. PSE explores new use cases
for zero knowledge proofs and other cryptographic primitives through research and
proof-of-concept implementation.
<br />
We facilitate the integration of ZK primitives into decentralized applications.
</p>
<div className="center">
<div className="link">
<a href="https://twitter.com/PrivacyScaling">
<img src={twitter} alt="" className="icon" />
<div>Twitter</div>
</a>
</div>
<div className="link">
<a href="https://discord.gg/g5YTV7HHbh">
<img src={discord} alt="" className="icon" />
<div>Discord</div>
</a>
</div>
<p>We facilitate the integration of ZK primitives into decentralized applications.</p>
</div>
<div className="center">
<div className="link">
<a href="https://twitter.com/PrivacyScaling">
<img src={twitter} alt="" className="icon" />
<div>Twitter</div>
</a>
</div>
<div className="col-md-12 arrow">
<img src={arrow} alt="" />
<div className="fst-italic" style={{ opacity: '75%', paddingTop: '1rem' }}>
more info below
</div>
<div className="link">
<a href="https://discord.gg/g5YTV7HHbh">
<img src={discord} alt="" className="icon" />
<div>Discord</div>
</a>
</div>
</div>
<div className="col-md-12 arrow">
<img src={arrow} alt="" />
<div className="fst-italic" style={{ opacity: '75%', paddingTop: '1rem' }}>
more info below
</div>
</div>
</div>
);
}

BIN
src/images/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

BIN
src/images/eth-diamond-color.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
src/images/footer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/images/pse-deco.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

58
src/images/pse-deco.svg Normal file
View File

@@ -0,0 +1,58 @@
<svg width="1130" height="765" viewBox="0 0 1130 765" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_2_276)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M318.743 584.037C398.016 584.037 462.279 519.774 462.279 440.501C462.279 361.228 398.016 296.965 318.743 296.965C239.47 296.965 175.207 361.228 175.207 440.501C175.207 519.774 239.47 584.037 318.743 584.037ZM318.742 513.755C359.199 513.755 391.997 480.958 391.997 440.501C391.997 400.044 359.199 367.247 318.742 367.247C278.285 367.247 245.488 400.044 245.488 440.501C245.488 480.958 278.285 513.755 318.742 513.755Z" fill="#53D3E0"/>
<path d="M456.279 440.501C456.279 516.46 394.702 578.037 318.743 578.037V590.037C401.33 590.037 468.279 523.087 468.279 440.501H456.279ZM318.743 302.965C394.702 302.965 456.279 364.542 456.279 440.501H468.279C468.279 357.914 401.33 290.965 318.743 290.965V302.965ZM181.207 440.501C181.207 364.542 242.784 302.965 318.743 302.965V290.965C236.157 290.965 169.207 357.914 169.207 440.501H181.207ZM318.743 578.037C242.784 578.037 181.207 516.46 181.207 440.501H169.207C169.207 523.087 236.157 590.037 318.743 590.037V578.037ZM385.997 440.501C385.997 477.644 355.886 507.755 318.742 507.755V519.755C362.513 519.755 397.997 484.272 397.997 440.501H385.997ZM318.742 373.247C355.886 373.247 385.997 403.357 385.997 440.501H397.997C397.997 396.73 362.513 361.247 318.742 361.247V373.247ZM251.488 440.501C251.488 403.357 281.599 373.247 318.742 373.247V361.247C274.971 361.247 239.488 396.73 239.488 440.501H251.488ZM318.742 507.755C281.599 507.755 251.488 477.644 251.488 440.501H239.488C239.488 484.272 274.971 519.755 318.742 519.755V507.755Z" fill="#282A2D"/>
<path d="M175.207 440.831C175.207 388.94 205.48 339.175 259.366 302.483C312.071 266.596 383.142 246.089 457.536 245.207C460.3 245.175 462.543 247.419 462.543 250.183L462.543 440.831L175.207 440.831Z" fill="#CBF2F6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M169 447.038L169 440.831C169 386.357 200.779 334.867 255.872 297.353C309.748 260.667 382.059 239.895 457.463 239.001C463.728 238.927 468.751 244.007 468.751 250.183L468.751 447.038L169 447.038ZM181.566 434.624L456.336 434.624L456.336 251.431C383.417 252.519 314.095 272.727 262.859 307.614C212.394 341.977 183.873 387.509 181.566 434.624Z" fill="#282A2D"/>
</g>
<g filter="url(#filter1_d_2_276)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M817 447C738.023 447 674 382.977 674 304C674 225.023 738.023 161 817 161C895.977 161 960 225.023 960 304C960 382.977 895.977 447 817 447ZM774.371 284.222C774.371 298.954 781.827 311.943 793.167 319.609V384.951C793.167 387.241 795.023 389.097 797.312 389.097H836.688C838.978 389.097 840.834 387.241 840.834 384.951V319.582C852.151 311.912 859.589 298.937 859.589 284.222C859.589 260.658 840.513 241.555 816.98 241.555C793.448 241.555 774.371 260.658 774.371 284.222Z" fill="#A6E275"/>
<path d="M793.167 319.609L796.528 314.639L799.167 316.423V319.609H793.167ZM840.834 319.582H834.834V316.401L837.467 314.615L840.834 319.582ZM680 304C680 379.663 741.337 441 817 441V453C734.71 453 668 386.29 668 304H680ZM817 167C741.337 167 680 228.337 680 304H668C668 221.71 734.71 155 817 155V167ZM954 304C954 228.337 892.663 167 817 167V155C899.29 155 966 221.71 966 304H954ZM817 441C892.663 441 954 379.663 954 304H966C966 386.29 899.29 453 817 453V441ZM789.806 324.58C776.885 315.844 768.371 301.028 768.371 284.222H780.371C780.371 296.881 786.77 308.042 796.528 314.639L789.806 324.58ZM787.167 384.951V319.609H799.167V384.951H787.167ZM797.312 395.097C791.709 395.097 787.167 390.554 787.167 384.951H799.167C799.167 383.927 798.337 383.097 797.312 383.097V395.097ZM836.688 395.097H797.312V383.097H836.688V395.097ZM846.834 384.951C846.834 390.554 842.291 395.097 836.688 395.097V383.097C835.664 383.097 834.834 383.927 834.834 384.951H846.834ZM846.834 319.582V384.951H834.834V319.582H846.834ZM865.589 284.222C865.589 301.008 857.096 315.809 844.2 324.549L837.467 314.615C847.206 308.015 853.589 296.866 853.589 284.222H865.589ZM816.98 235.555C843.834 235.555 865.589 257.352 865.589 284.222H853.589C853.589 263.964 837.191 247.555 816.98 247.555V235.555ZM768.371 284.222C768.371 257.352 790.126 235.555 816.98 235.555V247.555C796.769 247.555 780.371 263.964 780.371 284.222H768.371Z" fill="#282A2D"/>
</g>
<g filter="url(#filter2_d_2_276)">
<path d="M304.297 218.832C298.213 213.646 298.668 204.11 305.219 199.527L536.745 37.571C543.04 33.1673 551.789 35.5994 554.909 42.6203L811.905 621.023C817.184 632.904 802.713 643.713 792.818 635.278L304.297 218.832Z" fill="#FF9C92"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M547.183 46.0532C546.222 43.8918 543.529 43.143 541.591 44.4987L310.065 206.455C308.048 207.866 307.908 210.801 309.781 212.398L798.303 628.844C799.244 629.646 800.045 629.829 800.676 629.826C801.4 629.822 802.235 629.561 802.992 628.995C803.749 628.43 804.237 627.703 804.446 627.01C804.628 626.406 804.681 625.585 804.179 624.455L547.183 46.0532ZM531.899 30.6433C542.551 23.1916 557.356 27.3072 562.635 39.1874L819.631 617.59C828.564 637.695 804.076 655.985 787.333 641.712L298.812 225.266C288.517 216.49 289.288 200.354 300.373 192.6L531.899 30.6433Z" fill="#282A2D"/>
<g filter="url(#filter3_d_2_276)">
<path d="M645.12 130.726C645.534 127.108 642.711 123.934 639.07 123.923L517.208 123.569C512.781 123.556 509.812 128.11 511.609 132.156L608.513 350.249C611.039 355.934 619.453 354.645 620.162 348.465L645.12 130.726Z" fill="#FFE1DE"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M520.806 132.033L636.421 132.37L612.743 338.948L520.806 132.033ZM517.233 115.114C506.678 115.083 499.597 125.942 503.883 135.589L600.787 353.682C606.809 367.236 626.872 364.163 628.561 349.428L653.519 131.688C654.508 123.063 647.776 115.494 639.094 115.468L517.233 115.114Z" fill="#282A2D"/>
<defs>
<filter id="filter0_d_2_276" x="115.777" y="239" width="352.973" height="380.067" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-53.2226" dy="29.0305"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.156863 0 0 0 0 0.164706 0 0 0 0 0.176471 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_276"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_276" result="shape"/>
</filter>
<filter id="filter1_d_2_276" x="622.401" y="155" width="343.599" height="322.872" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-45.5992" dy="24.8723"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.156863 0 0 0 0 0.164706 0 0 0 0 0.176471 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_276"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_276" result="shape"/>
</filter>
<filter id="filter2_d_2_276" x="252.328" y="35.3616" width="560.702" height="628.925" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-47.6781" dy="26.0062"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.156863 0 0 0 0 0.164706 0 0 0 0 0.176471 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_276"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_276" result="shape"/>
</filter>
<filter id="filter3_d_2_276" x="463.398" y="123.569" width="181.762" height="256.318" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-47.6781" dy="26.0062"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.156863 0 0 0 0 0.164706 0 0 0 0 0.176471 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_276"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_276" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

28
src/index.css
View File

@@ -1,10 +1,36 @@
:root {
--light-purple: #CFC4FB;
--light-purple2: rgb(195, 181, 250);
--green: #A6E275;
--aqua: #53D3E0;
--light-aqua: #CBF2F6;
--pink: #FF9C92;
--light-pink: #FFE1DE;
--gold: #FFE94D;
--gray: #282A2D;
}
.bg-light-purple {
background-color: var(--light-purple2);
}
.bg-light-pink {
background-color: var(--light-pink)
}
.bg-light-aqua {
background-color: var(--light-aqua)
}
body {
color: black;
background: rgb(195, 181, 250);
background: linear-gradient(180deg, rgba(219, 211, 252, 1) 0%, rgba(219, 211, 252, 1) 100%);
background-attachment: fixed;
height: 100vh;
font-family: 'Inter', sans-serif;
background-image: url('./images/pse-deco.png');
background-repeat: no-repeat;
background-position: right -20em bottom 5em;
}
@media screen and (max-width: 800px) {