├── .gitignore
├── 4.0.0
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── components
        ├── Aboutme
        │   ├── Aboutme.js
        │   └── ame.module.css
        ├── Home.js
        ├── Letsconnect.js
        ├── Letsconnectnew
        │   ├── Letsconnectnew.js
        │   └── lcnew.module.css
        ├── Navbar.js
        ├── Weather.js
        ├── Weathernew.js
        ├── letsconnect.html
        └── show-on-scroll.js
    ├── hashscrolling.jpg
    ├── headshot1.jpg
    ├── icons
        ├── cssicon.png
        ├── cvicon.png
        ├── emailicon.png
        ├── githubicon.png
        ├── html5icon.png
        ├── jsicon.png
        ├── linkedinicon.png
        ├── mongodb-icon.svg
        ├── nodejs-icon.svg
        ├── openicon.png
        ├── postgresql-icon.svg
        ├── reacticon.png
        ├── tailwindcssicon.png
        └── weatherapp.png
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── movieappimage.png
    ├── reportWebVitals.js
    ├── ronaldPowellCV.pdf
    ├── setupTests.js
    ├── tetrisScreenShot.png
    └── weather.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/4.0.0:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/4.0.0


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ## Ron Powell's Tech Portfolio
 3 | 
 4 |     My personal portfolio website, concentrating on my Software Engineering Skills and Work
 5 | 
 6 | API idea1: Google Translate
 7 | API idea2: REST Countries
 8 | API idea3: chatbot
 9 | API idea4: real time weather 
10 | 
11 | ## Tech Stack
12 |     1. HTML
13 |     2. CSS
14 |     3. JavaScript
15 |     4. React
16 |     5. Tailwind
17 | 
18 | ## Resources
19 |     - Youtube
20 |     - MDN
21 |     - https://app.diagrams.net/ (for wire framing)
22 |     - flaticon.com and vectorlogo.zone for tech stack logos
23 |     - w3schools.com for css info
24 |     - google for css, javasctipt, tailwind and react help searches
25 |     - trello
26 | 
27 | ## Future Iterations
28 |     - email/message page where the user can input name, email, subject and message which will be sent to my email
29 |     - navbar to stay at the top
30 |     - add animations of major sections to slide into position from out of the screen when sections come into view on scroll
31 |     - better projects
32 |     - better all around spacing of divs/sections
33 | 
34 | 
35 | ## Attributions
36 |     - HTML5 logo: <a href="https://www.flaticon.com/free-icons/html5" title="html5 icons">Html5 icons created by Freepik - Flaticon</a>
37 | 
38 |     - CSS logo: <a href="https://www.flaticon.com/free-icons/css" title="css icons">Css icons created by Pixel perfect - Flaticon</a>
39 | 
40 |     - JS logo: <a href="https://www.flaticon.com/free-icons/javascript" title="javascript icons">Javascript icons created by Freepik - Flaticon</a>
41 | 
42 |     - React logo: <a href="https://www.flaticon.com/free-icons/react" title="react icons">React icons created by Putra Arif Munazar - Flaticon</a>
43 | 
44 |     - linkedin: <a href="https://www.flaticon.com/free-icons/linkedin" title="linkedin icons">Linkedin icons created by riajulislam - Flaticon</a>
45 | 
46 |     - github: <a href="https://www.flaticon.com/free-icons/github" title="github icons">Github icons created by Pixel perfect - Flaticon</a>
47 | 
48 |     - open: <a href="https://www.flaticon.com/free-icons/export" title="export icons">Export icons created by Amazona Adorada - Flaticon</a>
49 | 
50 |     - cv: <a href="https://www.flaticon.com/free-icons/recruitment" title="recruitment icons">Recruitment icons created by Freepik - Flaticon</a>
51 | 
52 |     - email: <a href="https://www.flaticon.com/free-icons/email" title="email icons">Email icons created by Freepik - Flaticon</a>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mod2project",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emailjs/browser": "^3.11.0",
 7 |     "@testing-library/jest-dom": "^5.17.0",
 8 |     "@testing-library/react": "^13.4.0",
 9 |     "@testing-library/user-event": "^13.5.0",
10 |     "axios": "^1.4.0",
11 |     "react": "^18.2.0",
12 |     "react-dom": "^18.2.0",
13 |     "react-router": "^6.15.0",
14 |     "react-router-dom": "^6.15.0",
15 |     "react-scripts": "5.0.1",
16 |     "react-scroll": "^1.8.9",
17 |     "react-scroll-into-view": "^2.0.2",
18 |     "web-vitals": "^2.1.4"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   },
44 |   "devDependencies": {
45 |     "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import Aboutme from "./components/Aboutme/Aboutme";
  2 | import "./index.css";
  3 | import headshot1 from "./headshot1.jpg";
  4 | import html from "./icons/html5icon.png";
  5 | import css from "./icons/cssicon.png";
  6 | import javasc from "./icons/jsicon.png";
  7 | import reackt from "./icons/reacticon.png";
  8 | import tailwind from "./icons/tailwindcssicon.png";
  9 | import Navbar from "./components/Navbar";
 10 | import github from "./icons/githubicon.png";
 11 | import linkedin from "./icons/linkedinicon.png";
 12 | import openicon from "./icons/openicon.png";
 13 | // import { Link } from "react-scroll";
 14 | import tetris from "./tetrisScreenShot.png";
 15 | // import Weathernew from "./components/Weathernew";
 16 | import email from "./icons/emailicon.png";
 17 | import "./components/Aboutme/ame.module.css";
 18 | import mycv from "./ronaldPowellCV.pdf";
 19 | import cvicon from "./icons/cvicon.png";
 20 | import weatherapi from './icons/weatherapp.png';
 21 | import movieimage from './movieappimage.png';
 22 | 
 23 | // import { Link } from 'react-router-dom';
 24 | // import Letsconnectnew from './components/Letsconnectnew/Letsconnectnew';
 25 | 
 26 | function App() {
 27 |   return (
 28 |     <div className="App">
 29 |       <header className="headerMain">
 30 |         <Navbar />
 31 |       </header>
 32 |       <br></br>
 33 |       <main id="home">
 34 |         <section className="mainSection">
 35 |           <div className="mainContainer">
 36 |             <div className="homeContentLeft">
 37 |               <h1 className="titles">Junior Software Developer</h1>
 38 |               <div className="personalContacts">
 39 |                 <a
 40 |                   href="https://www.linkedin.com/in/ron-powell-nyc212/"
 41 |                   target="_blank"
 42 |                   rel="noreferrer"
 43 |                 >
 44 |                   <img className="linkedin" src={linkedin} title="LinkedIn" alt=''/>
 45 |                 </a>
 46 |                 <a
 47 |                   href="https://github.com/Notesmane"
 48 |                   target="_blank"
 49 |                   rel="noreferrer"
 50 |                 >
 51 |                   <img className="github" src={github} title="Github" alt='' />
 52 |                 </a>
 53 | 
 54 |                 <a href={mycv} target="_blank" rel='noreferrer'>
 55 |                   <img className="resume" src={cvicon} title="Resume" alt=''/>
 56 |                 </a>
 57 |               </div>
 58 |               <p className="quickBlurb">
 59 |                 Hi! My Name is Ron Powell. I'm a recent graduate from
 60 |                 PerScholas' Certificate Course for Software Development.
 61 |                 PerScholas is fully-sponsored by Google and Comcast and prepares
 62 |                 its student for real world development. I'm based in NYC and
 63 |                 can't wait to work with you on your next project.
 64 |               </p>
 65 |               <div className="techskills">
 66 |                 <h4>Tech Stack </h4>
 67 |                 <div className="skillsbox">
 68 |                   <img className="html" src={html} title="HTML-5" alt=''/>
 69 |                 </div>
 70 |                 <div className="skillsbox">
 71 |                   <img className="css" src={css} title="CSS3" alt=''/>
 72 |                 </div>
 73 |                 <div className="skillsbox">
 74 |                   <img className="javasc" src={javasc} title="JavaScript" alt=''/>
 75 |                 </div>
 76 |                 <div className="skillsbox">
 77 |                   <img className="reackt" src={reackt} title="React" alt=''/>
 78 |                 </div>
 79 |                 <div className="skillsbox">
 80 |                   <img
 81 |                     className="tailwind"
 82 |                     src={tailwind}
 83 |                     title="TailwindCSS"
 84 |                     alt=''
 85 |                   />
 86 |                 </div>
 87 |               </div>
 88 |             </div>
 89 |             <div className="homeContentRight">
 90 |               <img className="h-full max-w-full" alt="..." src={headshot1} />
 91 |             </div>
 92 |           </div>
 93 |         </section>
 94 |         <section className="mainSection">
 95 |           <div className="projectsTitleBox">
 96 |             <h2 className="titles">Projects</h2>
 97 |             <h4>
 98 |               Each crafted with efficiency, style and usability in mind.
 99 |             </h4>
100 |           </div>
101 |           <div className="mainProjectContainerTop">
102 |             {" "}
103 |             {/* OUTER MOST CONTAINER */}
104 |             <div className="projectImageColumn">
105 |               {" "}
106 |               {/* PROJECT IMAGE CONTAINER */}
107 |               <img
108 |                 className="tetrisScreenShot"
109 |                 src={tetris}
110 |                 title="TetrisGame"
111 |                 alt=''
112 |               />
113 |             </div>
114 |             <div className="projectInfoColumn">
115 |               {" "}
116 |               {/* PROJECT INFO CONTAINER */}
117 |               <div className="projectContents">
118 |                 <h3>Tetris</h3>
119 |               </div>
120 |               <div className="projectContents">
121 |                 <p>
122 |                   Have a few minutes to burn? How about you try your hand at
123 |                   this fully immersive rendition of the retro arcade favorite:
124 |                   Tetris! Go head to head against the computer in this
125 |                   stimulating cyberpunk landscape while listening to a great
126 |                   score to fit the theme.
127 |                 </p>
128 |               </div>
129 |               <div className="languages">
130 |                 <h4>HTML</h4>
131 |                 <h4>CSS</h4>
132 |                 <h4>JavaScript</h4>
133 |               </div>
134 |               <div className="projectLinks">
135 |                 <div className="sourceLinks">
136 |                   <h4>Code:</h4>
137 |                   <a
138 |                     href="https://github.com/Notesmane/Tetris-Project"
139 |                     target="_blank"
140 |                     rel="noreferrer"
141 |                   >
142 |                     <img className="github" src={github} title="Github" alt=''/>
143 |                   </a>
144 |                 </div>
145 | 
146 |                 <div className="sourceLinks">
147 |                   <h4>Demo:</h4>
148 |                   <a
149 |                     href="https://notesmane.github.io/Tetris-Project/"
150 |                     target="_blank"
151 |                     rel="noreferrer"
152 |                   >
153 |                     <img className="openIcon" src={openicon} title="OpenPage" alt=''/>
154 |                   </a>
155 |                 </div>
156 |               </div>
157 |             </div>
158 |           </div>
159 |           <div className="mainProjectContainer">
160 |             {" "}
161 |             {/* OUTER MOST CONTAINER */}
162 |             <div className="projectInfoColumn">
163 |               {" "}
164 |               {/* PROJECT INFO CONTAINER */}
165 |               <div className="projectContents">
166 |                 <h3>The Weather Api</h3>
167 |               </div>
168 |               <div className="projectContents">
169 |                 <p>
170 |                   It's always good to know the current weather! With this App you can type in any city you want, and around the world and get up-to-date information about that city's current weather conditions! Just dont be a smart-alec and type in... -take a breath- Taumatawhakatangihangak -take another breath- oauauotamateaturipukaka  -and another- pikimaungahoronuku -almost there- pokaiwhenuakitanatahu... and expect an answer.
171 |                 </p>
172 |               </div>
173 |               <div className="languages">
174 |                 <h4>JavaScript</h4>
175 |                 <h4>React</h4>
176 |                 <h4>CSS</h4>
177 |               </div>
178 |               <div className="projectLinks">
179 |                 <div className="sourceLinks">
180 |                   <h4>Code:</h4>
181 |                   <a
182 |                     href="https://github.com/Notesmane/Weather-App-API-Practice"
183 |                     target="_blank"
184 |                     rel="noreferrer"
185 |                   >
186 |                     <img className="github" src={github} title="Github" alt=''/>
187 |                   </a>
188 |                 </div>
189 | 
190 |                 <div className="sourceLinks">
191 |                   <h4>Demo:</h4>
192 |                   <a
193 |                     href="https://notesmane.github.io/Tetris-Project/"
194 |                     target="_blank"
195 |                     rel="noreferrer"
196 |                   >
197 |                     <img className="openIcon" src={openicon} title="OpenPage" alt=''/>
198 |                   </a>
199 |                 </div>
200 |               </div>
201 |             </div>
202 |             <div className="projectImageColumn">
203 |               {" "}
204 |               {/* PROJECT IMAGE CONTAINER */}
205 |               <img
206 |                 className="tetrisScreenShot"
207 |                 src={weatherapi}
208 |                 title="The Weather API"
209 |                 alt=''
210 |               />
211 |             </div>
212 |           </div>
213 |           <div className="mainProjectContainer">
214 |             {" "}
215 |             {/* OUTER MOST CONTAINER */}
216 |             <div className="projectImageColumn">
217 |               {" "}
218 |               {/* PROJECT IMAGE CONTAINER */}
219 |               <img
220 |                 className="tetrisScreenShot"
221 |                 src={movieimage}
222 |                 title="TetrisGame"
223 |                 alt=''
224 |               />
225 |             </div>
226 |             <div className="projectInfoColumn">
227 |               {" "}
228 |               {/* PROJECT INFO CONTAINER */}
229 |               <div className="projectContents">
230 |                 <h3>The Movie App</h3>
231 |               </div>
232 |               <div className="projectContents">
233 |                 <p>
234 |                   Don't you just hate it when you can't remember when a movie came out? Well with this app you can type in any movie title and abracadabra, the release year will be output along with some other basic information. Happy searching!
235 |                 </p>
236 |               </div>
237 |               <div className="languages">
238 |                 <h4>HTML</h4>
239 |                 <h4>CSS</h4>
240 |                 <h4>JavaScript</h4>
241 |               </div>
242 |               <div className="projectLinks">
243 |                 <div className="sourceLinks">
244 |                   <h4>Code:</h4>
245 |                   <a
246 |                     href="https://github.com/Notesmane/Movie-App-Practice"
247 |                     target="_blank"
248 |                     rel="noreferrer"
249 |                   >
250 |                     <img className="github" src={github} title="Github" alt=''/>
251 |                   </a>
252 |                 </div>
253 | 
254 |                 <div className="sourceLinks">
255 |                   <h4>Demo:</h4>
256 |                   <a
257 |                     href="https://notesmane.github.io/Tetris-Project/"
258 |                     target="_blank"
259 |                     rel="noreferrer"
260 |                   >
261 |                     <img className="openIcon" src={openicon} title="OpenPage" alt=''/>
262 |                   </a>
263 |                 </div>
264 |               </div>
265 |             </div>
266 |           </div>
267 |         </section>
268 | 
269 |         {/* <div className="projectboxes"> 
270 |               <div className='projects'> 
271 |                 <div className="projectInfoColumn">
272 |                 <div>
273 | 
274 |                 </div>
275 | 
276 |                 </div>
277 | 
278 |               </div>
279 |               <div className='projects'>
280 |                 <h3>Tetris</h3>
281 |                 <p>
282 |                   Have a few minutes to burn? How about you try your hand at this
283 |                   fully immersive rendition of the retro arcade favorite: Tetris!
284 |                   Go head to head against the computer in this stimulating
285 |                   cyberpunk landscape while listening to a great score to fit the
286 |                   theme.
287 |                 </p>
288 |                 <h4>Code</h4>
289 |                 <img className="github" src={github} title="Github" />
290 |                 <h4>Live Demo</h4>
291 |                 <img className="openIcon" src={openicon} title="OpenPage" />
292 | 
293 |               </div>
294 |               <div className='projects'>
295 |                 <h3>Tetris</h3>
296 |                 <p>
297 |                   Have a few minutes to burn? How about you try your hand at this
298 |                   fully immersive rendition of the retro arcade favorite: Tetris!
299 |                   Go head to head against the computer in this stimulating
300 |                   cyberpunk landscape while listening to a great score to fit the
301 |                   theme.
302 |                 </p>
303 |                 <h4>Code</h4>
304 |                 <img className="github" src={github} title="Github" />
305 |                 <h4>Live Demo</h4>
306 |                 <img className="openIcon" src={openicon} title="OpenPage" />
307 | 
308 |               </div>
309 |             </div> */}
310 | 
311 |         {/* <br></br> */}
312 |         <div className="mainContainer">
313 |           <Aboutme />
314 |         </div>
315 |       </main>
316 |       <br></br>
317 |       <footer>
318 |         <div className="footer">
319 |           <br></br>
320 |           {/* <button>Email</button> */}
321 |           <a
322 |             href="https://www.linkedin.com/in/ron-powell-nyc212/"
323 |             target="_blank"
324 |             rel="noreferrer"
325 |           >
326 |             <img className="linkedin" src={linkedin} title="LinkedIn" alt=''/>
327 |           </a>
328 |           <a
329 |             href="https://github.com/Notesmane"
330 |             target="_blank"
331 |             rel="noreferrer"
332 |           >
333 |             <img className="github" src={github} title="Github" alt=''/>
334 |           </a>
335 |           <a
336 |             href="mailto:ronpowell156@gmail.com"
337 |             target="_blank"
338 |             rel="noreferrer"
339 |           >
340 |             <img className="email" src={email} title="Contact" alt=''/>
341 |           </a>
342 |           {/* <button>Contact</button> */}
343 |           {/* <button href="https://github.com/Notesmane">Github</button> */}
344 |           <br></br>
345 |         </div>
346 |   
347 |         <div className='copyRights'>
348 |             <p>Website powered by: NotesMane of Noteworthy Productions   |   All Rights Reserved. Copyright, NYC - 2023</p>
349 |         </div>
350 |       </footer>
351 |     </div>
352 |   );
353 | }
354 | 
355 | export default App;
356 | 
357 | 
358 | 
359 | // {/* <nav className="navbar">
360 | // {/* <div className='headerLeft'> */}
361 | // <Weathernew />
362 | // {/* </div> */}
363 | // <div className="headerRight">
364 | //   <Link activeClass="active" smooth spy to="home">
365 | //     Home
366 | //   </Link>
367 | //   <Link activeClass="active" smooth spy to="projectsTitleBox">
368 | //     Projects
369 | //   </Link>
370 | //   <Link activeClass="active" smooth spy to="about">
371 | //     About Me
372 | //   </Link>
373 | //   <Link to="ContactForm">
374 | //     {/* <Letsconnectnew /> */}
375 | //     Let's Connect
376 | //   </Link>
377 | // </div>
378 | // </nav> */}


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/components/Aboutme/Aboutme.js:
--------------------------------------------------------------------------------
 1 | // import cvicon from '../src/icons/cvicon.png';
 2 | // import mycv from './compon';
 3 | import './ame.module.css';
 4 | 
 5 | 
 6 | 
 7 | function Aboutme() {
 8 | 
 9 | 
10 |   return (
11 |     <div id="about">
12 |       <h2 className="aboutMe">About Me</h2>
13 |       <div className='biotext'>
14 | 
15 |         Highly motivated Software Engineer with a unique background as an
16 |         Industrial Engineer in the prestigious NYC Carpenter's Union with a
17 |         focus in Commercial Carpentry. Demonstrated adaptability, exceptional
18 |         multitasking abilities, and proven team leadership skills in managing
19 |         complex workflows. Eager to leverage my diverse experience and embark on
20 |         a fulfilling career as a full stack engineer, where I can independently
21 |         and collaboratively cultivate my technical skills. Committed to
22 |         delivering innovative solutions and contributing to the success of a
23 |         leading software engineering organization.
24 |         <br></br><br></br>
25 |         My transition into Tech... As a Carpenter in the NYC Union, I honed my
26 |         skills in all aspects of carpentry. However, due to the changing climate
27 |         of the Construction industry post-lockdown, I decided to explore a new
28 |         industry that had captured my interest during the quarantine;
29 |         day-trading.
30 |         <br></br><br></br>
31 |         During this time, I delved into day-trading and discovered TD
32 |         Ameritrade's ThinkOrSwim platform, which featured a proprietary coding
33 |         language called "Thinkscript." As someone who had a natural affinity for
34 |         computer science, I found myself enjoying the coding aspect of trading
35 |         more than the actual trading itself. The more I learned about
36 |         Thinkscript, the more I realized that I had rekindled my passion for
37 |         computer science and the creativity that can be expressed through
38 |         coding.
39 |         <br></br><br></br>
40 |         After pausing my trading activities in September 2022, I enrolled in
41 |         Harvard's Extension course Cs50x, which provides a comprehensive
42 |         introduction to software engineering, including C, Python, Javascript,
43 |         HTML, CSS, and topics such as arrays, algorithms, data structures, and
44 |         memory. I couldn't get enough and proceeded my tech education completing
45 |         various certificate programs in various tech related areas such as Cloud
46 |         Computing at the IBM Skills Network, Intro to Agile Dev and Scrum on
47 |         Coursera, Intro to DevOps also on Coursera, and even CompTia's
48 |         CyberSecurity(CC) course.
49 |         <br></br><br></br>
50 |         I'm currently enrolled in PerScholas for Software Engineering, which is
51 |         sponsored by Google and Comcast.
52 | 
53 |       </div>
54 |       {/* <p className="biotext">
55 |         <br></br>
56 |         <br></br>
57 |         <br></br>
58 |         <br></br>
59 |         <br></br>
60 |         <br></br>
61 |         <br></br>
62 |         <br></br>
63 |       </p> */}
64 |       <a href="https://github.com/Notesmane" target='_blank' rel='noreferrer'>
65 |             {/* <img className="email" src={cvicon} title="Contact" /> */}
66 |           </a>
67 |       <div className="forFun">
68 |       <select id="forFun">
69 |         <option value="For Fun" selected>
70 |         For Fun
71 |         </option>
72 |         <option value="Cycling">Cycling</option>
73 |         <option value="Travelling to New Places">Travelling to New Places</option>
74 |         <option value="Anything Batman">Anything Batman</option>
75 |         <option value="Going to The Movies">Going to The Movies</option>
76 |         <option value="Beach/Park Days">Beach/Park Days</option>
77 |       </select>
78 |         {/* <h2>For Fun</h2>
79 |         <ul>
80 |           <li>Strength Training</li>
81 |           <li>Cycling</li>
82 |           <li>Travelling to New Places</li>
83 |           <li>Anything Batman</li>
84 |           <li>Going to The Movies</li>
85 |           <li>Beach Days</li>
86 |         </ul> */}
87 |       </div>
88 |     </div>
89 |   );
90 | }
91 | 
92 | export default Aboutme;
93 | 


--------------------------------------------------------------------------------
/src/components/Aboutme/ame.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/components/Aboutme/ame.module.css


--------------------------------------------------------------------------------
/src/components/Home.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/components/Home.js


--------------------------------------------------------------------------------
/src/components/Letsconnect.js:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react';
  2 | 
  3 | export default function ContactForm() {
  4 |     const [formData, setFormData] = useState({name: '', email: '', subject: '', message: ''});
  5 | 
  6 |     const handleChange = (e) => {
  7 |         const { name, value } = e.target;
  8 |         setFormData((prevFormData) => ({ ...prevFormData, [name]: value})); 
  9 |     };
 10 | 
 11 |     const handleSubmit = (e) => {
 12 |         e.preventDefault();
 13 |         alert(`Name: ${formData.name}, Email: ${formData.email}, Subject: ${formData.subject}, Message: ${formData.message}`);
 14 |     };
 15 |     return (
 16 |         <form onSubmit={handleSubmit}>
 17 | 
 18 |             <label htmlFor="name">Name:</label>
 19 |             <input type="text" id="name" name="name" value={formData.name} onChange={handleChange}/>
 20 | 
 21 |             <label htmlFor="email">Email:</label>
 22 |             <input type="email" id="email" name="email" value={formData.email} onChange={handleChange}/>
 23 | 
 24 |             <label htmlFor="subject">Subject:</label>
 25 |             <input type="subject" id="subject" name="subject" value={formData.subject} onChange={handleChange}/>
 26 | 
 27 |             <label htmlFor="message">Message:</label>
 28 |             <input type="" id="message" name="message" value={formData.message} onChange={handleChange}/>
 29 | 
 30 |             <button type="submit">Submit</button>
 31 | 
 32 |         </form>
 33 |     )
 34 | }
 35 | 
 36 | 
 37 | 
 38 | 
 39 | 
 40 | // import {useState} from 'react';
 41 |  
 42 | // export default function ContactForm()  {
 43 | // 	const  [name, setName] =  useState('');
 44 | 
 45 | // 	const  handleChange = (e) => {
 46 | // 		setName(e.target.value);
 47 | // 	};
 48 | 
 49 | // return  (
 50 | // <form>
 51 | // 	<label>Input Value:
 52 | //         <input  
 53 | //             type="text"  
 54 | //             value={ name } 
 55 | //             onChange={handleChange} 
 56 | //         />
 57 | // 	</label>
 58 | // 	<p>Name: { name }</p>
 59 | // </form>
 60 | // )};
 61 | 
 62 | 
 63 | 
 64 | // ====================================================
 65 | 
 66 | 
 67 | // import { useState, useRef, useContext } from 'react';
 68 | 
 69 | // // const [formData, setFormData] = useState({
 70 | 
 71 | // //     name:'',
 72 | // //     email:'',
 73 | // //     subject:'',
 74 | // //     message:''
 75 | // // })
 76 | 
 77 | // const handleSubmit = (e) => {
 78 | //     e.preventDefault();
 79 | 
 80 | //     const newMessage = {...formData, id: new Date()};
 81 | // }
 82 | 
 83 | // function Letsconnect() {
 84 | 
 85 | //     return (
 86 | //         <div>
 87 | //             <h1>Let's Connect</h1>
 88 | //             <p>Interested in connecting about a project or a job opportunity? Feel free to leave me a message and I will get back to you shortly.</p>
 89 | //             <br/>
 90 | //             <form>
 91 | //                 <div>
 92 | //                     <label>Your Name: </label>
 93 | //                     <input
 94 | //                         type='text'
 95 | //                         value={formData.name}
 96 | //                         // onChange={handleChange}
 97 | //                         name='name'            
 98 | //                     />
 99 | //                 </div>
100 | //                 <div>
101 | //                     <label>Your Email: </label>
102 | //                     <input
103 | //                         type='text'
104 | //                         value={formData.email}
105 | //                         // onChange={handleChange}
106 | //                         name='email'
107 | //                         placeholder="Enter your Email"            
108 | //                     />
109 | //                 </div>
110 | //                 <div>
111 | //                     <label>Subject: </label>
112 | //                     <input
113 | //                         type='text'
114 | //                         value={formData.subject}
115 | //                         // onChange={handleChange}
116 | //                         name='subject'            
117 | //                     />
118 | //                 </div>
119 | //                 <div>
120 | //                     <label>Message: </label>
121 | //                     <input
122 | //                         type='text'
123 | //                         value={formData.message}
124 | //                         // onChange={handleChange}
125 | //                         name='message'            
126 | //                     />
127 | //                 </div>
128 | //                 <button>Submit</button>
129 |                 
130 | 
131 | //             </form>
132 | //         </div>
133 | //     )
134 | 
135 | // }
136 | 
137 | // export default Letsconnect;


--------------------------------------------------------------------------------
/src/components/Letsconnectnew/Letsconnectnew.js:
--------------------------------------------------------------------------------
  1 | import "./App.css";
  2 | import { useState } from "react";
  3 | import './lcnew.module.css';
  4 | 
  5 | function ContactForm() {
  6 |   const [formData, setFormData] = useState({
  7 |     name: "",
  8 |     email: "",
  9 |     subject: "",
 10 |     message: "",
 11 |   });
 12 | 
 13 |   const handleChange = (e) => {
 14 |     const { name, value } = e.target;
 15 |     setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
 16 |   };
 17 | 
 18 |   const handleSubmit = (e) => {
 19 |     e.preventDefault();
 20 |     alert(
 21 |       `Name: ${formData.name}, Email: ${formData.email}, Subject: ${formData.subject}, Message: ${formData.message}`
 22 |     );
 23 |   };
 24 |   return (
 25 |     <div className="Form">
 26 |       <div>
 27 |         <h1>
 28 |           Thanks for taking the time to reach out. How can I help you today?
 29 |         </h1>
 30 |       </div>
 31 |       <div className="contactFormContainer">
 32 |         <form onSubmit={handleSubmit}>
 33 |           <div className="nameEmailContainers">
 34 |             <div>
 35 |               <label htmlFor="name">Name:</label>
 36 | 
 37 |               <div className="inputBox">
 38 |                 <input
 39 |                   type="text"
 40 |                   id="name"
 41 |                   name="name"
 42 |                   value={formData.name}
 43 |                   onChange={handleChange}
 44 |                 />
 45 |               </div>
 46 |             </div>
 47 | 
 48 |             <div className="nameEmailContainers">
 49 |               <div>
 50 |                 <label htmlFor="email">Email:</label>
 51 | 
 52 |                 <div className="inputBox">
 53 |                   <input
 54 |                     type="email"
 55 |                     id="email"
 56 |                     name="email"
 57 |                     value={formData.email}
 58 |                     onChange={handleChange}
 59 |                   />
 60 |                 </div>
 61 |               </div>
 62 |             </div>
 63 |           </div>
 64 | 
 65 |           <div className="subjectContainer">
 66 |             <div>
 67 |               <label htmlFor="subject">Subject:</label>
 68 |               <div className="inputBox">
 69 |                 <input
 70 |                   type="subject"
 71 |                   className="subjectBox"
 72 |                   id="subject"
 73 |                   name="subject"
 74 |                   value={formData.subject}
 75 |                   onChange={handleChange}
 76 |                 />
 77 |               </div>
 78 | 
 79 |             </div>
 80 |           </div>
 81 | 
 82 |           <div className="propContainer">
 83 |             <div>
 84 | 
 85 |             </div>
 86 |             <label htmlFor="message">Message:</label>
 87 | 
 88 |             <div className="inputBox">
 89 |               <input
 90 |                 type="message"
 91 |                 className="messageBox"
 92 |                 id="message"
 93 |                 name="message"
 94 |                 value={formData.message}
 95 |                 onChange={handleChange}
 96 |               />
 97 |             </div>
 98 |           </div>
 99 | 
100 |           <div className="propContainer">
101 |             <button type="submit">Submit</button>
102 |           </div>
103 |         </form>
104 |         
105 |       </div>
106 |     </div>
107 |   );
108 | }
109 | 
110 | export default ContactForm;
111 | 


--------------------------------------------------------------------------------
/src/components/Letsconnectnew/lcnew.module.css:
--------------------------------------------------------------------------------
 1 | .Form {
 2 |     text-align: center;
 3 |   }
 4 |   
 5 |   .contactFormContainer {
 6 |     display: flex;
 7 |     justify-content: center;
 8 |     flex-direction: column;
 9 |     background-color: grey;
10 |     width: 70%;
11 |     margin: 10%;
12 |   }
13 |   
14 |   .nameEmailContainers {
15 |     display: flex;
16 |     justify-content: center;
17 |     text-align: left;
18 |   }
19 |   
20 |   .subjectContainer {
21 |     display: flex;
22 |     justify-content: center;
23 |     text-align: left;
24 |   }
25 |   
26 |   .subjectBox {
27 |     width: 500px;
28 |   }
29 |   
30 |   .messageBox {
31 |     width: 500px;
32 |     height: 200px;
33 |   }


--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
 1 | // import Letsconnect from "./Letsconnect";
 2 | import { Link } from 'react-scroll';
 3 | // import { Link } from 'react-router-dom';
 4 | import Weathernew from "./Weathernew";
 5 | // import ScrollTo from 'react-scroll-into-view';
 6 | // import Letsconnect from "./components/Letsconnect";
 7 | import React from 'react';
 8 | import ReactDOM from 'react-dom';
 9 | 
10 | const Navbar = () => {
11 |   
12 |   return (
13 |     <nav className="navbar">
14 |     {/* <div className='headerLeft'> */}
15 |     <Weathernew />
16 |     {/* </div> */}
17 |     <div className="headerRight">
18 |       <Link activeClass="active" smooth spy to="home">
19 |         Home
20 |       </Link>
21 |       <Link activeClass="active" smooth spy to="projectsTitleBox">
22 |         Projects
23 |       </Link>
24 |       <Link activeClass="active" smooth spy to="about">
25 |         About Me
26 |       </Link>
27 |       <Link to="/Mod2/mod2project/src/components/Letsconnectnew/Letsconnectnew.js">
28 |       {/* <a href='letsconnect.html'> */}
29 |         Let's Connect
30 |       {/* </a> */}
31 |         {/* <Letsconnectnew /> */}
32 |       </Link>
33 |     </div>
34 |   </nav>
35 |   );
36 | };
37 | 
38 | export default Navbar;
39 | 
40 | 
41 | 
42 | 


--------------------------------------------------------------------------------
/src/components/Weather.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import axios from 'axios';
 3 | 
 4 | function App() {
 5 | 
 6 |   const [data, setData] = useState({})
 7 |   const [location, setLocation] = useState('')
 8 | 
 9 |   const url = `https://api.openweathermap.org/data/2.5/weather?q=${location}&units=imperial&appid=fb1f49e56c08682cf0a5390a623da3e1`
10 | 
11 |   const searchLocation = (e) => {
12 |     if (e.key === 'Enter') {
13 |       axios.get(url).then((Response) => {
14 |         setData(Response.data)
15 |         console.log(Response.data)
16 |       })
17 |       setLocation('')
18 |     }
19 |   }
20 | 
21 |   return (
22 |     <div className="App">
23 |       <div className='search'>
24 |         <input 
25 |         value={location}
26 |         onChange={e => setLocation(e.target.value)}
27 |         onKeyPress={searchLocation}
28 |         placeholder='Enter Location'
29 |         />
30 |       </div>
31 |       <div className="container">
32 |         <div className='top'>
33 |           <div className='location'>
34 |             <p>{data.name}</p>
35 |           </div>
36 |           <div className='temp'>
37 |             {data.main ? <h1>{data.main.temp.toFixed()}ºF</h1> : null}
38 |           </div>
39 |           <div className='description'>
40 |             {data.weather ? <p>{data.weather[0].main}</p> : null}
41 |           </div>
42 |         </div>
43 | 
44 |         {data.name != undefined &&
45 |           <div className='bottom'>
46 |             <div className='feels'>
47 |               {data.main ? <p className='bold'>{data.main.feels_like.toFixed()}ºF</p> : null}
48 |               <p>Feels Like</p>
49 |             </div>
50 |             <div className='humidity'>
51 |               {data.main ? <p className='bold'>{data.main.humidity}%</p> : null}
52 |               <p>Humidity</p>
53 |             </div>
54 |             <div className='wind'>
55 |               {data.wind ? <p className='bold'>{data.wind.speed} MPH</p> : null}
56 |               <p>Wind Speed</p>
57 |             </div>
58 |           </div>
59 |         }
60 | 
61 | 
62 | 
63 |       </div>
64 |     </div>
65 |   );
66 | }
67 | 
68 | export default App;
69 | 


--------------------------------------------------------------------------------
/src/components/Weathernew.js:
--------------------------------------------------------------------------------
 1 | // import React, { useState, useEffect } from "react";
 2 | // import "./App.css";
 3 | import React, { useState } from "react";
 4 | import axios from "axios";
 5 | 
 6 | function Weather() {
 7 |   const [data, setData] = useState({});
 8 |   const [location, setLocation] = useState("");
 9 | 
10 |   const url = `https://api.openweathermap.org/data/2.5/weather?q=${location}&units=imperial&appid=fb1f49e56c08682cf0a5390a623da3e1`;
11 | 
12 |   
13 |   const searchLocation = (e) => {
14 |     if (e.key === "Enter") {
15 |       axios.get(url).then((Response) => {
16 |         setData(Response.data);
17 |         console.log(Response.data);
18 |       });
19 |       setLocation("");
20 |     }
21 |   };
22 | 
23 |   return (
24 |     <div className="weatherContainer">
25 |       <div className="weather">
26 |         <div className="search">
27 |           <input
28 |             value={location}
29 |             onChange={(e) => setLocation(e.target.value)}
30 |             onKeyPress={searchLocation}
31 |             placeholder="Enter Your City"
32 |           />
33 |         </div>
34 |       </div>
35 |       <div className="weatherLeft">
36 |         <div className="cityleft">
37 |           <p>{data.name}</p>
38 |           {data.main ? <p className='actualTemp'>{data.main.temp.toFixed()}ºF</p> : null}
39 |         </div>
40 |         <div className='cityRight'>
41 |           {data.main ? (<p className="bold">Real Feel: {data.main.feels_like.toFixed()}ºF</p>) : null}
42 |           {data.weather ? (<p className="bold2">{data.weather[0].main}</p>) : null}
43 |         </div>
44 |       </div>
45 |     </div>
46 |   );
47 | }
48 | 
49 | export default Weather;
50 | 


--------------------------------------------------------------------------------
/src/components/letsconnect.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Let's Connect</title>
 7 | </head>
 8 | <body>
 9 |     <div className="Form">
10 |         <div>
11 |           <h1>
12 |             Thanks for taking the time to reach out. How can I help you today?
13 |           </h1>
14 |         </div>
15 |         <div className="contactFormContainer">
16 |           <form onSubmit={handleSubmit}>
17 |             <div className="nameEmailContainers">
18 |               <div>
19 |                 <label htmlFor="name">Name:</label>
20 |   
21 |                 <div className="inputBox">
22 |                   <input
23 |                     type="text"
24 |                     id="name"
25 |                     name="name"
26 |                     value={formData.name}
27 |                     onChange={handleChange}
28 |                   />
29 |                 </div>
30 |               </div>
31 |   
32 |               <div className="nameEmailContainers">
33 |                 <div>
34 |                   <label htmlFor="email">Email:</label>
35 |   
36 |                   <div className="inputBox">
37 |                     <input
38 |                       type="email"
39 |                       id="email"
40 |                       name="email"
41 |                       value={formData.email}
42 |                       onChange={handleChange}
43 |                     />
44 |                   </div>
45 |                 </div>
46 |               </div>
47 |             </div>
48 |   
49 |             <div className="subjectContainer">
50 |               <div>
51 |                 <label htmlFor="subject">Subject:</label>
52 |                 <div className="inputBox">
53 |                   <input
54 |                     type="subject"
55 |                     className="subjectBox"
56 |                     id="subject"
57 |                     name="subject"
58 |                     value={formData.subject}
59 |                     onChange={handleChange}
60 |                   />
61 |                 </div>
62 |   
63 |               </div>
64 |             </div>
65 |   
66 |             <div className="propContainer">
67 |               <div>
68 |   
69 |               </div>
70 |               <label htmlFor="message">Message:</label>
71 |   
72 |               <div className="inputBox">
73 |                 <input
74 |                   type="message"
75 |                   className="messageBox"
76 |                   id="message"
77 |                   name="message"
78 |                   value={formData.message}
79 |                   onChange={handleChange}
80 |                 />
81 |               </div>
82 |             </div>
83 |   
84 |             <div className="propContainer">
85 |               <button type="submit">Submit</button>
86 |             </div>
87 |           </form>
88 |           
89 |         </div>
90 |       </div>
91 |   
92 | </body>
93 | </html>


--------------------------------------------------------------------------------
/src/components/show-on-scroll.js:
--------------------------------------------------------------------------------
 1 | const scroll = window.requestAnimationFrame || 
 2 |     function(callback) { window.setTimeout(callback, 1000/60)};
 3 | 
 4 | const elementsToShow = document.querySelectorAll('.show-on-scroll');
 5 | 
 6 | function loop() {
 7 |     elementsToShow.forEach(function(element) {
 8 |         if (isElementInViewport(element)) {
 9 |             element.classList.add('is-visible')
10 |         } else {
11 |             element.classList.remove('is-visible');
12 |         }
13 |     });
14 |     scroll(loop);
15 | }
16 | 
17 | loop();
18 | 
19 | function isElementInViewport(el) {
20 |     if (typeof jQuery === 'function' && el instanceof jQuery) {
21 |         el = el[0];
22 |     }
23 |     let rect = el.getBoundingClientRect();
24 |     return (
25 |         (rect.top <= 0
26 |             && rect.bottom >= 0)
27 |         ||
28 |         (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
29 |         rect.top <= (window.innerHeight || document.documentElement.clientHeight))
30 |         ||
31 |         (rect.top >= 0 &&
32 |             rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
33 |     )
34 | }


--------------------------------------------------------------------------------
/src/hashscrolling.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/hashscrolling.jpg


--------------------------------------------------------------------------------
/src/headshot1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/headshot1.jpg


--------------------------------------------------------------------------------
/src/icons/cssicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/icons/cssicon.png


--------------------------------------------------------------------------------
/src/icons/cvicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/icons/cvicon.png


--------------------------------------------------------------------------------
/src/icons/emailicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/icons/emailicon.png


--------------------------------------------------------------------------------
/src/icons/githubicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/icons/githubicon.png


--------------------------------------------------------------------------------
/src/icons/html5icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/icons/html5icon.png


--------------------------------------------------------------------------------
/src/icons/jsicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/icons/jsicon.png


--------------------------------------------------------------------------------
/src/icons/linkedinicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/icons/linkedinicon.png


--------------------------------------------------------------------------------
/src/icons/mongodb-icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32"><path d="M15.9.087l.854 1.604c.192.296.4.558.645.802.715.715 1.394 1.464 2.004 2.266 1.447 1.9 2.423 4.01 3.12 6.292.418 1.394.645 2.824.662 4.27.07 4.323-1.412 8.035-4.4 11.12-.488.488-1.01.94-1.57 1.342-.296 0-.436-.227-.558-.436-.227-.383-.366-.82-.436-1.255-.105-.523-.174-1.046-.14-1.586v-.244C16.057 24.21 15.796.21 15.9.087z" fill="#599636"/><path d="M15.9.034c-.035-.07-.07-.017-.105.017.017.35-.105.662-.296.96-.21.296-.488.523-.767.767-1.55 1.342-2.77 2.963-3.747 4.776-1.3 2.44-1.97 5.055-2.16 7.808-.087.993.314 4.497.627 5.508.854 2.684 2.388 4.933 4.375 6.885.488.47 1.01.906 1.55 1.325.157 0 .174-.14.21-.244a4.78 4.78 0 0 0 .157-.68l.35-2.614L15.9.034z" fill="#6cac48"/><path d="M16.754 28.845c.035-.4.227-.732.436-1.063-.21-.087-.366-.26-.488-.453-.105-.174-.192-.383-.26-.575-.244-.732-.296-1.5-.366-2.248v-.453c-.087.07-.105.662-.105.75a17.37 17.37 0 0 1-.314 2.353c-.052.314-.087.627-.28.906 0 .035 0 .07.017.122.314.924.4 1.865.453 2.824v.35c0 .418-.017.33.33.47.14.052.296.07.436.174.105 0 .122-.087.122-.157l-.052-.575v-1.604c-.017-.28.035-.558.07-.82z" fill="#c2bfbf"/></svg>


--------------------------------------------------------------------------------
/src/icons/nodejs-icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32" preserveAspectRatio="xMidYMid" fill="#8cc84b"><path d="M14.656.427c.8-.453 1.82-.455 2.6 0L29.2 7.16c.747.42 1.247 1.253 1.24 2.114v13.5c.005.897-.544 1.748-1.332 2.16l-11.88 6.702a2.6 2.6 0 0 1-2.639-.073l-3.565-2.06c-.243-.145-.516-.26-.688-.495.152-.204.422-.23.642-.32.496-.158.95-.4 1.406-.656.115-.08.256-.05.366.022l3.04 1.758c.217.125.437-.04.623-.145l11.665-6.583c.144-.07.224-.222.212-.38V9.334c.016-.18-.087-.344-.25-.417L16.19 2.244a.41.41 0 0 0-.465-.001L3.892 8.93c-.16.073-.27.235-.25.415v13.37c-.014.158.07.307.215.375l3.162 1.785c.594.32 1.323.5 1.977.265a1.5 1.5 0 0 0 .971-1.409l.003-13.29c-.014-.197.172-.36.363-.34h1.52c.2-.005.357.207.33.405L12.18 23.88c.001 1.188-.487 2.48-1.586 3.063-1.354.7-3.028.553-4.366-.12l-3.4-1.88c-.8-.4-1.337-1.264-1.332-2.16v-13.5a2.46 2.46 0 0 1 1.282-2.141L14.656.427zM18.1 9.785c1.727-.1 3.576-.066 5.13.785 1.203.652 1.87 2.02 1.892 3.358-.034.18-.222.28-.394.267-.5-.001-1.002.007-1.504-.003-.213.008-.336-.188-.363-.376-.144-.64-.493-1.273-1.095-1.582-.924-.463-1.996-.44-3.004-.43-.736.04-1.527.103-2.15.535-.48.328-.624 1-.453 1.522.16.383.603.506.964.62 2.082.544 4.287.5 6.33 1.207.845.292 1.672.86 1.962 1.745.378 1.186.213 2.604-.63 3.556-.684.784-1.68 1.2-2.675 1.442-1.323.295-2.695.302-4.038.17-1.263-.144-2.577-.476-3.552-1.336-.834-.724-1.24-1.852-1.2-2.94.01-.184.193-.312.37-.297h1.5c.202-.014.35.16.36.35.093.6.322 1.25.854 1.6 1.026.662 2.313.616 3.487.635.973-.043 2.065-.056 2.86-.7.42-.367.543-.98.43-1.508-.123-.446-.6-.653-1-.8-2.055-.65-4.285-.414-6.32-1.15-.826-.292-1.625-.844-1.942-1.693-.443-1.2-.24-2.687.693-3.607.9-.915 2.22-1.268 3.47-1.394z"/></svg>


--------------------------------------------------------------------------------
/src/icons/openicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/icons/openicon.png


--------------------------------------------------------------------------------
/src/icons/postgresql-icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 25.6 25.6" width="64"><style><![CDATA[.B{stroke-linecap:round}.C{stroke-linejoin:round}.D{stroke-linejoin:miter}.E{stroke-width:.716}]]></style><g fill="none" stroke="#fff"><path d="M18.983 18.636c.163-1.357.114-1.555 1.124-1.336l.257.023c.777.035 1.793-.125 2.4-.402 1.285-.596 2.047-1.592.78-1.33-2.89.596-3.1-.383-3.1-.383 3.053-4.53 4.33-10.28 3.227-11.687-3.004-3.84-8.205-2.024-8.292-1.976l-.028.005c-.57-.12-1.2-.19-1.93-.2-1.308-.02-2.3.343-3.054.914 0 0-9.277-3.822-8.846 4.807.092 1.836 2.63 13.9 5.66 10.25C8.29 15.987 9.36 14.86 9.36 14.86c.53.353 1.167.533 1.834.468l.052-.044a2.01 2.01 0 0 0 .021.518c-.78.872-.55 1.025-2.11 1.346-1.578.325-.65.904-.046 1.056.734.184 2.432.444 3.58-1.162l-.046.183c.306.245.285 1.76.33 2.842s.116 2.093.337 2.688.48 2.13 2.53 1.7c1.713-.367 3.023-.896 3.143-5.81" fill="#000" stroke="#000" stroke-linecap="butt" stroke-width="2.149" class="D"/><path d="M23.535 15.6c-2.89.596-3.1-.383-3.1-.383 3.053-4.53 4.33-10.28 3.228-11.687-3.004-3.84-8.205-2.023-8.292-1.976l-.028.005a10.31 10.31 0 0 0-1.929-.201c-1.308-.02-2.3.343-3.054.914 0 0-9.278-3.822-8.846 4.807.092 1.836 2.63 13.9 5.66 10.25C8.29 15.987 9.36 14.86 9.36 14.86c.53.353 1.167.533 1.834.468l.052-.044a2.02 2.02 0 0 0 .021.518c-.78.872-.55 1.025-2.11 1.346-1.578.325-.65.904-.046 1.056.734.184 2.432.444 3.58-1.162l-.046.183c.306.245.52 1.593.484 2.815s-.06 2.06.18 2.716.48 2.13 2.53 1.7c1.713-.367 2.6-1.32 2.725-2.906.088-1.128.286-.962.3-1.97l.16-.478c.183-1.53.03-2.023 1.085-1.793l.257.023c.777.035 1.794-.125 2.39-.402 1.285-.596 2.047-1.592.78-1.33z" fill="#336791" stroke="none"/><g class="E"><g class="B"><path d="M12.814 16.467c-.08 2.846.02 5.712.298 6.4s.875 2.05 2.926 1.612c1.713-.367 2.337-1.078 2.607-2.647l.633-5.017M10.356 2.2S1.072-1.596 1.504 7.033c.092 1.836 2.63 13.9 5.66 10.25C8.27 15.95 9.27 14.907 9.27 14.907m6.1-13.4c-.32.1 5.164-2.005 8.282 1.978 1.1 1.407-.175 7.157-3.228 11.687" class="C"/><path d="M20.425 15.17s.2.98 3.1.382c1.267-.262.504.734-.78 1.33-1.054.49-3.418.615-3.457-.06-.1-1.745 1.244-1.215 1.147-1.652-.088-.394-.69-.78-1.086-1.744-.347-.84-4.76-7.29 1.224-6.333.22-.045-1.56-5.7-7.16-5.782S7.99 8.196 7.99 8.196" stroke-linejoin="bevel"/></g><g class="C"><path d="M11.247 15.768c-.78.872-.55 1.025-2.11 1.346-1.578.325-.65.904-.046 1.056.734.184 2.432.444 3.58-1.163.35-.49-.002-1.27-.482-1.468-.232-.096-.542-.216-.94.23z"/><path d="M11.196 15.753c-.08-.513.168-1.122.433-1.836.398-1.07 1.316-2.14.582-5.537-.547-2.53-4.22-.527-4.22-.184s.166 1.74-.06 3.365c-.297 2.122 1.35 3.916 3.246 3.733" class="B"/></g></g><g fill="#fff" class="D"><path d="M10.322 8.145c-.017.117.215.43.516.472s.558-.202.575-.32-.215-.246-.516-.288-.56.02-.575.136z" stroke-width=".239"/><path d="M19.486 7.906c.016.117-.215.43-.516.472s-.56-.202-.575-.32.215-.246.516-.288.56.02.575.136z" stroke-width=".119"/></g><path d="M20.562 7.095c.05.92-.198 1.545-.23 2.524-.046 1.422.678 3.05-.413 4.68" class="B C E"/></g></svg>


--------------------------------------------------------------------------------
/src/icons/reacticon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/icons/reacticon.png


--------------------------------------------------------------------------------
/src/icons/tailwindcssicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/icons/tailwindcssicon.png


--------------------------------------------------------------------------------
/src/icons/weatherapp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/icons/weatherapp.png


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | /* Box Model Hack */
  2 | /* * {
  3 |   box-sizing: border-box;
  4 | } */
  5 | 
  6 | /* Clear fix hack */
  7 | /* .clearfix:after {
  8 |      content: ".";
  9 |      display: block;
 10 |      clear: both;
 11 |      visibility: hidden;
 12 |      line-height: 0;
 13 |      height: 0;
 14 | }
 15 | 
 16 | .clear {
 17 |     clear: both;
 18 | } */
 19 | 
 20 | /******************************************
 21 | /* BASE STYLES
 22 | /****************************************** */
 23 | 
 24 | 
 25 | /* @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); */
 26 | 
 27 | @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap');
 28 | 
 29 | 
 30 |  * {
 31 |    margin: 1% 4% 2% 4%;
 32 |    font-family: "Outfit";
 33 |    color: dimgrey;
 34 |    background-color: white;
 35 |  }
 36 | /* 
 37 |  main {
 38 | 
 39 |  } */
 40 | 
 41 |  .navbar {
 42 |   width: 100%;
 43 |   font-size: .8rem;
 44 |   /* margin-left: 0px; */
 45 |   text-decoration: none;
 46 |   height: 50px;
 47 |   /* text-decoration: double; */
 48 |    padding: 0px;
 49 |    display: flex;
 50 |    /* justify-content: flex-end; */
 51 |    /* align-items: flex-end; */
 52 |    /* max-width: 95%; */
 53 | 
 54 |    margin: 0%;
 55 |    /* position: absolute ; */
 56 |    top: 10;
 57 |    border-bottom: 1px solid dimgrey;
 58 |    /* background-color: white;
 59 |    position: fixed;
 60 |    top: 0; */
 61 |  }
 62 | 
 63 |  .headerMain {
 64 |   margin: 0%;
 65 |   padding: 0%;
 66 |   display: flex;
 67 |   justify-content: space-around;
 68 |   align-items: flex-end;
 69 | }
 70 | 
 71 | .headerLeft {
 72 |   margin: 0%;
 73 |   padding: 0%;
 74 |   width: 100%;
 75 |   display: flex;
 76 |   justify-content: flex-start;
 77 |   align-items: flex-end;
 78 | }
 79 | 
 80 | .headerRight {
 81 |   margin: 0%;
 82 |   padding: 0%;
 83 |   width: 100%;
 84 |   display: flex;
 85 |   justify-content: flex-end;
 86 |   /* justify-content: space-between; */
 87 |   align-items: flex-end;
 88 | }
 89 | 
 90 |   .weatherContainer {
 91 |     margin: 0 0 0 3%;
 92 |     padding: 0%;
 93 |     line-height: 50%;
 94 |     width: 100%;
 95 |     height: 40px;
 96 |     display: flex;
 97 |     justify-content: flex-start;
 98 |     align-items:flex-end;
 99 |     background-color: white;
100 |     /* border-radius: 15px; */
101 |   }
102 |   
103 |   .weatherLeft {
104 |     display: flex;
105 |     justify-content: space-between;
106 |     line-height: 100%;
107 |     /* flex-direction: column; */
108 |     margin: 0 2% 0 0;
109 |     padding: 0%;
110 |     width: 200px;
111 |     background-color: white;
112 |   }
113 | 
114 |   .bold, .bold2 {
115 |     padding-top: 10%;
116 |     display: flex;
117 |     justify-content: flex-start;
118 |     align-items:flex-end;
119 |     width: 150px;
120 |   }
121 | 
122 |   .bold2 {
123 |     width: 128px;
124 |     border-right: 2px solid darkcyan;
125 |   }
126 |   
127 |   .weatherContainer .description {
128 |     /* position: relative;
129 |     right: -90%;
130 |     transform-origin: 0 0;
131 |     transform: rotate(269deg); */
132 |   }
133 | 
134 |   .weatherRight {
135 |     margin-right: 2%;
136 |     width: 40%;
137 |     display: flex;
138 |     justify-content: flex-end;
139 |     align-items: center;
140 |     background-color: white;
141 |   }
142 | 
143 |   .weather {
144 |     margin: 0%;
145 |     padding: 0%;
146 |   }
147 | 
148 |   .search {
149 |     border-radius: 10px;
150 |     display: flex;
151 |     justify-content: flex-end;
152 |     align-items: flex-end;
153 |   }
154 | 
155 |   .cityLeft {
156 |     font-size: 4rem;
157 |     height: 0px;
158 |     margin: 0px;
159 |     padding: 0px;
160 |     /* padding-left: 20%; */
161 |     width: 80px;
162 |     display: flex;
163 |     justify-content: left;
164 |   }
165 | 
166 |   /* .cityLeft {
167 |     height: 0px;
168 |     margin: 0px;
169 |     padding: 0px;
170 |     width: 50%;
171 |     display: flex;
172 |     justify-content: flex-end;
173 |   } */
174 | 
175 | .actualTemp {
176 |     /* display: flex;
177 |     align-items: flex-end; */
178 |     padding-top: 15%;
179 |     font-size: 1.5rem;
180 |     color: darkcyan;
181 | }
182 | 
183 | .cityRight {
184 |   display: flex;
185 |   justify-content: right;
186 |   width: 200px;
187 | }
188 | 
189 |   input {
190 |     padding-left: 5%;
191 |     background-color: rgba(0, 139, 139, 0.3);
192 |     border: 1px solid darkcyan;
193 |     border-radius: 5px;
194 |     width: 120px;
195 |   }
196 | 
197 |   ::placeholder {
198 |     color: rgb(0, 57, 57);
199 |   }
200 | 
201 |  .navbar h1 {
202 |    color: darkcyan;
203 |  }
204 |  /* .navbar .links {
205 |    margin-left: auto;
206 |  } */
207 | 
208 |  .navbar a:hover {
209 |    color: darkcyan;
210 |    /* font-weight: bold; */
211 |    /* border-top: 1px solid darkcyan;
212 |    border-bottom: 1px solid darkcyan; */
213 |    transform: translateY(-2px); 
214 |    transition-property: transform;
215 |    transition-duration: 0.1s;
216 |    cursor: pointer;
217 |    /* border: 2px solid darkcyan;
218 |    background-color: darkcyan;
219 |    border-radius: 35px solid darkcyan; */
220 |  }
221 | 
222 |  .headerRight a {
223 |   /* padding-left: 2%; */
224 |   /* margin: 0; */
225 |   /* padding: 0; */
226 |   display: flex;
227 |   justify-content: space-between;
228 |  }
229 | 
230 |  .titles {
231 |   margin: 0;
232 |   padding: 0;
233 |   font-size: 2rem;
234 |   color: darkcyan;
235 |  }
236 | 
237 |  .projectsTitleBox h4{
238 |   padding: 2% 0 0 0;
239 |   border-bottom: 2px solid darkcyan;
240 |  }
241 |  /* .content {
242 |    max-width: 600px;
243 |    margin: 40px auto;
244 |    padding: 20px;
245 |  } */
246 | 
247 |  .mainSection {
248 |   margin: 10% 0 20% 0;
249 |   /* margin-bottom: 20%; */
250 |  }
251 | 
252 |  .projectsTitleBox, .projectsTitleBox h4 {
253 |   /* display: flex;
254 |   justify-content: flext-start;
255 |   align-items: center; */
256 |   width: 100%;
257 |   margin: 0 0 8% 0;
258 | } 
259 | 
260 | .projectContents {
261 |   margin: 0 2% 0 2%;
262 |   display: flex;
263 |   justify-content: center;
264 |   align-items: center;
265 |   background-color: white;
266 | }
267 | 
268 | .projectContents h3 {
269 |   margin: 0 0 4% -10%;
270 |   color: darkcyan;
271 |   font-size: 1.7em;
272 | 
273 | }
274 | 
275 | .languages {
276 |   margin: 4% 2% 0 2%;
277 |   display: flex;
278 |   justify-content: center;
279 |   align-items: center;
280 |   background-color: white;
281 | }
282 | 
283 |  .mainContainer {
284 |   /* background-color: darkcyan; */
285 |   display: flex;
286 |   align-items: center;
287 |   gap: 2em;
288 |   margin: 0px;
289 |   padding: 0px;
290 |   width: 100%;
291 |   height: 100%;
292 |   /* margin-top: 20%;
293 |   margin-bottom: 20%; */
294 |  }
295 | 
296 |  .projectLinks {
297 |   margin: 5% 2% 0 0;
298 |   display: flex;
299 |   justify-content: center;
300 |   align-items: center;
301 |   background-color: white;
302 |  }
303 | 
304 |  .personalContacts {
305 |   margin: 2% 0 2% 0;
306 |   padding: 0%;
307 |   width: 80%;
308 |   display: flex;
309 |   justify-content: flex-start;
310 |  }
311 | 
312 |  .projectImageColumn {
313 |   margin: 0;
314 |   display: flex;
315 |   width: 50%;
316 |   height: 100%;
317 |   background-color: white;
318 |  }
319 | 
320 |  .projectInfoColumn {
321 |   margin: 0;
322 |   display: flex;
323 |   flex-direction: column;
324 |   justify-content: center;
325 |   width: 50%;
326 |   height: 100%;
327 |   background-color: white;
328 |  }
329 | 
330 |  .sourceLinks {
331 |   display: flex;
332 |   justify-content: flex-start;
333 |   align-items: flex-start;
334 |  }
335 | 
336 |  .sourceLinks h4 {
337 |   margin-top: 10%;
338 |  }
339 | 
340 |  .tetrisScreenShot {
341 |   width: 100%;
342 |   height: 100%;
343 |   object-fit: fill;
344 |   padding: 0;
345 |   margin: 0;
346 |   border-radius: 3%;
347 |  }
348 | 
349 | #home {
350 |   margin: 0;
351 |   padding: 0;
352 | }
353 | 
354 | .homeContentLeft {
355 |   margin: 0 0 0 0;
356 |   width: 60%;
357 |   height: 100%;
358 | }
359 | 
360 | /* .homeContentLeft img {
361 |   display: flex;
362 |   justify-content: space-evenly;
363 |   flex-direction: column;
364 | } */
365 | 
366 | .homeContentLeft p {
367 |   margin: 2% 0 3% 0;
368 | }
369 | 
370 | .homeContentRight {
371 |   margin: 0 0 0 0;
372 |   width: 40%;
373 |   height: 100%;
374 |   display: flex; 
375 |   justify-content: flex-end;
376 | }
377 | 
378 |  .techskills {
379 |   margin: 0;
380 |   display: flex;
381 |   justify-content: flext-start;
382 |   align-items: center;
383 |   /* width: 400px;
384 |   height: 400px; */
385 |  }
386 | 
387 |  .techskills h4 {
388 |   margin: 0;
389 |   display: flex;
390 |   justify-content: flex-start;
391 |  }
392 | 
393 | 
394 | .skillsbox {
395 |   display: flex;
396 |   justify-content: space-around;
397 |   width: 100%;
398 |   height: 30px;
399 |   margin-top: 6%;
400 | }
401 | 
402 | /* #about {
403 |   border: 2px solid darkcyan;
404 | } */
405 | 
406 |  .max-w-full {
407 |   height: 20rem;
408 |   width: 14rem;
409 |   /* width: 60%;  */
410 |   min-width: 40%;
411 |   min-height: 40%;
412 |   border-radius: 5%;
413 |   /* box-shadow: 30px, 30px, red; */
414 |   border: 2px solid darkcyan;
415 |  }
416 |  
417 | 
418 | footer {
419 |   /* width: 80%; */
420 |   border-top: 1px solid dimgrey;
421 |   display: flex;
422 |   justify-content: center;
423 |   flex-direction: column;
424 | 
425 | }
426 | 
427 |  .footer {
428 |   margin: 4% 0 0 0 ;
429 |   padding: 0;
430 |   height: 3%;
431 |   display: flex;
432 |   justify-content: space-evenly;
433 |   align-items: center;
434 |   line-height: .1em;
435 |   gap: 3em;
436 |  }
437 | 
438 | 
439 | /* =================================== ABOUT ME SECTION */
440 | 
441 | 
442 | #about {
443 |   margin: 0;
444 |   padding: 0;
445 | }
446 | 
447 | .aboutMe {
448 |   border-top: 2px solid darkcyan;
449 |   border-left: 2px solid darkcyan;
450 |   border-right: 2px solid darkcyan;
451 |   margin: 5% 0 0 0;
452 |   padding: 0 0 0 2%;
453 |   width: 100%;
454 |   font-size: 2rem;
455 |   color: darkcyan;
456 |   background-color: rgba(0,139,139, 0.3);
457 | }
458 | 
459 | .biotext {
460 |   border-bottom: 2px solid darkcyan;
461 |   border-left: 2px solid darkcyan;
462 |   border-right: 2px solid darkcyan;
463 |   background-color: rgba(0,139,139, 0.1);
464 |   margin: 0;
465 |   padding: 1%;
466 |   /* border: 2px solid darkcyan; */
467 |   font-size: 1rem;
468 |   width: 100%;
469 |   height: 10rem;
470 |   overflow-y: scroll;
471 | }
472 | 
473 | .titles {
474 |   margin: 0;
475 |   padding: 0;
476 |   font-size: 2rem;
477 |   color: darkcyan;
478 |  }
479 | 
480 | .forFun, .forFun h2, #forFun {
481 |   color: darkcyan;
482 |   margin: 0;
483 |   padding: 0;
484 | }
485 | 
486 | #forFun {
487 |   border: 1px solid darkcyan;
488 |   border-radius: 15px;
489 | }
490 | 
491 | .forFun {
492 |   padding-bottom: 10%;
493 | }
494 | 
495 | option {
496 |   padding-left: 2%;
497 | }
498 | 
499 | .mainContainer, .mainProjectContainer, .mainProjectContainerTop {
500 |   display: flex;
501 |   align-items: center;
502 |   gap: 2em;
503 |   margin: 0px;
504 |   padding: 0px;
505 |   width: 100%;
506 |   height: 100%;
507 |   /* margin-top: 20%;
508 |   margin-bottom: 20%; */
509 |  }
510 | 
511 |  .mainProjectContainer {
512 |   margin: 20% 0 0 0;
513 |  }
514 | 
515 |  .mainProjectContainerTop {
516 |   margin-top: 10%;
517 |  }
518 | 
519 |  .copyRights {
520 |   font-size: 11px;
521 |   display: flex;
522 |   justify-content: center;
523 |   align-items: flex-end;
524 |   padding: 0px;
525 |   margin: 0px;
526 |   border: 0px;
527 |  }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById('root'));
 8 | root.render(
 9 |   <React.StrictMode>
10 |     <App />
11 |   </React.StrictMode>
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/movieappimage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/movieappimage.png


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/ronaldPowellCV.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/ronaldPowellCV.pdf


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/tetrisScreenShot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Notesmane/Mod2_Portfolio_Project/39436e9ae64e4c9ebead9037ce7652a03083ead5/src/tetrisScreenShot.png


--------------------------------------------------------------------------------
/src/weather.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap');
  2 | 
  3 | * {
  4 |   box-sizing: border-box;
  5 |   margin: 0;
  6 |   padding: 0;
  7 | }
  8 | 
  9 | body {
 10 |   margin: 0;
 11 |   font-family: 'Outfit', 'Segoe UI', 'Roboto', 'Oxygen',
 12 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 13 |     sans-serif;
 14 |   -webkit-font-smoothing: antialiased;
 15 |   -moz-osx-font-smoothing: grayscale;
 16 | }
 17 | 
 18 | p {
 19 |   font-size: 1.6rem;
 20 | }
 21 | 
 22 | h1 {
 23 |   font-size: 6rem;
 24 | }
 25 | 
 26 | .App {
 27 |   width: 100%;
 28 |   height: 100vh;
 29 |   position: relative;
 30 |   background-color: rgba(0,0,0,0.4);
 31 |   color: #fff;
 32 | }
 33 | 
 34 | .App:before {
 35 |   content: '';
 36 |   background: url('./assets/sunset.jpeg') no-repeat center center/cover;
 37 |   position: absolute;
 38 |   width: 100%;
 39 |   height: 100%;
 40 |   top: 0;
 41 |   left: 0;
 42 |   z-index: -1;
 43 | }
 44 | 
 45 | .App .search {
 46 |   text-align: center;
 47 |   padding: 1rem;
 48 | }
 49 | 
 50 | .App input {
 51 |   padding: .7rem 1.5rem;
 52 |   font-size: 1.2rem;
 53 |   border-radius: 25px;
 54 |   border: 1px solid rgba(255,255,255, 0.8);
 55 |   background: rgba(255,255,255, 0.1);
 56 |   color: #f8f8f8;
 57 | }
 58 | 
 59 | ::placeholder {
 60 |   color: #f8f8f8;
 61 | }
 62 | 
 63 | .container {
 64 |   max-width: 700px;
 65 |   height: 700px;
 66 |   margin: auto;
 67 |   padding: 0 1rem;
 68 |   position: relative;
 69 |   top: 10%;
 70 |   display: flex;
 71 |   flex-direction: column;
 72 |   justify-content: space-between;
 73 | }
 74 | 
 75 | .App .top {
 76 |   width: 100%;
 77 |   margin: 1rem auto;
 78 | }
 79 | 
 80 | .App .description {
 81 |   position: relative;
 82 |   right: -90%;
 83 |   transform-origin: 0 0;
 84 |   transform: rotate(269deg);
 85 | }
 86 | 
 87 | .App .bottom {
 88 |   display: flex;
 89 |   justify-content: space-evenly;
 90 |   text-align: center;
 91 |   width: 100%;
 92 |   margin: 1rem auto;
 93 |   padding: 1rem;
 94 |   border-radius: 12px;
 95 |   background-color: rgba(255,255,255, 0.2);
 96 | }
 97 | 
 98 | .bold {
 99 |   font-weight: 700;
100 | }


--------------------------------------------------------------------------------