Paulus/paulus.casa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stashing changes to styles before changing to tabs

Browse Source
This commit is contained in:
II-Paulus-II 2024-03-14 19:51:34 +00:00
parent cf13a4c652
commit fb565303fa
7 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Full Stack Developer focused on React, Next and Express framerworks"/> <meta name="description" content="Full Stack Developer focused on React, Next and Express frameworks"/>
<title>Paul Hughes - Full Stack Developer</title> <title>Paul Hughes - Full Stack Developer</title>
<link rel="canonical" href="https://paulus.casa"> <link rel="canonical" href="https://paulus.casa">
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/png" href="/favicon.png" />

7
src/App.css
View File

@ -10,8 +10,15 @@ html {
body { body {
height: 100vh; height: 100vh;
max-width: 100vw;
overflow-y: scroll;
}
a:-webkit-any-link {
color: white;
} }
#root { #root {
height: 100%; height: 100%;
width: 100%;
} }

3
src/components/Projects.jsx
View File

@ -19,8 +19,7 @@ function Projects() {
<article id="projects" className="projectsContainer"> <article id="projects" className="projectsContainer">
<section className="projectsTitlesContainer"> <section className="projectsTitlesContainer">
<h2>Projects</h2> <h2>Projects</h2>
<p>Some paragraph</p> <div className="projectSelectionButtonsContainer">
<div className="projectSelectionButtons">
<button type="button" onClick={() => { handleClicks("web")}}>Web Dev</button> <button type="button" onClick={() => { handleClicks("web")}}>Web Dev</button>
<button type="button" onClick={() => { handleClicks("cpp")}}>C++</button> <button type="button" onClick={() => { handleClicks("cpp")}}>C++</button>
<button type="button" onClick={() => { handleClicks("mod")}}>Game Mods</button> <button type="button" onClick={() => { handleClicks("mod")}}>Game Mods</button>

3
src/components/WebProjects.jsx
View File

@ -6,12 +6,11 @@ import { webProjects } from "@/data/webdata.js";
function WebProjects() { function WebProjects() {
return ( return (
<section id="webprojects" className="subProjectsContainer"> <section id="webprojects" className="subProjectsContainer">
<h3>This is Web projects area title</h3>
<div className="projectItemsContainer"> <div className="projectItemsContainer">
{webProjects.map((item) => { {webProjects.map((item) => {
return ( return (
<div key={item.Name} className="projectIndividualItemContainer"> <div key={item.Name} className="projectIndividualItemContainer">
<h4>{item.Name}</h4> <h3>{item.Name}</h3>
<p>{item.Details}</p> <p>{item.Details}</p>
<p>{item.Features}</p> <p>{item.Features}</p>
<p>{item.Technologies}</p> <p>{item.Technologies}</p>

1
src/styles/content.css
View File

@ -2,5 +2,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: linear-gradient(109.6deg, rgb(10, 20, 20) 11.2%, rgb(11, 132, 145) 91.1%); background: linear-gradient(109.6deg, rgb(10, 20, 20) 11.2%, rgb(11, 132, 145) 91.1%);
width: 100%;
min-height: 100%; min-height: 100%;
} }

2
src/styles/details.css
View File

@ -18,7 +18,6 @@
height: 5rem; height: 5rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center:
} }
.detailsTitle { .detailsTitle {
@ -37,6 +36,7 @@
} }
.detailsInfoLinks { .detailsInfoLinks {
color: white;
padding: 0.25rem; padding: 0.25rem;
font-size: 1.5rem; font-size: 1.5rem;
text-decoration: none; text-decoration: none;

44
src/styles/projects.css
View File

@ -1,49 +1,47 @@
.projectsContainer { .projectsContainer {
min-height: 100vh; min-height: 100vh;
width: 100%;
padding: 3rem; padding: 3rem;
color: white;
} }
.subProjectsContainer { .subProjectsContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
} }
.projectItemsContainer { .projectItemsContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
position: relative;
padding: 1rem; padding: 1rem;
gap: 1rem;
margin: 1rem; margin: 1rem;
border: 4px black; max-width: 100vw;
border-style: double;
overflow-x: scroll; overflow-x: scroll;
scrollbar-width: auto; position: relative;
scrollbar-color: blue black; scrollbar-color: white black;
} scrollbar-width: thin;
-ms-overflow-style: none;
.projectItemsContainer::-webkit-scrollbar {
height: 5px;
}
.projectItemsContainer::-webkit-scrollbar-track {
background: rgba(144, 238, 144, 0.164);
}
.projectItemsContainer::-webkit-scrollbar-thumb {
background-color: black;
outline: 1px solid blue;
} }
.projectIndividualItemContainer { .projectIndividualItemContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; padding: 2rem;
min-width: calc(100vw - 10rem);
min-height: calc(100vh - 20rem);
} }
.projectsTitlesContainer { .projectsTitlesContainer {
text-align: center;
} }
.projectSelectionButtons {
.projectSelectionButtonsContainer {
display: flex;
flex-direction: row;
justify-content: center;
padding: 0.5rem;
gap: 1rem;
} }