diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..da49e60 --- /dev/null +++ b/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.idea/ +.next + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/README.md b/README.md new file mode 100644 index 0000000..b12f3e3 --- /dev/null +++ b/README.md @@ -0,0 +1,34 @@ +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). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. + +[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.js`. + +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. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +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. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/components/ConnectSection/ConnectSection.js b/components/ConnectSection/ConnectSection.js new file mode 100644 index 0000000..9ab9e39 --- /dev/null +++ b/components/ConnectSection/ConnectSection.js @@ -0,0 +1,48 @@ +import styles from "./ConnectSection.module.css"; + +const ConnectSection = () => { + return ( +
+

CONNECT

+ +
+ ); +}; + +export default ConnectSection; diff --git a/components/ConnectSection/ConnectSection.module.css b/components/ConnectSection/ConnectSection.module.css new file mode 100644 index 0000000..0208027 --- /dev/null +++ b/components/ConnectSection/ConnectSection.module.css @@ -0,0 +1,41 @@ +.connectSection { + padding: 5rem 1rem; +} + +.connectSection__title { + color: var(--color-yellow-3); + font-size: 2.4rem; + letter-spacing: 0.1rem; + margin-bottom: 2rem; + text-align: center; +} + +.connectSection__list { + list-style: none; + display: flex; + justify-content: center; + align-items: center; + gap: 3rem; + flex-wrap: wrap; +} + +.connectSection__link { + display: flex; +} + +.connectSection__icon { + width: 3.2rem; + height: 3.2rem; + fill: var(--color-red-4); + transition: all 250ms ease; +} + +.connectSection__link:hover .connectSection__icon { + fill: var(--color-yellow-2); +} + +@media (min-width: 48em) { + .connectSection__title { + text-align: initial; + } +} diff --git a/components/Footer/Footer.js b/components/Footer/Footer.js new file mode 100644 index 0000000..d62b37e --- /dev/null +++ b/components/Footer/Footer.js @@ -0,0 +1,5 @@ +const Footer = () => { + return
Footer
; +}; + +export default Footer; diff --git a/components/Footer/Footer.module.css b/components/Footer/Footer.module.css new file mode 100644 index 0000000..e69de29 diff --git a/components/Header/Header.js b/components/Header/Header.js new file mode 100644 index 0000000..ec33d77 --- /dev/null +++ b/components/Header/Header.js @@ -0,0 +1,38 @@ +import Link from "next/link"; +import styles from "./Header.module.css"; +import cn from "classnames"; + +const Header = () => { + return ( +
+ +
+ ); +}; + +export default Header; diff --git a/components/Header/Header.module.css b/components/Header/Header.module.css new file mode 100644 index 0000000..cab768d --- /dev/null +++ b/components/Header/Header.module.css @@ -0,0 +1,46 @@ +.header { + padding: 2.4rem 1.6rem; + background-color: var(--color-dark); + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 10; + color: var(--color-orange-1); + color: var(--color-yellow-1); + font-size: 2.3rem; + letter-spacing: 0.1rem; +} + +.header__nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +.header__list { + list-style: none; + display: flex; +} +.header__list--left { +} +.header__list--right { + display: none; + gap: 2rem; +} +.header__link { + display: flex; + justify-content: center; + align-items: center; +} + +.header__list-item { +} + +.header__list-item--se { +} + +@media (min-width: 48em) { + .header__list--right { + display: flex; + } +} diff --git a/components/IntroSection/IntroSection.js b/components/IntroSection/IntroSection.js new file mode 100644 index 0000000..caad7d6 --- /dev/null +++ b/components/IntroSection/IntroSection.js @@ -0,0 +1,12 @@ +import styles from './IntroSection.module.css'; + +const IntroSection = () => { + return ( +
+

Hello, my name is Ghufran Ullah.

+

I am a Software Engineer.

+
+ ); +}; + +export default IntroSection; diff --git a/components/IntroSection/IntroSection.module.css b/components/IntroSection/IntroSection.module.css new file mode 100644 index 0000000..5f29b8f --- /dev/null +++ b/components/IntroSection/IntroSection.module.css @@ -0,0 +1,30 @@ +.introSection { + padding: 5rem 1rem; + color: var(--color-yellow-1); +} + +.introSection__title { + font-family: 'Raleway', sans-serif; + font-size: 3rem; + font-weight: bold; + margin-bottom: 1rem; + text-align: center; +} + +.introSection__description { + font-family: 'Libre Baskerville', serif; + font-size: 2rem; + text-align: center; +} + +@media (min-width: 48em) { + .introSection__title { + text-align: initial; + font-size: 3.6rem; + } + + .introSection__description { + text-align: initial; + font-size: 2.4rem; + } +} diff --git a/components/Layout/Layout.js b/components/Layout/Layout.js new file mode 100644 index 0000000..d9995a8 --- /dev/null +++ b/components/Layout/Layout.js @@ -0,0 +1,15 @@ +import styles from './Layout.module.css'; +import Footer from '../Footer/Footer'; +import Header from '../Header/Header'; + +const Layout = ({ children }) => { + return ( + <> +
+
{children}
+