From 431bbc9c297a7138c27129aabbe3561449ee18e5 Mon Sep 17 00:00:00 2001 From: shafin Date: Wed, 13 Nov 2024 14:31:16 +0600 Subject: [PATCH] chore: restructure project files --- .env.example | 6 +- .prettierignore | 11 + .prettierrc | 12 + app/ robots.js | 12 + app/about/page.jsx | 47 + app/data/data.js | 89 + app/data/greetings.js | 72 + app/data/highlights.js | 5 + app/data/projects.js | 139 + app/data/skills.js | 67 + {public => app}/favicon.ico | Bin app/globals.css | 71 + app/layout.js | 132 + app/manifest.js | 103 + app/open-source/page.jsx | 30 + app/page.jsx | 15 + app/projects/page.jsx | 25 + app/sitemap.js | 10 + components/Description.jsx | 3 + components/EduCard.jsx | 34 + components/Footer.jsx | 47 +- components/Heading.jsx | 6 + components/Hero.jsx | 148 +- components/Highlights.jsx | 34 +- components/NavBar.jsx | 168 +- components/PageLayout.jsx | 18 - components/PinnedRepo.jsx | 53 - components/avatar.jsx | 92 + components/featured-repo.jsx | 64 + components/greeting-switcher.jsx | 29 + components/index.js | 8 - components/project-card.jsx | 69 + components/repo-card.jsx | 45 + components/repo-list.jsx | 32 + components/repo-skeleton.jsx | 16 + components/skill-cap.jsx | 14 + config.js | 3 - data/data.js | 86 - data/greetings.js | 72 - data/highlights.js | 5 - data/projects.js | 147 - data/skills.js | 67 - lib/constants.js | 6 + lib/utils.js | 16 + next.config.js | 12 - next.config.mjs | 4 + package-lock.json | 9473 ----------------- package.json | 59 +- pages/_app.js | 20 - pages/_document.js | 33 - pages/about.jsx | 41 - pages/index.js | 10 - pages/open-source.jsx | 23 - pages/projects.jsx | 23 - postcss.config.js | 6 - postcss.config.mjs | 8 + public/assets/images/projects/rutugo.png | Bin 91652 -> 0 bytes public/google489e3b0296208014.html | 1 - .../images/companies/pridesys.png | Bin .../images/companies/taskeasy.png | Bin public/images/companies/wander-woman.png | Bin 0 -> 22057 bytes .../images/icons/icon-128x128.png | Bin .../images/icons/icon-144x144.png | Bin .../images/icons/icon-152x152.png | Bin .../images/icons/icon-192x192.png | Bin .../images/icons/icon-384x384.png | Bin .../images/icons/icon-512x512.png | Bin .../images/icons/icon-565x565.png | Bin .../{assets => }/images/icons/icon-72x72.png | Bin .../{assets => }/images/icons/icon-96x96.png | Bin .../{assets => }/images/icons/shafin-logo.png | Bin .../images/institutions/busms.png | Bin .../images/institutions/cpscs.png | Bin .../{assets => }/images/institutions/uap.png | Bin .../images/projects/afkebooks.png | Bin .../images/projects/box-office-extra.png | Bin .../projects/digital-bangladeshi-coin.png | Bin .../images/projects/disnep-clone.png | Bin .../images/projects/e-health-care.png | Bin public/images/projects/face-hand-tracker.png | Bin 0 -> 620452 bytes .../images/projects/grammar-pathshala.png | Bin public/{assets => }/images/projects/pirox.png | Bin .../images/projects/rtx-server.png | Bin public/images/projects/rutugo.png | Bin 0 -> 280387 bytes .../{assets => }/images/projects/shopbd.png | Bin .../images/projects/snippets-treasury.png | Bin .../{assets => }/images/projects/soft-ui.png | Bin .../{assets => }/images/projects/softavia.png | Bin .../{assets => }/images/projects/taskeasy.png | Bin .../{assets => }/images/projects/uap-cse.png | Bin public/{assets => }/images/projects/ubot.png | Bin .../screenshots/screenshot-2320x1680.png | Bin 0 -> 215015 bytes .../screenshots/screenshot-666x1184.png | Bin 0 -> 66416 bytes .../{assets => }/images/skills/bootstrap.png | Bin public/{assets => }/images/skills/css.png | Bin public/{assets => }/images/skills/figma.png | Bin public/{assets => }/images/skills/git.png | Bin public/{assets => }/images/skills/github.png | Bin public/{assets => }/images/skills/html.png | Bin .../{assets => }/images/skills/javascript.png | Bin public/{assets => }/images/skills/nextjs.png | Bin public/{assets => }/images/skills/prisma.png | Bin public/{assets => }/images/skills/python.png | Bin public/{assets => }/images/skills/react.png | Bin .../images/skills/tailwindcss.png | Bin public/{assets => }/images/skills/vscode.png | Bin public/manifest.json | 65 - public/robots.txt | 7 - public/service-worker.js | 21 - public/sitemap.xml | 23 - readme.md | 6 +- styles/globals.css | 63 - tailwind.config.js | 44 +- utils/Description.jsx | 3 - utils/EduCard.jsx | 39 - utils/Heading.jsx | 6 - utils/HighlightPoint.jsx | 7 - utils/Meta.jsx | 82 - utils/ProjectCard.jsx | 70 - utils/RepoCard.jsx | 76 - utils/RepoSkeleton.jsx | 16 - utils/SkillCap.jsx | 22 - utils/index.js | 21 - yarn.lock | 1474 +-- 124 files changed, 2351 insertions(+), 11535 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 app/ robots.js create mode 100644 app/about/page.jsx create mode 100644 app/data/data.js create mode 100644 app/data/greetings.js create mode 100644 app/data/highlights.js create mode 100644 app/data/projects.js create mode 100644 app/data/skills.js rename {public => app}/favicon.ico (100%) create mode 100644 app/globals.css create mode 100644 app/layout.js create mode 100644 app/manifest.js create mode 100644 app/open-source/page.jsx create mode 100644 app/page.jsx create mode 100644 app/projects/page.jsx create mode 100644 app/sitemap.js create mode 100644 components/Description.jsx create mode 100644 components/EduCard.jsx create mode 100644 components/Heading.jsx delete mode 100644 components/PageLayout.jsx delete mode 100644 components/PinnedRepo.jsx create mode 100644 components/avatar.jsx create mode 100644 components/featured-repo.jsx create mode 100644 components/greeting-switcher.jsx delete mode 100644 components/index.js create mode 100644 components/project-card.jsx create mode 100644 components/repo-card.jsx create mode 100644 components/repo-list.jsx create mode 100644 components/repo-skeleton.jsx create mode 100644 components/skill-cap.jsx delete mode 100644 config.js delete mode 100644 data/data.js delete mode 100644 data/greetings.js delete mode 100644 data/highlights.js delete mode 100644 data/projects.js delete mode 100644 data/skills.js create mode 100644 lib/constants.js create mode 100644 lib/utils.js delete mode 100644 next.config.js create mode 100644 next.config.mjs delete mode 100644 package-lock.json delete mode 100644 pages/_app.js delete mode 100644 pages/_document.js delete mode 100644 pages/about.jsx delete mode 100644 pages/index.js delete mode 100644 pages/open-source.jsx delete mode 100644 pages/projects.jsx delete mode 100644 postcss.config.js create mode 100644 postcss.config.mjs delete mode 100755 public/assets/images/projects/rutugo.png delete mode 100644 public/google489e3b0296208014.html rename public/{assets => }/images/companies/pridesys.png (100%) rename public/{assets => }/images/companies/taskeasy.png (100%) create mode 100644 public/images/companies/wander-woman.png rename public/{assets => }/images/icons/icon-128x128.png (100%) rename public/{assets => }/images/icons/icon-144x144.png (100%) rename public/{assets => }/images/icons/icon-152x152.png (100%) rename public/{assets => }/images/icons/icon-192x192.png (100%) rename public/{assets => }/images/icons/icon-384x384.png (100%) rename public/{assets => }/images/icons/icon-512x512.png (100%) rename public/{assets => }/images/icons/icon-565x565.png (100%) rename public/{assets => }/images/icons/icon-72x72.png (100%) rename public/{assets => }/images/icons/icon-96x96.png (100%) rename public/{assets => }/images/icons/shafin-logo.png (100%) rename public/{assets => }/images/institutions/busms.png (100%) rename public/{assets => }/images/institutions/cpscs.png (100%) rename public/{assets => }/images/institutions/uap.png (100%) rename public/{assets => }/images/projects/afkebooks.png (100%) rename public/{assets => }/images/projects/box-office-extra.png (100%) rename public/{assets => }/images/projects/digital-bangladeshi-coin.png (100%) rename public/{assets => }/images/projects/disnep-clone.png (100%) rename public/{assets => }/images/projects/e-health-care.png (100%) create mode 100644 public/images/projects/face-hand-tracker.png rename public/{assets => }/images/projects/grammar-pathshala.png (100%) rename public/{assets => }/images/projects/pirox.png (100%) rename public/{assets => }/images/projects/rtx-server.png (100%) create mode 100644 public/images/projects/rutugo.png rename public/{assets => }/images/projects/shopbd.png (100%) rename public/{assets => }/images/projects/snippets-treasury.png (100%) rename public/{assets => }/images/projects/soft-ui.png (100%) rename public/{assets => }/images/projects/softavia.png (100%) rename public/{assets => }/images/projects/taskeasy.png (100%) rename public/{assets => }/images/projects/uap-cse.png (100%) rename public/{assets => }/images/projects/ubot.png (100%) create mode 100644 public/images/screenshots/screenshot-2320x1680.png create mode 100644 public/images/screenshots/screenshot-666x1184.png rename public/{assets => }/images/skills/bootstrap.png (100%) rename public/{assets => }/images/skills/css.png (100%) rename public/{assets => }/images/skills/figma.png (100%) rename public/{assets => }/images/skills/git.png (100%) rename public/{assets => }/images/skills/github.png (100%) rename public/{assets => }/images/skills/html.png (100%) rename public/{assets => }/images/skills/javascript.png (100%) rename public/{assets => }/images/skills/nextjs.png (100%) rename public/{assets => }/images/skills/prisma.png (100%) rename public/{assets => }/images/skills/python.png (100%) rename public/{assets => }/images/skills/react.png (100%) rename public/{assets => }/images/skills/tailwindcss.png (100%) rename public/{assets => }/images/skills/vscode.png (100%) delete mode 100644 public/manifest.json delete mode 100644 public/robots.txt delete mode 100644 public/service-worker.js delete mode 100644 public/sitemap.xml delete mode 100644 styles/globals.css delete mode 100644 utils/Description.jsx delete mode 100644 utils/EduCard.jsx delete mode 100644 utils/Heading.jsx delete mode 100644 utils/HighlightPoint.jsx delete mode 100644 utils/Meta.jsx delete mode 100644 utils/ProjectCard.jsx delete mode 100644 utils/RepoCard.jsx delete mode 100644 utils/RepoSkeleton.jsx delete mode 100644 utils/SkillCap.jsx delete mode 100644 utils/index.js diff --git a/.env.example b/.env.example index f0dbe38..3ed0d64 100644 --- a/.env.example +++ b/.env.example @@ -1,5 +1 @@ -GITHUB_ID= -GITHUB_SECRET= -NEXTAUTH_URL= -JWT_SECRET= -DATABASE_URL= \ No newline at end of file +NEXT_PUBLIC_GA_TRACKING_ID= \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..0dfc52c --- /dev/null +++ b/.prettierignore @@ -0,0 +1,11 @@ +cache +.cache +public +CHANGELOG.md +.yarn +dist +node_modules +.next +build +.contentlayer +migrations \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..e309981 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,12 @@ +{ + "singleQuote": true, + "arrowParens": "always", + "trailingComma": "none", + "printWidth": 100, + "tabWidth": 2, + "endOfLine": "lf", + "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"], + "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"], + "importOrderSeparation": true, + "importOrderSortSpecifiers": true +} diff --git a/app/ robots.js b/app/ robots.js new file mode 100644 index 0000000..48202fb --- /dev/null +++ b/app/ robots.js @@ -0,0 +1,12 @@ +import { BASE_URL } from '@/lib/constants'; + +export default function robots() { + return { + rules: { + userAgent: '*', + allow: '/' + }, + sitemap: `${BASE_URL}/sitemap.xml`, + host: BASE_URL + }; +} diff --git a/app/about/page.jsx b/app/about/page.jsx new file mode 100644 index 0000000..d54df55 --- /dev/null +++ b/app/about/page.jsx @@ -0,0 +1,47 @@ +import EduCard from '../../components/educard'; +import Heading from '../../components/heading'; +import SkillCap from '../../components/skill-cap'; +import { companies, institutions } from '../data/data'; +import { skills } from '../data/skills'; + +export const metadata = { + title: 'About', + description: + "Discover Shahriar Shafin's journey in web development, from his foundational education in Computer Science to his professional experience as a software engineer. Skilled in technologies like JavaScript, React, Next.js, and more." +}; + +export default function About() { + return ( + <> +
+ + +
+ {skills.map((item) => ( + + ))} +
+
+ +
+ + +
+ {companies.map((edu) => ( + + ))} +
+
+ +
+ + +
+ {institutions.map((edu) => ( + + ))} +
+
+ + ); +} diff --git a/app/data/data.js b/app/data/data.js new file mode 100644 index 0000000..dd28166 --- /dev/null +++ b/app/data/data.js @@ -0,0 +1,89 @@ +import { FaDribbble, FaGithub, FaLinkedin, FaRegEnvelope } from 'react-icons/fa'; + +export const featuredRepositories = [ + 'myportfolio', + 'shahriarshafin', + 'nodemcu-esp8266-fake-sign-in', + 'face-hand-tracker' +]; + +export const companies = [ + { + id: 1, + institution: 'Wander Woman', + logo: '/images/companies/wander-woman.png', + degree: 'Software Engineer', + startDate: 'Sep 2024', + endDate: 'Present' + }, + { + id: 2, + institution: 'Taskeasy Technologies', + logo: '/images/companies/taskeasy.png', + degree: 'Junior Software Engineer', + startDate: 'Apr 2023', + endDate: 'Sep 2024' + }, + { + id: 3, + institution: 'Pridesys IT Limited', + logo: '/images/companies/pridesys.png', + degree: 'Software Engineer - Intern', + startDate: 'Aug 2022', + endDate: 'Nov 2022' + } +]; + +export const institutions = [ + { + id: 1, + institution: 'University of Asia Pacific', + logo: '/images/institutions/uap.png', + degree: 'Bachelor of Science, Computer Science & Engineering (CSE)', + startDate: '2018', + endDate: '2022' + } + // { + // id: 2, + // institution: 'Cantonment Public School & College, BUSMS', + // logo: '/images/institutions/busms.png', + // degree: 'Higher Secondary Certificate, Science', + // startDate: '2016', + // endDate: '2018', + // }, + // { + // id: 3, + // institution: 'Cantonment Public School & College, Saidpur', + // logo: '/images/institutions/cpscs.png', + // degree: 'Secondary School Certificate, Science', + // startDate: '2014', + // endDate: '2016', + // }, +]; + +export const socialMedia = [ + { + id: 1, + label: 'Github', + icon: , + url: 'https://github.com/shahriarshafin' + }, + { + id: 2, + label: 'Linkedin', + icon: , + url: 'https://www.linkedin.com/in/shahriarshafin/' + }, + { + id: 3, + label: 'Dribbble', + icon: , + url: 'https://dribbble.com/shahriarshafin' + }, + { + id: 4, + label: 'Mail to Shafin', + icon: , + url: 'mailto:connect.shafin@gmail.com' + } +]; diff --git a/app/data/greetings.js b/app/data/greetings.js new file mode 100644 index 0000000..95d62b1 --- /dev/null +++ b/app/data/greetings.js @@ -0,0 +1,72 @@ +export const greetingList = [ + { + key: 1, + text: 'こんにちは', + lang: 'Japanese' + }, + { + key: 2, + text: 'Hello', + lang: 'English' + }, + { + key: 3, + text: 'হ্যালো', + lang: 'Bangla' + }, + { + key: 4, + text: 'नमस्ते', + lang: 'Hindi' + }, + { + key: 5, + text: 'السلام عليكم', + lang: 'Arabic' + }, + { + key: 6, + text: '你好', + lang: 'Chinese' + }, + { + key: 7, + text: 'Hola', + lang: 'Spanish' + }, + { + key: 8, + text: 'Bonjour', + lang: 'French' + }, + { + key: 9, + text: 'Ciao', + lang: 'Italian' + }, + { + key: 10, + text: '안녕하세요', + lang: 'Korean' + }, + { + key: 11, + text: 'Olá', + lang: 'Portuguese' + }, + { + key: 12, + text: 'Guten Tag', + lang: 'German' + }, + { + key: 13, + text: 'Merhaba', + lang: 'Turkish' + }, + { + key: 14, + text: 'Привет', + lang: 'Russian' + } +]; diff --git a/app/data/highlights.js b/app/data/highlights.js new file mode 100644 index 0000000..b563351 --- /dev/null +++ b/app/data/highlights.js @@ -0,0 +1,5 @@ +export const highlightList = [ + { id: 1, text: 'Deep dive into the Web.3' }, + { id: 2, text: 'Learn Skateboard Tricks!' }, + { id: 3, text: 'Contribute to Open Source projects' } +]; diff --git a/app/data/projects.js b/app/data/projects.js new file mode 100644 index 0000000..601f31f --- /dev/null +++ b/app/data/projects.js @@ -0,0 +1,139 @@ +export const projectList = [ + { + id: 1, + title: 'Taskeasy', + des: 'Taskeasy is a workflow Automation Tool for large and small teams that can connect apps and automate workflows, just like Zapier. It offers a simple setup and allows users to automate processes without a developer.', + tech: ['NextJS', 'Automation', 'ReactFlow'], + url: '', + image: '/images/projects/taskeasy.png' + }, + { + id: 2, + title: 'Rutugo', + des: "A travel planning app with personalized tour plans based on users' budgets, preferred themes, group sizes, journey dates etc. Powered by OpenAI API, Rutugo creates unforgettable vacations tailored specifically for each traveler.", + tech: ['OpenAI', 'NextJS', 'Tailwind'], + url: '', + image: '/images/projects/rutugo.png' + }, + { + id: 3, + title: 'ShopBD', + des: 'A high-performance, server-rendered Next.js App Router ecommerce application. It uses React Server Components, Server Actions, Suspense, useOptimistic, and more.', + tech: ['React', 'NextJS', 'Tailwind'], + url: '', + image: '/images/projects/shopbd.png' + }, + { + id: 4, + title: 'Face-Hand Tracker', + des: 'MediaPipe in a Next.js app enables real-time face and hand detection directly in the browser, ensuring low latency, privacy, and cost efficiency. It leverages FaceMesh and Hand Tracking for fast, responsive tracking on web and mobile.', + tech: ['Mediapipe', 'NextJS', 'OnDeviceAI'], + url: 'https://face-hand-tracker.vercel.app/', + image: '/images/projects/face-hand-tracker.png' + }, + { + id: 5, + title: 'Rtx Server', + des: 'RTX SERVER is constructed using custom GPU clusters tailored for real-time applications, with a focus on Unreal Engine projects. This serves as the portfolio page showcasing their specialized services.', + tech: ['React', 'Tailwind', 'DaisyUI'], + url: '', + image: '/images/projects/rtx-server.png' + }, + { + id: 6, + title: 'UAP CSE', + des: 'As CSE students at the University of Asia Pacific, taking on the responsibility to redesign and rebuild our Departmental Website was an incredible opportunity. This project marked the beginning of my journey into web development.', + tech: ['Django', 'Bootstrap', 'JavaScript'], + url: 'https://cse.uap-bd.edu/', + image: '/images/projects/uap-cse.png' + } + + // { + // id: 7, + // title: 'D.B Coin', + // des: 'A decentralized cryptocurrency coin for Bangladesh. The token is developed using the binance smart channel (bep20) blockchain. Its market capitalization is growing fast.', + // tech: ['React', 'Tailwind', 'DaisyUI'], + // url: 'https://digitalbangladeshicoin.com/', + // image: '/images/projects/digital-bangladeshi-coin.png' + // }, + // { + // id: 8, + // title: 'Snippets Treasury', + // des: 'Snippets Treasury is an easy customizable code snippets library for designers and developers to build websites faster and easier.', + // tech: ['HTML', 'Bootstrap', 'JavaScript'], + // url: 'https://snippetstreasury.vercel.app/', + // image: '/images/projects/snippets-treasury.png' + // }, + // { + // id: 9, + // title: 'Grammar Pathshala', + // des: 'Grammar Pathshala is an EdTech English grammar learning platform where students can learn grammar, test themselves, and receive marks.', + // tech: ['HTML', 'Tailwind', 'DaisyUI'], + // url: 'https://grammarpathshala.com/', + // image: '/images/projects/grammar-pathshala.png' + // }, + // { + // id: 10, + // title: 'Box Office', + // des: 'Online event management platform. They have Ticketing & registration system that allows event organisers to list their upcoming events on the website for their users to register and attend.', + // tech: ['HTML', 'Bootstrap', 'JavaScript'], + // url: 'http://boxofficeextra.com/', + // image: '/images/projects/box-office.png' + // }, + // { + // id: 11, + // title: 'Softavia', + // des: "Softavia is a demo project for showcasing a software company's website portfolio or products. The UI is designed with the dark theme and an eye catchy animation is added to the hero section.", + // tech: ['React', 'ReactBootstrap'], + // url: 'https://softavia.vercel.app/', + // image: '/images/projects/softavia.png' + // }, + // { + // id: 12, + // title: 'Soft UI', + // des: 'The website is based on Neumorphism design concepts, neumorphism is meant to be soft on the eyes. It is a minimal way to design with a soft, extruded plastic look.', + // tech: ['NextJS', 'StyledComponents'], + // url: 'https://softui.vercel.app/', + // image: '/images/projects/soft-ui.png' + // }, + // { + // id: 13, + // title: 'AfkeBooks', + // des: 'AFKebooks is an outstanding ecommerce book selling platform, providing its members with a diverse selection of medical books to meet their needs.', + // tech: ['React', 'NextJS', 'MaterialUI'], + // url: 'https://afkebooks.vercel.app/', + // image: '/images/projects/afkebooks.png' + // }, + // { + // id: 14, + // title: 'E Health Care', + // des: 'E-Health Care is a web application allowing users to check their heart condition based on their symptoms. If the inserted symptoms match those of a disease, the system will advise consulting with the appropriate physician.', + // tech: ['HTML', 'Bootstrap', 'JavaScript'], + // url: 'https://e-health-care.vercel.app/', + // image: '/images/projects/e-health-care.png' + // }, + // { + // id: 15, + // title: 'Pirox', + // des: 'A portfolio website for PIROX Software Solutions for showcasing their web development, app development, marketing and etc services.', + // tech: ['HTML', 'Bootstrap', 'JavaScript'], + // url: 'https://pirox.vercel.app/', + // image: '/images/projects/pirox.png' + // }, + // { + // id: 16, + // title: 'Disnep Clone', + // des: 'Disney+ says is not available in my region. As a solution, I have developed a clone of Disney+ landing page using React.', + // tech: ['React', 'StyledComponents'], + // url: 'https://clonedisneyplus.netlify.app/', + // image: '/images/projects/disnep-clone.png' + // }, + // { + // id: 17, + // title: 'Ubot (UAPBot)', + // des: 'Ubot is an AI-powered chatbot designed to quickly and easily provide students with the information they need.', + // tech: ['React', 'StyledComponents', 'speech-recognition'], + // url: 'https://ubot.vercel.app/', + // image: '/images/projects/ubot.png' + // } +]; diff --git a/app/data/skills.js b/app/data/skills.js new file mode 100644 index 0000000..e86d992 --- /dev/null +++ b/app/data/skills.js @@ -0,0 +1,67 @@ +export const skills = [ + { + id: 5, + name: 'Figma', + logo: '/images/skills/figma.png' + }, + { + id: 1, + name: 'HTML', + logo: '/images/skills/html.png' + }, + { + id: 2, + name: 'CSS', + logo: '/images/skills/css.png' + }, + { + id: 3, + name: 'Bootstrap', + logo: '/images/skills/bootstrap.png' + }, + { + id: 4, + name: 'TailwindCSS', + logo: '/images/skills/tailwindcss.png' + }, + // { + // id: 6, + // name: 'Git', + // logo: '/images/skills/git.png', + // }, + // { + // id: 7, + // name: 'GitHub', + // logo: '/images/skills/github.png', + // }, + // { + // id: 8, + // name: 'VS Code', + // logo: '/images/skills/vscode.png', + // }, + // { + // id: 9, + // name: 'Python', + // logo: '/images/skills/python.png', + // }, + { + id: 10, + name: 'JavaScript', + logo: '/images/skills/javascript.png' + }, + { + id: 11, + name: 'React.js', + logo: '/images/skills/react.png' + }, + { + id: 12, + name: 'Next.js', + logo: '/images/skills/nextjs.png' + }, + { + id: 13, + name: 'Prisma', + logo: '/images/skills/prisma.png' + } +]; diff --git a/public/favicon.ico b/app/favicon.ico similarity index 100% rename from public/favicon.ico rename to app/favicon.ico diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..d522cf2 --- /dev/null +++ b/app/globals.css @@ -0,0 +1,71 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } +} + +@supports (font: -apple-system-body) and (-webkit-appearance: none) { + img[loading='lazy'] { + clip-path: inset(0.6px); + } +} + +@layer base { + body { + @apply bg-[#171923] text-sh-white; + } + section { + @apply py-10; + } +} + +@layer components { + .animate-up { + @apply !bg-[length:4px_3px] !bg-[0_100%] !bg-repeat-x transition-all duration-700 ease-out; + } + .animate-up:hover { + @apply !bg-[length:4px_50px]; + } + .menu-item { + @apply flex rounded-md px-2.5 py-1.5 text-xl transition ease-in hover:bg-sh-dark/20 hover:text-sh-blue; + } + .active { + @apply bg-sh-dark text-sh-blue hover:bg-sh-dark; + } + .text-transparent { + color: transparent; + } + .wrap-avater { + --f: 1; /* initial scale */ + @apply aspect-square w-[200px] rounded-[0_0_999px_999px] pt-10 outline outline-[3px] outline-offset-[-3px] outline-sh-blue duration-500; + + background: radial-gradient( + circle closest-side, + #8e80c9 calc(99% - 3px), + #1985ff calc(100% - 3px) 99%, + #0000 + ) + 50% / calc(100% / var(--f)) 100% no-repeat content-box; + + mask: + linear-gradient(#000 0 0) no-repeat 50% 6px / calc(100% - 12px) 50%, + radial-gradient(circle closest-side, #000 99%, #0000) 50% / calc(100% / var(--f)) 100% + no-repeat content-box; + + transform: scale(var(--f)); + } + .wrap-avater:hover { + --f: 1.1; + background: radial-gradient( + circle closest-side, + #474064 calc(99% - 2px), + #1985ff calc(100% - 2px) 99%, + #0000 + ) + 50% / calc(100% / var(--f)) 100% no-repeat content-box; + } +} diff --git a/app/layout.js b/app/layout.js new file mode 100644 index 0000000..f7eaea1 --- /dev/null +++ b/app/layout.js @@ -0,0 +1,132 @@ +import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google'; +import { ViewTransitions } from 'next-view-transitions'; +import { Cabin } from 'next/font/google'; + +import Footer from '../components/footer'; +import Navbar from '../components/navbar'; +import { BASE_URL } from '../lib/constants'; +import './globals.css'; + +const cabin = Cabin({ + subsets: ['latin'], + display: 'swap' +}); +export const viewport = { + colorScheme: 'only dark', + themeColor: '#1A1F2A' +}; +export async function generateMetadata() { + return { + referrer: 'origin', + pageType: 'Portfolio', + other: { + 'page-type': 'Portfolio', + copyright: 'Shahriar Shafin', + audience: 'Everyone', + 'itemProp:name': 'Shahriar Shafin | Frontend Developer', + 'itemProp:description': + 'Shahriar Shafin is a web designer & front-end web developer based in Dhaka, Bangladesh', + 'itemProp:image': `${BASE_URL}/opengraph-image.png` + }, + metadataBase: new URL(BASE_URL), + + title: { + default: 'Shahriar Shafin | Frontend Developer', + template: '%s | Shahriar Shafin' + }, + verification: { + google: 'process.env.NEXT_PUBLIC_GOOGLE_VERIFICATION' + }, + + description: + 'Frontend developer specializing in React.js & Next.js. Building excellent software that improves lives through open source contributions and innovative web solutions', + + applicationName: 'Shahriar Shafin', + + keywords: [ + 'shafin', + 'shafin uap', + 'shahriar shafin', + 'shafin website', + 'shafin bd', + 'shafin portfolio', + 'frontend developer', + 'web developer', + 'React.js', + 'Next.js', + 'TailwindCSS', + 'Bangladesh', + 'open source contributor' + ], + authors: [{ name: 'Shahriar Shafin', url: BASE_URL }], + creator: 'Shahriar Shafin', + publisher: 'Shahriar Shafin', + + openGraph: { + title: 'Shahriar Shafin', + description: + 'Frontend developer specializing in React.js & Next.js. Building excellent software that improves lives through open source contributions and innovative web solutions', + authors: ['Shahriar Shafin'], + url: BASE_URL, + siteName: 'Shahriar Shafin', + locale: 'en_US', + type: 'website', + images: [ + { + url: `${BASE_URL}/opengraph-image.png`, + width: 1200, + height: 630, + alt: 'Shahriar Shafin | Frontend Developer', + type: 'image/png' + } + ] + }, + twitter: { + card: 'summary_large_image', + title: 'Shahriar Shafin', + description: + 'Frontend developer specializing in React.js & Next.js. Building excellent software that improves lives through open source contributions and innovative web solutions', + images: [`${BASE_URL}/opengraph-image.png`], + creator: '@connectshafin', + site: '@connectshafin', + url: BASE_URL + }, + icons: { + icon: '/icon.png' + }, + manifest: `${BASE_URL}/manifest.json`, + robots: { + index: true, + follow: true, + nocache: false, + googleBot: { + index: true, + follow: true, + noimageindex: false + } + }, + languages: { + 'en-US': '/en-US' + } + }; +} + +export default function RootLayout({ children }) { + return ( + + + + + +
+
+ {children} +
+
+