first commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.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

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.

components/ConnectSection/ConnectSection.js

@@ -0,0 +1,48 @@
+import styles from "./ConnectSection.module.css";
+
+const ConnectSection = () => {
+  return (
+    <section className={styles.connectSection} id="Connect">
+      <h2 className={styles.connectSection__title}>CONNECT</h2>
+      <nav>
+        <ul className={styles.connectSection__list}>
+          <li>
+            <a
+              href="https://github.com/Ghufran496"
+              target="_blank"
+              className={styles.connectSection__link}
+            >
+              <svg className={styles.connectSection__icon}>
+                <use xlinkHref="/icons/sprite.svg#icon-github"></use>
+              </svg>
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.linkedin.com/in/ghufran-ullah-b36b411b9/"
+              className={styles.connectSection__link}
+              target="_blank"
+            >
+              <svg className={styles.connectSection__icon}>
+                <use xlinkHref="/icons/sprite.svg#icon-linkedin"></use>
+              </svg>
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://uett-my.sharepoint.com/personal/20-se-34_students_uettaxila_edu_pk/_layouts/15/onedrive.aspx?id=%2Fpersonal%2F20%2Dse%2D34%5Fstudents%5Fuettaxila%5Fedu%5Fpk%2FDocuments%2FGhufranPersonal%2FghufranResume%2Epdf&parent=%2Fpersonal%2F20%2Dse%2D34%5Fstudents%5Fuettaxila%5Fedu%5Fpk%2FDocuments%2FGhufranPersonal&ga=1"
+              target="_blank"
+              className={styles.connectSection__link}
+            >
+              <svg className={styles.connectSection__icon}>
+                <use xlinkHref="/icons/sprite.svg#icon-file-pdf"></use>
+              </svg>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </section>
+  );
+};
+
+export default ConnectSection;

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;
+  }
+}

components/Footer/Footer.js

@@ -0,0 +1,5 @@
+const Footer = () => {
+  return <div>Footer</div>;
+};
+
+export default Footer;

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 (
+    <header className={styles.header}>
+      <nav className={styles.header__nav}>
+        <ul className={cn(styles.header__list, styles["header__list--left"])}>
+          <li>
+            <Link href="/">
+              <a className={styles.header__link}>GHUFRAN ULLAH</a>
+            </Link>
+          </li>
+        </ul>
+        <ul className={cn(styles.header__list, styles["header__list--right"])}>
+          <li>
+            <Link href="/">
+              <a className={styles.header__link}>HOME</a>
+            </Link>
+          </li>
+          <li>
+            <Link href="#Project">
+              <a className={styles.header__link}>PROJECTS</a>
+            </Link>
+          </li>
+          <li>
+            <Link href="#Connect">
+              <a className={styles.header__link}>CONNECT</a>
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;

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;
+  }
+}

components/IntroSection/IntroSection.js

@@ -0,0 +1,12 @@
+import styles from './IntroSection.module.css';
+
+const IntroSection = () => {
+  return (
+    <section className={styles.introSection}>
+      <h1 className={styles.introSection__title}>Hello, my name is Ghufran Ullah.</h1>
+      <p className={styles.introSection__description}>I am a Software Engineer.</p>
+    </section>
+  );
+};
+
+export default IntroSection;

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;
+  }
+}

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 (
+    <>
+      <Header />
+      <main className={styles.main}>{children}</main>
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;

components/Layout/Layout.module.css

@@ -0,0 +1,8 @@
+.container {
+}
+
+.main {
+  max-width: 96rem;
+  padding: 0 5vh;
+  margin: auto;
+}

components/Project/Project.js

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import styles from "./Project.module.css";
+
+const Project = ({ title, imgUrl, link }) => {
+  return (
+    <Link href={link}>
+      <a className={styles.project} target="_blank">
+        <div
+          className={styles["project__img-wrapper"]}
+          style={{
+            backgroundImage: `linear-gradient(to bottom right, rgba(3, 7, 30, 0.5), rgba(3, 7, 30, 0.2)), url(${imgUrl})`,
+            backgroundSize: "cover",
+            backgroundPosition: "top left",
+          }}
+        ></div>
+        <h3 className={styles.project__title}>{title}</h3>
+      </a>
+    </Link>
+  );
+};
+
+export default Project;

components/Project/Project.module.css

@@ -0,0 +1,30 @@
+.project {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 1rem;
+  text-align: center;
+  border-radius: 7px;
+  transition: all 250ms ease;
+  background-color: var(--color-red-4);
+  overflow: hidden;
+  gap: 1rem;
+}
+
+.project__title {
+  color: var(--color-yellow-1);
+  font-size: 2rem;
+  letter-spacing: 0.1rem;
+}
+
+.project__img-wrapper {
+  width: 30rem;
+  height: 25rem;
+}
+
+.project__img {
+}
+
+.project:hover {
+  transform: scale(1.03);
+}