Merge pull request #1 from joao-mbn/revamp

Created the website anew.

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["react-app", "prettier"]
+  "extends": "next/core-web-vitals"
 }

.gitignore

@@ -1,24 +1,40 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 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?
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.prettierrc

@@ -10,5 +10,6 @@
   "bracketSameLine": true,
   "arrowParens": "avoid",
   "endOfLine": "crlf",
-  "singleAttributePerLine": false
+  "singleAttributePerLine": false,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["github.copilot-chat"]
+}

README.md

@@ -1,3 +0,0 @@
-# joao-mbn.github.io
-
-- This is the website that shows my up-to-date resumee. If you are interested in my work, then reach me out.

app/components/Background/Background.module.css

@@ -0,0 +1,25 @@
+@property --angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@keyframes rotate {
+  0% {
+    --angle: 0deg;
+  }
+  100% {
+    --angle: 360deg;
+  }
+}
+
+.backgroundHexagons {
+  mask-image: url('/background-pattern.svg');
+  animation: rotate 10s linear infinite;
+  background: linear-gradient(var(--angle), theme(colors.slate.50), theme(colors.slate.200));
+}
+
+.background {
+  background-image: linear-gradient(calc(var(--angle) * -1), theme(colors.slate.200), theme(colors.slate.300));
+  animation: rotate 10s linear infinite;
+}

app/components/Background/Background.tsx

@@ -0,0 +1,10 @@
+import styles from './Background.module.css';
+
+export function Background() {
+  return (
+    <>
+      <div className={'fixed -z-20 h-screen min-w-[100vw] ' + styles.background} />
+      <div className={'fixed -z-10 h-screen min-w-[100vw] ' + styles.backgroundHexagons} />
+    </>
+  );
+}

app/components/Card.tsx

@@ -0,0 +1,19 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+interface CardProps extends ComponentPropsWithoutRef<'section'> {
+  image: ReactNode;
+}
+
+export function Card({ image, children, className, ...props }: CardProps) {
+  return (
+    <div
+      className={
+        'flex break-inside-avoid flex-col items-center justify-center border-2 border-solid border-slate-800 *:transition-all *:duration-300 *:hover:grayscale-0 [&:not(:first-child)]:mt-4 [&:not(:first-child)]:lg:mt-8 ' +
+        className
+      }
+      {...props}>
+      {image}
+      <div className="border-t-2 border-slate-800 px-4 pt-4">{children}</div>
+    </div>
+  );
+}

app/components/DescriptionContainer/DescriptionBlock.tsx

@@ -0,0 +1,28 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+export interface DescriptionBlockProps<T extends 'h1' | 'h2' | 'h3' | 'h4'>
+  extends Omit<ComponentPropsWithoutRef<'section'>, 'title'> {
+  title: ReactNode;
+  samanticTitleTag?: T;
+  titleProps?: ComponentPropsWithoutRef<T>;
+}
+
+export function DescriptionBlock<T extends 'h1' | 'h2' | 'h3' | 'h4'>({
+  title,
+  children,
+  className = '',
+  samanticTitleTag,
+  titleProps: { className: titleClassName = '', ...otherTitleProps } = {} as ComponentPropsWithoutRef<T>,
+  ...props
+}: DescriptionBlockProps<T>) {
+  const Title = samanticTitleTag ?? 'h2';
+
+  return (
+    <section className={'mt-5 lg:mt-10 ' + className} {...props}>
+      <Title className={'text-very-big ' + titleClassName} {...otherTitleProps}>
+        {title}
+      </Title>
+      {children}
+    </section>
+  );
+}

app/components/DescriptionContainer/DescriptionItem.tsx

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { Paragraph } from '..';
+
+export interface DescriptionItemProps extends ComponentPropsWithoutRef<'li'> {}
+
+export function DescriptionItem({ children, ...props }: DescriptionItemProps) {
+  return (
+    <li className="mb-1 flex gap-4 lg:mb-2" {...props}>
+      <div className="bullet dark-bg-gradient h-4 w-4 flex-shrink-0 translate-y-2" />
+      <Paragraph className="mb-0">{children}</Paragraph>
+    </li>
+  );
+}

app/components/DescriptionContainer/index.ts

@@ -0,0 +1,2 @@
+export * from './DescriptionBlock';
+export * from './DescriptionItem';

app/components/Footer.tsx

@@ -0,0 +1,10 @@
+import { ExternalLink } from '.';
+import { GITHUB } from '../utils/constants';
+
+export function Footer() {
+  return (
+    <footer className="mt-auto border-t-2 border-t-slate-800 p-2 text-center">
+      Made by <ExternalLink href={GITHUB}>João</ExternalLink>
+    </footer>
+  );
+}

app/components/GradientSvg.tsx

@@ -0,0 +1,72 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+export interface GradientSvgProps extends ComponentPropsWithoutRef<'svg'> {
+  id: string;
+  extraDefs?: ReactNode;
+  gradientOn?: 'fill' | 'stroke' | 'both';
+  invertOnHover?: boolean;
+}
+
+export function GradientSvg({
+  children,
+  extraDefs,
+  gradientOn = 'fill',
+  id = 'id',
+  invertOnHover = false,
+  ...props
+}: GradientSvgProps) {
+  return (
+    <svg {...props} id={`${id}-svg`}>
+      <defs>
+        {extraDefs}
+        <linearGradient id={`gradient-${id}`} x1="0" x2="1" y1="1" y2="0">
+          <stop offset="0%" className={`${id}-stop-1`} />
+          <stop offset="50%" className={`${id}-stop-2`} />
+        </linearGradient>
+      </defs>
+      <style>
+        {`
+          .${id}-stop-1 {
+            stop-color: #475569;
+          }
+          .${id}-stop-2 {
+            stop-color: #0f172a;
+          }
+
+          #${id} {
+            ${gradientOn === 'both' || gradientOn === 'fill' ? `fill: url(#gradient-${id}); ` : ''}
+            ${gradientOn === 'both' || gradientOn === 'stroke' ? `stroke: url(#gradient-${id});` : ''}
+          }
+
+          ${
+            invertOnHover
+              ? `
+                #${id}-svg:hover #${id} {
+                  ${gradientOn === 'both' || gradientOn === 'fill' ? `fill: transparent;` : ''}
+                  ${gradientOn === 'both' || gradientOn === 'stroke' ? `stroke: transparent;` : ''}
+                }
+
+                #${id}-inverse {
+                  ${gradientOn === 'both' || gradientOn === 'fill' ? `fill: transparent;` : ''}
+                  ${gradientOn === 'both' || gradientOn === 'stroke' ? `stroke: white;` : ''}
+                }
+                #${id}-svg:hover #${id}-inverse {
+                  ${gradientOn === 'both' || gradientOn === 'fill' ? `fill: url(#gradient-${id});` : ''}
+                  ${gradientOn === 'both' || gradientOn === 'stroke' ? `stroke: url(#gradient-${id});` : ''}
+                }
+
+                #${id}-svg:hover mask path, #${id}-svg mask rect, #${id}-svg mask circle {
+                  fill: black;
+                }
+                #${id}-svg mask path, #${id}-svg:hover mask rect, #${id}-svg:hover mask circle {
+                  fill: white;
+                }
+                `
+              : ''
+          }
+        `}
+      </style>
+      {children}
+    </svg>
+  );
+}

app/components/Header/Header.tsx

@@ -0,0 +1,11 @@
+import { Navbar } from '..';
+import { Links } from './Links';
+
+export function Header() {
+  return (
+    <header className="text-big flex flex-wrap justify-between gap-8 align-middle lg:gap-6">
+      <Navbar />
+      <Links className="-translate-y-[0.4rem]" />
+    </header>
+  );
+}

app/components/Header/Links.tsx

@@ -0,0 +1,17 @@
+import { LinkedinLink, NavMenu, NavMenuProps } from '..';
+import { GithubLink } from '../Links/GithubLink';
+
+export interface LinksProps extends Omit<NavMenuProps, 'children'> {}
+
+export function Links(props: LinksProps) {
+  return (
+    <NavMenu {...props}>
+      <li>
+        <GithubLink />
+      </li>
+      <li>
+        <LinkedinLink />
+      </li>
+    </NavMenu>
+  );
+}

app/components/Header/Navbar.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { NavMenu } from '..';
+
+const routes = [
+  { path: '/', value: 'Home' },
+  { path: '/projects', value: 'Projects' },
+  { path: '/resume', value: 'Resume' },
+];
+
+export function Navbar() {
+  const activePath = usePathname();
+
+  return (
+    <NavMenu>
+      {routes.map(({ path, value }) => (
+        <li key={path}>
+          <Link href={path} className={'p-2 lg:p-3 ' + (path === activePath ? 'text-link-active' : 'text-link')}>
+            {value}
+          </Link>
+        </li>
+      ))}
+    </NavMenu>
+  );
+}

app/components/HexagonCointainer.tsx

@@ -0,0 +1,22 @@
+import { GradientSvg, GradientSvgProps } from '.';
+
+export interface HexagonImageContainerProps extends Omit<GradientSvgProps, 'gradientOn'> {}
+
+export function HexagonImageContainer({ children, id, ...props }: HexagonImageContainerProps) {
+  return (
+    <GradientSvg
+      extraDefs={
+        <clipPath id={id}>
+          <path d="M50.3 0L93.6 25L93.6 75L50.3 100L7 75V25L50.3 0Z" />
+        </clipPath>
+      }
+      viewBox="0 0 100 100"
+      gradientOn="stroke"
+      id={`path-${id}`}
+      className="h-56 w-56 overflow-visible fill-none stroke-slate-800 stroke-1 tiny:h-80 tiny:w-80 sm:h-56 sm:w-56 md:h-80 md:w-80 lg:h-96 lg:w-96"
+      {...props}>
+      {children}
+      <path id={`path-${id}`} d="M50.3 0L93.6 25L93.6 75L50.3 100L7 75V25L50.3 0Z" />
+    </GradientSvg>
+  );
+}

app/components/Links/BaseLinkIcon.tsx

@@ -0,0 +1,16 @@
+import { ExternalLink, ExternalLinkProps } from '.';
+import { GradientSvg, GradientSvgProps } from '..';
+
+export interface BaseLinkIcon extends GradientSvgProps, Pick<ExternalLinkProps, 'href' | 'aria-label'> {
+  id: string;
+}
+
+export function BaseLinkIcon({ href, 'aria-label': ariaLabel, children, className = '', ...props }: BaseLinkIcon) {
+  return (
+    <ExternalLink href={href} aria-label={ariaLabel}>
+      <GradientSvg className={'h-10 w-10 lg:h-12 lg:w-12 ' + className ?? ''} {...props}>
+        {children}
+      </GradientSvg>
+    </ExternalLink>
+  );
+}

app/components/Links/ExternalLink.tsx

@@ -0,0 +1,13 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+
+export interface ExternalLinkProps extends ComponentPropsWithoutRef<'a'> {
+  children?: React.ReactNode;
+}
+
+export function ExternalLink({ children, ...props }: ExternalLinkProps) {
+  return (
+    <a target="_blank" rel="noreferrer" className="text-link" {...props}>
+      {children}
+    </a>
+  );
+}