Skip to content

Commit 2f45390

Browse files
JVSONVJVSONV
authored
Nextjs issue 11 (#26)
* first start of nextjs transition * well overdue update far too much going forward this will be more frequent * fix accessibility issue. Removed improper use of role * testing some suggestions for lighthouse performance * added mobile contact button * mobile nav animation updated still needs some work I think but I'm moving on * starting starWars typescript conversion * almost finished with conversion * Star Wars conversion complete just needs CSS * converted counter react app to typescript. All files are now converted * I FOUND IT FINALLY. I found the slight reason for x scroll at a particular window range. I have removed it. Element with the class about me was the culprit * started creating api endpoints * I think I'm on the right track to get the api endpoints up and running but I still have somework to do * issue 11 primary completed need to add some CSS and ensure the file structure is right for netlify * added issue 11 CSS * file structure rearranged attempting first netlify preview * image error corrected * false error? * netlify check removed possible img src issue and duplicate deployed preview * does this clear the error commits? * endpoint key update * missed one * removed localhost
1 parent 212bfa9 commit 2f45390

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+5442
-2418
lines changed

‎.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎components/MainComponents/About.tsx

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
"use client";
2+
import Image from "next/image";
3+
import { useContext } from "react";
4+
import { ModalContext } from "../../pages/store/modalCtxProvider";
5+
import apex from "/public/assets/photos/companies/apex.webp";
6+
import costco from "/public/assets/photos/companies/costcologo.webp";
7+
import usmc from "/public/assets/photos/companies/marinecorps.webp";
8+
import vetsWhoCode from "/public/assets/photos/companies/vetswhocode.webp";
9+
import jason from "/public/assets/photos/jason_desktop.webp";
10+
11+
const About = () => {
12+
const modalCtx = useContext(ModalContext);
13+
14+
return (
15+
<section
16+
id="about"
17+
aria-label="About me">
18+
<div className="container--section">
19+
<header className="about__header">
20+
<h2 className="about__header header header--about">
21+
Me Myself &amp; I
22+
</h2>
23+
</header>
24+
<div className="about__me">
25+
<h3 className="about__title">ABOUT ME</h3>
26+
<p className="about__summary">
27+
Marine Corps leader turned software developer. After several
28+
successful leadership roles in the military and business world, I
29+
taught myself web development and honed my skills through
30+
VetsWhoCode.
31+
</p>
32+
</div>
33+
<div className="hotspot-container">
34+
<Image
35+
className="owner__photo"
36+
src={jason}
37+
alt="Jason Vallery"
38+
/>
39+
<div className="all__hotspots">
40+
<div className="tooltip costco">
41+
<div className="hotspot"></div>
42+
<div
43+
className="tooltip__content"
44+
data-right="false">
45+
<div className="border-pointer"></div>
46+
<div className="company-img-container">
47+
<Image
48+
src={costco}
49+
alt="Costco Wholesale logo"
50+
className="company__img"
51+
/>
52+
</div>
53+
<div className="history">
54+
<h4 className="history__title">Costco Wholesale</h4>
55+
<p className="history__summary">
56+
At Costco Wholesale, I was a supervisor. I supervised a team
57+
of 6 associates responsible for generating an average of
58+
250,000 in weekly sales, with certain Holiday weeks earning
59+
up to 1.2 million. I ensured a quarterly loss of below 5%
60+
through proper date rotation and applying and tracking
61+
credit for products damaged in transportation. I held high
62+
levels of independence and responsibility in ensuring that
63+
all merchandise was stocked and available for all auxiliary
64+
departments.
65+
</p>
66+
</div>
67+
</div>
68+
</div>
69+
<div className="tooltip usmc">
70+
<div className="hotspot"></div>
71+
<div
72+
className="tooltip__content"
73+
data-right="true">
74+
<div className="border-pointer"></div>
75+
<div className="company-img-container">
76+
<Image
77+
src={usmc}
78+
alt="Jason Vallery in his U.S. Marine Corps dress blues"
79+
className="company__img"
80+
/>
81+
</div>
82+
<div className="history">
83+
<h4 className="history__title">U.S. Marine Corps</h4>
84+
<p className="history__summary">
85+
As a Corporal (E-4) in the United States Marine Corps, I
86+
completed 33 preventative maintenance services on heavy
87+
equipment, decreasing unexpected repairs by 15%. I
88+
maintained accountability for over 1.1 million dollars worth
89+
of tools and equipment. Additionally, I scheduled and
90+
coordinated daily physical training and required physical
91+
tests for up to 27 marines.
92+
</p>
93+
</div>
94+
</div>
95+
</div>
96+
<div className="tooltip apex">
97+
<div className="hotspot"></div>
98+
<div
99+
className="tooltip__content"
100+
data-right="true">
101+
<div className="border-pointer"></div>
102+
<div className="company-img-container">
103+
<Image
104+
src={apex}
105+
alt="Apex Deliveries business photo"
106+
className="company__img"
107+
/>
108+
</div>
109+
<div className="history">
110+
<h4 className="history__title">Apex Deliveries</h4>
111+
<p className="history__summary">
112+
At Apex Deliveries, I was the owner and was responsible for
113+
increasing year-over-year sales by 28%. I built rapport with
114+
store and grocery managers to optimize product placement. I
115+
also delivered daily orders to local customers. I adapted
116+
quickly to changing landscapes, pivoting services and
117+
offerings through COVID-19 and inclement weather conditions
118+
while providing excellent customer service.
119+
</p>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
<div className="about__current">
126+
<h3 className="about__title current">CURRENTLY</h3>
127+
<div className="current__content">
128+
<Image
129+
className="vets-img"
130+
src={vetsWhoCode}
131+
alt="Vets Who Code logo"
132+
/>
133+
<p className="current__status">
134+
I am currently practicing and honing my skills with #VetsWhoCode.
135+
</p>
136+
<p className="current__statement">
137+
Reach out to chat or grab a copy of my current resume
138+
</p>
139+
<div className="button__wrapper">
140+
<button
141+
className="button button--current"
142+
type="button"
143+
onClick={modalCtx.showModalHandler}>
144+
Reach out
145+
</button>
146+
<button
147+
className="button button--resume"
148+
type="button">
149+
Resume
150+
</button>
151+
</div>
152+
</div>
153+
</div>
154+
</div>
155+
</section>
156+
);
157+
};
158+
159+
export default About;

‎components/MainComponents/Hero.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
3+
const Hero = () => {
4+
return (
5+
<section
6+
id="hero"
7+
className="hero--section"
8+
aria-label="Welcome">
9+
<div className="hero container--section">
10+
<div className="hero__container">
11+
<div className="hero__content">
12+
<p className="hero__intro">Hey there 👋🏼, I&#39;m</p>
13+
<p className="hero__owner">Jason</p>
14+
<p className="owner__last-name">Vallery</p>
15+
</div>
16+
</div>
17+
<div className="attr__container">
18+
<p className="attr">
19+
I <span className="attr__key">Tinker</span>,
20+
<span className="attr__key">Learn</span> and
21+
<span className="attr__key">Solve</span> by building
22+
<span className="break"> &amp; breaking </span>things
23+
</p>
24+
</div>
25+
</div>
26+
</section>
27+
);
28+
}
29+
30+
export default Hero

‎components/MainComponents/Main.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import About from "./About";
2+
import Hero from "./Hero";
3+
import Projects from "./Projects";
4+
5+
const Main = () => {
6+
return (
7+
<main className="main">
8+
<Hero />
9+
<Projects />
10+
<About />
11+
</main>
12+
);
13+
};
14+
15+
export default Main;

‎components/MainComponents/Projects.tsx

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import Image from "next/image";
2+
import Link from "next/link";
3+
import plug from "../../public/assets/photos/imageOpt.webp";
4+
import vibeCheck from "../../public/assets/photos/imageOptimized.webp";
5+
import sheesh from "../../public/assets/photos/imageOptimized1.webp";
6+
7+
const Projects = () => {
8+
return (
9+
<section
10+
id="projects"
11+
aria-label="Projects"
12+
className="container--section">
13+
<header className="section__title">
14+
<h2 className="project__header">Projects</h2>
15+
</header>
16+
17+
18+
<div className="projects-container">
19+
<ul
20+
className="project__list"
21+
role="list"
22+
aria-label="Project List">
23+
<li className="project">
24+
<div className="preview">
25+
<Image
26+
src={vibeCheck}
27+
alt="Vibe Check website screenshot"
28+
/>
29+
</div>
30+
<div className="project__info">
31+
<div className="project__title">
32+
<p className="num">01</p>
33+
<h3 className="title">Vibe Check</h3>
34+
</div>
35+
<p className="project__description">
36+
Find your perfect spot for any mood or occasion with our
37+
website&#39;s personalized recommendations. Our platform
38+
connects you with a database of places that match your desired
39+
ambiance, vibe, and atmosphere.
40+
</p>
41+
</div>
42+
</li>
43+
44+
<li className="project">
45+
<div className="preview">
46+
<Image
47+
src={sheesh}
48+
alt="Sheesh car club website screenshot"
49+
/>
50+
</div>
51+
<div className="project__info">
52+
<div className="project__title">
53+
<p className="num">02</p>
54+
<h3 className="title">Sheeesh.</h3>
55+
</div>
56+
<p className="project__description">
57+
Connect with local car enthusiasts and take your passion to the
58+
next level with our website&#39;s car group pages.
59+
</p>
60+
</div>
61+
</li>
62+
63+
<li className="project">
64+
<div className="preview">
65+
<Image
66+
src={plug}
67+
alt="Plug website screenshot"
68+
/>
69+
</div>
70+
<div className="project__info">
71+
<div className="project__title">
72+
<p className="num">03</p>
73+
<h3 className="title">The Plug</h3>
74+
</div>
75+
<p className="project__description">
76+
The Plug connects you with anonymous verified locals who share
77+
their favorite spots for food, drinks, fun, and sightseeing.
78+
IYKYK.
79+
</p>
80+
</div>
81+
</li>
82+
</ul>
83+
</div>
84+
<Link
85+
className="course-work button"
86+
href="/vetsWhoCode"
87+
target="_blank">
88+
Click here to view VetsWhoCode course work
89+
</Link>
90+
</section>
91+
);
92+
};
93+
94+
export default Projects;

‎components/Utility_Components/Button.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react";
2+
import styles from "../../styles/Button.module.css";
3+
4+
5+
type ButtonProps = {
6+
id?: string | undefined;
7+
class: string;
8+
type?: "button" | "submit" | "reset" | undefined;
9+
onClickHandler: () => void;
10+
innerText: string;
11+
ariaControls?: string | undefined;
12+
ariaExpanded?: boolean | undefined;
13+
ariaLabel?: string | undefined;
14+
};
15+
16+
const Button = (props: ButtonProps) => {
17+
return (
18+
<button
19+
id={props.id}
20+
className={styles[props.class]}
21+
onClick={() => props.onClickHandler()}
22+
type={props.type}
23+
aria-controls={props.ariaControls}
24+
aria-expanded={props.ariaExpanded}
25+
aria-label={props.ariaLabel}>
26+
{props.innerText}
27+
</button>
28+
);
29+
};
30+
31+
export default Button;

0 commit comments

Comments
 (0)