[FEATURE] Adjusted order and styles (#11)

Co-authored-by: dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.dev/elysium/nile/pulls/11
This commit is contained in:
dunemask 2023-09-29 16:37:46 +00:00
parent 6ea87ae742
commit 7cc7539c94
11 changed files with 61 additions and 35 deletions

View file

@ -17,7 +17,7 @@
<meta name="og:site_name" content="dunemask.net" />
<meta name="og:url" content="dunemask.net" />
<meta name="og:type" content="website" />
<meta name="og:image" content="/images/og.jpg" />
<meta name="og:image" content="/images/og.png" />
<meta name="author" content="Elijah Parker (Dunemask)" />
<meta
name="keywords"

View file

@ -1,5 +1,5 @@
h1 {
font-family: "Dejavu Sans";
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 33px;
font-style: normal;
font-variant: normal;
@ -9,7 +9,7 @@ h1 {
h2,
label {
font-family: "Dejavu Sans";
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 28px;
font-style: normal;
font-variant: normal;
@ -18,7 +18,7 @@ label {
}
h3 {
font-family: "Dejavu Sans";
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
@ -28,7 +28,7 @@ h3 {
p,
a {
font-family: "Dejavu Sans";
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 18px;
font-style: normal;
font-variant: normal;
@ -37,7 +37,7 @@ a {
}
blockquote {
font-family: "Dejavu Sans";
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 21px;
font-style: normal;
font-variant: normal;
@ -47,7 +47,7 @@ blockquote {
pre,
span {
font-family: "Dejavu Sans";
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;

BIN
public/images/og.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

View file

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Before After
Before After

View file

@ -18,9 +18,9 @@ import MenuIcon from "@mui/icons-material/Menu";
const links = [
// { url: "/", title: "Home" },
{ url: "/#about", title: "About" },
{ url: "/#portfolio", title: "Portfolio" },
// { url: "/#achievements", title: "Achievements" },
{ url: "/#about", title: "About" },
{ url: "/#contact", title: "Contact" },
// { url: "/resume", title: "Resume" },
];

View file

@ -7,7 +7,7 @@
border-radius: 50%;
border: 1px solid #f3ac20;
color: #f3ac20;
transition: 0.7s;
transition: all 0.3s;
}
.contact-icon:hover {

View file

@ -37,14 +37,9 @@ export default function About() {
padding: "0 2rem",
textAlign: "left",
}}
style={{ scrollMarginTop: "4rem" }}
style={{ scrollMarginTop: "6rem" }}
id="about"
>
<div style={{ display: "flex" }}>
<Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
About
</Typography>
</div>
<Box sx={{ display: "flex", flexWrap: "wrap" }}>
{!fullSizePhoto && (
<img
@ -82,7 +77,7 @@ export default function About() {
}}
>
<Typography variant="h6" component="div" sx={{ fontWeight: 600 }}>
React Fullstack Software Engineer
About
</Typography>
<Typography variant="body1">
Hello! I'm Elijah Parker, a fullstack software engineer from Utah.
@ -111,7 +106,7 @@ export default function About() {
href="mailto:elijahglennparker@outlook.com"
style={{ textDecoration: "none", fontSize: "14px" }}
>
elijahglennparker@outlook.com
elijah@dunemask.net
</a>
}
/>

View file

@ -1,29 +1,29 @@
import React, { Suspense } from "react";
import Box from "@mui/material/Box";
import Header from "./Header.jsx";
import Projects from "./Projects.jsx";
import About from "./About.jsx";
import Education from "./Education.jsx";
import Experience from "./Experience.jsx";
import Contact from "./Contact.jsx";
//import Environments from "./Environments.jsx";
import ContentWrapper from "@components/ContentWrapper.jsx";
const Skills = React.lazy(() => import("./Skills.jsx"));
const Social = React.lazy(() => import("./Social.jsx"));
const Education = React.lazy(() => import("./Education.jsx"));
const Experience = React.lazy(() => import("./Experience.jsx"));
const About = React.lazy(() => import("./About.jsx"));
const Projects = React.lazy(() => import("./Projects.jsx"));
export default function Delta() {
return (
<ContentWrapper id="delta">
<Header />
<Projects />
<Suspense>
<About />
<Box style={{ display: "flex", flexWrap: "wrap" }}>
<Education />
<Experience />
</Box>
<Suspense>
<Projects />
<Skills />
<Social />
</Suspense>

View file

@ -1,10 +1,38 @@
import { useState } from "react";
import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import { SiGitea } from "react-icons/si";
function ProjectLanguages(props) {
const { languages, smallMode } = props;
if (!languages || languages.length === 0) return;
return (
<Box
sx={{
display: "flex",
flexWrap: "wrap",
justifyContent: smallMode ? "center" : "",
gap: smallMode ? ".25rem" : ".5rem",
marginTop: smallMode ? "5rem" : ".5rem",
width: "80%",
maxWidth: 512,
margin: smallMode ? "auto" : "",
}}
>
{languages.map((l, i) => (
<Chip
key={i}
label={l}
sx={{ borderRadius: "5px", margin: smallMode ? ".25rem" : "" }}
/>
))}
</Box>
);
}
export default function ProjectTile({
image,
title,
@ -13,6 +41,7 @@ export default function ProjectTile({
disableGutter,
openPhoto,
link,
languages,
}) {
const theme = useTheme();
const smallMode = useMediaQuery(theme.breakpoints.down("md"));
@ -113,6 +142,7 @@ export default function ProjectTile({
{description}
</Typography>
</div>
<ProjectLanguages languages={languages} smallMode={smallMode} />
</Box>
</Box>
);

View file

@ -32,6 +32,7 @@ export default function Projects() {
year="2023"
link="https://gitea.dunemask.dev/elysium/minecluster"
openPhoto={openPhoto}
languages={["React", "Express", "Kubernetes"]}
>
Deploy and monitor MInecraft servers in your kubernetes cluster. Easily
scales and provides a stateful experience to make managing multiple
@ -43,6 +44,7 @@ export default function Projects() {
year="2022"
link="https://gitea.dunemask.dev/elysium/qualiteer"
openPhoto={openPhoto}
languages={["React", "Express", "Kubernetes", "PostgreSQL", "RabbitMQ"]}
>
Manage failing tests and silence unecessary alerts. Check the state of
your services worldwide and improve developer confidence with a simple
@ -54,6 +56,7 @@ export default function Projects() {
year="2021"
link="https://gitea.dunemask.dev/elysium/khufu"
openPhoto={openPhoto}
languages={["React", "Express"]}
>
Basic cloud file management built on React class components. Simple
interface allows users to upload, delete, and multiple files.
@ -64,6 +67,7 @@ export default function Projects() {
year="2020"
link="https://gitea.dunemask.dev/dunemask/codepen"
openPhoto={openPhoto}
languages={["HTML5", "CSS"]}
>
Visual replication of the website{" "}
<a
@ -80,6 +84,7 @@ export default function Projects() {
year="2018"
link="https://legacy-21.dunemask.net/files/java/MoviePlayer.jar"
openPhoto={openPhoto}
languages={["Java", "JavaFX"]}
>
Simple media player built on javafx. Player supports media seeking,
playback controls, and speed distortion.
@ -90,6 +95,7 @@ export default function Projects() {
year="2018"
link="https://gitea.dunemask.dev/dunemask/voxelcraft"
openPhoto={openPhoto}
languages={["JavaFX"]}
>
Voxel game built on a simple rendering engine written with JavaFX.
Generate your terrain and form your ideal world by exploring and

View file

@ -160,12 +160,7 @@ export default function Skills() {
flexWrap: "wrap",
}}
>
<Box style={{ flex: 1, textAlign: "left", width: "100%" }}>
<div style={{ display: "flex", paddingTop: 30 }}>
<Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
Pluralsight IQ
</Typography>
</div>
<Box sx={{ flex: 1, textAlign: "left", width: "100%", pt: "2.5rem" }}>
<Box
sx={{
width: "100%",