start revision
This commit is contained in:
parent
ea98b243c4
commit
768a16c170
18
.breakpoints
Normal file
18
.breakpoints
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"files": {
|
||||||
|
"components/Navbar.tsx": [
|
||||||
|
{
|
||||||
|
"id": "5aa0d634-c476-4ab2-9957-d364b66311b2",
|
||||||
|
"line": 2,
|
||||||
|
"version": 15,
|
||||||
|
"index": 39
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "01e112b0-3705-4b70-bf88-5b2716dd492d",
|
||||||
|
"line": 64,
|
||||||
|
"version": 35,
|
||||||
|
"index": 2597
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,4 +1,4 @@
|
||||||
const Logo = () => (
|
const Logo = (props) => (
|
||||||
<svg
|
<svg
|
||||||
width="100%"
|
width="100%"
|
||||||
height="100%"
|
height="100%"
|
||||||
|
@ -11,6 +11,7 @@ const Logo = () => (
|
||||||
clipRule='evenodd'
|
clipRule='evenodd'
|
||||||
strokeLinejoin='round'
|
strokeLinejoin='round'
|
||||||
strokeMiterlimit='2'
|
strokeMiterlimit='2'
|
||||||
|
{...props}
|
||||||
>
|
>
|
||||||
<g transform="matrix(1.87667,0,0,1.87667,-211.69,-370.379)">
|
<g transform="matrix(1.87667,0,0,1.87667,-211.69,-370.379)">
|
||||||
<path d="M330.006,585.343L506.715,408.388C513.207,401.887 513.2,391.339 506.699,384.847C500.198,378.355 489.65,378.363 483.158,384.863L306.448,561.819C299.956,568.32 299.964,578.868 306.465,585.36C312.965,591.852 323.514,591.844 330.006,585.343Z" fill="white" />
|
<path d="M330.006,585.343L506.715,408.388C513.207,401.887 513.2,391.339 506.699,384.847C500.198,378.355 489.65,378.363 483.158,384.863L306.448,561.819C299.956,568.32 299.964,578.868 306.465,585.36C312.965,591.852 323.514,591.844 330.006,585.343Z" fill="white" />
|
||||||
|
|
|
@ -1,14 +1,23 @@
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useEffect, useState } from "react";
|
import { Fragment, useState, useEffect } from 'react'
|
||||||
|
import { Disclosure, Menu, Transition } from '@headlessui/react'
|
||||||
|
import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
|
||||||
|
|
||||||
const Navbar = ({ links }: {
|
import Logo from '../components/Images/Logo';
|
||||||
links: {
|
|
||||||
label: string;
|
|
||||||
href: string;
|
|
||||||
}[]
|
|
||||||
}) => {
|
|
||||||
const [collapsed, setCollapsed] = useState(false);
|
|
||||||
|
|
||||||
|
const navigation = [
|
||||||
|
{ name: 'Home', href: '#', current: true },
|
||||||
|
{ name: 'About', href: '#', current: false },
|
||||||
|
{ name: 'Projects', href: '#', current: false },
|
||||||
|
{ name: 'Graphics', href: '#', current: false },
|
||||||
|
{ name: 'Contact', href: '#', current: false },
|
||||||
|
];
|
||||||
|
|
||||||
|
function classNames(...classes) {
|
||||||
|
return classes.filter(Boolean).join(' ')
|
||||||
|
}
|
||||||
|
|
||||||
|
const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => {
|
||||||
const [atTop, setAtTop] = useState<boolean>()
|
const [atTop, setAtTop] = useState<boolean>()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -23,47 +32,79 @@ const Navbar = ({ links }: {
|
||||||
} else {
|
} else {
|
||||||
setAtTop(false)
|
setAtTop(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const currentlyViewing = views.find((view) => view.viewing === true)
|
||||||
|
navigation.forEach((nav) => nav.current = false)
|
||||||
|
navigation.find((nav) => nav.name === currentlyViewing.view).current = true
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className={`fixed w-full flex flex-wrap items-center justify-between px-2 py-6 navbar-expand-lg z-30 bg-gray-800 ${atTop ? '' : 'shadow-md'}`}>
|
<Disclosure as="nav" className={`fixed w-full z-50 bg-gray-800 ${atTop ? '' : 'shadow-lg'}`}>
|
||||||
<div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
|
{({ open }) => (
|
||||||
<div className="w-full relative flex justify-between md:w-auto px-4 md:static md:block md:justify-start items-center">
|
<>
|
||||||
<div className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap text-white">
|
<p>{views}</p>
|
||||||
<Link href="/" aria-label="Stryx Logo">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<h1 className="text-white font-extrabold text-2xl">Jack Merrill</h1>
|
<div className="flex items-center justify-between h-16">
|
||||||
</Link>
|
<div className="flex items-center">
|
||||||
</div>
|
<div className="flex-shrink-0">
|
||||||
<button className="md:hidden text-gray-500 w-10 h-10 relative focus:outline-none" onClick={() => setCollapsed(!collapsed)}>
|
<Logo className="h-8 w-8" />
|
||||||
<span className="sr-only">Open menu</span>
|
|
||||||
<div className="block w-5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
|
||||||
<span aria-hidden="true" className={`block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out ${ !collapsed ? 'rotate-45' : '-translate-y-1.5' }`} />
|
|
||||||
<span aria-hidden="true" className={`block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out ${ !collapsed && 'opacity-0'}`} ></span>
|
|
||||||
<span aria-hidden="true" className={`block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out ${ !collapsed ? '-rotate-45' : 'translate-y-1.5' }`} ></span>
|
|
||||||
</div>
|
</div>
|
||||||
</button>
|
<div className="hidden md:block">
|
||||||
</div>
|
<div className="ml-10 flex items-baseline space-x-4">
|
||||||
<div className={`md:flex flex-grow items-center md:opacity-1 transition-fadeDown transform ease-in-out ${collapsed ? '-translate-y-1 h-0 opacity-0' : 'translate-y-1 opacity-1 h-10'}`} id="navbar">
|
{navigation.map((item) => (
|
||||||
<ul className="flex list-none ml-auto items-center">
|
<a
|
||||||
{links.map(({ label, href }) => (
|
key={item.name}
|
||||||
<li className="nav-item">
|
href={item.href}
|
||||||
<div className="px-3 py-2 flex items-center leading-snug text-white">
|
className={classNames(
|
||||||
<Link href={href} passHref>
|
item.current
|
||||||
<a
|
? 'bg-gray-900 text-white'
|
||||||
className="font-bold text-gray-200 hover:underline"
|
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
|
||||||
>
|
'px-3 py-2 rounded-md text-sm font-medium'
|
||||||
{label}
|
)}
|
||||||
</a>
|
aria-current={item.current ? 'page' : undefined}
|
||||||
</Link>
|
>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</ul>
|
<div className="-mr-2 flex md:hidden">
|
||||||
|
{/* Mobile menu button */}
|
||||||
|
<Disclosure.Button className="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||||
|
<span className="sr-only">Open main menu</span>
|
||||||
|
{open ? (
|
||||||
|
<XIcon className="block h-6 w-6" aria-hidden="true" />
|
||||||
|
) : (
|
||||||
|
<MenuIcon className="block h-6 w-6" aria-hidden="true" />
|
||||||
|
)}
|
||||||
|
</Disclosure.Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</nav>
|
<Disclosure.Panel className="md:hidden">
|
||||||
)
|
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||||
|
{navigation.map((item) => (
|
||||||
|
<a
|
||||||
|
key={item.name}
|
||||||
|
href={item.href}
|
||||||
|
className={classNames(
|
||||||
|
item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
|
||||||
|
'block px-3 py-2 rounded-md text-base font-medium'
|
||||||
|
)}
|
||||||
|
aria-current={item.current ? 'page' : undefined}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Disclosure.Panel>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Disclosure>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Navbar;
|
export default Navbar;
|
|
@ -8,6 +8,8 @@
|
||||||
"type-check": "tsc"
|
"type-check": "tsc"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@headlessui/react": "^1.4.1",
|
||||||
|
"@heroicons/react": "^1.0.4",
|
||||||
"framer-motion": "^4.1.2",
|
"framer-motion": "^4.1.2",
|
||||||
"next": "^10.1.3",
|
"next": "^10.1.3",
|
||||||
"next-page-transitions": "^1.0.0-beta.2",
|
"next-page-transitions": "^1.0.0-beta.2",
|
||||||
|
|
|
@ -4,7 +4,6 @@ import SEO from '../next-seo.config';
|
||||||
import { DefaultSeo } from 'next-seo';
|
import { DefaultSeo } from 'next-seo';
|
||||||
import 'tailwindcss/tailwind.css'
|
import 'tailwindcss/tailwind.css'
|
||||||
import { useRouter } from 'next/dist/client/router';
|
import { useRouter } from 'next/dist/client/router';
|
||||||
import Navbar from '../components/Navbar';
|
|
||||||
import Footer from '../components/Footer';
|
import Footer from '../components/Footer';
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps) {
|
function MyApp({ Component, pageProps }: AppProps) {
|
||||||
|
@ -29,11 +28,6 @@ function MyApp({ Component, pageProps }: AppProps) {
|
||||||
<div id='app'>
|
<div id='app'>
|
||||||
<main className="bg-gray-800 w-full h-full min-h-screen">
|
<main className="bg-gray-800 w-full h-full min-h-screen">
|
||||||
<div id='loader' className={`flex justify-center items-center align-middle fixed dark:bg-gray-800 ${loading ? 'h-screen w-screen z-50 opacity-100' : 'z-10 opacity-0'} transform transition-all duration-300`} />
|
<div id='loader' className={`flex justify-center items-center align-middle fixed dark:bg-gray-800 ${loading ? 'h-screen w-screen z-50 opacity-100' : 'z-10 opacity-0'} transform transition-all duration-300`} />
|
||||||
<Navbar links={[
|
|
||||||
{ label: 'Home', href: '/' },
|
|
||||||
{ label: 'My Work', href: '#projects' },
|
|
||||||
{ label: 'Designs', href: '#designs' },
|
|
||||||
]} />
|
|
||||||
<DefaultSeo {...SEO}/>
|
<DefaultSeo {...SEO}/>
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState, useRef } from 'react'
|
||||||
import CodeIcon from '../components/Images/CodeIcon'
|
import CodeIcon from '../components/Images/CodeIcon'
|
||||||
import DesignIcon from '../components/Images/DesignIcon'
|
import DesignIcon from '../components/Images/DesignIcon'
|
||||||
import GitHubIcon from '../components/Images/GitHubIcon';
|
import GitHubIcon from '../components/Images/GitHubIcon';
|
||||||
|
@ -8,11 +8,26 @@ import MailIcon from '../components/Images/MailIcon';
|
||||||
import TwitterIcon from '../components/Images/TwitterIcon';
|
import TwitterIcon from '../components/Images/TwitterIcon';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
|
|
||||||
|
import Navbar from '../components/Navbar';
|
||||||
|
import useOnScreen from '../util/hooks/useOnScreen';
|
||||||
|
|
||||||
const IndexPage = () => {
|
const IndexPage = () => {
|
||||||
const [timeString, setTimeString] = useState(
|
const [timeString, setTimeString] = useState(
|
||||||
(new Date().getHours() < 12 ? 'Morning' : (new Date().getHours() >= 12 && new Date().getHours() <= 17 ? 'Afternoon' : (new Date().getHours() >= 17 && new Date().getHours() <= 24 ? 'Evening' : 'Morning')))
|
(new Date().getHours() < 12 ? 'Morning' : (new Date().getHours() >= 12 && new Date().getHours() <= 17 ? 'Afternoon' : (new Date().getHours() >= 17 && new Date().getHours() <= 24 ? 'Evening' : 'Morning')))
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const homeRef = useRef(null);
|
||||||
|
const aboutRef = useRef(null);
|
||||||
|
const graphicsRef = useRef(null);
|
||||||
|
const projectsRef = useRef(null);
|
||||||
|
const contactRef = useRef(null);
|
||||||
|
|
||||||
|
const viewingHome = useOnScreen(homeRef)
|
||||||
|
const viewingAbout = useOnScreen(aboutRef)
|
||||||
|
const viewingGraphics = useOnScreen(graphicsRef)
|
||||||
|
const viewingProjects = useOnScreen(projectsRef)
|
||||||
|
const viewingContact = useOnScreen(contactRef)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const hours = new Date().getHours()
|
const hours = new Date().getHours()
|
||||||
|
|
||||||
|
@ -33,12 +48,21 @@ const IndexPage = () => {
|
||||||
return Math.abs(ageDate.getUTCFullYear() - 1970);
|
return Math.abs(ageDate.getUTCFullYear() - 1970);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<meta name='description' content='Graphic Designer and Fullstack Developer.' />
|
<meta name='description' content='Graphic Designer and Fullstack Developer.' />
|
||||||
</Head>
|
</Head>
|
||||||
<header className="flex flex-wrap flex-col overflow-hidden space-y-2 lg:px-36 items-center justify-center h-screen w-full">
|
<Navbar views={[
|
||||||
|
{ view: 'Home', viewing: viewingHome },
|
||||||
|
{ view: 'About', viewing: viewingAbout },
|
||||||
|
{ view: 'Projects', viewing: viewingProjects },
|
||||||
|
{ view: 'Graphics', viewing: viewingGraphics },
|
||||||
|
{ view: 'Contact', viewing: viewingContact },
|
||||||
|
]} />
|
||||||
|
<header className="flex flex-wrap flex-col overflow-hidden space-y-2 lg:px-36 items-center justify-center h-screen w-full" ref={homeRef}>
|
||||||
<div className="my-3 px-3 w-full text-center">
|
<div className="my-3 px-3 w-full text-center">
|
||||||
<h1 className="text-white font-extrabold md:text-6xl text-3xl">Good <span className="text-blue-500">{timeString}</span>! I'm <span className="text-purple-500">Jack Merrill</span>.</h1>
|
<h1 className="text-white font-extrabold md:text-6xl text-3xl">Good <span className="text-blue-500">{timeString}</span>! I'm <span className="text-purple-500">Jack Merrill</span>.</h1>
|
||||||
</div>
|
</div>
|
||||||
|
@ -59,7 +83,7 @@ const IndexPage = () => {
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div className='bg-gradient-to-b from-purple-600 to-purple-700 h-full lg:max-h-96'>
|
<div className='bg-gradient-to-b from-purple-600 to-purple-700 h-full lg:max-h-96' ref={aboutRef}>
|
||||||
<div className='flex flex-wrap py-16 px-4 p lg:p-16 space-y-6'>
|
<div className='flex flex-wrap py-16 px-4 p lg:p-16 space-y-6'>
|
||||||
<div className='w-full overflow-hidden'>
|
<div className='w-full overflow-hidden'>
|
||||||
<h1 className='text-white text-4xl font-bold text-center'>Nice to meet you!</h1>
|
<h1 className='text-white text-4xl font-bold text-center'>Nice to meet you!</h1>
|
||||||
|
@ -116,7 +140,7 @@ const IndexPage = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id='projects' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3'>
|
<div id='projects' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3' ref={projectsRef}>
|
||||||
<h1 className='w-full font-bold text-white text-center text-3xl'>My recent work</h1>
|
<h1 className='w-full font-bold text-white text-center text-3xl'>My recent work</h1>
|
||||||
<p className='w-full font-semibold text-white text-center text-xl'>Here are a few projects I've been working on!</p>
|
<p className='w-full font-semibold text-white text-center text-xl'>Here are a few projects I've been working on!</p>
|
||||||
<div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
|
<div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
|
||||||
|
@ -168,7 +192,7 @@ const IndexPage = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id='designs' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3'>
|
<div id='designs' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3' ref={graphicsRef}>
|
||||||
<h1 className='w-full font-bold text-white text-center text-3xl'>My Designs</h1>
|
<h1 className='w-full font-bold text-white text-center text-3xl'>My Designs</h1>
|
||||||
<p className='w-full font-semibold text-white text-center text-xl'>Here are a few designs I've made!</p>
|
<p className='w-full font-semibold text-white text-center text-xl'>Here are a few designs I've made!</p>
|
||||||
<div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
|
<div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
|
||||||
|
@ -212,7 +236,7 @@ const IndexPage = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id='contact' className='flex flex-wrap justify-center p-12 space-y-4'>
|
<div id='contact' className='flex flex-wrap justify-center p-12 space-y-4' ref={contactRef}>
|
||||||
<h1 className='text-white font-bold text-3xl'>Want to contact me?</h1>
|
<h1 className='text-white font-bold text-3xl'>Want to contact me?</h1>
|
||||||
<div className='flex align-middle justify-center w-full'>
|
<div className='flex align-middle justify-center w-full'>
|
||||||
<a
|
<a
|
||||||
|
|
20
util/hooks/useOnScreen.ts
Normal file
20
util/hooks/useOnScreen.ts
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
export default function useOnScreen(ref) {
|
||||||
|
|
||||||
|
let observer = null
|
||||||
|
|
||||||
|
const [isIntersecting, setIntersecting] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
observer = new IntersectionObserver(
|
||||||
|
([entry]) => setIntersecting(entry.isIntersecting)
|
||||||
|
)
|
||||||
|
|
||||||
|
observer.observe(ref.current)
|
||||||
|
// Remove the observer as soon as the component is unmounted
|
||||||
|
return () => { observer.disconnect() }
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return isIntersecting
|
||||||
|
}
|
10
yarn.lock
10
yarn.lock
|
@ -97,6 +97,16 @@
|
||||||
resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.1.tgz#9daf5745156fd84b8e9889a2dc721f0c58e894aa"
|
resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.1.tgz#9daf5745156fd84b8e9889a2dc721f0c58e894aa"
|
||||||
integrity sha512-CAEbWH7OIur6jEOzaai83jq3FmKmv4PmX1JYfs9IrYcGEVI/lyL1EXJGCj7eFVJ0bg5QR8LMxBlEtA+xKiLpFw==
|
integrity sha512-CAEbWH7OIur6jEOzaai83jq3FmKmv4PmX1JYfs9IrYcGEVI/lyL1EXJGCj7eFVJ0bg5QR8LMxBlEtA+xKiLpFw==
|
||||||
|
|
||||||
|
"@headlessui/react@^1.4.1":
|
||||||
|
version "1.4.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.1.tgz#0a8dbb20e1d63dcea55bfc3ab1b87637aaac7777"
|
||||||
|
integrity sha512-gL6Ns5xQM57cZBzX6IVv6L7nsam8rDEpRhs5fg28SN64ikfmuuMgunc+Rw5C1cMScnvFM+cz32ueVrlSFEVlSg==
|
||||||
|
|
||||||
|
"@heroicons/react@^1.0.4":
|
||||||
|
version "1.0.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.4.tgz#11847eb2ea5510419d7ada9ff150a33af0ad0863"
|
||||||
|
integrity sha512-3kOrTmo8+Z8o6AL0rzN82MOf8J5CuxhRLFhpI8mrn+3OqekA6d5eb1GYO3EYYo1Vn6mYQSMNTzCWbEwUInb0cQ==
|
||||||
|
|
||||||
"@next/env@10.1.3":
|
"@next/env@10.1.3":
|
||||||
version "10.1.3"
|
version "10.1.3"
|
||||||
resolved "https://registry.yarnpkg.com/@next/env/-/env-10.1.3.tgz#29e5d62919b4a7b1859f8d36169848dc3f5ddebe"
|
resolved "https://registry.yarnpkg.com/@next/env/-/env-10.1.3.tgz#29e5d62919b4a7b1859f8d36169848dc3f5ddebe"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user