Skip to content
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

added footer section to the website #157

Closed
wants to merge 1 commit into from
Closed

added footer section to the website #157

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
9 changes: 8 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Master Log - Website of All type of Projects</title>
</head>
Expand Down
1 change: 1 addition & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

48 changes: 36 additions & 12 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,22 @@
import React, { useState } from 'react';
import LoadingBar from 'react-top-loading-bar';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import React, { useState } from "react";
import LoadingBar from "react-top-loading-bar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Footer from "./components/Footer/Footer";
import "./App.css";
import SideBar from "./components/Sidebar/SideBar";
import Links from "./components/Links";
import MainPage from "./components/Pages/MainPage";

import './App.css';
import SideBar from './components/Sidebar/SideBar';
import Links from './components/Links';
import MainPage from './components/Pages/MainPage';

const categories = ['angular', '', 'frontend', 'next', 'node', 'react', 'vanilla', 'vue'];
const categories = [
"angular",
"",
"frontend",
"next",
"node",
"react",
"vanilla",
"vue",
];
const routes = Links();

function App() {
Expand All @@ -17,16 +26,31 @@ function App() {
<div>
<Router>
<SideBar routes={routes}>
<LoadingBar height={3} color='#f11946' progress={progress} />
<LoadingBar height={3} color="#f11946" progress={progress} />

<Routes>
{categories.map((category) => {
return <Route key={category} exact path={`/${category}`} element={<MainPage setProgress={setProgress} key={category} category={category} routes={routes} />} />;
return (
<Route
key={category}
exact
path={`/${category}`}
element={
<MainPage
setProgress={setProgress}
key={category}
category={category}
routes={routes}
/>
}
/>
);
})}
</Routes>
</SideBar>

</Router>

<Footer />
</div>
);
}
Expand Down
20 changes: 20 additions & 0 deletions src/components/Footer/Footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
footer {
position: fixed;
background-color: black;
bottom: 0;
left: 0;
right: 0;
padding: 8px;
text-align: center;
width: 100%;
z-index: 9999;
}
.social-section {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.social ul li {
display: inline;
padding-left: 30px;
}
41 changes: 41 additions & 0 deletions src/components/Footer/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import "./Footer.css";
const Footer = () => {
const year = new Date().getFullYear();

return (
<footer>
<div class="social-section">
<div>
<div>
Made with ♡ by Avdhesh{" "}
<a href="https://github.com/Avdhesh-Varshney/WebMasterLog">
<i class="fa-brands fa-github"></i>
</a>
</div>
</div>
<div class="social">
<ul>
<li>
<a href="https://www.linkedin.com/in/avdhesh-varshney-5314a4233/">
<i class="fa-brands fa-linkedin fa-lg"></i>
</a>
</li>
<li>
<a href="https://x.com/i/flow/login?redirect_after_login=%2F__Avdhesh__">
<i class="fa-brands fa-square-x-twitter fa-lg"></i>
</a>
</li>
<li>
<a href="https://github.com/Avdhesh-Varshney">
<i class="fa-brands fa-square-github fa-lg"></i>
</a>
</li>
</ul>
</div>
</div>
<div>{`Copyright © Web Master Log ${year}`}</div>
</footer>
);
};

export default Footer;
144 changes: 87 additions & 57 deletions src/components/Pages/MainPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,96 @@
import React, { useEffect, useState } from 'react';
import ProjectCards from '../Cards/ProjectCards';
import './mainpage.css';
import Dashboard from './Dashboard';

import React, { useEffect, useState } from "react";
import ProjectCards from "../Cards/ProjectCards";
import "./mainpage.css";
import Dashboard from "./Dashboard";
import Footer from "../Footer/Footer";
const MainPage = (props) => {
const { category, routes } = props;
if (category === '') return <Dashboard />;
const { category, routes } = props;
if (category === "") return <Dashboard />;

const [projectsData, setProjectsData] = useState([]);
const [tag, setTag] = useState('All');
const [projectsData, setProjectsData] = useState([]);
const [tag, setTag] = useState("All");

const getName = (category) => {
let filtered = routes.filter(obj => obj.path === `/${category}`);
return filtered[0].name;
}
const getTech = (category) => {
let filtered = routes.filter(obj => obj.path === `/${category}`);
return filtered[0].tech;
}
const getName = (category) => {
let filtered = routes.filter((obj) => obj.path === `/${category}`);
return filtered[0].name;
};
const getTech = (category) => {
let filtered = routes.filter((obj) => obj.path === `/${category}`);
return filtered[0].tech;
};

useEffect(() => {
const fetchData = async () => {
props.setProgress(10);
try {
const response = await fetch(`https://raw.githubusercontent.com/Avdhesh-Varshney/WebMasterLog/main/database/${category}.json`);
if (!response.ok) {
throw new Error('Failed to fetch projects data');
}
props.setProgress(30);
const data = await response.json();
props.setProgress(50);
let filteredData = data;
if (tag !== 'All') {
filteredData = data.filter(project => project.tag === tag);
}
props.setProgress(80);
setProjectsData(filteredData);
} catch (error) {
console.error('Error fetching projects data:', error);
}
props.setProgress(100);
};
fetchData();
}, [tag]);
useEffect(() => {
const fetchData = async () => {
props.setProgress(10);
try {
const response = await fetch(
`https://raw.githubusercontent.com/Avdhesh-Varshney/WebMasterLog/main/database/${category}.json`
);
if (!response.ok) {
throw new Error("Failed to fetch projects data");
}
props.setProgress(30);
const data = await response.json();
props.setProgress(50);
let filteredData = data;
if (tag !== "All") {
filteredData = data.filter((project) => project.tag === tag);
}
props.setProgress(80);
setProjectsData(filteredData);
} catch (error) {
console.error("Error fetching projects data:", error);
}
props.setProgress(100);
};
fetchData();
}, [tag]);

const handleTagClick = (selectedTag) => {
setTag(selectedTag);
};
const handleTagClick = (selectedTag) => {
setTag(selectedTag);
};

return (
<>
<h1 className='text-end my-2 mx-3'>{`${getName(category)} Projects`}</h1>
<div className="d-flex justify-content-end my-2 mx-3">
<button type="button" className={`btn btn${tag !== 'Basic'? '-outline': ''}-success mx-1`} onClick={() => handleTagClick('Basic')}>Easy</button>
<button type="button" className={`btn btn${tag !== 'Intermediate'? '-outline': ''}-warning mx-1`} onClick={() => handleTagClick('Intermediate')}>Medium</button>
<button type="button" className={`btn btn${tag !== 'Advanced'? '-outline': ''}-danger mx-1`} onClick={() => handleTagClick('Advanced')}>Hard</button>
<button type="button" className={`btn btn${tag !== 'All'? '-outline': ''}-info mx-1`} onClick={() => handleTagClick('All')}>All</button>
</div>
return (
<>
<h1 className="text-end my-2 mx-3">{`${getName(category)} Projects`}</h1>
<div className="d-flex justify-content-end my-2 mx-3">
<button
type="button"
className={`btn btn${tag !== "Basic" ? "-outline" : ""}-success mx-1`}
onClick={() => handleTagClick("Basic")}
>
Easy
</button>
<button
type="button"
className={`btn btn${
tag !== "Intermediate" ? "-outline" : ""
}-warning mx-1`}
onClick={() => handleTagClick("Intermediate")}
>
Medium
</button>
<button
type="button"
className={`btn btn${
tag !== "Advanced" ? "-outline" : ""
}-danger mx-1`}
onClick={() => handleTagClick("Advanced")}
>
Hard
</button>
<button
type="button"
className={`btn btn${tag !== "All" ? "-outline" : ""}-info mx-1`}
onClick={() => handleTagClick("All")}
>
All
</button>
</div>

<ProjectCards projectsData={projectsData} tech={getTech(category)} />
</>
);
}
<ProjectCards projectsData={projectsData} tech={getTech(category)} />
</>
);
};

export default MainPage;
24 changes: 16 additions & 8 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,20 @@

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #000000;
color: white;
margin: 0;
padding: 0;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

ul {
Expand All @@ -50,21 +55,24 @@ a {
::-webkit-scrollbar-thumb {
background: #ffd700;
border-radius: 6px;
border: 2px solid #ffd700;
box-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700, 0 0 70px #ffd700;
border: 2px solid #ffd700;
box-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700,
0 0 40px #ffd700, 0 0 70px #ffd700;
animation: neonGlow 1.5s infinite alternate;
}

::-webkit-scrollbar-thumb:hover {
background: #ffe066;
background: #ffe066;
}

/* Neon glow animation */
@keyframes neonGlow {
from {
box-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700, 0 0 70px #ffd700;
box-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700,
0 0 40px #ffd700, 0 0 70px #ffd700;
}
to {
box-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700, 0 0 50px #ffd700, 0 0 80px #ffd700;
box-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700,
0 0 50px #ffd700, 0 0 80px #ffd700;
}
}
}