-
-
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 #228 from nyomansunima/link-in-bio
Link in bio
- Loading branch information
Showing
21 changed files
with
593 additions
and
45 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
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 @@ | ||
| import Image from 'next/image' | ||
|
|
||
| export default function BioIntroSection() { | ||
| return ( | ||
| <section className="flex flex-col items-center"> | ||
| <picture> | ||
| <Image | ||
| src={'/images/profile.png'} | ||
| height={120} | ||
| width={120} | ||
| quality={100} | ||
| alt="Nyoman Sunima Photo" | ||
| className="rounded-full overflow-hidden" | ||
| /> | ||
| </picture> | ||
|
|
||
| <h3 className="text-center mt-10 text-2xl">Nyoman Sunima</h3> | ||
| <p className="text-center mt-3 text-lg"> | ||
| 5+ years as a product designer and full stack developer. Been focusing | ||
| on crafting apps through research, design, and development. My day to | ||
| day revolves around designing and developing digital products. | ||
| </p> | ||
| </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,27 @@ | ||
| import { Button } from '@components/ui/button' | ||
| import Link from 'next/link' | ||
| import { commonService } from '~/services/common-service' | ||
|
|
||
| export default async function BioLinkSection() { | ||
| const links = await commonService.getAllLinks() | ||
|
|
||
| return ( | ||
| <section className="flex flex-col mt-10"> | ||
| <div className="flex flex-wrap gap-4 justify-center"> | ||
| {links.map((link, i) => ( | ||
| <Button | ||
| key={i} | ||
| size={'base'} | ||
| variant={'outline'} | ||
| asChild | ||
| className="transition-all duration-700 hover:-translate-y-1" | ||
| > | ||
| <Link href={link.url} target="_blank"> | ||
| {link.title} | ||
| </Link> | ||
| </Button> | ||
| ))} | ||
| </div> | ||
| </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,95 @@ | ||
| 'use client' | ||
|
|
||
| import { | ||
| Form, | ||
| FormControl, | ||
| FormField, | ||
| FormItem, | ||
| FormMessage, | ||
| } from '@components/ui/form' | ||
| import { useForm } from 'react-hook-form' | ||
| import { z } from 'zod' | ||
| import { zodResolver } from '@hookform/resolvers/zod' | ||
| import { useMutation } from '@tanstack/react-query' | ||
| import { Input } from '@components/ui/input' | ||
| import { Button } from '@components/ui/button' | ||
| import { newsletterService } from '~/services/newsletter-service' | ||
|
|
||
| const formSchema = z.object({ | ||
| email: z | ||
| .string() | ||
| .min(1, 'Please add your email address') | ||
| .email('Opps your email looks weird.'), | ||
| }) | ||
|
|
||
| function NewsletterForm() { | ||
| const form = useForm<z.infer<typeof formSchema>>({ | ||
| resolver: zodResolver(formSchema), | ||
| defaultValues: { | ||
| email: '', | ||
| }, | ||
| }) | ||
|
|
||
| const subscribeToNewsletter = useMutation({ | ||
| mutationFn: newsletterService.subsribeToDailyUpdate, | ||
| onSuccess: () => { | ||
| form.reset() | ||
| }, | ||
| onError: () => { | ||
| form.reset() | ||
| }, | ||
| }) | ||
|
|
||
| return ( | ||
| <Form {...form}> | ||
| <form | ||
| onSubmit={form.handleSubmit((formData) => | ||
| subscribeToNewsletter.mutate(formData), | ||
| )} | ||
| className="flex flex-col gap-3 mt-6" | ||
| > | ||
| <FormField | ||
| control={form.control} | ||
| name="email" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <FormControl> | ||
| <Input placeholder="Your email address" {...field} /> | ||
| </FormControl> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
|
|
||
| <div className="flex justify-end"> | ||
| <Button disabled={subscribeToNewsletter.isPending} size={'base'}> | ||
| {!subscribeToNewsletter.isPending ? ( | ||
| <> | ||
| <i className="fi fi-rr-paper-plane" /> | ||
| Subscribe now | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <i className="fi fi-rr-paper-plane" /> | ||
| Subscribing ... | ||
| </> | ||
| )} | ||
| </Button> | ||
| </div> | ||
| </form> | ||
| </Form> | ||
| ) | ||
| } | ||
|
|
||
| export default function BioNewsletterSection() { | ||
| return ( | ||
| <section className="flex flex-col col-span-full border border-border rounded-xl p-4"> | ||
| <h3 className="text-xl">Join Newsletter</h3> | ||
| <span className="opacity-75 mt-1"> | ||
| Join the amazing design, development, indie hacker tips every weeek. | ||
| </span> | ||
|
|
||
| <NewsletterForm /> | ||
| </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,23 @@ | ||
| import { Button } from '@components/ui/button' | ||
| import Link from 'next/link' | ||
| import { socials } from '~/constants/social' | ||
|
|
||
| export default async function BioSocialSection() { | ||
| return ( | ||
| <section className="flex flex-wrap items-center mt-16 gap-3 justify-center"> | ||
| {socials.map((social, i) => ( | ||
| <Button | ||
| asChild | ||
| key={i} | ||
| size={'icon'} | ||
| variant={'outline'} | ||
| className="h-14 w-14 text-lg transition-all duration-700 hover:scale-95" | ||
| > | ||
| <Link href={social.url} target="_blank"> | ||
| <i className={`${social.icon}`} /> | ||
| </Link> | ||
| </Button> | ||
| ))} | ||
| </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,46 @@ | ||
| import { Metadata } from 'next' | ||
| import { | ||
| defaultOpenGraphMetadata, | ||
| defaultTwitterMetadata, | ||
| } from '~/lib/shared-metadata' | ||
| import BioIntroSection from './components/bio-intro-section' | ||
| import BioSocialSection from './components/bio-social-section' | ||
| import BioLinkSection from './components/bio-link-section' | ||
| import BioNewsletterSection from './components/bio-newsletter-section' | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: | ||
| 'Product Designer & Fullstack Developer specialized in crafting apps | Nyoman Sunima', | ||
| description: | ||
| 'Product Designer & Fullstack Developer specialized in crafting apps', | ||
| openGraph: { | ||
| ...defaultOpenGraphMetadata, | ||
| title: | ||
| 'Product Designer & Fullstack Developer specialized in crafting apps | Nyoman Sunima', | ||
| description: | ||
| 'Product Designer & Fullstack Developer specialized in crafting apps', | ||
| }, | ||
| twitter: { | ||
| ...defaultTwitterMetadata, | ||
| title: | ||
| 'Product Designer & Fullstack Developer specialized in crafting apps | Nyoman Sunima', | ||
| description: | ||
| 'Product Designer & Fullstack Developer specialized in crafting apps', | ||
| }, | ||
| } | ||
|
|
||
| export default function BioPage() { | ||
| return ( | ||
| <main className="flex flex-col laptop:py-28 py-20"> | ||
| <div className="container mx-auto laptop:w-1/2 px-5"> | ||
| <BioIntroSection /> | ||
| <BioSocialSection /> | ||
| <BioLinkSection /> | ||
|
|
||
| <div className="grid laptop:grid-cols-9 grid-cols-1 mt-20"> | ||
| <BioNewsletterSection /> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| ) | ||
| } |
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
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
Oops, something went wrong.