-
- TODO: publish content
-
- Deploy nextjs typescript nodejs vercel css html footer menu paralax
https://weekly57-maximilianou.vercel.app/
-
- plain css Paralax, menu, footer
npm run export
- pages/index.tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import Menu from '../components/Menu'
import MenuNav from '../components/MenuNav'
import SFooter from '../components/SFooter'
import styles from '../styles/Home.module.css'
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Head>
<title>Create Next dApp</title>
<meta name="description" content="Generated by create next dapp" />
<link rel="icon" href="/max_logo.svg" />
</Head>
<main className={styles.main}>
<article className={styles.paralaxStyle} id='art01'>Article One</article>
<article className={styles.greenStyle} id='art02'>Article Two</article>
<article className={styles.paralaxStyle} id='art03'>Article Three</article>
<article className={styles.whiteStyle} id='art04'>Article Four</article>
<article className={styles.paralaxStyle} id='art05'>Article Five</article>
<article className={styles.redStyle} id='art06'>Article Six</article>
<article className={styles.paralaxStyle} id='art07'>Article Seven</article>
</main>
<Menu></Menu>
<MenuNav></MenuNav>
<SFooter></SFooter>
<video className={styles.background_video} loop muted autoPlay
poster="https://simpledoers.eth.limo/max_logo.svg">
<source src="https://simpledoers.eth.limo/video_bg.mp4"
type="video/mp4" />
</video>
</div>
)
}
export default Home- components/SFooter.tsx
import Image from "next/image";
import Link from "next/link";
import styles from '../styles/Footer.module.css';
const SFooter = () => {
const footerItem: { href: string; content: string, imageSrc: string }[] = [
{ href: "https://github.com/maximilianou/",
content: "GitHub",
imageSrc: "./github_logo.svg"
},
{
href: "https://profile.codersrank.io/user/maximilianou/",
content: "CodersRank",
imageSrc: "./codersrank_logo.svg"
},
{
href: "http://buymeacryptocoffee.xyz/simpledoers.eth",
content: "Donate a Crypto coffee",
imageSrc: "./eth_logo.svg"
},
{
href: "https://buymeacoffee.com/simpledoers/",
content: "Donate a coffee",
imageSrc: "./cup_of_coffee.svg"
},
{ href: "mailto:maximilianou@gmail.com",
content: "email",
imageSrc: "./max_logo.svg"
},
];
return (
<footer className={styles.footerStyle}>
<ul className={styles.ulStyle}>
{footerItem.map((data, index ) => (
<li key={index} className={`${styles.liStyle} `} >
<Link href={data.href} target={"_blank"}>
<a className={styles.buttonStyle}>
{ data.imageSrc && <Image width={40} height={30} src={data.imageSrc} alt={data.content} /> }
{ data.content }
</a>
</Link>
</li>
))}
</ul>
</footer>
);
};
export default SFooter;- Menu.tsx
import styles from '../styles/Menu.module.css'
const Menu = ( ) => {
const menuItemData: { link:string , text:string }[] = [
{
link: `/`,
text: `Home`,
},
{
link: `https://simpledoers.eth.limo`,
text: `Do eth`,
},
{
link: `https://simpledoers.com`,
text: `Do com`,
},
{
link: `https://github.com/maximilianou`,
text: `Github`,
},
]
return (
<div className={styles.menuStyle} >
{ menuItemData && menuItemData.map( ({ link, text }, indx) => (
<a key={indx} href={link} className={styles.manuItemStyle} >{text}</a>
))}
</div>
)
};
export default Menu;/* background video mp4 */
.background_video {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: -20;
width: 100vw;
height: 100vh;
object-fit: cover;
}
/* paralax */
.paralaxStyle {
/* background-image: url('/background_code.png') ; */
background-color: transparent;
color: white;
height: 100vh;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.greenStyle {
background-color: rgb(10, 240, 0, 0.5);
min-height:100vh;
width: 100%;
}
.whiteStyle {
background-color: rgb(250, 250, 250, 0.5);
color: black;
min-height:100vh;
width: 100%;
}
.redStyle {
background-color: rgb(240, 10, 0, 0.5);
min-height:100vh;
min-height: 600px;
width: 100%;
}
/* Menu side bar*/
.menuStyle {
position: fixed;
width: 100px;
top: 80px;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
left: -80px;
}
.menuStyle:hover {
left: 0px;
}
.manuItemStyle {
padding: 16px;
display: inline-block;
width: 100%;
border-radius: 12px;
background-color: rgb(100,100,100,0.5);
}-
- Styled Components pure - back to styled-components
ups!, Simplefied not using it.
-
- Styled components emotion - back to emotion react emotion styled components
Simplified not using it
$ npx create-next-app blog3 --typescript
Need to install the following packages:
create-next-app@12.2.1
$ npm install -D @emotion/react @emotion/styled-
- Menu style react and tailwindcss
const Menu = ( ) => {
const menuStyle = `fixed w-[100px] top-20
transition-all -left-20 hover:left-0
`;
const manuItemStyle = `p-4
inline-block w-full
rounded-xl bg-[rgb(100,100,100,0.5)] `;
// this list of items and links can came from othe data source kind of blog entries
const menuItemData: { link:string , text:string }[] = [
{
link: `#`,
text: `About`,
},
{
link: `#`,
text: `Blog`,
},
{
link: `#`,
text: `Projects`,
},
{
link: `#`,
text: `Contact`,
},
]
return (
<div className={menuStyle} >
{ menuItemData && menuItemData.map( ({ link, text }, indx) => (
<a href={link} className={`${manuItemStyle} `} >{text}</a>
))}
</div>
)
};
export default Menu;npx create-next-app blog2 --typescript
cd blog2
npm install -D tailwindcss postcss autoprefixer