cobular
/
PersonalWebsite_Static
mirror of https://github.com/JakeCover/PersonalWebsite_Static
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

More accessible

Browse Source
replace/751505f387aa233a81d76014e0c5eb4bc22d8336
Cobular 4 years ago
parent 7bb233dc3e
commit dcdc084a7e
5 changed files with 69 additions and 38 deletions
Show Stats Download Patch File Download Diff File

40
src/components/AboutMe/AboutMe.scss
Unescape Escape View File

@ -72,16 +72,36 @@
} }
} }
} button {
background: none!important;
border: none;
padding: 0!important;
color: var(--link-color);
cursor: pointer;
text-decoration: underline;
text-decoration-thickness: 0.15em;
text-decoration-color: rgba(0, 0, 0, 0);
transition: text-decoration 300ms;
button { &:hover, &:focus, &:focus-visible {
background: none!important; text-decoration-color: var(--link-color);
border: none; border: none;
padding: 0!important; }
color: var(--link-color); }
cursor: pointer;
} a {
color: var(--link-color);
text-decoration: underline;
text-decoration-thickness: 0.15em;
text-decoration-color: rgba(0, 0, 0, 0);
transition: text-decoration 300ms;
a { &:hover, &:focus, &:focus-visible {
color: var(--link-color); text-decoration-color: var(--link-color);
}
}
} }

30
src/components/AboutMe/AboutMe.tsx
Unescape Escape View File

@ -3,7 +3,6 @@ import { Tooltip } from "antd";
import { Age } from "./Age"; import { Age } from "./Age";
import { LastFmLi } from "./LastFmLi"; import { LastFmLi } from "./LastFmLi";
export function AboutMe() { export function AboutMe() {
function EmailHandler() { function EmailHandler() {
const email = "Y29udGFjdEBqYWtlY292ZXIubWU="; const email = "Y29udGFjdEBqYWtlY292ZXIubWU=";
@ -13,10 +12,10 @@ export function AboutMe() {
return ( return (
<div id={"about-me-parent"}> <div id={"about-me-parent"}>
<div id={"about-me"} className={"about-me-card"}> <div id={"about-me"} className={"about-me-card"}>
<h1>Hi! I'm Jake!</h1> <h1 aria-label={"Title"}>Hi! I'm Jake!</h1>
<div id={"info-parent"}> <div id={"info-parent"} aria-label={"About Me"}>
<div id={"specific-info"}> <div id={"specific-info"} aria-label={"Facts"}>
<h2> A bit about me:</h2> <h2> A bit about me:</h2>
<ul> <ul>
<li> <li>
@ -32,7 +31,7 @@ export function AboutMe() {
<LastFmLi /> <LastFmLi />
</ul> </ul>
</div> </div>
<div id={"fun-info"}> <div id={"fun-info"} aria-label={"Contacts"}>
<h2>Find Me:</h2> <h2>Find Me:</h2>
<ul> <ul>
<li> <li>
@ -42,9 +41,10 @@ export function AboutMe() {
Twitter:{" "} Twitter:{" "}
<Tooltip title={":("}> <Tooltip title={":("}>
<a <a
href={"https://github.com/JakeCover"} href={"https://twitter.com/cobular_"}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
tabIndex={0}
> >
@cobular_ @cobular_
</a> </a>
@ -53,9 +53,10 @@ export function AboutMe() {
<li> <li>
GitHub:{" "} GitHub:{" "}
<a <a
href={"https://github.com/JakeCover"} href={"https://github.com/JakeCover"}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
tabIndex={0}
> >
JakeCover JakeCover
</a> </a>
@ -63,9 +64,10 @@ export function AboutMe() {
<li> <li>
Telegram:{" "} Telegram:{" "}
<a <a
href={"https://t.me/cobular"} href={"https://t.me/cobular"}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
tabIndex={0}
> >
@cobular @cobular
</a> </a>

18
src/components/ProjectGrid.scss
Unescape Escape View File

@ -164,10 +164,14 @@ $breakpoints: (x-small: 520px, small: 760px, medium: 1100px, large: 1400px, x-la
box-shadow: 0 1px 2px var(--grid-element-shadow); box-shadow: 0 1px 2px var(--grid-element-shadow);
transition: box-shadow 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out;
}
.GridElementInternal:hover { &:hover {
box-shadow: 0 2px 5px var(--grid-element-shadow); box-shadow: 0 2px 5px var(--grid-element-shadow);
}
&:focus {
border: 2px solid lightblue;
}
} }
h2 { h2 {
@ -288,11 +292,13 @@ $breakpoints: (x-small: 520px, small: 760px, medium: 1100px, large: 1400px, x-la
.LinkIcon { .LinkIcon {
position: absolute; position: absolute;
right: 12px; right: 16px;
top: 12px; top: 15px;
font-size: 24px; font-size: 24px;
color: black;
background: var(--chainlink-icon-background); background: var(--chainlink-icon-background);
border-radius: 5px; border-radius: 5px;
} }
svg {
fill: var(--chainlink-icon-color);
}

14
src/components/ProjectGrid.tsx
Unescape Escape View File

@ -41,7 +41,7 @@ function SmallElement({ title, text, link, org }: GridElementProps) {
if (link === undefined) { if (link === undefined) {
return ( return (
<div className={"OneWide GridElement"}> <div className={"OneWide GridElement"}>
<div className={"GridElementInternal"}> <div className={"GridElementInternal"} role={"gridcell"}>
<div className={"title"}> <div className={"title"}>
<h2>{title}</h2> <h2>{title}</h2>
{org && <h3>{org}</h3>} {org && <h3>{org}</h3>}
@ -54,12 +54,13 @@ function SmallElement({ title, text, link, org }: GridElementProps) {
); );
} }
return ( return (
<div className={"OneWide GridElement"}> <div className={"OneWide GridElement"} role={"gridcell"}>
<a <a
className={"Link GridElementInternal"} className={"Link GridElementInternal"}
href={link} href={link}
rel={"noreferrer"} rel={"noreferrer"}
target={"_blank"} target={"_blank"}
tabIndex={0}
> >
<div className={"title"}> <div className={"title"}>
<h2>{title}</h2> <h2>{title}</h2>
@ -106,6 +107,7 @@ function SmallElementPic({
href={link} href={link}
target={"_blank"} target={"_blank"}
rel={"noreferrer"} rel={"noreferrer"}
tabIndex={0}
> >
<div className={"image"}> <div className={"image"}>
<img src={image_url} alt={image_alt} /> <img src={image_url} alt={image_alt} />
@ -151,6 +153,7 @@ function MediumElement({
href={link} href={link}
target={"_blank"} target={"_blank"}
rel={"noreferrer"} rel={"noreferrer"}
tabIndex={0}
> >
<div className={"GridElementInternal"}> <div className={"GridElementInternal"}>
<div className={"image"}> <div className={"image"}>
@ -198,6 +201,7 @@ function LargeElementPic({
href={link} href={link}
target={"_blank"} target={"_blank"}
rel={"noreferrer"} rel={"noreferrer"}
tabIndex={0}
> >
<div className={"image"}> <div className={"image"}>
<img src={image_url} alt={image_alt} /> <img src={image_url} alt={image_alt} />
@ -233,15 +237,15 @@ export function ProjectGrid() {
return ( return (
<div id={"project-grid-background"} style={{ paddingBottom: 20 }}> <div id={"project-grid-background"} style={{ paddingBottom: 20 }}>
<div id={"project-grid-parent"}> <div id={"project-grid-parent"} aria-label={"My Projects"}>
<div id={"project-header"}> <div id={"project-header"} aria-label={"Projects Header"}>
<h2>&lt;/&gt; My Projects</h2> <h2>&lt;/&gt; My Projects</h2>
<p> <p>
A gallery of some of my most interesting projects. Look for{" "} A gallery of some of my most interesting projects. Look for{" "}
<LinkOutlined />, click those projects for more information! <LinkOutlined />, click those projects for more information!
</p> </p>
</div> </div>
<div id={"project-grid"}> <div id={"project-grid"} aria-label={"Projects Grid"}>
<div className={"GridSizer"} /> <div className={"GridSizer"} />
<SmallElement <SmallElement
title={"ElaticMatch"} title={"ElaticMatch"}

5
src/vars.scss
Unescape Escape View File

@ -1,8 +1,6 @@
:root { :root {
--text: white; --text: white;
--background: #1f2022; --background: #1f2022;
--header: #84B7DB;
--footer: var(--header);
--about-me: #F1F1F1; --about-me: #F1F1F1;
--grid-background: var(--background); --grid-background: var(--background);
--grid-header-background: var(--background); --grid-header-background: var(--background);
@ -11,9 +9,10 @@
--grid-element-border: #6f6f6f; --grid-element-border: #6f6f6f;
--grid-element-shadow: rgba(255, 255, 255, 0.3); --grid-element-shadow: rgba(255, 255, 255, 0.3);
--grid-element-header: rgb(169 162 228 / 100%); --grid-element-header: rgb(169 162 228 / 100%);
--grid-element-subheader: darkgrey;
--chainlink-icon-background: rgba(43, 43, 43, 0.3); --chainlink-icon-background: rgba(43, 43, 43, 0.3);
--chainlink-icon-color: var(--grid-element-subheader);
--link-color: var(--grid-element-header); --link-color: var(--grid-element-header);
--grid-element-subheader: darkgrey;
} }

Write Preview
Loading…
Cancel
Save