Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🔀　Feature/animation #4

Merged
merged 22 commits into from
Aug 6, 2023
Merged

🔀　Feature/animation #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
12119cb
:heavy_plus_sign: Add framer-motion
haseakito Aug 4, 2023
ffd40a4
:wrench: Add animation
haseakito Aug 4, 2023
f620044
:sparkles: Add Navigation
haseakito Aug 4, 2023
c4a773d
:sparkles: Add products page
haseakito Aug 4, 2023
305bd05
:sparkles: Add framer motion animation
haseakito Aug 4, 2023
c66b8f0
:art: Add Header
haseakito Aug 4, 2023
5a26449
:art: Add TagButon
haseakito Aug 4, 2023
e1c363c
:lipstick: Add styles and animations
haseakito Aug 4, 2023
8077a5f
Add svg assets
haseakito Aug 5, 2023
8916372
:sparkles: Add scroll animation
haseakito Aug 5, 2023
3757594
:wrench: Add animation
haseakito Aug 5, 2023
cf924d8
:truck: Renamed from ProfileCard
haseakito Aug 5, 2023
cdd3cef
:sparkles: Add Profile Card for about page
haseakito Aug 5, 2023
0123577
:zap: Add animation
haseakito Aug 5, 2023
455130a
:heavy_plus_sign: Add scss
haseakito Aug 6, 2023
51b2180
:heavy_plus_sign: Add react-tweet
haseakito Aug 6, 2023
3f3c106
:sparkles: Add scss for Blog post
haseakito Aug 6, 2023
ac173d1
:zap: Modified blog
haseakito Aug 6, 2023
93456fc
:art: Modified BlogCard
haseakito Aug 6, 2023
97c12d8
:bento: Add resource
haseakito Aug 6, 2023
d1269f9
:lipstick: Update Ul for blog page
haseakito Aug 6, 2023
be8bf53
:fire: Remove next/image
haseakito Aug 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
252 changes: 165 additions & 87 deletions app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,103 +1,181 @@
import React from 'react'
import { PageTransitionAnimation } from '@/utils/PageTransitionAnimation'
import Image from 'next/image'
import Icon from '@/public/Icon.jpg'
import Education from '@/public/Education.svg'
import Work from '@/public/Work.svg'
import Application from '@/public/Application.svg'
import Coffee from '@/public/Coffee.svg'
import { Navigation } from '@/components/Navigation'
import { MdCalendarMonth, MdCall, MdEmail, MdHome } from 'react-icons/md'
import { ProfileCard } from '@/components/ProfileCard'
import Juice from '@/public/Juice.svg'
import Cocktail from '@/public/Cocktail.svg'
import Donut from '@/public/Donut.svg'
import Palmtree from '@/public/Palmtree.svg'
import { ScrollReveal } from '@/utils/ScrollReveal'

export default function page() {


const AccountData = [
{
icon: <MdCalendarMonth />,
title: '15th May, 2001'
},
{
icon: <MdCall />,
title: '+81 (080) 4121 8123'
},
{
icon: <MdEmail />,
title: 'akiakifuture@gmail.com'
},
{
icon: <MdHome />,
title: 'Tokyo, Japan'
}
]

const ProfileData = [
{
src: Education,
title: 'Education',
color: 'bg-yellow-300',
content: {
title: 'Monash University',
period: '2021 - 2024',
body: 'Bachelor of Computer Science'
}
},
{
src: Work,
title: 'Career',
color: 'bg-blue-500',
content: {
title: 'Naxa, Inc',
period: '2023 / 6 months',
body: 'Intern Frontend Developer'
}
},
{
src: Application,
title: 'Software',
color: 'bg-green-400',
content: {
title: 'Typescript',
period: '2022 - ',
body: 'Both Frontend and Backend'
}
},
{
src: Cocktail,
title: 'Hobby',
color: 'bg-pink-500',
content: {
title: 'Coffee',
period: 'lifetime',
body: 'Chilling with a cup of Coffee'
}
}
]

return (
<div className='h-full'>
<h1 className='text-center text-6xl font-extrabold opacity-95 hover:opacity-100 py-10'>
🚀About
</h1>
<div className='text-center font-mono font-bold'>
<p>The super awesome history of my career! ...Perhaps?</p>
</div>
<div className='lg:grid lg:grid-cols-5 mx-3 py-10'>
<div className='flex col-span-2 justify-center mb-5'>
<Image
src={ Icon }
alt=''
className='w-1/2 lg:w-full mx-5 rounded hover:rounded-none duration-300 hover:shadow-md opacity-90 hover:opacity-100'
/>
</div>
<div className='col-span-3 mx-10'>
<div
className='p-6 rounded hover:shadow-md duration-300'
>
<h3 className='text-center text-3xl font-bold font-mono mb-4'>
💜Profile
</h3>
<div className='grid gap-5'>
<div
className='grid grid-cols-2 items-center rounded gap-4 p-2 mx-5 hover:bg-gray-100 hover:scale-105 duration-300'
>
<h5 className='font-semibold'>Name</h5>
<p className='font-semibold'>AKITO HASEGAWA</p>
</div>
<div
className='grid grid-cols-2 items-center rounded gap-4 p-2 mx-5 hover:bg-gray-100 hover:scale-105 duration-300'
>
<h5 className='font-semibold'>Education</h5>
<ul>
<li className='font-semibold'>
Monash University
</li>
<li className='font-medium pl-2'>
Bachelor of Computer Science
</li>
<li className='pl-2'>
GPA: 3.0
</li>
</ul>
</div>
<div
className='grid grid-cols-2 items-center rounded gap-4 p-2 mx-5 hover:bg-gray-100 hover:scale-105 duration-300'
>
<h5 className='font-semibold'>Experiences</h5>
<ul className='grid space-y-2 p-2'>
<li
className='text-center rounded-lg bg-gray-200 hover:bg-gray-300 p-2 hover:scale-105 duration-500'
>
Frontend Development
</li>
<li
className='text-center rounded-lg bg-gray-200 p-2 hover:bg-gray-300 hover:scale-105 duration-500'
>
Backend Development
</li>
<li
className='text-center rounded-lg bg-gray-200 p-2 hover:bg-gray-300 hover:scale-105 duration-500'
>
Data Analytics
</li>
<li
className='text-center rounded-lg bg-gray-200 p-2 hover:bg-gray-300 hover:scale-105 duration-500'
>
Cloud Architect
</li>
</ul>
<PageTransitionAnimation>
<div className='h-full'>
<Navigation
path='About'
/>
<section className='relative flex justify-center bg-white dark:bg-slate-800 my-20 px-6'>
<div className='w-full h-full absolute animate-fade-in ease-in duration-[2000ms] delay-1000'>
<div className='absolute flex justify-center items-center w-full h-full animate-fade-in ease-in'>
<Image
src={ Palmtree }
alt=''
className='-rotate-12 w-[30vw] absolute right-0 -bottom-0 lg:-bottom-10 [@media(min-width: 2160px)]:-bottom-48 -translate-x-16'
/>
<Image
src={ Juice }
alt=''
className='rotate-6 w-[30vw] lg:w-[25vw] absolute left-0 -top-16 translate-x-16 animate-fade-in'
/>
<span className='animate-fade-in rotate-12 bg-cyan-300 rounded-xl h-72 w-40 lg:w-52 absolute -top-16 right-0 translate-x-36 transform hover:translate-x-28 duration-300'></span>
<span className='animate-fade-in rotate-12 bg-lime-300 rounded-xl h-72 w-40 lg:w-52 absolute -bottom-28 left-0 -translate-x-36 transform hover:-translate-x-28 duration-300'></span>
</div>
</div>
<div className='relative inline-block text-center my-60 md:my-48 xl:my-64 animate-fade-in ease-out duration-500 delay-300'>
<div className='animate-flip-in ease-out duration-[1500ms]'>
<h1 className='mb-4 font-extrabold text-2xl md:text-4xl animate-fade-in'>
<span className='text-emerald-400 hover:text-emerald-500 duration-300'>Who</span> AM <span className='text-fuchsia-400 hover:text-fuchsia-500 duration-300'>I</span>?
</h1>
<h4 className='text-lg font-semibold'>
Junior Full Stack <span className='text-rose-400 hover:text-rose-500 duration-300'>Software Developer</span>
</h4>
<span className='absolute bg-black w-40 h-1 left-1/2 bottom-0 animate-scale-in-center'></span>
<span className='absolute bg-black w-40 h-1 right-1/2 bottom-0 animate-scale-in-center'></span>
</div>
</div>
</section>
<ScrollReveal>
<div className='flex justify-center'>
<div className='relative inline-block'>
<h1 className='text-6xl font-extrabold opacity-95 hover:opacity-100 py-10 whitespace-nowrap overflow-hidden animate-appear-gradually'>
<span className='inline-block animate-rocket'>🚀</span>About
</h1>
<span className='absolute bg-black h-2 w-16 bottom-5 inset-x-1/2'></span>
</div>
</div>
</ScrollReveal>
<div className='text-center font-mono font-bold'>
<p>The super awesome history of my career! ...Perhaps?</p>
</div>
<div className='lg:flex justify-between gaap-5 my-20 mx-10'>
<ScrollReveal>
<div className='gap-10 lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl bg-blue-600 px-20 lg:px-10 py-10 rounded hover:rounded-none shadow-lg hover:shadow-xl duration-300'>
<div className='flex justify-center py-24'>
<Image
src={ Icon }
alt=''
className='-mt-14 w-60 lg:w-48 h-auto rounded-full opacity-95 hover:opacity-100 duration-300'
/>
</div>
<div>
<h1 className='text-center text-white font-extrabold text-3xl'>
AKITO HASEGAWA
</h1>
<h4 className='text-center text-white'>
JUNIOR SOFTWARE ENGINEER
</h4>
<div className='grid space-y-2 p-4'>
{ AccountData.map((value, key) => (
<div
key={ key }
>
<div className='grid grid-cols-2 items-center gap-4 py-3 px-6 hover:font-semibold hover:bg-gray-100 rounded duration-300'>
{ value.icon }
<h5>{ value.title }</h5>
</div>
</div>
))}
</div>
</div>
</div>
</ScrollReveal>
<div className='grid grid-cols-2 gap-10 my-10 lg:my-4'>
{ ProfileData.map((value, key) => (
<div
className='grid grid-cols-2 items-center rounded gap-4 p-2 mx-5 hover:bg-gray-100 hover:scale-105 duration-300'
key={ key }
>
<h5 className='font-semibold'>
Career
</h5>
<ul>
<li className='font-medium'>
<p>Intern at Naxa, Inc for 6 months</p>
<p className='text-end'>- Frontend developer</p>
<p className='text-center'>Worked on Nextjs, Firebase, LIFF APP and etc. </p>
</li>

</ul>
<ProfileCard
src={ value.src }
title={ value.title }
color={ value.color }
content={ value.content }
/>
</div>
</div>
))}
</div>
</div>
</div>

</div>
</PageTransitionAnimation>
)
}
34 changes: 26 additions & 8 deletions app/blog/[blogId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,50 @@
import React from 'react'
import { Navigation } from '@/components/Navigation'
import { client } from '@/libs/client'
import { Blog } from '@/utils/types/Blog'
import React from 'react'
import styles from '../../styles/Blog.module.scss'

async function getBlog(blogId: string) {
const data = await client.get({
endpoint: "blogs",
contentId: blogId
})
})

return data.contents
return data
}

type BlogProps = {
blogId: string
}

export default async function page(props: BlogProps) {

const { blogId } = props
export default async function page({ params } : { params: { blogId: string } }) {

// fetch a specific blog from microCMS
const blog: Blog = await getBlog(blogId)
const blog: Blog = await getBlog( params.blogId )

return (
<div className='h-screen'>
<div className='h-full'>
<Navigation
path='Blog'
/>
<h1 className='text-center text-6xl font-extrabold opacity-95 hover:opacity-100 py-10'>
📄Blog
</h1>
<div className='p-10'>
<h1 className='text-center text-4xl font-bold mb-5'>
{ blog.title }
</h1>
<div className='flex justify-end mb-10 gap-2 text-sm'>
<p>🕒更新日:</p>
{ new Date(blog.publishedAt).toLocaleDateString('ja-JP') }
</div>
<div className='p-10'>
<div
dangerouslySetInnerHTML={{ __html: `${ blog.body }`}}
className={ styles.post }
/>
</div>
</div>
</div>
)
}
Loading