Skip to content

Commit 3208e20

Browse files
Ay7otAy7ot
committed
Added Contact session
1 parent 5e1290f commit 3208e20

16 files changed

+924
-41
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ node_modules
1111
dist
1212
dist-ssr
1313
*.local
14+
.env
15+
.firebase
1416

1517
# Editor directories and files
1618
.vscode/*

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"daisyui": "^2.51.5",
13+
"firebase": "^9.19.1",
1314
"nanoid": "^4.0.2",
1415
"react": "^18.2.0",
1516
"react-dom": "^18.2.0",

‎public/404.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Page Not Found</title>
7+
8+
<style media="screen">
9+
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10+
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11+
#message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12+
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13+
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14+
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15+
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16+
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17+
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18+
@media (max-width: 600px) {
19+
body, #message { margin-top: 0; background: white; box-shadow: none; }
20+
body { border-top: 16px solid #ffa100; }
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<div id="message">
26+
<h2>404</h2>
27+
<h1>Page Not Found</h1>
28+
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29+
<h3>Why am I seeing this?</h3>
30+
<p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31+
</div>
32+
</body>
33+
</html>

‎public/index.html

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Welcome to Firebase Hosting</title>
7+
8+
<!-- update the version number as needed -->
9+
<script defer src="/__/firebase/9.19.1/firebase-app-compat.js"></script>
10+
<!-- include only the Firebase features as you need -->
11+
<script defer src="/__/firebase/9.19.1/firebase-auth-compat.js"></script>
12+
<script defer src="/__/firebase/9.19.1/firebase-database-compat.js"></script>
13+
<script defer src="/__/firebase/9.19.1/firebase-firestore-compat.js"></script>
14+
<script defer src="/__/firebase/9.19.1/firebase-functions-compat.js"></script>
15+
<script defer src="/__/firebase/9.19.1/firebase-messaging-compat.js"></script>
16+
<script defer src="/__/firebase/9.19.1/firebase-storage-compat.js"></script>
17+
<script defer src="/__/firebase/9.19.1/firebase-analytics-compat.js"></script>
18+
<script defer src="/__/firebase/9.19.1/firebase-remote-config-compat.js"></script>
19+
<script defer src="/__/firebase/9.19.1/firebase-performance-compat.js"></script>
20+
<!--
21+
initialize the SDK after all desired features are loaded, set useEmulator to false
22+
to avoid connecting the SDK to running emulators.
23+
-->
24+
<script defer src="/__/firebase/init.js?useEmulator=true"></script>
25+
26+
<style media="screen">
27+
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
28+
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
29+
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
30+
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
31+
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
32+
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
33+
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
34+
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
35+
@media (max-width: 600px) {
36+
body, #message { margin-top: 0; background: white; box-shadow: none; }
37+
body { border-top: 16px solid #ffa100; }
38+
}
39+
</style>
40+
</head>
41+
<body>
42+
<div id="message">
43+
<h2>Welcome</h2>
44+
<h1>Firebase Hosting Setup Complete</h1>
45+
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
46+
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
47+
</div>
48+
<p id="load">Firebase SDK Loading&hellip;</p>
49+
50+
<script>
51+
document.addEventListener('DOMContentLoaded', function() {
52+
const loadEl = document.querySelector('#load');
53+
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
54+
// // The Firebase SDK is initialized and available here!
55+
//
56+
// firebase.auth().onAuthStateChanged(user => { });
57+
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
58+
// firebase.firestore().doc('/foo/bar').get().then(() => { });
59+
// firebase.functions().httpsCallable('yourFunction')().then(() => { });
60+
// firebase.messaging().requestPermission().then(() => { });
61+
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
62+
// firebase.analytics(); // call to activate
63+
// firebase.analytics().logEvent('tutorial_completed');
64+
// firebase.performance(); // call to activate
65+
//
66+
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
67+
68+
try {
69+
let app = firebase.app();
70+
let features = [
71+
'auth',
72+
'database',
73+
'firestore',
74+
'functions',
75+
'messaging',
76+
'storage',
77+
'analytics',
78+
'remoteConfig',
79+
'performance',
80+
].filter(feature => typeof app[feature] === 'function');
81+
loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
82+
} catch (e) {
83+
console.error(e);
84+
loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
85+
}
86+
});
87+
</script>
88+
</body>
89+
</html>

‎src/App.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@ import MainPage from "./Components/MainPage"
44

55
function App() {
66

7-
8-
return (
7+
return (
98
<AppProvider>
109
<div className="transition-all delay-150 ease-linear">
1110
<MainPage />
1211
</div>
1312
</AppProvider>
14-
)
13+
)
1514
}
1615

1716
export default App

‎src/AppContext.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { appReducer } from "./reducer";
33
import { AppContextType } from "./Types/types";
44

55
export const AppContext = createContext<AppContextType>({
6-
theme: 'forest',
6+
theme: 'halloween',
77
dispatch: ()=> {},
8-
themeModal: false
8+
themeModal: false,
99
})
1010

1111
export const useAppContext = () => {

‎src/Components/BottomNav.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export default function BottomNav() {
1212
type: 'setThemeModalTrue',
1313
})
1414
}
15+
1516
return (
1617
<>
1718
<div className='fixed z-[99999999] bottom-0 left-0 rounded-box flex items-center gap-10 bg-base-200 px-10 py-4'>

‎src/Components/Contact.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react'
2+
import {nanoid} from 'nanoid'
3+
import { FaGithub, FaInstagram, FaLinkedin, FaTwitter } from 'react-icons/fa'
4+
5+
export default function Contact() {
6+
7+
const socials = [
8+
{
9+
name: 'LinkedIn',
10+
url: 'https://www.linkedin.com/in/ayomide-ibiteye-b124b823b/',
11+
id: nanoid()
12+
},
13+
{
14+
name: 'GitHub',
15+
url: 'https://github.com/Ay7ot',
16+
id: nanoid()
17+
},
18+
{
19+
name: 'Instagram',
20+
url: 'https://instagram.com/ayomidotzee',
21+
id: nanoid()
22+
},
23+
{
24+
name: 'Twitter',
25+
url: 'https://twitter.com/Ay7ot',
26+
id: nanoid()
27+
},
28+
]
29+
30+
return (
31+
<div id='contact'>
32+
<h2 className='text-center text-neutral-content my-10 text-5xl tracking-wide font-bold'>Contact</h2>
33+
<div className=' flex flex-col items-center pb-6 md:mx-28 mx-4 p-5 rounded-2xl bg-base-100 '>
34+
<p>Open to new and exciting oportunities in the tech space. I'm Looking forward to connect with like and unlike minds. You can reach out to me and say hi. I'll definitely respond.</p>
35+
<a href='mailto:[email protected]' className='mt-6 btn btn-primary'>
36+
Send a Message
37+
</a>
38+
<ul className='flex gap-6 items-center mt-6 w-[200px] justify-between'>
39+
{socials.map(item=>{
40+
return (
41+
<a href={item.url} key={item.id} className='btn'>
42+
{item.name==='LinkedIn' ? <FaLinkedin /> :item.name === 'GitHub' ? <FaGithub /> : item.name === 'Instagram' ? <FaInstagram /> : item.name === 'Twitter' ? <FaTwitter /> : <></>}
43+
</a>
44+
)
45+
})}
46+
</ul>
47+
</div>
48+
</div>
49+
)
50+
}

‎src/Components/MainPage.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@ import Footer from './Footer'
66
import BottomNav from './BottomNav'
77
import TechStack from './TechStack'
88
import { useAppContext } from '../AppContext'
9+
import Contact from './Contact'
910

1011
export default function MainPage() {
11-
const { theme, themeModal } = useAppContext()
12-
13-
console.log(themeModal)
12+
const { theme } = useAppContext()
1413

1514
return (
1615
<div data-theme={theme} className='bg-base-300 relative min-h-screen'>
1716
<Navbar />
1817
<Header />
1918
<Projects />
2019
<TechStack />
20+
<Contact />
2121
<BottomNav />
2222
<Footer />
2323
</div>

‎src/Components/Navbar.tsx

+27-28
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,33 @@
1-
import {FaCaretDown, FaThemeisle} from 'react-icons/fa'
21
import {IoMdHeartEmpty} from 'react-icons/io'
3-
import {RxCaretDown} from 'react-icons/rx'
42
import {SiCodeproject} from 'react-icons/si'
53
import {HiCircleStack} from 'react-icons/hi2'
4+
import {TiContacts} from 'react-icons/ti'
65

76
export default function Navbar() {
8-
return (
9-
<div className='sticky top-0 z-[999999] mb-2 shadow-lg text-neutral-content bg-neutral-focus rounded-b-box flex justify-between items-center p-4 font-semibold md:px-10'>
10-
<p className='text-[1.5rem]'>Aydot</p>
11-
<nav className='hidden md:flex'>
12-
<ul className='flex gap-6'>
13-
<a href='#header' className='flex items-center gap-2 cursor-pointer hover:rounded-lg hover:bg-accent-content p-2'>
14-
<i><IoMdHeartEmpty /></i>
15-
<p>Home</p>
16-
</a>
17-
<a href='#projects' className='flex items-center gap-2 cursor-pointer hover:rounded-lg hover:bg-accent-content p-2'>
18-
<i><SiCodeproject /></i>
19-
<p>Projects</p>
20-
</a>
21-
<a href='#techstack' className='flex items-center gap-2 cursor-pointer hover:rounded-lg hover:bg-accent-content p-2'>
22-
<i><HiCircleStack /></i>
23-
<p>TechStack</p>
24-
</a>
25-
<button className='flex items-center gap-2 cursor-pointer hover:rounded-lg hover:bg-accent-content p-2'>
26-
<i><FaThemeisle /></i>
27-
<p>Change Theme</p>
28-
<i><RxCaretDown /></i>
29-
</button>
30-
</ul>
31-
</nav>
32-
</div>
33-
)
7+
8+
return (
9+
<div className='sticky top-0 z-[999999] mb-2 shadow-lg text-neutral-content bg-neutral-focus rounded-b-box flex justify-between items-center p-4 font-semibold md:px-10'>
10+
<p className='text-[1.5rem]'>Aydot</p>
11+
<nav className='hidden md:flex'>
12+
<ul className='flex gap-6 relative'>
13+
<a href='#header' className='flex items-center gap-2 cursor-pointer hover:rounded-lg hover:bg-accent-content p-2'>
14+
<i><IoMdHeartEmpty /></i>
15+
<p>Home</p>
16+
</a>
17+
<a href='#projects' className='flex items-center gap-2 cursor-pointer hover:rounded-lg hover:bg-accent-content p-2'>
18+
<i><SiCodeproject /></i>
19+
<p>Projects</p>
20+
</a>
21+
<a href='#techstack' className='flex items-center gap-2 cursor-pointer hover:rounded-lg hover:bg-accent-content p-2'>
22+
<i><HiCircleStack /></i>
23+
<p>TechStack</p>
24+
</a>
25+
<a href='#contact' className='flex items-center gap-2 cursor-pointer hover:rounded-lg hover:bg-accent-content p-2'>
26+
<i><TiContacts /></i>
27+
<p>Contact</p>
28+
</a>
29+
</ul>
30+
</nav>
31+
</div>
32+
)
3433
}

‎src/Components/Projects.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function Projects() {
99
<div className='md:grid md:grid-cols-2 lg:grid-cols-3 mt-5 gap-6'>
1010
{projects.map(project=>{
1111
return (
12-
<div className='mb-10 bg-secondary md:bg-secondary-focus text-accent-content flex flex-col overflow-hidden relative rounded-2xl'>
12+
<div key={project.id} className='mb-10 bg-secondary md:bg-secondary-focus text-accent-content flex flex-col overflow-hidden relative rounded-2xl'>
1313
<div>
1414
<img
1515
src={project.image}

‎src/Components/TechStack.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ export default function TechStack() {
55
return (
66
<div id='techstack' className='p-4 md:px-10 xl:px-[10%] mb-6'>
77
<h2 className='text-center text-neutral-content my-10 text-5xl tracking-wide font-bold'>TechStack</h2>
8-
<div className='bg-secondary pbn-6 md:mx-20 mx-auto px-5 rounded-2xl py-5'>
8+
<div className='bg-secondary pb-6 md:mx-20 mx-auto px-5 rounded-2xl py-5'>
99
{stacks.map(stack=>{
1010
return (
11-
<a href={stack.href}>
11+
<a href={stack.href} key={stack.name}>
1212
<img
1313
className='w-14 mt-5 md:w-20 ml-4 inline'
1414
alt={`picture of ${stack.name}`}

‎src/Components/Themes.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function Themes() {
2626
const themes = ["light", "dark", "cupcake", "bumblebee", "emerald", "corporate", "synthwave", "retro", "cyberpunk", "valentine", "halloween", "garden", "forest", "aqua", "lofi", "pastel", "fantasy", "wireframe", "black", "luxury", "dracula", "cmyk", "autumn", "business", "acid", "lemonade", "night", "coffee", "winter"]
2727

2828
return (
29-
<div ref={modalRef} className='mt-16 shadow-2xl w-52 overflow-y-scroll no-scrollbar rounded-box bg-base-200 text-base-content max-h-[650px] md:max-h-[550px]'>
29+
<div ref={modalRef} className='shadow-2xl w-52 overflow-y-scroll no-scrollbar rounded-box bg-base-200 text-base-content max-h-[650px] md:max-h-[550px]'>
3030
<ul className='p-4 flex flex-col'>
3131
{themes.map(theme=>{
3232
return (

‎src/Types/types.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export type ProjectType = {
1010
export type AppContextType = {
1111
theme: string;
1212
dispatch: React.Dispatch<AppActionType>;
13-
themeModal: boolean
13+
themeModal: boolean;
1414
}
1515

1616
export type AppActionType = {

‎src/reducer.ts

+5
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ export function appReducer(state: AppContextType, action: AppActionType){
1717
...state,
1818
themeModal: false
1919
}
20+
case 'setNavModalTrue':
21+
return {
22+
...state,
23+
navModal: true
24+
}
2025
default : return state
2126
}
2227
}

0 commit comments

Comments
 (0)