Skip to content

Commit

Permalink
Añadida cabecera
Browse files Browse the repository at this point in the history
  • Loading branch information
@clara7227
clara7227 committed Apr 29, 2024
1 parent f99dda4 commit f79e68a
Show file tree
Hide file tree
Showing 10 changed files with 146 additions and 97 deletions.
3 changes: 3 additions & 0 deletions app/about/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ export default function About (props) {
return (
<div className="about">
<Header route={"/about"}/>
<div className="banner">
<h1>Contact</h1>
</div>
<main>
<section className="about_description">

Expand Down
3 changes: 3 additions & 0 deletions app/courses/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ export default function Courses() {
return (
<div className="courses">
<Header route={"/courses"} />
<div className="banner">
<h1>Courses</h1>
</div>
<main>
<section className="m-40">
<div>courses filter</div>
Expand Down
65 changes: 31 additions & 34 deletions app/projects/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
"use client"
"use client";

import { useEffect, useState } from "react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Link from 'next/link';
import Link from "next/link";
import ProjectCard from "@/components/projectCard";
import {myprojectCards} from "@/constants/projectsCards.js";
import { myprojectCards } from "@/constants/projectsCards.js";

export default function Projects() {
const [projects, setProjects] = useState(myprojectCards);

export default function Projects (){
const [projects, setProjects] = useState(myprojectCards);
useEffect(() => {
window.scrollTo(0, 0);
}, []);

useEffect(() => {
window.scrollTo(0,0);
}, []);

return (
<div className="projects">
<Header route={"/projects"}/>
<main>
{/* <section className="our_projects">
return (
<div className="projects">
<Header route={"/projects"} />
<div className="banner">
<h1> Projects</h1>
</div>
<main>
{/* <section className="our_projects">
<div>
project filter
</div>
Expand All @@ -45,25 +46,21 @@ export default function Projects (){
);
})}
</section> */}
<section>
<ProjectCard/>
</section>
</main>
<Footer/>
</div>
)


<section>
<ProjectCard />
</section>
</main>
<Footer />
</div>
);
}

const CreateLink = (props) => {
return props.route.match("http") ? (
<a target="_blank" href={props.route} rel="noopener noreferrer">
{props.children}
</a>
):(
<Link href={props.route}>
{props.children}
</Link>
);
}
return props.route.match("http") ? (
<a target="_blank" href={props.route} rel="noopener noreferrer">
{props.children}
</a>
) : (
<Link href={props.route}>{props.children}</Link>
);
};
37 changes: 15 additions & 22 deletions app/research/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,10 @@ export default function Research() {
<div className="research_container">
<div className="research">
<Header route={"/research"} />
<div className="banner">
<h1>Publications</h1>
</div>
<main>
<div className="banner">
<h1>Publications</h1>
</div>
<section className="research">
<Filters
search={search}
Expand All @@ -101,12 +101,10 @@ export default function Research() {
.map(({ date, doi, content }, ind) => {
return (
<div key={ind} className="paper">


<div className="paper_main">
<div className="paper_date">
<h5 className="year">{date ? date[0] : ""}</h5>
</div>
<div className="paper_date">
<h5 className="year">{date ? date[0] : ""}</h5>
</div>
<div className="paper_content">
<div className="paper_title">
<h2></h2>
Expand All @@ -115,22 +113,17 @@ export default function Research() {
dangerouslySetInnerHTML={{ __html: content }}
className="paper_subtitle"
></div>

</div>
</div>
<div className="links">
<a
rel="noopener noreferrer"
target="_blank"
href={doi}
>
{" "}
<p>Read publication </p>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
/>{" "}
</a>
</div>
<div className="links">
<a rel="noopener noreferrer" target="_blank" href={doi}>
{" "}
<p>Read publication </p>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
/>{" "}
</a>
</div>
</div>
);
})}
Expand Down
19 changes: 17 additions & 2 deletions app/sass/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ $semi-bold: 600;
$bold: 700;
$extra-bold: 900;


@mixin nav_bar {
width: 100%;
display: flex;
Expand Down Expand Up @@ -163,7 +164,21 @@ $extra-bold: 900;
}

.banner {
padding-top: $spacing_lg;
margin-top: 60px;
height: 100%;
background-image: url("/assets/img/headers/header-one.png");
background-color: #282828;
background-size: contain;
object-fit: cover;
display: flex;
align-items: flex-end;
height:160px;
h1 {
padding: 0 0 $spacing_sm $spacing_xl;
color:white;

}

}

body,
Expand Down Expand Up @@ -579,7 +594,7 @@ main {
.projects {
color: inherit;
@apply bg-white;
padding: 5rem 0 0 0;
//padding: 5rem 0 0 0;

.spinner {
min-height: calc(100vh - 150px);
Expand Down
4 changes: 4 additions & 0 deletions app/team/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ export default function Team (props){
return (
<div className="team">
<Header route={"/team"}/>
<div className="banner">
<h1>Team</h1>
</div>
<main>

<section className="teammates">
{
Object.values(team).map(({title,members})=>{
Expand Down
5 changes: 4 additions & 1 deletion app/tools/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,11 @@ export default function Tools(props) {
return (
<div className="tools">
<Header route="/tools"/>
<div className="banner">
<h1>Tools</h1>
</div>
<main>
<div className='banner'><h1>Tools</h1></div>

<section className="our_tools">


Expand Down
107 changes: 69 additions & 38 deletions components/Header.js
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,86 @@
import React from 'react';
import Link from 'next/link';
import {useState, useEffect} from 'react';

import React from "react";
import Link from "next/link";
import { useState, useEffect } from "react";

const routes = [
//{route: "/", title: "Home"},
{route: "/research", title: "Publications"},
{route: "/courses", title: "Courses"},
{route: "/tools", title: "Tools"},
{route: "/projects", title: "Projects"},
{route: "/team", title: "Team"},
{route: "/about", title: "Contact"}
]
export default function Header (props) {
const [state, setState] = useState({open: false});
{ route: "/research", title: "Publications" },
{ route: "/courses", title: "Courses" },
{ route: "/tools", title: "Tools" },
{ route: "/projects", title: "Projects" },
{ route: "/team", title: "Team" },
{ route: "/about", title: "Contact" },
];
export default function Header(props) {
const [state, setState] = useState({ open: false });

return (
<header className="nav_bar" id="header_home">
<a href="/">
<div className="imagotype">
<div className="isotype"><img className="logoheader" src="/assets/img/iso_logo.png" alt="logo"/></div>
<div className="logotype"><span>Cyber</span>Aula</div>
<a href="/">
<div className="imagotype">
<div className="isotype">
<img
className="logoheader"
src="/assets/img/iso_logo.png"
alt="logo"
/>
</div>
<div className="logotype">
<span>Cyber</span>Aula
</div>
</div>
</a>
<div className="menu_icon">
<i
className={
"material-icons show " +
(state.open ? "responsive-hidden" : "responsive-shown")
}
onClick={() => {
setState({ open: !state.open });
}}
>
menu
</i>
<i
className={
"material-icons close " +
(state.open ? "responsive-shown" : "responsive-hidden")
}
onClick={() => {
setState({ open: !state.open });
}}
>
close
</i>
</div>
</a>
<div className="menu_icon" >
<i className={"material-icons show " + (state.open ? "responsive-hidden":"responsive-shown")}
onClick={() => {setState({open: !state.open})}}>
menu
</i><i className={"material-icons close " + (state.open ? "responsive-shown":"responsive-hidden")}
onClick={() => {setState({open: !state.open})}}>
close
</i></div>

<div className={"menu "+ (state.open ? "responsive-shown":"responsive-hidden")}>
<ul>
{routes.map((route,index) => <li key={index} className={route.route === props.route ? "li-selected":""}>
<Link href={route.route}>{route.title}</Link></li>)}
</ul>
</div>

</header>
<div
className={
"menu " + (state.open ? "responsive-shown" : "responsive-hidden")
}
>
<ul>
{routes.map((route, index) => (
<li
key={index}
className={route.route === props.route ? "li-selected" : ""}
>
<Link href={route.route}>{route.title}</Link>
</li>
))}
</ul>
</div>

</header>

);

}

// import React from 'react';
// import Link from 'next/link';
// import {useState, useEffect} from 'react';


// const routes = [
// {route: "/", title: "Home"},
// {route: "/projects", title: "Projects"},
Expand Down Expand Up @@ -85,10 +116,10 @@ export default function Header (props) {
// </div>
// </a>
// <div className="menu_icon" >
// <i className={"material-icons show " + (state.open ? "responsive-hidden":"responsive-shown")}
// <i className={"material-icons show " + (state.open ? "responsive-hidden":"responsive-shown")}
// onClick={() => {setState({open: !state.open})}}>
// menu
// </i><i className={"material-icons close " + (state.open ? "responsive-shown":"responsive-hidden")}
// </i><i className={"material-icons close " + (state.open ? "responsive-shown":"responsive-hidden")}
// onClick={() => {setState({open: !state.open})}}>
// close
// </i></div>
Expand Down
Binary file added public/assets/img/headers/header-one.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/assets/img/tools/header_placeholder-02-01.png
View file
Binary file not shown.

0 comments on commit f79e68a

Please sign in to comment.