Week 6

react-blogs/BandyNaranjo-5656/.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}

react-blogs/BandyNaranjo-5656/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

react-blogs/BandyNaranjo-5656/components/Card/Card.jsx

@@ -0,0 +1,21 @@
+import "./Card.scss"
+import Paragraph from "/components/Paragraph/Paragraph";
+import Image from "/components/Image/Image";
+import Heading from "/components/Heading/Heading";
+
+const Card = ({ unsplashId, unsplashAlt, title, paragraph }) => {
+    return (
+    <>
+        <div className="hobby">
+            <Image type='card' src={`/images/${unsplashId}`} alt={unsplashAlt}/>
+            <div>
+            <Heading color="white" size="sm" align="center">{title}</Heading>
+            <Paragraph color='dark-grey'>{paragraph}</Paragraph>
+            </div>
+
+        </div>
+    </>
+    );
+}
+
+export default Card;

react-blogs/BandyNaranjo-5656/components/Card/Card.scss

@@ -0,0 +1,13 @@
+.hobby {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    border: 1px solid white;
+    padding: 10px;
+    gap: 10px 0px;
+  }
+
+.hobby p {
+    text-align: center;
+}

react-blogs/BandyNaranjo-5656/components/Footer/Footer.jsx

@@ -0,0 +1,30 @@
+import "./Footer.scss"
+import Heading from "../Heading/Heading";
+import Link from "../Link/Link";
+import Image from "../Image/Image";
+
+const Footer = () => {
+    return (
+        <>
+        <footer id="contactMe">
+            <div className="main-footer">
+                <div className="contactMe">
+                    <Heading color='white' size='lg'>Contact me</Heading>
+                    <Link size="md" href="mailto:[email protected]">[email protected]</Link>
+                </div>
+                <div className="social-media">
+                    <Link href="https://www.instagram.com/bandynaranjo/" target="_blank"><Image type='icon' src='/images/instagram.png' alt='Logo instagram'></Image></Link>
+                    <Link href="https://github.com/lubana2/" target="_blank"><Image type='icon' src='/images/github.png' alt='Logo github'></Image></Link>
+                    <Link href="https://www.linkedin.com/in/luz-bandy-naranjo-mart%C3%ADnez-7200b1143/" target="_blank"><Image type='icon' src='/images/linkedin.png' alt='Logo linkedin'></Image></Link>
+                    <Link href="https://twitter.com/BandyNaranjo" target="_blank"><Image type='icon' src='/images/twitter.png' alt='Logo twitter'></Image></Link>
+                    <Link href="https://www.twitch.tv/bandynaranjo" target="_blank"><Image type='icon' src='/images/twitch.png' alt='Logo twitch'></Image></Link>                    
+                </div>
+            </div>
+        </footer>
+        </>
+    );
+};
+
+export default Footer;
+
+

react-blogs/BandyNaranjo-5656/components/Footer/Footer.scss

@@ -0,0 +1,21 @@
+.contactMe{
+    display: flex;
+    flex-direction: column;
+    gap: 20px 0px;
+}
+
+.social-media{
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+
+.main-footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 20px 50px;
+    background-color: var(--secondary-color);
+    border-radius: 10px;
+    gap: 50px 0px;
+}

react-blogs/BandyNaranjo-5656/components/Header/Header.jsx

@@ -0,0 +1,31 @@
+import "./Header.scss"
+import { useState } from "react";
+import Tab from "../Tab/Tab";
+
+
+
+const showHideMenu = () => {
+    const navLinks = document.querySelector('.menu');
+    navLinks.classList.toggle('show');
+}
+
+const Header = ({ tabs = [] }) => {
+    const [ activeFilter, setActiveFilter ] = useState(tabs[0].name);
+    return (
+    <>
+        <nav>
+            <button className="toggle-menu" onClick={showHideMenu}>&#9776;</button>
+            <ul className="menu">
+                {tabs.map(
+                    ({name, href}, index) => (
+                        <Tab key={index} href={href} isActive={activeFilter == name} onClick={setActiveFilter}>
+                            {name}
+                        </Tab>
+                ))}
+            </ul>
+        </nav>
+    </>
+    );
+}
+
+export default Header;

react-blogs/BandyNaranjo-5656/components/Header/Header.scss

@@ -0,0 +1,121 @@
+
+@use "../../src/styles/tools";
+header {
+    display: flex;
+    justify-content: end;
+}
+
+nav {
+    background-color: var(--secondary-color);
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    padding: 10px 20px;
+    border-radius: 10px;
+}
+
+.toggle-menu {
+    background: transparent;
+    border: none;
+    color: #fff;
+    font-size: 35px;
+    cursor: pointer
+}
+
+.menu {
+    display: none;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.show {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    gap: 20px;  
+}
+
+.menu li:hover, .is-active-Tab {
+    border-bottom: 2px solid white;
+
+}
+
+nav ul li a {
+    color: aliceblue;
+    text-decoration: none;
+    font-weight: 400;
+} 
+
+.is-active-Tab a {
+    font-weight: 700;
+}
+
+p a {
+    color: #333;
+}
+
+@include tools.tablet {
+    nav {
+        width: 100%;
+    }
+    .menu {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+        gap: 20px;   
+    }
+
+    .toggle-menu {
+        display: none;
+    }
+
+    section header {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .hobbies {
+        margin: 30px;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        gap: 30px;
+    }
+
+}
+
+@include tools.desktop {
+    nav {
+        width: 100%;
+    }
+    .menu {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 20px;   
+    }
+    .toggle-menu {
+        display: none;
+      }
+     section header {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+    .hobbies {
+        margin: 30px;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        gap: 30px;
+    }
+
+}

react-blogs/BandyNaranjo-5656/components/Heading/Heading.jsx

@@ -0,0 +1,16 @@
+import "./Heading.scss"
+import classnames from "classnames";
+
+const Heading = ({ children, color, size, align="left" }) => {
+    return (
+    <>
+        <h4 className={classnames('font-bold', {
+                [`color-${color}`]: color,
+                [`heading-${size}`]: size,
+                [`heading-align-${align}`]: align,
+            })}>{children}</h4>
+    </>
+    );
+}
+
+export default Heading;

react-blogs/BandyNaranjo-5656/components/Heading/Heading.scss

@@ -0,0 +1,38 @@
+.color-white {
+    color: var(--color-white);
+}
+
+.color-black {
+    color: var(--color-black);
+}
+
+.color-dark-grey{
+    color: var(--color-dark-grey);
+}
+
+.heading-sm {
+    font-size: 23px;
+    line-height: 29px;
+}
+
+.heading-lg {
+    font-size: 40px;
+    line-height: 46px;
+}
+
+.heading-xl {
+    font-size: 57px;
+    line-height: 63px;
+}
+
+.font-bold {
+    font-weight: 700;
+}
+
+.heading-align-center {
+    text-align: center;
+}
+
+.heading-align-left {
+    text-align: left;
+}

react-blogs/BandyNaranjo-5656/components/Image/Image.jsx

@@ -0,0 +1,14 @@
+import "./Image.scss"
+import classnames from "classnames";
+
+const Image = ({ type, src, alt }) => {
+    return (
+    <>
+        <img src={src} alt={alt} className={classnames({
+                [`${type}`]: type,
+            })}/>
+    </>
+    );
+}
+
+export default Image;

react-blogs/BandyNaranjo-5656/components/Image/Image.scss

@@ -0,0 +1,22 @@
+.avatar{
+    width: 100%;
+    height: 100%;
+    max-width: 300px;
+    max-height: 300px;
+    border-radius: 50px;
+}
+
+.icon{
+    height: 45px;
+    width: 45px;
+    border-radius: 5px;
+}
+
+.card{
+   object-fit: cover;
+    height: auto;
+    aspect-ratio: 1/1;
+    width: 300px;
+    border-radius: 50%;
+
+}