Improve almost everything
This commit is contained in:
parent
51a59fce69
commit
4a0f708c4f
21 changed files with 463 additions and 308 deletions
BIN
public/images/Background.png
Normal file
BIN
public/images/Background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
BIN
public/images/background.jpg
Normal file
BIN
public/images/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
68
public/images/logoLong.svg
Normal file
68
public/images/logoLong.svg
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="1920"
|
||||
height="300"
|
||||
viewBox="0 0 508 79.375042"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
sodipodi:docname="logoLong.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#0b0c29"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.45254834"
|
||||
inkscape:cx="822.01163"
|
||||
inkscape:cy="395.53786"
|
||||
inkscape:window-width="1904"
|
||||
inkscape:window-height="975"
|
||||
inkscape:window-x="35"
|
||||
inkscape:window-y="32"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1"
|
||||
showguides="true" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<g
|
||||
id="g475"
|
||||
transform="matrix(0.83973195,0,0,0.83973195,40.708092,6.360666)">
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:96.3615px;line-height:1;font-family:'RobotoMono Nerd Font';-inkscape-font-specification:'RobotoMono Nerd Font, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;white-space:pre;inline-size:1848.28;display:inline;fill:#ffffff;stroke-width:0"
|
||||
x="379.51074"
|
||||
y="77.970657"
|
||||
id="text186"
|
||||
transform="matrix(0.62044854,0,0,0.62044854,41.923751,7.3522921)"><tspan
|
||||
x="379.51074"
|
||||
y="77.970657"
|
||||
id="tspan486">Henry Hiles
|
||||
</tspan></text>
|
||||
<g
|
||||
aria-label="❯"
|
||||
id="text404"
|
||||
style="font-size:53.9513px;line-height:0;font-family:PowerlineSymbols;-inkscape-font-specification:'PowerlineSymbols, Normal';text-align:center;text-anchor:middle;fill:#e44040;stroke-width:0"
|
||||
transform="matrix(0.85162547,0,0,0.85162547,37.687129,5.8886092)">
|
||||
<path
|
||||
d="M -1.353398e-5,59.822301 17.702757,32.84665 -1.353398e-5,5.870999 H 11.907207 l 17.38665,26.975651 -17.38665,26.975651 z"
|
||||
id="path1347" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
74
public/images/mentalMathThumb.svg
Normal file
74
public/images/mentalMathThumb.svg
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="256"
|
||||
height="256"
|
||||
viewBox="0 0 67.733334 67.733335"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
sodipodi:docname="mentalMathThumb.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.3576599"
|
||||
inkscape:cx="-134.79075"
|
||||
inkscape:cy="153.20479"
|
||||
inkscape:window-width="1904"
|
||||
inkscape:window-height="1003"
|
||||
inkscape:window-x="35"
|
||||
inkscape:window-y="32"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<circle
|
||||
style="fill:#354b5f;fill-opacity:1;stroke-width:0"
|
||||
id="path234"
|
||||
cx="33.866665"
|
||||
cy="33.866665"
|
||||
r="33.866665" />
|
||||
<g
|
||||
aria-label="+"
|
||||
id="text1156"
|
||||
style="font-size:66.831px;line-height:0;font-family:'RobotoMono Nerd Font';-inkscape-font-specification:'RobotoMono Nerd Font, Normal';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0" />
|
||||
<g
|
||||
id="g398"
|
||||
transform="matrix(0.7424475,0,0,0.7424475,8.7224447,8.7224449)">
|
||||
<rect
|
||||
style="fill:#ffffff;stroke-width:0"
|
||||
id="rect392"
|
||||
width="9.7137604"
|
||||
height="45.660221"
|
||||
x="29.009787"
|
||||
y="11.036557"
|
||||
ry="3.6787262" />
|
||||
<rect
|
||||
style="fill:#ffffff;stroke-width:0"
|
||||
id="rect394"
|
||||
width="9.7137604"
|
||||
height="45.660221"
|
||||
x="29.009789"
|
||||
y="-56.696777"
|
||||
ry="3.6787262"
|
||||
transform="rotate(90)" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
103
public/images/messagingThumb.svg
Normal file
103
public/images/messagingThumb.svg
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="256"
|
||||
height="256"
|
||||
viewBox="0 0 67.733332 67.733333"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
sodipodi:docname="messagingThumb.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.3576599"
|
||||
inkscape:cx="110.11594"
|
||||
inkscape:cy="207.71034"
|
||||
inkscape:window-width="948"
|
||||
inkscape:window-height="999"
|
||||
inkscape:window-x="35"
|
||||
inkscape:window-y="32"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<circle
|
||||
style="fill:#354b5f;stroke-width:0;fill-opacity:1"
|
||||
id="path234"
|
||||
cx="33.866665"
|
||||
cy="33.866665"
|
||||
r="33.866665" />
|
||||
<g
|
||||
id="g298"
|
||||
transform="translate(0,-3.6555814)">
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0"
|
||||
id="rect946"
|
||||
width="39.40649"
|
||||
height="26.285879"
|
||||
x="14.16342"
|
||||
y="20.723726"
|
||||
ry="3.083425" />
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0"
|
||||
id="path1112"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="2.8271194"
|
||||
sodipodi:cy="52.121578"
|
||||
sodipodi:r1="6.00664"
|
||||
sodipodi:r2="3.0033202"
|
||||
sodipodi:arg1="1.0471976"
|
||||
sodipodi:arg2="2.0943951"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="m 5.8304391,57.323481 -4.5049799,-2.600951 -4.5049798,-2.600952 4.5049798,-2.600951 4.5049804,-2.600951 0,5.201902 z"
|
||||
inkscape:transform-center-x="-1.6363423"
|
||||
transform="matrix(0.54484477,1.2171798,-0.94369882,0.70273913,71.588034,6.9406204)"
|
||||
inkscape:transform-center-y="7.3093655e-06" />
|
||||
<rect
|
||||
style="fill:#354b5f;fill-opacity:1;stroke-width:0"
|
||||
id="rect1554"
|
||||
width="33.257812"
|
||||
height="3.0259981"
|
||||
x="17.237759"
|
||||
y="26.29459"
|
||||
ry="1.5129991" />
|
||||
<rect
|
||||
style="fill:#354b5f;fill-opacity:1;stroke-width:0"
|
||||
id="rect1560"
|
||||
width="33.257812"
|
||||
height="3.0259981"
|
||||
x="17.237759"
|
||||
y="32.240017"
|
||||
ry="1.5129991" />
|
||||
<rect
|
||||
style="fill:#354b5f;fill-opacity:1;stroke-width:0"
|
||||
id="rect1564"
|
||||
width="17.41164"
|
||||
height="3.0259981"
|
||||
x="17.237759"
|
||||
y="38.185444"
|
||||
ry="1.5129991" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -3,25 +3,16 @@ import styles from "../styles/About.module.css"
|
|||
import Divider from "./Divider.astro"
|
||||
---
|
||||
|
||||
<section class={styles.about} id="about">
|
||||
<h2>About</h2>
|
||||
<section class={styles.about}>
|
||||
<h2>About Me</h2>
|
||||
<Divider />
|
||||
<div class={styles.row}>
|
||||
<article>
|
||||
<img
|
||||
src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/overview.svg#gh-dark-mode-only`}
|
||||
alt="My Github Stats"
|
||||
/>
|
||||
</article>
|
||||
<section>
|
||||
<article class={styles.textArticle}>
|
||||
<p>
|
||||
Hello, my name is Henry Hiles, Full Stack Developer. I have
|
||||
extensive experience with React, SolidJS, Node.js, and
|
||||
ASP.NET Razor Pages. I have used my Node.js knowledge to
|
||||
create{" "}
|
||||
<a href="/projects/quadraticbot2.0">QuadraticBot 2.0</a>, a
|
||||
giveaway bot for discord.
|
||||
extensive experience with React, SolidJS, Node.js, and ASP.NET Razor
|
||||
Pages. I have used my Node.js knowledge to create{" "}
|
||||
<a href="/projects/quadraticbot2.0">QuadraticBot 2.0</a>, a giveaway
|
||||
bot for discord.
|
||||
</p>
|
||||
<p>
|
||||
For more projects, check out{" "}
|
||||
|
|
@ -34,46 +25,41 @@ import Divider from "./Divider.astro"
|
|||
</a>
|
||||
</p>
|
||||
</article>
|
||||
<section class={styles.images}>
|
||||
<a
|
||||
href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<a href="https://github.com/Henry-Hiles" target="_blank" rel="noreferrer">
|
||||
<section class={styles.row}>
|
||||
<img
|
||||
src="/images/az-900.png"
|
||||
alt="Azure Fundamentals Badge"
|
||||
src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/overview.svg#gh-dark-mode-only`}
|
||||
alt="My Github Stats"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.credly.com/badges/1fd0fc1c-052a-4311-9938-6d38057305ce/public_url"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
src="/images/dp-900.png"
|
||||
alt="Azure Data Fundamentals Badge"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.credly.com/badges/37008ee1-69e0-44aa-82cb-33e4bdf153a8/public_url"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
src="/images/ai-900.png"
|
||||
alt="Azure AI Fundamentals Badge"
|
||||
/>
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
<article>
|
||||
<img
|
||||
src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/languages.svg${
|
||||
false ? "#gh-light-mode-only" : "#gh-dark-mode-only"
|
||||
}`}
|
||||
alt="My Github Stats"
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<section class={`${styles.certifications} ${styles.row}`}>
|
||||
<a
|
||||
href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img src="/images/az-900.png" alt="Azure Fundamentals Badge" />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.credly.com/badges/1fd0fc1c-052a-4311-9938-6d38057305ce/public_url"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img src="/images/dp-900.png" alt="Azure Data Fundamentals Badge" />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.credly.com/badges/37008ee1-69e0-44aa-82cb-33e4bdf153a8/public_url"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img src="/images/ai-900.png" alt="Azure AI Fundamentals Badge" />
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
---
|
||||
import RoundDivider from "./RoundDivider.astro"
|
||||
import styles from "../styles/Jumbo.module.css"
|
||||
import Divider from "./Divider.astro"
|
||||
---
|
||||
|
||||
<header>
|
||||
<section id={styles.jumbo}>
|
||||
<div>
|
||||
<h1>Henry Hiles</h1>
|
||||
<!-- <h1>Henry Hiles</h1> -->
|
||||
<img
|
||||
id={styles.logoLong}
|
||||
src="/images/logoLong.svg"
|
||||
alt="Henry Hiles"
|
||||
/>
|
||||
<Divider />
|
||||
<span id={styles.shortAbout}>
|
||||
Full Stack .NET Developer & Discord Bot Developer
|
||||
</span>
|
||||
</div>
|
||||
<RoundDivider />
|
||||
<!-- <RoundDivider /> -->
|
||||
</section>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -14,16 +14,6 @@ import styles from "../styles/Nav.module.css"
|
|||
<li>
|
||||
<a href="/#about">About Me</a>
|
||||
</li>
|
||||
<li>
|
||||
<div id="themeToggle">
|
||||
<button aria-hidden="false" title="Switch to light mode"
|
||||
><Icon name="ph:sun-fill" /></button
|
||||
>
|
||||
<button aria-hidden="true" title="Switch to dark mode"
|
||||
><Icon name="ph:moon-fill" /></button
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
@ -34,35 +24,4 @@ import styles from "../styles/Nav.module.css"
|
|||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script defer>
|
||||
let nav = document.querySelector(`nav`)
|
||||
document.addEventListener("scroll", () => {
|
||||
if (nav) nav.setAttribute("aria-expanded", window.scrollY == 0)
|
||||
})
|
||||
|
||||
const body = document.querySelector("body")
|
||||
const themeToggle = document.querySelector("#themeToggle")
|
||||
const icons = document.querySelectorAll("#themeToggle > button")
|
||||
let lightMode = localStorage.getItem("lightMode") === "true" || false
|
||||
const setLightMode = () => {
|
||||
localStorage.setItem("lightMode", lightMode)
|
||||
if (lightMode) body.classList.add("light")
|
||||
else body.classList.remove("light")
|
||||
icons[0].setAttribute("aria-hidden", !lightMode)
|
||||
icons[1].setAttribute("aria-hidden", lightMode)
|
||||
icons.forEach((icon) =>
|
||||
icon.setAttribute(
|
||||
"aria-hidden",
|
||||
icon.getAttribute("aria-hidden") === "false"
|
||||
)
|
||||
)
|
||||
}
|
||||
setLightMode()
|
||||
|
||||
themeToggle.addEventListener("click", () => {
|
||||
lightMode = !lightMode
|
||||
setLightMode()
|
||||
})
|
||||
</script>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import styles from "../styles/Portfolio.module.css"
|
|||
import Divider from "./Divider.astro"
|
||||
---
|
||||
|
||||
<section id="portfolio">
|
||||
<h2>My Projects</h2>
|
||||
<section id="portfolio" class={styles.portfolio}>
|
||||
<h2>Projects</h2>
|
||||
<Divider />
|
||||
<article class={styles.portfolioItems}>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import "../styles/index.css"
|
||||
import "../styles/Layout.css"
|
||||
import Nav from "../components/Nav.astro"
|
||||
|
||||
export interface Props {
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ import About from "../components/About.astro"
|
|||
import Jumbo from "../components/Jumbo.astro"
|
||||
import Portfolio from "../components/Portfolio.astro"
|
||||
import Layout from "../layouts/Layout.astro"
|
||||
import styles from "../styles/Home.module.css"
|
||||
import "../styles/Home.css"
|
||||
---
|
||||
|
||||
<Layout page={"Home"}>
|
||||
<div id={styles.container}>
|
||||
<main>
|
||||
<Jumbo />
|
||||
<Portfolio />
|
||||
<About />
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
import ButtonLink from "../../components/ButtonLink.astro"
|
||||
import Divider from "../../components/Divider.astro"
|
||||
import RoundDivider from "../../components/RoundDivider.astro"
|
||||
import styles from "../../styles/Project.module.css"
|
||||
import Layout from "../../layouts/Layout.astro"
|
||||
import projects from "../../projects.json"
|
||||
|
|
@ -16,15 +15,13 @@ if (project == null) return
|
|||
---
|
||||
|
||||
<Layout page={project.name}>
|
||||
<div id={styles.container}>
|
||||
<main>
|
||||
<section id={styles.jumbo}>
|
||||
<h1 class={styles.title}>{project.name}</h1>
|
||||
<Divider />
|
||||
<p class={styles.overview}>{project.overview}</p>
|
||||
<RoundDivider />
|
||||
</section>
|
||||
<section id={styles.details}>
|
||||
<div class={styles.row}>
|
||||
<section id={styles.details} class={styles.row}>
|
||||
<article class={styles.longDescription}>
|
||||
<h2>Description</h2>
|
||||
<Divider />
|
||||
|
|
@ -68,7 +65,6 @@ if (project == null) return
|
|||
class={styles.screenshot}
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
"description": "A simple, open-source, online chat room where you can join online chat rooms, or create your own.",
|
||||
"technologies": "This project was built using handcrafted Javascript, as well as Node.js, Socket.io, and Express.",
|
||||
"mainImage": "messagingComputer.png",
|
||||
"thumbImage": "messagingThumb.png",
|
||||
"thumbImage": "messagingThumb.svg",
|
||||
"demoLink": "https://chat.henryhiles.com"
|
||||
},
|
||||
{
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
"description": "A simple project to help with learning addition and subtraction. You can change the amount of numbers, and switch between addition and subtraction modes.",
|
||||
"technologies": "This project was built using React and CSS Modules.",
|
||||
"mainImage": "mentalMathComputer.png",
|
||||
"thumbImage": "mentalMathThumb.webp"
|
||||
"thumbImage": "mentalMathThumb.svg"
|
||||
},
|
||||
{
|
||||
"name": "Movie React App",
|
||||
|
|
|
|||
|
|
@ -1,36 +1,30 @@
|
|||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
gap: 5rem;
|
||||
justify-content: center;
|
||||
gap: 2em;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.about {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.textArticle p {
|
||||
margin: 14px 0 40px;
|
||||
max-width: 40rem;
|
||||
margin: auto;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.images a {
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.images img {
|
||||
.certifications img {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
28
src/styles/Home.css
Normal file
28
src/styles/Home.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
section > :is(h1, h2) {
|
||||
font-size: 2.5em;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
gap: 3rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
main > section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 1rem;
|
||||
background: rgba(0 0 0 / 0.3);
|
||||
padding: 2rem;
|
||||
width: 90%;
|
||||
transition: scale 0.2s;
|
||||
}
|
||||
|
||||
main > section:hover {
|
||||
scale: 1.03;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
#container {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,27 +1,22 @@
|
|||
#jumbo {
|
||||
color: var(--text-primary);
|
||||
font-size: 2em;
|
||||
padding: 3rem 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* #jumbo > div {
|
||||
padding: 0;
|
||||
padding: 3rem 0 0;
|
||||
height: 100vh;
|
||||
} */
|
||||
}
|
||||
|
||||
#jumbo i {
|
||||
margin: 20px 0 30px;
|
||||
}
|
||||
|
||||
#jumbo #logoLong {
|
||||
width: 60rem;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#jumbo #shortAbout {
|
||||
display: block;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 25rem;
|
||||
}
|
||||
|
||||
#logo {
|
||||
color: aqua;
|
||||
}
|
||||
|
|
|
|||
35
src/styles/Layout.css
Normal file
35
src/styles/Layout.css
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
:root {
|
||||
color-scheme: dark light;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
--primary: hsl(211 26% 39%);
|
||||
--secondary: hsl(209 28% 29%);
|
||||
--secondary-hover: hsl(209 28% 19%);
|
||||
--text-primary: hsl(0 0% 100%);
|
||||
--secondary-text: hsl(211 26% 39%);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", -apple-system, Roboto, "Helvetica Neue", Arial,
|
||||
"Noto Sans", sans-serif;
|
||||
margin: 0;
|
||||
background-attachment: fixed;
|
||||
background-image: url("/images/background.jpg");
|
||||
backdrop-filter: blur(10px);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -1,47 +1,19 @@
|
|||
.nav {
|
||||
background: var(--secondary);
|
||||
color: var(--primary-text);
|
||||
padding-top: 1.5rem;
|
||||
overflow: auto;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
font-size: 1.3em;
|
||||
overflow-y: auto;
|
||||
font-weight: bold;
|
||||
transition: padding 0.5s, font-size 0.5s;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.nav [aria-hidden="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.nav[aria-expanded="false"] {
|
||||
padding: 1rem;
|
||||
width: unset;
|
||||
top: 10px;
|
||||
border-radius: 100px;
|
||||
border: 3px solid var(--primary);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav[aria-expanded="true"] {
|
||||
background: hsl(0 0% 0% / 0.4);
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
|
||||
.links svg {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.nav button {
|
||||
background-color: transparent;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
#container {
|
||||
main {
|
||||
padding: 2em;
|
||||
gap: 2em;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.overview {
|
||||
|
|
@ -25,7 +30,7 @@
|
|||
}
|
||||
|
||||
.image img {
|
||||
max-height: 500px;
|
||||
max-height: 450px;
|
||||
}
|
||||
|
||||
.longDescription h2 {
|
||||
|
|
@ -34,18 +39,32 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.6em;
|
||||
margin: 0.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: row;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
#details {
|
||||
main > section {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
border-radius: 1rem;
|
||||
background: rgba(0 0 0 / 0.3);
|
||||
padding: 2rem;
|
||||
width: 90%;
|
||||
transition: scale 0.2s;
|
||||
}
|
||||
|
||||
main > section:hover {
|
||||
scale: 1.03;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
:root {
|
||||
color-scheme: dark light;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
--primary: hsl(211, 26%, 39%);
|
||||
--secondary: hsl(209, 28%, 29%);
|
||||
--secondary-hover: hsl(209, 28%, 19%);
|
||||
--text-primary: hsl(0, 0%, 100%);
|
||||
--secondary-text: hsl(211, 26%, 39%);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Lato", -apple-system, Roboto, "Helvetica Neue", Arial,
|
||||
"Noto Sans", sans-serif;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: var(--secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
body.light {
|
||||
--primary: hsl(220, 27%, 98%);
|
||||
--secondary: hsl(0, 0%, 100%);
|
||||
--secondary-hover: hsl(0, 0%, 80%);
|
||||
--text-primary: hsl(220, 17%, 32%);
|
||||
--secondary-text: hsl(211, 26%, 39%);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
section:not(section section) {
|
||||
background: var(--secondary);
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
section:nth-child(2n):not(section section) {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
section > svg {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
section:nth-child(2n) > svg {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
section > :is(h1, h2) {
|
||||
font-size: 2.5em;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue