[feat] about page layout finished
This commit is contained in:
Alvalen
parent
338129fcc6
commit
f4cda2fe5d
12 changed files with 521 additions and 87 deletions
19
app/(root)/layout.js
Normal file
19
app/(root)/layout.js
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import "../globals.css";
|
||||||
|
import Sidebar from "@/components/Sidebar";
|
||||||
|
import { config } from "@fortawesome/fontawesome-svg-core";
|
||||||
|
import "@fortawesome/fontawesome-svg-core/styles.css";
|
||||||
|
config.autoAddCss = false;
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: "Create Next App",
|
||||||
|
description: "Generated by create next app",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({ children }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Sidebar />
|
||||||
|
{children}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
7
app/(root)/loading.js
Normal file
7
app/(root)/loading.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
export default function Loading() {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-screen w-screen bg-gray-900">
|
||||||
|
<h1 className="text-4xl text-gray-100">Loading...</h1>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
"use client";
|
"use client";
|
||||||
import React from "react";
|
|
||||||
import ReactFullpage from "@fullpage/react-fullpage";
|
import ReactFullpage from "@fullpage/react-fullpage";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import "./globals.css";
|
import "../globals.css";
|
||||||
|
import {motion} from "framer-motion";
|
||||||
|
import Link from "next/link";
|
||||||
// components
|
// components
|
||||||
import Button from "@/components/Button";
|
import Button from "@/components/Button";
|
||||||
|
import Me from "../../public/img/me.jpg";
|
||||||
// icons
|
// icons
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faGithub } from "@fortawesome/free-brands-svg-icons";
|
import { faGithub } from "@fortawesome/free-brands-svg-icons";
|
||||||
|
|
@ -32,12 +34,12 @@ const MyPage = () => {
|
||||||
<div className="block md:hidden col-span-1 mx-auto my-10">
|
<div className="block md:hidden col-span-1 mx-auto my-10">
|
||||||
<div className="bg-slate-500 rounded-full h-60 w-60">
|
<div className="bg-slate-500 rounded-full h-60 w-60">
|
||||||
<Image
|
<Image
|
||||||
src="/img/me.jpg"
|
src={Me}
|
||||||
layout="intrinsic"
|
|
||||||
width={500}
|
width={500}
|
||||||
height={500}
|
height={500}
|
||||||
className="rounded-full w-full h-full object-cover "
|
className="rounded-full w-full h-full object-cover "
|
||||||
alt="Alvalens"
|
alt="Alvalens"
|
||||||
|
placeholder="blur"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -79,9 +81,13 @@ const MyPage = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="section">
|
<div className="section">
|
||||||
<div className="relative h-screen w-screen mx-auto container gap-4 p-10 flex justify-center items-center flex-col">
|
<div className="relative md:h-screen w-screen gap-4 flex justify-center items-center flex-col">
|
||||||
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
|
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
|
||||||
<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div>
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.5 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 1 }}
|
||||||
|
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
|
||||||
</div>
|
</div>
|
||||||
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
|
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
|
||||||
<h1 className="text-5xl md:text-8xl font-bold">
|
<h1 className="text-5xl md:text-8xl font-bold">
|
||||||
|
|
@ -95,14 +101,15 @@ const MyPage = () => {
|
||||||
A brief introduction about me and my
|
A brief introduction about me and my
|
||||||
interest.
|
interest.
|
||||||
</p>
|
</p>
|
||||||
|
<Link href="/about">
|
||||||
<Button variation="primary">
|
<Button variation="primary">
|
||||||
Learn More
|
Learn More
|
||||||
</Button>
|
</Button></Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="section">
|
<div className="section">
|
||||||
<div className="relative h-screen w-screen mx-auto container gap-4 p-10 flex justify-center items-center flex-col">
|
<div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col">
|
||||||
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
|
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
|
||||||
<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div>
|
<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -125,7 +132,7 @@ const MyPage = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="section">
|
<div className="section">
|
||||||
<div className="relative h-screen w-screen mx-auto container gap-4 p-10 flex justify-center items-center flex-col">
|
<div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col">
|
||||||
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
|
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
|
||||||
<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div>
|
<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -137,7 +144,7 @@ const MyPage = () => {
|
||||||
<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div>
|
<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div>
|
||||||
<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div>
|
<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div>
|
||||||
</div>
|
</div>
|
||||||
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5">
|
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] md:mb-5">
|
||||||
Feel free to contact me if you have any
|
Feel free to contact me if you have any
|
||||||
questions or just want to say hi.
|
questions or just want to say hi.
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -151,7 +158,7 @@ const MyPage = () => {
|
||||||
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
|
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={faEnvelope}
|
icon={faEnvelope}
|
||||||
className="text-4xl"
|
className="text-3xl"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
@ -160,7 +167,7 @@ const MyPage = () => {
|
||||||
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
|
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={faGithub}
|
icon={faGithub}
|
||||||
className="text-4xl"
|
className="text-3xl"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
|
|
@ -168,7 +175,7 @@ const MyPage = () => {
|
||||||
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
|
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={faInstagram}
|
icon={faInstagram}
|
||||||
className="text-4xl"
|
className="text-3xl"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
|
|
@ -176,7 +183,7 @@ const MyPage = () => {
|
||||||
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
|
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={faLinkedin}
|
icon={faLinkedin}
|
||||||
className="text-4xl"
|
className="text-3xl"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
|
|
@ -184,7 +191,7 @@ const MyPage = () => {
|
||||||
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
|
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300">
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={faDiscord}
|
icon={faDiscord}
|
||||||
className="text-4xl"
|
className="text-3xl"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,8 +1,252 @@
|
||||||
|
"use client";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import Button from "@/components/Button";
|
||||||
|
import Image from "next/image";
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return <>
|
// useEffect(() => {
|
||||||
<main>
|
// window.scrollTo(0, 0);
|
||||||
|
// }, []);
|
||||||
</main>
|
|
||||||
</>
|
return (
|
||||||
|
<>
|
||||||
|
<main className="overflow-hidden">
|
||||||
|
<div className="relative h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col mb-10">
|
||||||
|
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 1, scale: 1 }}
|
||||||
|
animate={{ opacity: 1, scale: 1.6 }}
|
||||||
|
transition={{ duration: 1 }}
|
||||||
|
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
|
||||||
|
</div>
|
||||||
|
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
|
||||||
|
<h1 className="text-5xl md:text-8xl font-bold">
|
||||||
|
About Me
|
||||||
|
</h1>
|
||||||
|
<div className="flex justify-center items-center flex-col my-5 ">
|
||||||
|
<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div>
|
||||||
|
<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div>
|
||||||
|
</div>
|
||||||
|
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5">
|
||||||
|
A brief introduction about me and my interest.
|
||||||
|
</p>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 100 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 1 }}
|
||||||
|
onClick={() => {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 1000,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
className="">
|
||||||
|
<Button variation="primary">Scroll Down</Button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-10 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
|
||||||
|
<div className="flex justify-center items-center flex-col my-5 self-start ">
|
||||||
|
<div className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"></div>
|
||||||
|
<div className="bg-gray-700 w-28 h-1 rounded-full translate-x-12"></div>
|
||||||
|
<h1 className="text-3xl font-bold mt-3">Who Am I?</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative w-screen mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10">
|
||||||
|
<div className="flex justify-center items-start flex-col mb-5 ">
|
||||||
|
<div className="images relative w-full aspect-square">
|
||||||
|
<div className="absolute top-28 left-10 w-[50%] aspect-square">
|
||||||
|
<motion.img
|
||||||
|
initial={{ opacity: 0, scale: 0.5 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 1 }}
|
||||||
|
className="w-full h-full object-cover object-center"
|
||||||
|
src="/images/me.jpg"
|
||||||
|
placeholder="blur"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="absolute top-16 right-28 w-[30%] aspect-square">
|
||||||
|
<motion.img
|
||||||
|
initial={{ opacity: 0, scale: 0.5 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 1 }}
|
||||||
|
className="w-full h-full object-cover object-center"
|
||||||
|
src="/images/me.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="absolute bottom-16 right-20 w-[40%] aspect-square">
|
||||||
|
<motion.img
|
||||||
|
initial={{ opacity: 0, scale: 0.5 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 1 }}
|
||||||
|
className="w-full h-full object-cover object-center"
|
||||||
|
src="/images/me.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-center items-start flex-col mb-5 md:px-10">
|
||||||
|
<h2 className="text-2xl font-bold tracking-wider mb-3">
|
||||||
|
Alvalen Shafelbilyunazra
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-600 text-justify">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing
|
||||||
|
elit. Laborum, laudantium ad vel suscipit optio
|
||||||
|
nesciunt accusantium nulla! Similique sapiente,
|
||||||
|
tempora id laudantium eveniet adipisci perferendis
|
||||||
|
ad numquam sit hic fugiat? Lorem ipsum dolor sit
|
||||||
|
amet consectetur adipisicing elit. Iste assumenda
|
||||||
|
provident deserunt quos id, minus tempora atque eos
|
||||||
|
tenetur ut accusantium officiis itaque qui eum quas
|
||||||
|
harum? Nemo, ducimus quisquam.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* <div className="mt-16 flex flex-col justify-start items-center w-full pl-12 md:pl-32">
|
||||||
|
<div className="flex justify-center items-center flex-col my-5 self-start ">
|
||||||
|
<div className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"></div>
|
||||||
|
<div className="bg-gray-700 w-28 h-1 rounded-full translate-x-12"></div>
|
||||||
|
<h1 className="text-3xl font-bold mt-3">Tech Stack</h1>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
<div className=" w-screen mx-auto container gap-4 p-10 grid grid-cols-1 md:grid-cols-2 mt-10 mb-24">
|
||||||
|
<div className="flex justify-center items-center flex-col mb-5 ">
|
||||||
|
<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.5rem] uppercase ">
|
||||||
|
Language & Framework
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-500 text-center tracking-widest md:px-5">
|
||||||
|
<span className="text-black font-bold">HTML</span> |{" "}
|
||||||
|
<span className="text-black font-bold">CSS</span> |{" "}
|
||||||
|
<span className="text-black font-bold">
|
||||||
|
Javascript
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-medium">
|
||||||
|
Typescript
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-bold">React</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-medium">
|
||||||
|
NextJS
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-bold">
|
||||||
|
TailwindCSS
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-bold">
|
||||||
|
Bootstrap
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-medium">
|
||||||
|
NodeJS
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-medium">
|
||||||
|
ExpressJS
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-medium">
|
||||||
|
MongoDB
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-bold">MySQL</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-medium">
|
||||||
|
Firebase
|
||||||
|
</span>{" "}
|
||||||
|
|<span className="text-black font-medium">PHP</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-bold">
|
||||||
|
Laravel
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-medium">
|
||||||
|
Python
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-start items-center flex-col mb-5 ">
|
||||||
|
<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.5rem] uppercase">
|
||||||
|
Tools
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-500 text-center tracking-wider md:px-">
|
||||||
|
<span className="text-black font-bold">
|
||||||
|
Visual Studio Code
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-medium">
|
||||||
|
Jet Brains
|
||||||
|
</span>{" "}
|
||||||
|
| <span className="text-black font-bold">Git</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-bold">Github</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-medium">
|
||||||
|
Figma
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-medium">
|
||||||
|
Adobe Photoshop
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-medium">
|
||||||
|
Adobe Premiere Pro
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
<span className="text-black font-medium">
|
||||||
|
Adobe After Effect
|
||||||
|
</span>{" "}
|
||||||
|
|{" "}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
|
||||||
|
<div className="flex justify-center items-center flex-col my-5 self-start ">
|
||||||
|
<div className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"></div>
|
||||||
|
<div className="bg-gray-700 w-28 h-1 rounded-full -translate-x-12"></div>
|
||||||
|
<h1 className="text-3xl font-bold mt-3">
|
||||||
|
Education & Experience
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-screen mx-auto container gap-4 p-10 grid grid-cols-1 md:grid-cols-2 my-10">
|
||||||
|
<div className="flex justify-center items-start flex-col mb-5 ">
|
||||||
|
<h2 className="text-2xl font-bold mb-3">
|
||||||
|
Education | Universitas Negeri Malang
|
||||||
|
</h2>
|
||||||
|
<h3 className="text-md font-medium mb-3 text-gray-500">
|
||||||
|
Teknik Informatika | 2022 - Now
|
||||||
|
</h3>
|
||||||
|
<p className="pl-3 text-gray-500 text-start relative">
|
||||||
|
<span className="before:border-s-2 before:absolute before:left-0 before:top-0 before:h-full before:border-gray-400 before:block before:w-2 before:content-'' text-justify"></span>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing
|
||||||
|
elit. Vero voluptatibus tenetur dolor laudantium et
|
||||||
|
ipsum temporibus atque illo suscipit, quam iusto
|
||||||
|
reiciendis corrupti quibusdam architecto, labore
|
||||||
|
cupiditate non autem aliquid?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-center items-start flex-col mb-5 ">
|
||||||
|
<h2 className="text-2xl font-bold mb-3">
|
||||||
|
Experience | Freelance Web Developer
|
||||||
|
</h2>
|
||||||
|
<h3 className="text-md font-medium mb-3 text-gray-500">
|
||||||
|
Fullstack Web Developer | 2023 - Now
|
||||||
|
</h3>
|
||||||
|
<p className="pl-3 text-gray-500 text-start relative">
|
||||||
|
<span className="before:border-s-2 before:absolute before:left-0 before:top-0 before:h-full before:border-gray-400 before:block before:w-2 before:content-'' text-justify"></span>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing
|
||||||
|
elit. Vero voluptatibus tenetur dolor laudantium et
|
||||||
|
ipsum temporibus atque illo suscipit, quam iusto
|
||||||
|
reiciendis corrupti quibusdam architecto, labore
|
||||||
|
cupiditate non autem aliquid?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,4 +47,13 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
|
|
||||||
.fp-watermark {
|
.fp-watermark {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h2, h3, h4, h5, h6 {
|
||||||
|
@apply text-gray-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-family: "Jost", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
@ -16,7 +16,6 @@ export default function RootLayout({ children }) {
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body>
|
<body>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<Sidebar />
|
|
||||||
{children}
|
{children}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,156 @@
|
||||||
"use client";
|
"use client";
|
||||||
import { useRef, useState } from "react";
|
import { useRef, useState, useEffect } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
const NavItems = ({ isNavOpen }) => {
|
||||||
|
const [isMobile, setIsMobile] = useState(false);
|
||||||
|
const navVariant = {
|
||||||
|
open: (height = 1000) => ({
|
||||||
|
clipPath: `circle(${height * 2 + 200}px at calc(100% - 40px) 40px)`,
|
||||||
|
transition: {
|
||||||
|
type: "spring",
|
||||||
|
stiffness: 20,
|
||||||
|
restDelta: 2,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
closed: {
|
||||||
|
clipPath: "circle(0px at calc(100% - 120px) 35px)",
|
||||||
|
transition: {
|
||||||
|
delay: 0.5,
|
||||||
|
type: "spring",
|
||||||
|
stiffness: 400,
|
||||||
|
damping: 40,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
const updateScreenWidth = () => {
|
||||||
|
setIsMobile(window.innerWidth <= 768);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initial check and event listener
|
||||||
|
updateScreenWidth();
|
||||||
|
window.addEventListener("resize", updateScreenWidth);
|
||||||
|
|
||||||
|
// Clean up the event listener on unmount
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("resize", updateScreenWidth);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Check screen width and adjust clipPath for smaller screens
|
||||||
|
if (isMobile) {
|
||||||
|
navVariant.closed = {
|
||||||
|
clipPath: "circle(0px at calc(100% - 35px) 35px)", // Adjusted value for mobile screens
|
||||||
|
transition: {
|
||||||
|
delay: 0.5,
|
||||||
|
type: "spring",
|
||||||
|
stiffness: 400,
|
||||||
|
damping: 40,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
navVariant.closed = {
|
||||||
|
clipPath: "circle(0px at calc(100% - 120px) 35px)",
|
||||||
|
transition: {
|
||||||
|
delay: 0.5,
|
||||||
|
type: "spring",
|
||||||
|
stiffness: 400,
|
||||||
|
damping: 40,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const itemVariants = {
|
||||||
|
open: {
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
rotate: 0,
|
||||||
|
},
|
||||||
|
closed: {
|
||||||
|
opacity: 0,
|
||||||
|
y: -40,
|
||||||
|
rotate: 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<motion.div
|
||||||
|
className={`fixed z-[45] w-full h-screen flex items-center justify-center backdrop-blur-sm transition-all ease duration-700`}
|
||||||
|
variants={navVariant}
|
||||||
|
animate={isNavOpen ? "open" : "closed"}
|
||||||
|
initial={false}>
|
||||||
|
<div className="relative backdrop-blur-sm opacity-95 flex flex-col items-center space-x-8 min-h-[100vh] bg-gray-700 min-w-[100vw] ">
|
||||||
|
<div className="flex flex-col items-center space-y-8 my-auto mx-0">
|
||||||
|
{/* title */}
|
||||||
|
<motion.h1
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
transition={{ delay: 0.5, duration: 1 }}
|
||||||
|
className="text-6xl font-bold text-white">
|
||||||
|
Menu
|
||||||
|
</motion.h1>
|
||||||
|
<motion.a
|
||||||
|
href="#home"
|
||||||
|
className="text-2xl font-bold text-white"
|
||||||
|
variants={itemVariants}
|
||||||
|
animate={isNavOpen ? "open" : "closed"}
|
||||||
|
delay={1}>
|
||||||
|
<motion.h2
|
||||||
|
className="text-white"
|
||||||
|
variants={itemVariants}
|
||||||
|
animate={isNavOpen ? "open" : "closed"}>
|
||||||
|
Home
|
||||||
|
</motion.h2>
|
||||||
|
</motion.a>
|
||||||
|
<motion.a
|
||||||
|
href="#about"
|
||||||
|
className="text-2xl font-bold text-white"
|
||||||
|
variants={itemVariants}
|
||||||
|
animate={isNavOpen ? "open" : "closed"}
|
||||||
|
delay={1.2}>
|
||||||
|
<motion.h2
|
||||||
|
className="text-white"
|
||||||
|
variants={itemVariants}
|
||||||
|
animate={isNavOpen ? "open" : "closed"}>
|
||||||
|
About
|
||||||
|
</motion.h2>
|
||||||
|
</motion.a>
|
||||||
|
<motion.a
|
||||||
|
href="#project"
|
||||||
|
className="text-2xl font-bold text-white"
|
||||||
|
variants={itemVariants}
|
||||||
|
animate={isNavOpen ? "open" : "closed"}
|
||||||
|
delay={1.3}>
|
||||||
|
<motion.h2
|
||||||
|
className="text-white"
|
||||||
|
variants={itemVariants}
|
||||||
|
animate={isNavOpen ? "open" : "closed"}>
|
||||||
|
Projects
|
||||||
|
</motion.h2>
|
||||||
|
</motion.a>
|
||||||
|
<motion.a
|
||||||
|
href="#contact"
|
||||||
|
className="text-2xl font-bold text-white"
|
||||||
|
variants={itemVariants}
|
||||||
|
animate={isNavOpen ? "open" : "closed"}
|
||||||
|
delay={1.4}>
|
||||||
|
<motion.h2
|
||||||
|
className="text-white"
|
||||||
|
variants={itemVariants}
|
||||||
|
animate={isNavOpen ? "open" : "closed"}>
|
||||||
|
Contact
|
||||||
|
</motion.h2>
|
||||||
|
</motion.a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const Navbar = () => {
|
const Navbar = () => {
|
||||||
const navRef = useRef(null);
|
const navRef = useRef(null);
|
||||||
|
|
@ -20,67 +171,30 @@ const Navbar = () => {
|
||||||
{/* toggler */}
|
{/* toggler */}
|
||||||
<div className="flex flex-row items-center">
|
<div className="flex flex-row items-center">
|
||||||
<button
|
<button
|
||||||
className="burger button flex flex-col justify-center items-center space-y-1.5"
|
className="burger button flex flex-col justify-center items-center space-y-1.5 z-50"
|
||||||
onClick={toggleNav}>
|
onClick={toggleNav}>
|
||||||
<div
|
<div
|
||||||
className={`w-8 h-1 bg-black rounded-full`}></div>
|
className={`w-8 h-1 bg-black rounded-full transition-all ease-in duration-300 ${
|
||||||
|
isNavOpen
|
||||||
|
? "rotate-45 translate-y-2 bg-white"
|
||||||
|
: ""
|
||||||
|
}`}></div>
|
||||||
<div
|
<div
|
||||||
className={`w-8 h-1 bg-black rounded-full`}></div>
|
className={`w-8 h-1 bg-black rounded-full transition-all ease-in duration-300 ${
|
||||||
|
isNavOpen ? "opacity-0" : ""
|
||||||
|
}`}></div>
|
||||||
<div
|
<div
|
||||||
className={`w-8 h-1 bg-black rounded-full`}></div>
|
className={`w-8 h-1 bg-black rounded-full transition-all ease-in duration-300 ${
|
||||||
|
isNavOpen
|
||||||
|
? "-rotate-45 -translate-y-3 bg-white"
|
||||||
|
: ""
|
||||||
|
}`}></div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{/* items */}
|
{/* items */}
|
||||||
<NavItems
|
<NavItems isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen} />
|
||||||
isNavOpen={isNavOpen}
|
|
||||||
navRef={navRef}
|
|
||||||
setIsNavOpen={setIsNavOpen}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default Navbar;
|
export default Navbar;
|
||||||
|
|
||||||
const NavItems = ({ isNavOpen, setIsNavOpen }) => {
|
|
||||||
const closeNav = () => {
|
|
||||||
setIsNavOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`fixed z-50 w-full h-screen flex items-center justify-center backdrop-blur-sm transition-all ease-out duration-300 ${
|
|
||||||
isNavOpen ? "" : "opacity-0 pointer-events-none"
|
|
||||||
}`}>
|
|
||||||
<div className="relative backdrop-blur-sm opacity-95 flex flex-col items-center space-x-8 min-h-[80vh] bg-gray-700 min-w-[90vw] rounded-3xl">
|
|
||||||
{/* close buton */}
|
|
||||||
<div className="absolute top-0 right-0 m-4">
|
|
||||||
<button className=" button" onClick={closeNav}>
|
|
||||||
<div className="w-8 h-1 bg-white rounded-full rotate-45 transform translate-x-[2px] translate-y-1 "></div>
|
|
||||||
<div className="w-8 h-1 bg-white rounded-full -rotate-45 transform translate-x-[2px]"></div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-center space-y-8 my-auto mx-0">
|
|
||||||
{/* title */}
|
|
||||||
<h1 className="text-6xl font-bold text-white">Menu</h1>
|
|
||||||
<a href="#home" className="text-2xl font-bold text-white">
|
|
||||||
<h2>Home</h2>
|
|
||||||
</a>
|
|
||||||
<a href="#about" className="text-2xl font-bold text-white">
|
|
||||||
<h2>About</h2>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#project"
|
|
||||||
className="text-2xl font-bold text-white">
|
|
||||||
<h2>Projects</h2>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#contact"
|
|
||||||
className="text-2xl font-bold text-white">
|
|
||||||
<h2>Contact</h2>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -6,21 +6,22 @@ import {
|
||||||
faFolderOpen,
|
faFolderOpen,
|
||||||
faEnvelope,
|
faEnvelope,
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
const Sidebar = () => {
|
|
||||||
|
|
||||||
|
|
||||||
|
const Sidebar = () => {
|
||||||
const handleMoveToSection = (index) => {
|
const handleMoveToSection = (index) => {
|
||||||
fullpage_api.moveTo(index);
|
fullpage_api.moveTo(index);
|
||||||
fullpage_api.getActiveSection();
|
fullpage_api.getActiveSection();
|
||||||
};
|
};
|
||||||
|
|
||||||
const containIsActive = (index) => {
|
const containIsActive = (index) => {
|
||||||
if (fullpage_api.getActiveSection().index === index) {
|
if (fullpage_api.getActiveSection().index === index) {
|
||||||
return "bg-gray-500";
|
return "bg-gray-500";
|
||||||
}
|
}
|
||||||
return "";
|
return "";
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<div className="hidden md:flex fixed z-50 bg-gray-600 h-[50vh] w-14 flex-col justify-between items-center p-4 left-0 top-1/4 rounded-e-3xl">
|
<div className="hidden md:flex fixed z-40 bg-gray-600 h-[50vh] w-14 flex-col justify-between items-center p-4 left-0 top-1/4 rounded-e-3xl">
|
||||||
<ul className="flex flex-col justify-center items-center h-full space-y-16 text-gray-200">
|
<ul className="flex flex-col justify-center items-center h-full space-y-16 text-gray-200">
|
||||||
<li>
|
<li>
|
||||||
<button onClick={() => handleMoveToSection(1)}>
|
<button onClick={() => handleMoveToSection(1)}>
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@
|
||||||
"autoprefixer": "10.4.15",
|
"autoprefixer": "10.4.15",
|
||||||
"eslint": "8.48.0",
|
"eslint": "8.48.0",
|
||||||
"eslint-config-next": "13.4.19",
|
"eslint-config-next": "13.4.19",
|
||||||
|
"framer-motion": "^10.16.2",
|
||||||
"next": "13.4.19",
|
"next": "13.4.19",
|
||||||
"postcss": "8.4.28",
|
"postcss": "8.4.28",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
|
|
|
||||||
35
pnpm-lock.yaml
generated
35
pnpm-lock.yaml
generated
|
|
@ -32,6 +32,9 @@ dependencies:
|
||||||
eslint-config-next:
|
eslint-config-next:
|
||||||
specifier: 13.4.19
|
specifier: 13.4.19
|
||||||
version: 13.4.19(eslint@8.48.0)(typescript@5.2.2)
|
version: 13.4.19(eslint@8.48.0)(typescript@5.2.2)
|
||||||
|
framer-motion:
|
||||||
|
specifier: ^10.16.2
|
||||||
|
version: 10.16.2(react-dom@18.2.0)(react@18.2.0)
|
||||||
next:
|
next:
|
||||||
specifier: 13.4.19
|
specifier: 13.4.19
|
||||||
version: 13.4.19(react-dom@18.2.0)(react@18.2.0)
|
version: 13.4.19(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
|
@ -75,6 +78,20 @@ packages:
|
||||||
regenerator-runtime: 0.14.0
|
regenerator-runtime: 0.14.0
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/@emotion/is-prop-valid@0.8.8:
|
||||||
|
resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
|
||||||
|
requiresBuild: true
|
||||||
|
dependencies:
|
||||||
|
'@emotion/memoize': 0.7.4
|
||||||
|
dev: false
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/@emotion/memoize@0.7.4:
|
||||||
|
resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
|
||||||
|
requiresBuild: true
|
||||||
|
dev: false
|
||||||
|
optional: true
|
||||||
|
|
||||||
/@eslint-community/eslint-utils@4.4.0(eslint@8.48.0):
|
/@eslint-community/eslint-utils@4.4.0(eslint@8.48.0):
|
||||||
resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
|
resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
|
|
@ -1251,6 +1268,24 @@ packages:
|
||||||
resolution: {integrity: sha512-/KxoyCnPM0GwYI4NN0Iag38Tqt+od3/mLuguepLgCAKPn0ZhC544nssAW0tG2/00zXEYl9W+7hwAIpLHo6Oc7Q==}
|
resolution: {integrity: sha512-/KxoyCnPM0GwYI4NN0Iag38Tqt+od3/mLuguepLgCAKPn0ZhC544nssAW0tG2/00zXEYl9W+7hwAIpLHo6Oc7Q==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/framer-motion@10.16.2(react-dom@18.2.0)(react@18.2.0):
|
||||||
|
resolution: {integrity: sha512-aY6L9YMvqMWtfOQptaUvvr8dp97jskXY5UYLQM0vOPxKeERrG/Z034EIQZ/52u7MeCT0HlCQy3/l0HdUZCB9Tw==}
|
||||||
|
peerDependencies:
|
||||||
|
react: ^18.0.0
|
||||||
|
react-dom: ^18.0.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
react:
|
||||||
|
optional: true
|
||||||
|
react-dom:
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
react: 18.2.0
|
||||||
|
react-dom: 18.2.0(react@18.2.0)
|
||||||
|
tslib: 2.6.2
|
||||||
|
optionalDependencies:
|
||||||
|
'@emotion/is-prop-valid': 0.8.8
|
||||||
|
dev: false
|
||||||
|
|
||||||
/fs.realpath@1.0.0:
|
/fs.realpath@1.0.0:
|
||||||
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
|
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 629 B |
Loading…
Add table
Add a link
Reference in a new issue