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>
<meta charset="UTF-8" />
<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>
<link rel="canonical" href="https://paulus.casa">
<link rel="icon" type="image/png" href="/favicon.png" />

7
src/App.css
View File

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

3
src/components/Projects.jsx
View File

@ -19,8 +19,7 @@ function Projects() {
<article id="projects" className="projectsContainer">
<section className="projectsTitlesContainer">
<h2>Projects</h2>
<p>Some paragraph</p>
<div className="projectSelectionButtons">
<div className="projectSelectionButtonsContainer">
<button type="button" onClick={() => { handleClicks("web")}}>Web Dev</button>
<button type="button" onClick={() => { handleClicks("cpp")}}>C++</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() {
return (
<section id="webprojects" className="subProjectsContainer">
<h3>This is Web projects area title</h3>
<div className="projectItemsContainer">
{webProjects.map((item) => {
return (
<div key={item.Name} className="projectIndividualItemContainer">
<h4>{item.Name}</h4>
<h3>{item.Name}</h3>
<p>{item.Details}</p>
<p>{item.Features}</p>
<p>{item.Technologies}</p>

1
src/styles/content.css
View File

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

2
src/styles/details.css
View File

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

44
src/styles/projects.css
View File

@ -1,49 +1,47 @@
.projectsContainer {
min-height: 100vh;
width: 100%;
padding: 3rem;
color: white;
}
.subProjectsContainer {
display: flex;
flex-direction: column;
width: 100%;
}
.projectItemsContainer {
display: flex;
flex-direction: row;
position: relative;
padding: 1rem;
gap: 1rem;
margin: 1rem;
border: 4px black;
border-style: double;
max-width: 100vw;
overflow-x: scroll;
scrollbar-width: auto;
scrollbar-color: blue black;
}
.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;
position: relative;
scrollbar-color: white black;
scrollbar-width: thin;
-ms-overflow-style: none;
}
.projectIndividualItemContainer {
display: flex;
flex-direction: column;
width: 100%;
padding: 2rem;
min-width: calc(100vw - 10rem);
min-height: calc(100vh - 20rem);
}
.projectsTitlesContainer {
}
.projectSelectionButtons {
text-align: center;
}
.projectSelectionButtonsContainer {
display: flex;
flex-direction: row;
justify-content: center;
padding: 0.5rem;
gap: 1rem;
}