Skip to content

Commit f8ddc9e

Browse files
OSAdamsOSAdams
authored
Merge pull request #1 from OSAdams/initial-commit
update banner, footer, banner, meta tags, indexhtml, and icons
2 parents 4994be3 + 8ef71cc commit f8ddc9e

16 files changed

+386
-373
lines changed

‎public/favicon.ico

183 KB
Binary file not shown.

‎public/favicon.png

-157 Bytes
Loading

‎public/files/Owen-Adams-Resume.pdf

75.4 KB
Binary file not shown.

‎public/files/Stoman-Resume.pdf

-476 KB
Binary file not shown.

‎public/index.html

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
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-
<!--
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
7+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<meta name="theme-color" content="#000000" />
10+
<meta name="description" content="Owen Adams Portfolio Website" />
11+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
12+
<!--
1413
manifest.json provides metadata used when your web app is installed on a
1514
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1615
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
16+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
17+
<!--
1918
Notice the use of %PUBLIC_URL% in the tags above.
2019
It will be replaced with the URL of the `public` folder during the build.
2120
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +23,22 @@
2423
work correctly both with client-side routing and a non-root public URL.
2524
Learn how to configure a non-root public URL by running `npm run build`.
2625
-->
27-
<title>Stoman</title>
28-
</head>
29-
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
31-
<div id="root"></div>
32-
<!--
26+
<title>OSA Stack</title>
27+
<meta property="og:title" content="OSA Stack" />
28+
<meta
29+
property="og:description"
30+
content="Explore Owen Adams's portfolio showcasing web development projects."
31+
/>
32+
<meta property="og:image" content="%PUBLIC_URL%/logo512.png" />
33+
<meta property="og:url" content="https://www.osastack.dev" />
34+
<meta property="og:type" content="website" />
35+
<meta property="og:locale" content="en_US" />
36+
<meta property="og:site_name" content="Owen Adams Portfolio" />
37+
</head>
38+
<body>
39+
<noscript>You need to enable JavaScript to run this app.</noscript>
40+
<div id="root"></div>
41+
<!--
3342
This HTML file is a template.
3443
If you open it directly in the browser, you will see an empty page.
3544
@@ -38,5 +47,6 @@
3847
3948
To begin the development, run `npm start` or `yarn start`.
4049
To create a production bundle, use `npm run build` or `yarn build`.
41-
--></body>
50+
-->
51+
</body>
4252
</html>

‎public/logo192.png

2.91 KB
Loading

‎public/logo512.png

249 Bytes
Loading

‎public/manifest.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "osastack",
3+
"name": "Owen Adams Portfolio Website",
44
"icons": [
55
{
66
"src": "favicon.ico",

‎src/components/shared/AppBanner.jsx

Lines changed: 74 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,80 @@
1-
import useThemeSwitcher from '../../hooks/useThemeSwitcher';
2-
import { FiArrowDownCircle } from 'react-icons/fi';
3-
import developerLight from '../../images/developer.svg';
4-
import developerDark from '../../images/developer-dark.svg';
5-
import { motion } from 'framer-motion';
1+
import useThemeSwitcher from "../../hooks/useThemeSwitcher";
2+
import { FiArrowDownCircle } from "react-icons/fi";
3+
import developerLight from "../../images/developer.svg";
4+
import developerDark from "../../images/developer-dark.svg";
5+
import { motion } from "framer-motion";
66

77
const AppBanner = () => {
8-
const [activeTheme] = useThemeSwitcher();
8+
const [activeTheme] = useThemeSwitcher();
99

10-
return (
11-
<motion.section
12-
initial={{ opacity: 0 }}
13-
animate={{ opacity: 1 }}
14-
transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
15-
className="flex flex-col sm:justify-between items-center sm:flex-row mt-12 md:mt-2"
16-
>
17-
<div className="w-full md:w-1/3 text-left">
18-
<motion.h1
19-
initial={{ opacity: 0 }}
20-
animate={{ opacity: 1 }}
21-
transition={{
22-
ease: 'easeInOut',
23-
duration: 0.9,
24-
delay: 0.1,
25-
}}
26-
className="font-general-semibold text-2xl lg:text-3xl xl:text-4xl text-center sm:text-left text-ternary-dark dark:text-primary-light uppercase"
27-
>
28-
Hi, Iam Stoman
29-
</motion.h1>
30-
<motion.p
31-
initial={{ opacity: 0 }}
32-
animate={{ opacity: 1 }}
33-
transition={{
34-
ease: 'easeInOut',
35-
duration: 0.9,
36-
delay: 0.2,
37-
}}
38-
className="font-general-medium mt-4 text-lg md:text-xl lg:text-2xl xl:text-3xl text-center sm:text-left leading-normal text-gray-500 dark:text-gray-200"
39-
>
40-
A Full-Stack Developer & Design Enthusiast
41-
</motion.p>
42-
<motion.div
43-
initial={{ opacity: 0 }}
44-
animate={{ opacity: 1 }}
45-
transition={{
46-
ease: 'easeInOut',
47-
duration: 0.9,
48-
delay: 0.3,
49-
}}
50-
className="flex justify-center sm:block"
51-
>
52-
<a
53-
download="Stoman-Resume.pdf"
54-
href="/files/Stoman-Resume.pdf"
55-
className="font-general-medium flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-lg bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white duration-500"
56-
aria-label="Download Resume"
57-
>
58-
<FiArrowDownCircle className="mr-2 sm:mr-3 h-5 w-5 sn:w-6 sm:h-6 duration-100"></FiArrowDownCircle>
59-
<span className="text-sm sm:text-lg font-general-medium duration-100">
60-
Download CV
61-
</span>
62-
</a>
63-
</motion.div>
64-
</div>
65-
<motion.div
66-
initial={{ opacity: 0, y: -180 }}
67-
animate={{ opacity: 1, y: 0 }}
68-
transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
69-
className="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0"
70-
>
71-
<img
72-
src={
73-
activeTheme === 'dark' ? developerLight : developerDark
74-
}
75-
alt="Developer"
76-
/>
77-
</motion.div>
78-
</motion.section>
79-
);
10+
return (
11+
<motion.section
12+
initial={{ opacity: 0 }}
13+
animate={{ opacity: 1 }}
14+
transition={{ ease: "easeInOut", duration: 0.9, delay: 0.2 }}
15+
className="flex flex-col sm:justify-between items-center sm:flex-row mt-12 md:mt-2"
16+
>
17+
<div className="w-full md:w-1/3 text-left">
18+
<motion.h1
19+
initial={{ opacity: 0 }}
20+
animate={{ opacity: 1 }}
21+
transition={{
22+
ease: "easeInOut",
23+
duration: 0.9,
24+
delay: 0.1,
25+
}}
26+
className="font-general-semibold text-2xl lg:text-3xl xl:text-4xl text-center sm:text-left text-ternary-dark dark:text-primary-light uppercase"
27+
>
28+
Hello World! <br />I am Owen Adams
29+
</motion.h1>
30+
<motion.p
31+
initial={{ opacity: 0 }}
32+
animate={{ opacity: 1 }}
33+
transition={{
34+
ease: "easeInOut",
35+
duration: 0.9,
36+
delay: 0.2,
37+
}}
38+
className="font-general-medium mt-4 text-lg md:text-xl lg:text-2xl xl:text-3xl text-center sm:text-left leading-normal text-gray-500 dark:text-gray-200"
39+
>
40+
A Full-Stack Developer
41+
</motion.p>
42+
<motion.div
43+
initial={{ opacity: 0 }}
44+
animate={{ opacity: 1 }}
45+
transition={{
46+
ease: "easeInOut",
47+
duration: 0.9,
48+
delay: 0.3,
49+
}}
50+
className="flex justify-center sm:block"
51+
>
52+
<a
53+
download="Owen-Adams-Resume.pdf"
54+
href="/files/Owen-Adams-Resume.pdf"
55+
className="font-general-medium flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-lg bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white duration-500"
56+
aria-label="Download Resume"
57+
>
58+
<FiArrowDownCircle className="mr-2 sm:mr-3 h-5 w-5 sn:w-6 sm:h-6 duration-100"></FiArrowDownCircle>
59+
<span className="text-sm sm:text-lg font-general-medium duration-100">
60+
Download CV
61+
</span>
62+
</a>
63+
</motion.div>
64+
</div>
65+
<motion.div
66+
initial={{ opacity: 0, y: -180 }}
67+
animate={{ opacity: 1, y: 0 }}
68+
transition={{ ease: "easeInOut", duration: 0.9, delay: 0.2 }}
69+
className="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0"
70+
>
71+
<img
72+
src={activeTheme === "dark" ? developerLight : developerDark}
73+
alt="Developer"
74+
/>
75+
</motion.div>
76+
</motion.section>
77+
);
8078
};
8179

8280
export default AppBanner;

‎src/components/shared/AppFooter.jsx

Lines changed: 42 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,51 @@
1-
import {
2-
FiGithub,
3-
FiTwitter,
4-
FiLinkedin,
5-
FiGlobe,
6-
FiYoutube,
7-
} from 'react-icons/fi';
8-
import AppFooterCopyright from './AppFooterCopyright';
1+
import { FiGithub, FiLinkedin, FiGlobe } from "react-icons/fi";
2+
import AppFooterCopyright from "./AppFooterCopyright";
93

104
const socialLinks = [
11-
{
12-
id: 1,
13-
icon: <FiGlobe />,
14-
url: 'https://www.stoman.me/',
15-
},
16-
{
17-
id: 2,
18-
icon: <FiGithub />,
19-
url: 'https://github.com/realstoman',
20-
},
21-
{
22-
id: 3,
23-
icon: <FiTwitter />,
24-
url: 'https://twitter.com/realstoman',
25-
},
26-
{
27-
id: 4,
28-
icon: <FiLinkedin />,
29-
url: 'https://www.linkedin.com/in/realstoman',
30-
},
31-
{
32-
id: 5,
33-
icon: <FiYoutube />,
34-
url: 'https://www.youtube.com/c/realstoman',
35-
},
5+
{
6+
id: 1,
7+
icon: <FiGlobe />,
8+
url: "https://www.osastack.dev/",
9+
},
10+
{
11+
id: 2,
12+
icon: <FiGithub />,
13+
url: "https://github.com/OSAdams",
14+
},
15+
{
16+
id: 3,
17+
icon: <FiLinkedin />,
18+
url: "https://www.linkedin.com/in/owen-adams1",
19+
},
3620
];
3721

3822
const AppFooter = () => {
39-
return (
40-
<div className="container mx-auto">
41-
<div className="pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark">
42-
{/* Footer social links */}
43-
<div className="font-general-regular flex flex-col justify-center items-center mb-12 sm:mb-28">
44-
<p className="text-3xl sm:text-4xl text-primary-dark dark:text-primary-light mb-5">
45-
Follow me
46-
</p>
47-
<ul className="flex gap-4 sm:gap-8">
48-
{socialLinks.map((link) => (
49-
<a
50-
href={link.url}
51-
target="__blank"
52-
key={link.id}
53-
className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4 duration-300"
54-
>
55-
<i className="text-xl sm:text-2xl md:text-3xl">
56-
{link.icon}
57-
</i>
58-
</a>
59-
))}
60-
</ul>
61-
</div>
23+
return (
24+
<div className="container mx-auto">
25+
<div className="pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark">
26+
{/* Footer social links */}
27+
<div className="font-general-regular flex flex-col justify-center items-center mb-12 sm:mb-28">
28+
<p className="text-3xl sm:text-4xl text-primary-dark dark:text-primary-light mb-5">
29+
Follow me
30+
</p>
31+
<ul className="flex gap-4 sm:gap-8">
32+
{socialLinks.map((link) => (
33+
<a
34+
href={link.url}
35+
target="__blank"
36+
key={link.id}
37+
className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4 duration-300"
38+
>
39+
<i className="text-xl sm:text-2xl md:text-3xl">{link.icon}</i>
40+
</a>
41+
))}
42+
</ul>
43+
</div>
6244

63-
<AppFooterCopyright />
64-
</div>
65-
</div>
66-
);
45+
<AppFooterCopyright />
46+
</div>
47+
</div>
48+
);
6749
};
6850

6951
export default AppFooter;

‎src/components/shared/AppFooterCopyright.jsx

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
function AppFooterCopyright() {
2-
return (
3-
<div className="font-general-regular flex justify-center items-center text-center">
4-
<div className="text-lg text-ternary-dark dark:text-ternary-light">
5-
&copy; {new Date().getFullYear()}
6-
<a
7-
href="https://github.com/realstoman/react-tailwindcss-portfolio"
8-
target="__blank"
9-
className="hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
10-
>
11-
React & Tailwind CSS Portfolio
12-
</a>
13-
.
14-
<a
15-
href="https://stoman.me"
16-
target="__blank"
17-
className="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
18-
>
19-
Stoman
20-
</a>
21-
</div>
22-
</div>
23-
);
2+
return (
3+
<div className="font-general-regular flex justify-center items-center text-center">
4+
<div className="text-lg text-ternary-dark dark:text-ternary-light">
5+
&copy; {new Date().getFullYear()}
6+
<a
7+
href="https://github.com/realstoman/react-tailwindcss-portfolio"
8+
target="__blank"
9+
className="hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
10+
>
11+
React & Tailwind CSS Portfolio
12+
</a>
13+
.
14+
<a
15+
href="https://stoman.me"
16+
target="__blank"
17+
className="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
18+
>
19+
Portfolio Template by Stoman
20+
</a>
21+
</div>
22+
</div>
23+
);
2424
}
2525

2626
export default AppFooterCopyright;

0 commit comments

Comments
 (0)