diff --git a/public/projectimgs/cows.webp b/public/projectimgs/cows.webp new file mode 100644 index 0000000..edce152 Binary files /dev/null and b/public/projectimgs/cows.webp differ diff --git a/public/projectimgs/hacker.webp b/public/projectimgs/hacker.webp new file mode 100644 index 0000000..0617a47 Binary files /dev/null and b/public/projectimgs/hacker.webp differ diff --git a/src/components/WebProjects.jsx b/src/components/WebProjects.jsx index e43bdac..dfd9768 100644 --- a/src/components/WebProjects.jsx +++ b/src/components/WebProjects.jsx @@ -16,11 +16,11 @@ function WebProjects() {

{item.Name}

-

{item.Details}

-

{item.Features}

-

{item.Technologies}

-

{item.GitHub}

-

{item.Hosted}

+

{item.Technologies}

+
+ GitHub + Hosted +
); })} diff --git a/src/data/webdata.js b/src/data/webdata.js index e53e996..3e8f895 100644 --- a/src/data/webdata.js +++ b/src/data/webdata.js @@ -16,22 +16,22 @@ export const webProjects = [ GitHub: "https://github.com/WordleTeamLegends/wordle", Hosted: "https://wordle.paulus.casa", }, - { - Name: "REACT Clicker Heroes - Hacker Version", - Image: "/projectimgs/wordle.webp", - Details: "Remaking the week 2 project with react", - Features: "Click to hack", - Technologies: "React JS", - GitHub: "https://github.com/II-Paulus-II/project-week6", - Hosted: "https://paulus-project-week2.vercel.app/", - }, { Name: "Clicker Heroes - Hacker Version", - Image: "/projectimgs/wordle.webp", + Image: "/projectimgs/hacker.webp", Details: "As an introduction to Vanilla Javascript I made my own version of a cookie clicker or clicker heroes game", Features: "Click to hack", - Technologies: "Javascript, html, css", + Technologies: "Javascript, HTML, CSS", GitHub: "https://github.com/II-Paulus-II/project-week2", Hosted: "https://paulus-project-week2.vercel.app/", }, + { + Name: "Dangerous Cows - Image Gallery", + Image: "/projectimgs/cows.webp", + Details: "As an introduction to Vanilla Javascript I made my own version of a cookie clicker or clicker heroes game", + Features: "Click to hack", + Technologies: "Javascript, HTML, CSS", + GitHub: "https://github.com/II-Paulus-II/project-week3", + Hosted: "https://ii-paulus-ii.github.io/project-week3/", + }, ]; diff --git a/src/styles/projects.css b/src/styles/projects.css index 251c08c..283c567 100644 --- a/src/styles/projects.css +++ b/src/styles/projects.css @@ -91,6 +91,7 @@ display: flex; flex-direction: row; flex-wrap: wrap; + margin: 0.5rem; width: 100%; box-sizing: content-box; @@ -98,13 +99,15 @@ .projectIndividualItemContainer { display: flex; - flex-direction: row; + flex-direction: column; + margin: 0.5rem; padding: 1.5rem; - max-width: 50%; + max-width: calc(33% - 1rem); + background: linear-gradient(109.6deg, rgb(15, 25, 25) 0%, rgb(14, 138, 130) 91.1%); } .projectImageContainer { - width: 50%; + width: 100%; padding: 0.5rem; } .projectImage { @@ -114,6 +117,25 @@ .projectTextContainer { display: flex; flex-direction: column; - width: 50%; + text-align: center; + width: 100%; padding: 0.5rem; +} + +.projectTextTitle { + padding: 0.5rem; + font-size: 1.4rem; + font-weight: 900; +} + +.projectTechnologies { + font-size: 1.1rem; + padding-bottom: 1rem; +} + +.projectLinksContainer { + display: flex; + flex-direction: row; + gap: 2rem; + justify-content: center; } \ No newline at end of file