-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from joao-mbn/revamp
Created the website anew.
- Loading branch information
Showing
127 changed files
with
5,696 additions
and
10,951 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
{ | ||
"extends": ["react-app", "prettier"] | ||
"extends": "next/core-web-vitals" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"recommendations": ["github.copilot-chat"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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} /> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export * from './DescriptionBlock'; | ||
export * from './DescriptionItem'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
Oops, something went wrong.