├── .env ├── .gitignore ├── README.md ├── assets ├── 0001.webp ├── 0002.webp ├── behance.svg ├── center_box_bg.png ├── codepen.svg ├── contact_pattern.webp ├── copy.svg ├── discord.png ├── favicond.png ├── faviconx.png ├── fe_dev_bg.png ├── front_end_icon.svg ├── interaction_design_bg.png ├── interaction_icon.svg ├── logo.svg ├── mobile_dev_bg.png ├── mobile_dev_icon.svg ├── portfolio.png ├── profile_photo.webp ├── shape_1.png ├── shape_2.png ├── shape_3 (1).png ├── shape_3.png ├── shape_4.png ├── shape_5.png ├── shape_6.png ├── shape_7.png ├── web_animation.svg ├── web_animation_bg.png ├── work1.png ├── work2.png ├── work3.png └── work4.png ├── components ├── About.tsx ├── Contact.tsx ├── Footer.tsx ├── Intro.tsx ├── Navigation.tsx ├── Works.tsx └── fullLogo.tsx ├── gtm.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.tsx ├── _document.tsx ├── api │ └── hello.ts ├── index.tsx └── works.tsx ├── postcss.config.js ├── public ├── favicond.png ├── faviconx.png └── fonts │ ├── BlackBones │ └── BlackBones.woff2 │ └── CorpsansRd │ ├── CorpSansRd-BoldCnd.woff2 │ ├── CorpSansRd-MediumCnd.woff2 │ └── CorpSansRd-RegularCnd.woff2 ├── styles └── globals.css ├── tailwind.config.js ├── tsconfig.json ├── util └── transporter.ts └── yarn.lock /.env: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_GTM_ID= GTM-TCJKPN7 2 | # NEXT_PUBLIC_API_URL = https://localhost -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 18 | 19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 20 | 21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 22 | 23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 24 | 25 | ## Learn More 26 | 27 | To learn more about Next.js, take a look at the following resources: 28 | 29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 31 | 32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 33 | 34 | ## Deploy on Vercel 35 | 36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 37 | 38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 39 | -------------------------------------------------------------------------------- /assets/0001.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/0001.webp -------------------------------------------------------------------------------- /assets/0002.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/0002.webp -------------------------------------------------------------------------------- /assets/behance.svg: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 20 | 24 | 25 | -------------------------------------------------------------------------------- /assets/center_box_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/center_box_bg.png -------------------------------------------------------------------------------- /assets/codepen.svg: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 20 | 21 | 22 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /assets/contact_pattern.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/contact_pattern.webp -------------------------------------------------------------------------------- /assets/copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/discord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/discord.png -------------------------------------------------------------------------------- /assets/favicond.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/favicond.png -------------------------------------------------------------------------------- /assets/faviconx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/faviconx.png -------------------------------------------------------------------------------- /assets/fe_dev_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/fe_dev_bg.png -------------------------------------------------------------------------------- /assets/front_end_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/interaction_design_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/interaction_design_bg.png -------------------------------------------------------------------------------- /assets/interaction_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/mobile_dev_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/mobile_dev_bg.png -------------------------------------------------------------------------------- /assets/mobile_dev_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/portfolio.png -------------------------------------------------------------------------------- /assets/profile_photo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/profile_photo.webp -------------------------------------------------------------------------------- /assets/shape_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/shape_1.png -------------------------------------------------------------------------------- /assets/shape_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/shape_2.png -------------------------------------------------------------------------------- /assets/shape_3 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/shape_3 (1).png -------------------------------------------------------------------------------- /assets/shape_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/shape_3.png -------------------------------------------------------------------------------- /assets/shape_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/shape_4.png -------------------------------------------------------------------------------- /assets/shape_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/shape_5.png -------------------------------------------------------------------------------- /assets/shape_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/shape_6.png -------------------------------------------------------------------------------- /assets/shape_7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/shape_7.png -------------------------------------------------------------------------------- /assets/web_animation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/web_animation_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/web_animation_bg.png -------------------------------------------------------------------------------- /assets/work1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/work1.png -------------------------------------------------------------------------------- /assets/work2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/work2.png -------------------------------------------------------------------------------- /assets/work3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/work3.png -------------------------------------------------------------------------------- /assets/work4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hereistopdev/Next.js_new_portfolio/cc95b81f5dba0ac22790a45eebbeff5cf3e830fc/assets/work4.png -------------------------------------------------------------------------------- /components/About.tsx: -------------------------------------------------------------------------------- 1 | import user from "@/assets/favicond.png"; 2 | import "react-responsive-carousel/lib/styles/carousel.min.css"; 3 | import { Carousel } from "react-responsive-carousel"; 4 | import { FaBicycle } from "react-icons/fa"; 5 | import { BiSwim, BiSpreadsheet } from "react-icons/bi"; 6 | import { GiPersonInBed } from "react-icons/gi"; 7 | import { BsImage, BsSnow3 } from "react-icons/bs"; 8 | 9 | const About = () => { 10 | const skills = ["Javascript/Typescript", "React/Next.js", "Vue/Nuxt.js", "TailwindCSS", "MUI", "Laravel"]; 11 | return ( 12 |
16 |
17 |
18 |
Know Me
19 |
About
20 |
21 | 22 | 37 |
38 | 39 |
Biking
40 |
41 |
42 | 43 |
Swimming
44 |
45 |
46 | 47 |
Reading
48 |
49 |
50 | 51 |
Sleeping
52 |
53 |
54 | 55 |
56 | Love
57 | Snowflake 58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | 67 |
68 |
Taking picture
69 |
70 | 71 |
72 |
73 |
74 |
75 | Know Me 76 |
77 |
About
78 |
79 |
80 |

81 | I'm a Senior Front-End Developer. I have a serious 82 | passion for UI effects, animations and creating intuitive, dynamic 83 | user experiences. 84 |

85 |

86 | My main experience is in front-end development but I also have a 87 | passion for design. Given that producing a modern website requires 88 | the combination of design, server technology, and the layer that 89 | users interacts with. I believe having experience in both design and 90 | development allows for making the most optimal user experiences. 91 |

92 |

93 | I've built products for companies and businesses around the globe 94 | ranging from marketing websites to complex solutions and enterprise 95 | apps with focus on fast, elegant and accessible user experiences. 96 | 97 |

98 | {/*

99 | I'm a{" "} 100 | 101 | CodePen 102 | {" "} 103 | advocate and share attention-catching demos over on 104 | 105 | {" "} 106 | Twitter 107 | 108 | . 109 |

*/} 110 |
111 |
Best Skills
112 |
113 | {skills.map((skill, index) => ( 114 |
118 | {skill} 119 |
120 | ))} 121 |
122 |
123 |
124 |
125 |
126 | ); 127 | }; 128 | export default About; -------------------------------------------------------------------------------- /components/Contact.tsx: -------------------------------------------------------------------------------- 1 | import { GitHub, Telegram } from "@mui/icons-material"; 2 | import SendIcon from '@mui/icons-material/Send'; 3 | import { 4 | alpha, 5 | Button, 6 | OutlinedInputProps, 7 | styled, 8 | TextField, 9 | TextFieldProps, 10 | } from "@mui/material"; 11 | import Behance from "@/assets/behance.svg"; 12 | import Discord from "@/assets/discord.png"; 13 | import ContactPattern from "@/assets/contact_pattern.webp"; 14 | import useCopy from "use-copy"; 15 | import Copy from "@/assets/copy.svg"; 16 | import Link from "next/link"; 17 | import { useState } from "react"; 18 | import axios from "axios"; 19 | const RedditTextField = styled((props: TextFieldProps) => ( 20 | } 23 | {...props} 24 | /> 25 | ))(({ theme }) => ({ 26 | "& label.Mui-focused": { 27 | color: "rgb(57, 63, 79)", 28 | fontWeight: 500, 29 | fontSize: 12, 30 | }, 31 | "& label": { 32 | color: "rgb(57, 63, 79)", 33 | fontWeight: 500, 34 | fontSize: 12, 35 | }, 36 | "& .MuiFilledInput-root": { 37 | borderBottom: "0.2px solid rgb(107,114,128)", 38 | background: "transparent", 39 | transition: theme.transitions.create([ 40 | "border-color", 41 | "background-color", 42 | "box-shadow", 43 | ]), 44 | 45 | "&.Mui-focused": { 46 | borderColor: "white", 47 | }, 48 | }, 49 | })); 50 | const Contact = () => { 51 | const [copied, copy, setCopied] = useCopy("hereis.topdev@gmail.com"); 52 | const copyText = () => { 53 | copy(); 54 | setTimeout(() => { 55 | setCopied(false); 56 | }, 1000); 57 | }; 58 | const [values, setValues] = useState({ name: "", email: "", message: "" }); 59 | 60 | const contacts = [ 61 | { 62 | provider: "Github", 63 | link: "https://github.com/mastercodercat", 64 | }, 65 | { 66 | provider: "Telegram", 67 | link: "https://t.me/software730", 68 | }, 69 | { 70 | provider: "Skype", 71 | link: "live:.cid.a915b6f66b36fe9", 72 | }, 73 | { 74 | provider: "Discord", 75 | link: "bryanjin#8288", 76 | }, 77 | ]; 78 | const validate = (values: any): { name: string; error: string }[] => { 79 | let errors = []; 80 | if (values.name.length < 4) { 81 | errors.push({ 82 | name: "name", 83 | error: " Name must be at least 2 characters long", 84 | }); 85 | } 86 | if (!values.email) { 87 | errors.push({ name: "email", error: "Email must be filled" }); 88 | } 89 | if (!/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/gim.test(values.email)) { 90 | errors.push({ name: "email", error: "Email is not valid" }); 91 | } 92 | if (values.message.length < 4) { 93 | errors.push({ 94 | name: "message", 95 | error: "Message must be at least 3 characters long", 96 | }); 97 | } 98 | return errors; 99 | }; 100 | const submit = async (e: any) => { 101 | e.preventDefault(); 102 | try { 103 | const response = await axios.post("/api/hello", values); 104 | alert("Message sent successfully"); 105 | } catch (_error) { 106 | alert("Message not sent"); 107 | } 108 | }; 109 | const [errors, setErrors] = useState<{ name: string; error: string }[]>([]); 110 | console.log(errors); 111 | return ( 112 |
116 |
117 |
118 |
119 |
120 | DO YOU HAVE A PROJECT 121 |
122 |
123 | I`m ready for new projects 124 |
125 |
126 | 130 | LET'S TALK 131 | 132 | 137 |
138 |
139 |
140 |
141 | Let`s Talk 142 |
143 |
Contact
144 |
145 |
146 |
150 | { 156 | setValues({ ...values, name: e.target.value }); 157 | }} 158 | helperText={ 159 | errors.find((e) => e.name === "name") && ( 160 |
161 | {errors.find((e) => e.name === "name")?.error} 162 |
163 | ) 164 | } 165 | label="Name" 166 | /> 167 | e.name === "email") && ( 174 |
175 | {errors.find((e) => e.name === "email")?.error} 176 |
177 | ) 178 | } 179 | value={values.email} 180 | onChange={(e: any) => 181 | setValues({ ...values, email: e.target.value }) 182 | } 183 | /> 184 | 190 | setValues({ ...values, message: e.target.value }) 191 | } 192 | helperText={ 193 | errors.find((e) => e.name === "message") && ( 194 |
195 | {errors.find((e) => e.name === "message")?.error} 196 |
197 | ) 198 | } 199 | label="Message" 200 | variant="filled" 201 | multiline 202 | rows={4} 203 | /> 204 |
205 | 223 |
224 | 225 | 275 |
276 |
277 |
278 | ); 279 | }; 280 | export default Contact; -------------------------------------------------------------------------------- /components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import { navs } from "./Navigation"; 3 | 4 | const Footer = () => { 5 | return ( 6 |
7 |
8 | COPYRIGHT © 2022 ALL RIGHTS RESERVED 9 |
10 |
11 | {navs.map((nav, index) => ( 12 | 23 | {nav} 24 | 25 | 26 | ))} 27 |
28 |
29 | ); 30 | }; 31 | export default Footer; 32 | -------------------------------------------------------------------------------- /components/Intro.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import first from "@/assets/center_box_bg.png"; 3 | import shape1 from "@/assets/shape_1.png"; 4 | import shape2 from "@/assets/shape_2.png"; 5 | import WebAnimation from "@/assets/web_animation_bg.png"; 6 | import FeDev from "@/assets/fe_dev_bg.png"; 7 | import MobileDev from "@/assets/mobile_dev_bg.png"; 8 | import InteractinDesign from "@/assets/interaction_design_bg.png"; 9 | import webanimationIcon from "@/assets/web_animation.svg"; 10 | import InteractionDesignIcon from "@/assets/interaction_icon.svg"; 11 | import FaDevIcon from "@/assets/front_end_icon.svg"; 12 | import mobileDevIcon from "@/assets/mobile_dev_icon.svg"; 13 | import shape3 from "@/assets/shape_3 (1).png"; 14 | import shape4 from "@/assets/shape_4.png"; 15 | import shape5 from "@/assets/shape_5.png"; 16 | import shape6 from "@/assets/shape_6.png"; 17 | import shape7 from "@/assets/shape_7.png"; 18 | import { useEffect } from "react"; 19 | 20 | const Intro = () => { 21 | useEffect(() => { 22 | let animatedDivs: HTMLDivElement[] = document.querySelectorAll("#animated-div")! as any; 23 | const width = window.innerWidth; 24 | const height = window.innerHeight; 25 | let x = 0; 26 | let y = 0; 27 | 28 | document.addEventListener("mousemove", function (event) { 29 | x = event.clientX; 30 | y = event.clientY; 31 | 32 | animatedDivs.forEach((animatedDiv) => { 33 | const ratioX = x / width; 34 | const ratioY = y / height; 35 | const dx = ratioX * 20; 36 | const dy = ratioY * 20; 37 | const divWidth = animatedDiv.clientWidth; 38 | const divHeight = animatedDiv.clientHeight; 39 | 40 | // check the div won't go out of the screen 41 | if (dx < 0 || dx > 100 - (divWidth / width) * 100) return; 42 | 43 | animatedDiv.style.transform = `translate(-${dx}%, -${dy}%)`; 44 | }); 45 | }); 46 | 47 | return () => { 48 | document.removeEventListener("mousemove", () => {}); 49 | } 50 | }, []); 51 | 52 | 53 | useEffect(() => { 54 | let animatedDivs: HTMLDivElement[] = document.querySelectorAll("#animated-division")! as any; 55 | const width = window.innerWidth; 56 | const height = window.innerHeight; 57 | let x = 0; 58 | let y = 0; 59 | 60 | document.addEventListener("mousemove", function (event) { 61 | x = event.clientX; 62 | y = event.clientY; 63 | 64 | animatedDivs.forEach((animatedDiv) => { 65 | const ratioX = x / width; 66 | const ratioY = y / height; 67 | const dx = ratioX * 20; 68 | const dy = ratioY * 20; 69 | const divWidth = animatedDiv.clientWidth; 70 | const divHeight = animatedDiv.clientHeight; 71 | 72 | // check the div won't go out of the screen 73 | if (dx < 0 || dx > 100 - (divWidth / width) * 100) return; 74 | 75 | animatedDiv.style.transform = `translate(-${dx}%, ${dy}%)`; 76 | }); 77 | }); 78 | 79 | return () => { 80 | document.removeEventListener("mousemove", () => {}); 81 | } 82 | }, []); 83 | 84 | return ( 85 |
86 | 92 | 98 | 104 |
105 | 106 |
107 | 112 | 117 |
118 |
👋
119 |
120 | 121 | H 122 | 123 | 124 | i 125 | 126 | 127 | F 128 | 129 | 130 | o 131 | 132 | 133 | l 134 | 135 | 136 | k 137 | 138 | 139 | s 140 | 141 | 142 |  ! 143 | 144 |
145 |
146 |
147 |
148 | I`m Bryan Jin 149 |
150 |
Senior Front-end Developer
151 |
152 | Specialized in front-end development but also like trying out other{" "} 153 |
154 | technologies in order to become more flexible. 155 |
156 |
157 | 161 | KNOW ME 162 | 163 |
164 |
165 | 171 |
175 | 176 |
177 | 178 |
179 | Web Animation 180 |
181 | 182 |
183 |
184 | 185 |
186 | Front-end Development 187 |
188 | 189 |
190 |
191 | 192 |
193 | Mobile Development 194 |
195 | 196 |
197 |
198 | 199 |
200 | Interaction Design 201 |
202 | 203 |
204 |
205 |
206 | ); 207 | }; 208 | export default Intro; 209 | 210 | -------------------------------------------------------------------------------- /components/Navigation.tsx: -------------------------------------------------------------------------------- 1 | import { Menu } from "@mui/icons-material"; 2 | import Link from "next/link"; 3 | import Logo from "./fullLogo"; 4 | 5 | 6 | export const navs = ["Home", "About", "Works", "Contact"]; 7 | const Navigation = () => { 8 | return ( 9 |
10 | 11 |
12 |
13 | 14 |
15 |
16 |
17 | {navs.map((nav, index) => ( 18 | 29 | {nav} 30 | 31 | ))} 32 |
33 |
34 | ); 35 | }; 36 | export default Navigation; -------------------------------------------------------------------------------- /components/Works.tsx: -------------------------------------------------------------------------------- 1 | import work1 from "@/assets/work1.png"; 2 | import work2 from "@/assets/work2.png"; 3 | import work3 from "@/assets/work3.png"; 4 | import work4 from "@/assets/work4.png"; 5 | import { Button } from "@mui/material"; 6 | import { NextPage } from "next"; 7 | import Link from "next/link"; 8 | 9 | const WorksComponent: NextPage<{ works?: any[]; sent: boolean }> = ({ 10 | sent, 11 | works = [ 12 | { 13 | year: 2017, 14 | name: "igoods", 15 | work: "front-end developer", 16 | desc: "igoods", 17 | cover: work1.src, 18 | link: "https://www.i-goods.co.jp/" 19 | }, 20 | { 21 | year: 2019, 22 | name: "HELLO MOBILITY", 23 | work: "front-end developer", 24 | desc: "hello mobility", 25 | cover: work2.src, 26 | link: "https://www.hellomobility.jp/" 27 | }, 28 | ], 29 | }) => { 30 | return ( 31 |
32 |
33 |
34 | Fantastic 35 |
36 |
Selected Works
37 |
38 | {works.map((work, index) => ( 39 | 44 |
45 |
46 |
47 | {work.name} 48 |
49 |
50 | {work.year} 51 |
52 |
53 | 54 |
55 |
56 | {work.desc} 57 |
58 | 62 |
63 | {work.work} 64 |
65 |
66 |
67 | 68 | ))} 69 |
70 |
71 | 72 |
73 | ”Be who you needed when you were younger” 74 |
75 |
76 | ); 77 | }; 78 | export default WorksComponent; -------------------------------------------------------------------------------- /components/fullLogo.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from "react"; 2 | import logo from "@/assets/logo.svg"; 3 | const Logo: FC<{ animate?: boolean }> = ({ animate }) => { 4 | return ( 5 |
6 | logo 14 | 15 | {animate &&
22 | ME 23 |
} 24 |
25 | ); 26 | }; 27 | export default Logo; 28 | -------------------------------------------------------------------------------- /gtm.js: -------------------------------------------------------------------------------- 1 | iimport { initializeGtm } from 'next-gtm' 2 | import React, { useEffect } from 'react' 3 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@emotion/react": "^11.10.5", 13 | "@emotion/styled": "^11.10.5", 14 | "@mui/icons-material": "^5.11.0", 15 | "@mui/material": "^5.11.5", 16 | "@mui/styled-engine-sc": "^5.11.0", 17 | "@next/font": "13.1.2", 18 | "@types/node": "18.11.18", 19 | "@types/react": "18.0.27", 20 | "@types/react-dom": "18.0.10", 21 | "axios": "^1.2.3", 22 | "next": "13.1.2", 23 | "nodemailer": "^6.9.0", 24 | "react": "18.2.0", 25 | "react-dom": "18.2.0", 26 | "react-gtm-module": "^2.0.11", 27 | "react-icons": "^4.7.1", 28 | "react-responsive-carousel": "^3.2.23", 29 | "react-snowfall": "^1.2.1", 30 | "styled-components": "^5.3.6", 31 | "typescript": "4.9.4", 32 | "use-copy": "^0.0.2" 33 | }, 34 | "devDependencies": { 35 | "@types/nodemailer": "^6.4.7", 36 | "@types/react-gtm-module": "^2.0.1", 37 | "autoprefixer": "^10.4.13", 38 | "postcss": "^8.4.21", 39 | "tailwindcss": "^3.2.4" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import Contact from "@/components/Contact"; 2 | import Footer from "@/components/Footer"; 3 | import Logo from "@/components/fullLogo"; 4 | import Navigation from "@/components/Navigation"; 5 | import "@/styles/globals.css"; 6 | import type { AppProps } from "next/app"; 7 | import Head from "next/head"; 8 | import { useEffect, useState } from "react"; 9 | import Snowfall from "react-snowfall"; 10 | import TagManager, { TagManagerArgs } from "react-gtm-module"; 11 | import shape3 from "@/assets/shape_3 (1).png"; 12 | import shape4 from "@/assets/shape_4.png"; 13 | import shape5 from "@/assets/shape_5.png"; 14 | import shape6 from "@/assets/shape_6.png"; 15 | import shape7 from "@/assets/shape_7.png"; 16 | import shape1 from "@/assets/shape_1.png"; 17 | import shape2 from "@/assets/shape_2.png"; 18 | 19 | export default function App({ Component, pageProps }: AppProps) { 20 | const gtmId = process.env.NEXT_PUBLIC_GTM_ID || ""; 21 | const tagManagerArgs: TagManagerArgs = { 22 | gtmId, 23 | }; 24 | useEffect(() => { 25 | TagManager.initialize(tagManagerArgs); 26 | }, []); 27 | const [snow, setSnow] = useState(false); 28 | const [show, setShow] = useState(false); 29 | useEffect(() => { 30 | setSnow(true); 31 | setTimeout(() => { 32 | setShow(true); 33 | }, 2000); 34 | }, []); 35 | if (!snow) return null; 36 | 37 | return ( 38 | <> 39 | 40 | Bryan Portfolio 41 | 42 | 50 | 58 | {!show ? ( 59 |
60 | 61 |
62 | ) : ( 63 | <> 64 |
65 |
66 | 67 | 68 |
69 | 70 |
71 |