Skip to content

Commit 239ad51

Browse files
jacobkroljacobkrol
committed
Added new projects and created app live links
1 parent 2be95d0 commit 239ad51

File tree

9 files changed

+37
-13
lines changed

9 files changed

+37
-13
lines changed

‎src/components/pages/ProjectsPage.js‎

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ import Efficiency from '../../graphics/disk-packing.gif';
2727
import Waves from '../../graphics/waves-example.gif';
2828
import Trifolium from '../../graphics/trifolium-mechanism.gif';
2929
import Collatz from '../../graphics/collatz-tree.gif';
30+
import KnittyGritty from '../../graphics/knitty-gritty.png';
31+
import Ascii from '../../graphics/ascii-autostereogram.png';
32+
import DesChiffres from '../../graphics/des-chiffres.png';
33+
import DesertWanderer from '../../graphics/desert-wanderer.png';
34+
import MazeRacer from '../../graphics/maze-racer.gif';
35+
import ExampleBook from '../../graphics/example-book.png';
3036

3137
function ProjectsPage() {
3238
return (
@@ -60,33 +66,47 @@ function ProjectsPage() {
6066
<div className="content-row content-block-container">
6167
<ContentBlock title="utilities." bg={3} size="medium">
6268
<div className="content-row">
63-
<MediaCard title="LP Timer" star={5} subtitle="A simple timer application with time signals to help the forensics community" language="ReactJS, Node.js, Express" imgName={LPTimer} link="https://kroljs.com/LP-Timer" />
64-
<MediaCard title="Split The Bill" star={5} subtitle="Need to split a bill proportional to everyone's costs? This is the solution!" language="ReactJS" imgName={SplitTheBill} link="https://github.com/jacobkrol/Split-The-Bill" />
65-
<MediaCard title="Scoreboard" star={5} subtitle="Scoreboard interface for personal game nights" language="JavaScript, HTML5, CSS" imgName={Scoreboard} link="https://kroljs.com/Scoreboard" />
66-
<MediaCard title="Extemp Panel App" star={3} subtitle="A web app to share and practice extemporaneous speaking prompts" language="ReactJS, Node.js, Express" imgName={EPALogo} />
69+
<MediaCard title="Split The Bill" star={5} subtitle="Need to split a bill proportional to everyone's costs? This is the solution!" language="ReactJS" imgName={SplitTheBill} link="https://github.com/jacobkrol/Split-The-Bill" visit="https://kroljs.com/Split-The-Bill" />
70+
<MediaCard title="Scoreboard" star={5} subtitle="Scoreboard interface for personal game nights" language="JavaScript, HTML, CSS" imgName={Scoreboard} link="https://github.com/jacobkrol/Scoreboard" visit="https://kroljs.com/Scoreboard" />
71+
<MediaCard title="Knitty Gritty" star={4} subtitle="An installable app for counting stitches and rows on multiple projects" language="ReactJS" imgName={KnittyGritty} link="https://github.com/jacobkrol/KnittyGritty" visit="https://kroljs.com/KnittyGritty" />
72+
<MediaCard title="ASCII Autostereogram" star={4} subtitle="Magic Eye? Step aside. Hide custom text in a stereogram block of text" language="ReactJS" imgName={Ascii} link="https://github.com/jacobkrol/JavascriptAsciiAutostereogram" visit="https://kroljs.com/JavascriptAsciiAutostereogram" />
73+
</div>
74+
</ContentBlock>
75+
<ContentBlock title="pwa games." bg={2} size="medium">
76+
<div className="content-row">
77+
<MediaCard title="Nertz" star={4} subtitle="Compete against computer opponents in a game of Nertz" language="ReactJS, Node.js, Express" imgName={Nertz} link="https://github.com/jacobkrol/play-nertz-offline" visit="https://kroljs.com/play-nertz-offline" />
78+
<MediaCard title="Des Chiffres" star={4} subtitle="Combine the numbers together with arithmetic to reach the target as quickly as possible" language="ReactJS" imgName={DesChiffres} link="https://github.com/jacobkrol/DesChiffres" visit="https://kroljs.com/DesChiffres" />
79+
<MediaCard title="Desert Wanderer" star={4} subtitle="Wander the desert shifting cards strategically to bring order to the chaos" language="ReactJS" imgName={DesertWanderer} link="https://github.com/jacobkrol/DesertWanderer" visit="https://kroljs.com/DesertWanderer" />
6780
</div>
6881
</ContentBlock>
69-
<ContentBlock title="games." bg={1} size="medium">
82+
<ContentBlock title="m&k games." bg={1} size="medium">
7083
<div className="content-row">
71-
<MediaCard title="Nertz" star={4} subtitle="Compete against computer opponents in a game of Nertz" language="ReactJS, Node.js, Express" imgName={Nertz} link="https://github.com/jacobkrol/play-nertz-offline" />
72-
<MediaCard title="Asteroids" theme="dark" star={4} subtitle="Play the classic arcade game Asteroids!" language="JavaScript" imgName={Asteroids} link="https://github.com/jacobkrol/Asteroids" />
73-
<MediaCard title="Snake" star={4} subtitle="Play the classic game Snake" language="JavaScript" imgName={Snake} link="https://github.com/jacobkrol/Snake" />
74-
<MediaCard title="Smove" star={4} subtitle="Navigate the incoming enemies to collect gold" language="JavaScript" imgName={Smove} link="https://github.com/jacobkrol/Smove" />
84+
<MediaCard title="Asteroids" theme="dark" star={4} subtitle="Play the classic arcade game Asteroids!" language="JavaScript" imgName={Asteroids} link="https://github.com/jacobkrol/Asteroids" visit="https://kroljs.com/Asteroids" />
85+
<MediaCard title="Snake" star={4} subtitle="Play the classic game Snake" language="JavaScript" imgName={Snake} link="https://github.com/jacobkrol/Snake" visit="https://kroljs.com/Snake" />
86+
<MediaCard title="Smove" star={4} subtitle="Navigate the incoming enemies to collect gold" language="JavaScript" imgName={Smove} link="https://github.com/jacobkrol/Smove" visit="https://kroljs.com/Smove" />
87+
<MediaCard title="Maze Racer" star={4} subtitle="Slide through an endless series of random mazes" language="JavaScript" imgName={MazeRacer} link="https://github.com/jacobkrol/MazeRacer" visit="https://kroljs.com/MazeRacer" />
7588
</div>
7689
</ContentBlock>
7790
<ContentBlock title="wallpapers." bg={0} size="medium">
7891
<div className="content-row">
79-
<MediaCard title="Line Art" star={4} subtitle="Generate mesmerizing line art in any shape" language="JavaScript" imgName={IllinoisLine} />
92+
<MediaCard title="Line Art" star={4} subtitle="Generate mesmerizing line art in any shape" language="JavaScript, HTML, CSS" imgName={IllinoisLine} link="https://github.com/jacobkrol/Line-Art" visit="https://kroljs.com/Line-Art" />
8093
<MediaCard title="Mazes" star={4} subtitle="A variety of work with JavaScript canvas programs in relation to mazes" language="JavaScript" imgName={MazeGenerator} link="https://github.com/jacobkrol/Mazes" />
8194
<MediaCard title="Circle Growth" star={4} subtitle="Screensaver design of colorful circle growth" language="JavaScript" imgName={CircleGrowth} link="https://github.com/jacobkrol/Circle-Growth" />
8295
<MediaCard title="Dynamic Ball Pit" star={4} subtitle="A basic JavaScript program with interactive dots" language="JavaScript" imgName={DynamicBallPit} link="https://github.com/jacobkrol/Dynamic-Ball-Pit" />
8396
</div>
8497
</ContentBlock>
98+
<ContentBlock title="speech." bg={3} size="medium">
99+
<div className="content-row">
100+
<MediaCard title="LP Timer" star={5} subtitle="A simple timer application with time signals to help the forensics community" language="ReactJS, Node.js, Express" imgName={LPTimer} link="https://github.com/jacobkrol/LP-Timer" visit="https://kroljs.com/LP-Timer" />
101+
<MediaCard title="Extemp Panel App" star={3} subtitle="A web app to share and practice extemporaneous speaking prompts" language="ReactJS, Node.js, Express" imgName={EPALogo} />
102+
<MediaCard title="Example Book" star={3} subtitle="A web app to share and redeem impromptu examples" language="ReactJS, TypeScript, Firestore" imgName={ExampleBook} />
103+
</div>
104+
</ContentBlock>
85105
<ContentBlock title="adtl_websites." bg={2} size="medium">
86106
<div className="content-row">
87107
<MediaCard title="Jacob's Homepage" star={5} subtitle="Learn about me and what I am working on, and get in touch" language="ReactJS, Node.js, Express" imgName={Chicago} link="https://github.com/jacobkrol/jacobkrol.github.io" />
88-
<MediaCard title="Apartment Manager" star={5} subtitle="Post, like, filter, and compare multiple apartment listings in one place" language="Node.js, Express, ReactJS" imgName={AptManager} link="https://github.com/jacobkrol/Apartment-Manager" />
89-
<MediaCard title="FrenchClubUIC.com" star={5} subtitle="Public website produced for the French Club at UIC" language="HTML5, CSS" imgName={FrenchClub} link="http://frenchclubuic.com" />
108+
<MediaCard title="Apartment Manager" star={4} subtitle="Post, like, filter, and compare multiple apartment listings in one place" language="Node.js, Express, ReactJS" imgName={AptManager} link="https://github.com/jacobkrol/Apartment-Manager" />
109+
<MediaCard title="FrenchClubUIC.com" star={4} subtitle="Public website produced for the French Club at UIC" language="HTML, CSS" imgName={FrenchClub} visit="http://frenchclubuic.com" />
90110
</div>
91111
</ContentBlock>
92112
<ContentBlock title="maths." bg={0} size="medium">

‎src/components/utilities/MediaCard.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ function MediaCard(props) {
2828
? <p>See more <a style={{color: props.theme==="dark" ? "#EEE" : "#111"}} href={props.link} target="_blank" rel="noopener noreferrer">here</a></p>
2929
: null
3030
}
31+
{props.visit
32+
? <p>Visit the app <a style={{color: props.theme==="dark" ? "#EEE" : "#111"}} href={props.link} target="_blank" rel="noopener noreferrer">here</a></p>
33+
: null
34+
}
3135
</div>
3236
</div>
3337
)

‎src/graphics/ascii-autostereogram.png‎

127 KB
Loading

‎src/graphics/des-chiffres.png‎

5.78 KB
Loading

‎src/graphics/desert-wanderer.png‎

6.52 KB
Loading

‎src/graphics/example-book.png‎

4.28 KB
Loading

‎src/graphics/knitty-gritty.png‎

29.9 KB
Loading

‎src/graphics/maze-racer.gif‎

236 KB
Loading

‎src/styles/MediaCard.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
min-height: 200px;
2121
padding: 10px 20px;
2222
border-radius: 9px;
23-
background-color: rgba(200,200,200,0.5);
23+
background-color: rgba(200,200,200,0.7);
2424
}
2525

2626

0 commit comments

Comments
 (0)