diff --git a/.idea/PersonalWebsite_Static.iml b/.idea/PersonalWebsite_Static.iml index 77f595c..1924757 100644 --- a/.idea/PersonalWebsite_Static.iml +++ b/.idea/PersonalWebsite_Static.iml @@ -13,5 +13,6 @@ + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml index f930822..bcb4ff8 100644 --- a/.idea/jsLibraryMappings.xml +++ b/.idea/jsLibraryMappings.xml @@ -1,6 +1,6 @@ - + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 4f481d3..4031c0c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,15 +1,11 @@ import React from "react"; import "./App.scss"; -import { Footer } from "./components/Footer"; -import { Header } from "./components/Header"; import { Main } from "./components/Main"; function App() { return ( -
-
+
-
); } diff --git a/src/components/AboutMe/AboutMe.scss b/src/components/AboutMe/AboutMe.scss index 3917fce..f2df7a0 100644 --- a/src/components/AboutMe/AboutMe.scss +++ b/src/components/AboutMe/AboutMe.scss @@ -10,7 +10,7 @@ } .about-me-card { - background: var(--about-me); + //background: var(--about-me); border-radius: 5px; margin: 0 5px 0; padding: 10px; @@ -18,31 +18,24 @@ } #about-me { - background: var(--about-me); + //background: var(--about-me); border-radius: 5px; padding: 15px; width: fit-content; #info-parent { - display: flex; - flex-direction: row; - - #specific-info { - flex: 1 1 0; - } - - #fun-info { - flex: 1 1 0; - } + display: grid; + grid-template-columns: 1fr 1fr; @media screen and (max-width: 660px) { - flex-direction: column; + grid-template-columns: 1fr; } } h1 { font-family: "Fira Code", monospace; font-weight: 500; + font-size: 46px; } h2 { diff --git a/src/components/AboutMe/AboutMe.tsx b/src/components/AboutMe/AboutMe.tsx index bba0d0b..7f5629d 100644 --- a/src/components/AboutMe/AboutMe.tsx +++ b/src/components/AboutMe/AboutMe.tsx @@ -30,80 +30,49 @@ export function AboutMe() {
  • Location: Southern California
    • + + + +
    +
    +

    Find Me:

    +
    • - Projects:{" "} - -
      • -
    • - Resume: Over here + Email:
    • - Find Me: - + > + @cobular_ + +
      • -
    -
    -
    -

    I'm:

    -
      - - - -
    • - doing (general stuff - in class, projects, sleeping, games) -
      • -       -
    • rather colorblind
      • +
    • + GitHub:{" "} + + JakeCover + +
      • +
    • + Telegram:{" "} + + @cobular + +
      • +
    • Elsewhere: Probably @cobular
    diff --git a/src/components/Main.tsx b/src/components/Main.tsx index 5cc24a1..ea7b199 100644 --- a/src/components/Main.tsx +++ b/src/components/Main.tsx @@ -6,11 +6,7 @@ import { Resume } from "./Resume"; export function Main() { return (
    - - - - - +
    ); } diff --git a/src/components/ProjectGrid.scss b/src/components/ProjectGrid.scss index 29a80e8..732cd01 100644 --- a/src/components/ProjectGrid.scss +++ b/src/components/ProjectGrid.scss @@ -1,6 +1,6 @@ @import "~include-media/dist/_include-media.scss"; -$breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-large: 1560px); +$breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-large: 1560px, xx-large: 1900px); // Override Sass min() @function min($numbers...) { @@ -13,9 +13,22 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar } #project-grid-parent { - margin: 10px; background: var(--grid-background); border-radius: 5px; + margin: 10px; + + @include media(">=medium") { + width: 90%; + margin: auto; + } + + + @include media(">=x-large") { + width: 80%; + max-width: 1900px; + margin: auto; + } + & > #project-header { background: var(--grid-header-background); @@ -50,13 +63,13 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar //padding: 10px; @include media("<=x-small") { - .GridSizer, .OneWide, .FourByOne .Medium { + .GridSizer, .OneWide, .FourByOne, .Medium { width: 100%; } } @include media(">x-small", "=small", "=x-large") { + @include media(">=x-large", "=xx-large") { + .GridSizer, .OneWide { + width: 16.6%; + } + .Medium { + width: 33%; + } + .FourByOne { + width: 49.8%; } } } @@ -206,6 +231,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar @include media(">x-large") { .image { width: 40%; + padding-right: 10px; } } } @@ -229,11 +255,11 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar width: 30ch; } - @include media(">small") { + @include media(">medium") { flex-direction: row; } - @include media("<=small") { + @include media("<=medium") { flex-direction: column; .description { width: 95%; diff --git a/src/components/ProjectGrid.tsx b/src/components/ProjectGrid.tsx index a50a122..984029a 100644 --- a/src/components/ProjectGrid.tsx +++ b/src/components/ProjectGrid.tsx @@ -19,6 +19,9 @@ import Foresight from "../images/foresightsports.png"; import Distest from "../images/distest.svg"; import Scoresaver from "../images/scoresaver.svg"; import Hashicorp from "../images/HashiCorp_Logo_no_text.png"; +import Bennu from "../images/bennu.gif"; +import KatSite from "../images/kat-site.png"; + type GridElementImageProps = { image_url: string; @@ -231,7 +234,7 @@ export function ProjectGrid() { }); return ( -
    +

    </> My Projects

    @@ -246,31 +249,33 @@ export function ProjectGrid() { title={"ElaticMatch"} org={"CodeDay"} text={ - `A set of tools, including a custom suggestion and weighting system, as well as a custom matching - algorithm that I wrote and used to match around 350 students to the best-fitting mentors in the CodeDay + `A set of tools, including a custom suggestion and weighting system, as well as a custom matching + algorithm that I wrote and used to match around 350 students to the best-fitting mentors in the CodeDay Labs summer internship program in 2020.` } link={"https://github.com/codeday/labs-elastic-match"} /> + + + - @@ -332,7 +337,7 @@ export function ProjectGrid() { title={"Personal Website"} org={"Random Projects"} text={ - `You're looking at it! There's not a whole lot to this, it's just a React site hosted on GitHub Pages, + `You're looking at it! There's not a whole lot to this, it's just a React site hosted on GitHub Pages, but I didn't know React before starting on this so I'm pretty proud of it.` } link={"https://github.com/JakeCover/PersonalWebsite_Static"} @@ -342,8 +347,8 @@ export function ProjectGrid() { link={"https://github.com/JakeCover/NomadJobTemplatesTool"} org={"Random Projects"} text={ - `A little custom tool to allow you to use jinga-esque text substitutions in Nomad jobfiles to help - centralize the definition of service traefik tags. This mainly makes it easier to update and change + `A little custom tool to allow you to use jinga-esque text substitutions in Nomad jobfiles to help + centralize the definition of service traefik tags. This mainly makes it easier to update and change networking configuration across many jobs easily.` } /> @@ -351,9 +356,9 @@ export function ProjectGrid() { title={"Assorted Discord Bots"} org={"Random Projects"} text={ - `I've made quite a number of discord bots over time! Some of them, like ReplyBot, which added a reply - functionality to Discord years before they finally implemented it first-party, have been obsoleted - nowadays, others like DiscordChannelMirror really aren't significantly notable, and many more have been + `I've made quite a number of discord bots over time! Some of them, like ReplyBot, which added a reply + functionality to Discord years before they finally implemented it first-party, have been obsoleted + nowadays, others like DiscordChannelMirror really aren't significantly notable, and many more have been lost to time and past me's lack of understanding of the importance of backup. I digress, however I really do love writing these sorts of applications!` } @@ -363,12 +368,37 @@ export function ProjectGrid() { org={"Random Projects"} link={"https://github.com/OVRTools"} text={ - `This one's a bit more work in progress than some of the others here. It is a set of tools to help people - develop OpenVR plugins more easily and independently from Unity. It will eventually grow to include + `This one's a bit more work in progress than some of the others here. It is a set of tools to help people + develop OpenVR plugins more easily and independently from Unity. It will eventually grow to include multiple additional input methods and other tools to allow users to interact with other OVR plugins more easily.` } /> + + +
    diff --git a/src/images/bennu.gif b/src/images/bennu.gif new file mode 100644 index 0000000..3f7374d Binary files /dev/null and b/src/images/bennu.gif differ diff --git a/src/images/bennu.jpg b/src/images/bennu.jpg new file mode 100644 index 0000000..e5d6575 Binary files /dev/null and b/src/images/bennu.jpg differ diff --git a/src/images/kat-site.jpg b/src/images/kat-site.jpg new file mode 100644 index 0000000..1edfd78 Binary files /dev/null and b/src/images/kat-site.jpg differ diff --git a/src/images/kat-site.png b/src/images/kat-site.png new file mode 100644 index 0000000..f329be5 Binary files /dev/null and b/src/images/kat-site.png differ diff --git a/src/vars.scss b/src/vars.scss index 0cccbd0..7c8750f 100644 --- a/src/vars.scss +++ b/src/vars.scss @@ -1,16 +1,16 @@ :root { --text: black; - --background: #3767a8; + --background: #FDFFFC; --header: #84B7DB; --footer: var(--header); - --about-me: #F1F1F1; - --grid-background: #FECEA8; - --grid-header-background: #1C1C1c; - --grid-header-text: #F1F1F1; - --grid-element-background: #F1F1F1; + --about-me: #FDFFFC; + --grid-background: #E4F5DC; + --grid-header-background: #A4ABA1; + --grid-header-text: #black; + --grid-element-background: #FDFFFC; --chainlink-icon-background: rgba(224, 255, 255, 0.7); - --link-color: #1890ff; - --grid-element-subheader: darkgrey; + --link-color: #9D18DB; + --grid-element-subheader: #CAABD9; } //:root { @@ -24,60 +24,6 @@ // --grid-header-text: black; // --grid-element-background: #FFFFFF; // --chainlink-icon-background: rgba(224, 255, 255, 0.7); -// --link-color: white; +// --link-color: grey; // --grid-element-subheader: #F7A8B8; //} - -// SASS style sheet */ -// Palette color codes */ -// Palette URL: http://paletton.com/#uid=5320u0k7JRF0n+X3HY4c4I2gzvX */ - -// Feel free to copy&paste color codes to your application */ - - -// As hex codes */ - -$color-primary-0: #B0E8CF; // Main Primary color */ -$color-primary-1: #FCFFFE; -$color-primary-2: #DBF8EB; -$color-primary-3: #82D0AD; -$color-primary-4: #55B086; - -$color-secondary-1-0: #B1CFE4; // Main Secondary color (1) */ -$color-secondary-1-1: #FCFEFF; -$color-secondary-1-2: #DCECF7; -$color-secondary-1-3: #82ABC9; -$color-secondary-1-4: #5482A3; - -$color-secondary-2-0: #D8F7BB; // Main Secondary color (2) */ -$color-secondary-2-1: #FDFFFC; -$color-secondary-2-2: #EDFDDF; -$color-secondary-2-3: #BFEF95; -$color-secondary-2-4: #A5E46E; - - - -// As RGBa codes */ - -$rgba-primary-0: rgba(176,232,207,1); // Main Primary color */ -$rgba-primary-1: rgba(252,255,254,1); -$rgba-primary-2: rgba(219,248,235,1); -$rgba-primary-3: rgba(130,208,173,1); -$rgba-primary-4: rgba( 85,176,134,1); - -$rgba-secondary-1-0: rgba(177,207,228,1); // Main Secondary color (1) */ -$rgba-secondary-1-1: rgba(252,254,255,1); -$rgba-secondary-1-2: rgba(220,236,247,1); -$rgba-secondary-1-3: rgba(130,171,201,1); -$rgba-secondary-1-4: rgba( 84,130,163,1); - -$rgba-secondary-2-0: rgba(216,247,187,1); // Main Secondary color (2) */ -$rgba-secondary-2-1: rgba(253,255,252,1); -$rgba-secondary-2-2: rgba(237,253,223,1); -$rgba-secondary-2-3: rgba(191,239,149,1); -$rgba-secondary-2-4: rgba(165,228,110,1); - - - -// Generated by Paletton.com © 2002-2014 */ -// http://paletton.com */