Skip to content

update banner, footer, banner, meta tags, indexhtml, and icons #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 11, 2024
Merged

update banner, footer, banner, meta tags, indexhtml, and icons #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file modified public/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/files/Owen-Adams-Resume.pdf
View file
Open in desktop
Binary file not shown.
Binary file removed public/files/Stoman-Resume.pdf
View file
Open in desktop
Binary file not shown.
50 changes: 30 additions & 20 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Owen Adams Portfolio Website" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Expand All @@ -24,12 +23,22 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Stoman</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<title>OSA Stack</title>
<meta property="og:title" content="OSA Stack" />
<meta
property="og:description"
content="Explore Owen Adams's portfolio showcasing web development projects."
/>
<meta property="og:image" content="%PUBLIC_URL%/logo512.png" />
<meta property="og:url" content="https://www.osastack.dev" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="Owen Adams Portfolio" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

Expand All @@ -38,5 +47,6 @@

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
--></body>
-->
</body>
</html>
Binary file modified public/logo192.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/logo512.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions public/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "osastack",
"name": "Owen Adams Portfolio Website",
"icons": [
{
"src": "favicon.ico",
Expand Down
150 changes: 74 additions & 76 deletions src/components/shared/AppBanner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,80 @@
import useThemeSwitcher from '../../hooks/useThemeSwitcher';
import { FiArrowDownCircle } from 'react-icons/fi';
import developerLight from '../../images/developer.svg';
import developerDark from '../../images/developer-dark.svg';
import { motion } from 'framer-motion';
import useThemeSwitcher from "../../hooks/useThemeSwitcher";
import { FiArrowDownCircle } from "react-icons/fi";
import developerLight from "../../images/developer.svg";
import developerDark from "../../images/developer-dark.svg";
import { motion } from "framer-motion";

const AppBanner = () => {
const [activeTheme] = useThemeSwitcher();
const [activeTheme] = useThemeSwitcher();

return (
<motion.section
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
className="flex flex-col sm:justify-between items-center sm:flex-row mt-12 md:mt-2"
>
<div className="w-full md:w-1/3 text-left">
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{
ease: 'easeInOut',
duration: 0.9,
delay: 0.1,
}}
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"
>
Hi, Iam Stoman
</motion.h1>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{
ease: 'easeInOut',
duration: 0.9,
delay: 0.2,
}}
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"
>
A Full-Stack Developer & Design Enthusiast
</motion.p>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{
ease: 'easeInOut',
duration: 0.9,
delay: 0.3,
}}
className="flex justify-center sm:block"
>
<a
download="Stoman-Resume.pdf"
href="/files/Stoman-Resume.pdf"
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"
aria-label="Download Resume"
>
<FiArrowDownCircle className="mr-2 sm:mr-3 h-5 w-5 sn:w-6 sm:h-6 duration-100"></FiArrowDownCircle>
<span className="text-sm sm:text-lg font-general-medium duration-100">
Download CV
</span>
</a>
</motion.div>
</div>
<motion.div
initial={{ opacity: 0, y: -180 }}
animate={{ opacity: 1, y: 0 }}
transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
className="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0"
>
<img
src={
activeTheme === 'dark' ? developerLight : developerDark
}
alt="Developer"
/>
</motion.div>
</motion.section>
);
return (
<motion.section
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ ease: "easeInOut", duration: 0.9, delay: 0.2 }}
className="flex flex-col sm:justify-between items-center sm:flex-row mt-12 md:mt-2"
>
<div className="w-full md:w-1/3 text-left">
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{
ease: "easeInOut",
duration: 0.9,
delay: 0.1,
}}
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"
>
Hello World! <br />I am Owen Adams
</motion.h1>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{
ease: "easeInOut",
duration: 0.9,
delay: 0.2,
}}
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"
>
A Full-Stack Developer
</motion.p>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{
ease: "easeInOut",
duration: 0.9,
delay: 0.3,
}}
className="flex justify-center sm:block"
>
<a
download="Owen-Adams-Resume.pdf"
href="/files/Owen-Adams-Resume.pdf"
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"
aria-label="Download Resume"
>
<FiArrowDownCircle className="mr-2 sm:mr-3 h-5 w-5 sn:w-6 sm:h-6 duration-100"></FiArrowDownCircle>
<span className="text-sm sm:text-lg font-general-medium duration-100">
Download CV
</span>
</a>
</motion.div>
</div>
<motion.div
initial={{ opacity: 0, y: -180 }}
animate={{ opacity: 1, y: 0 }}
transition={{ ease: "easeInOut", duration: 0.9, delay: 0.2 }}
className="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0"
>
<img
src={activeTheme === "dark" ? developerLight : developerDark}
alt="Developer"
/>
</motion.div>
</motion.section>
);
};

export default AppBanner;
102 changes: 42 additions & 60 deletions src/components/shared/AppFooter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,51 @@
import {
FiGithub,
FiTwitter,
FiLinkedin,
FiGlobe,
FiYoutube,
} from 'react-icons/fi';
import AppFooterCopyright from './AppFooterCopyright';
import { FiGithub, FiLinkedin, FiGlobe } from "react-icons/fi";
import AppFooterCopyright from "./AppFooterCopyright";

const socialLinks = [
{
id: 1,
icon: <FiGlobe />,
url: 'https://www.stoman.me/',
},
{
id: 2,
icon: <FiGithub />,
url: 'https://github.com/realstoman',
},
{
id: 3,
icon: <FiTwitter />,
url: 'https://twitter.com/realstoman',
},
{
id: 4,
icon: <FiLinkedin />,
url: 'https://www.linkedin.com/in/realstoman',
},
{
id: 5,
icon: <FiYoutube />,
url: 'https://www.youtube.com/c/realstoman',
},
{
id: 1,
icon: <FiGlobe />,
url: "https://www.osastack.dev/",
},
{
id: 2,
icon: <FiGithub />,
url: "https://github.com/OSAdams",
},
{
id: 3,
icon: <FiLinkedin />,
url: "https://www.linkedin.com/in/owen-adams1",
},
];

const AppFooter = () => {
return (
<div className="container mx-auto">
<div className="pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark">
{/* Footer social links */}
<div className="font-general-regular flex flex-col justify-center items-center mb-12 sm:mb-28">
<p className="text-3xl sm:text-4xl text-primary-dark dark:text-primary-light mb-5">
Follow me
</p>
<ul className="flex gap-4 sm:gap-8">
{socialLinks.map((link) => (
<a
href={link.url}
target="__blank"
key={link.id}
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"
>
<i className="text-xl sm:text-2xl md:text-3xl">
{link.icon}
</i>
</a>
))}
</ul>
</div>
return (
<div className="container mx-auto">
<div className="pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark">
{/* Footer social links */}
<div className="font-general-regular flex flex-col justify-center items-center mb-12 sm:mb-28">
<p className="text-3xl sm:text-4xl text-primary-dark dark:text-primary-light mb-5">
Follow me
</p>
<ul className="flex gap-4 sm:gap-8">
{socialLinks.map((link) => (
<a
href={link.url}
target="__blank"
key={link.id}
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"
>
<i className="text-xl sm:text-2xl md:text-3xl">{link.icon}</i>
</a>
))}
</ul>
</div>

<AppFooterCopyright />
</div>
</div>
);
<AppFooterCopyright />
</div>
</div>
);
};

export default AppFooter;
44 changes: 22 additions & 22 deletions src/components/shared/AppFooterCopyright.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
function AppFooterCopyright() {
return (
<div className="font-general-regular flex justify-center items-center text-center">
<div className="text-lg text-ternary-dark dark:text-ternary-light">
&copy; {new Date().getFullYear()}
<a
href="https://github.com/realstoman/react-tailwindcss-portfolio"
target="__blank"
className="hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
>
React & Tailwind CSS Portfolio
</a>
.
<a
href="https://stoman.me"
target="__blank"
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"
>
Stoman
</a>
</div>
</div>
);
return (
<div className="font-general-regular flex justify-center items-center text-center">
<div className="text-lg text-ternary-dark dark:text-ternary-light">
&copy; {new Date().getFullYear()}
<a
href="https://github.com/realstoman/react-tailwindcss-portfolio"
target="__blank"
className="hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
>
React & Tailwind CSS Portfolio
</a>
.
<a
href="https://stoman.me"
target="__blank"
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"
>
Portfolio Template by Stoman
</a>
</div>
</div>
);
}

export default AppFooterCopyright;
Loading