first commit

.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/no-unescaped-entities": "off",
+    "@typescript-eslint/quotes": "off",
+    "quotes": [0],
+    "avoidEscape": 0,
+    "allowTemplateLiterals": 0,
+    "no-useless-escape": 0
+  }
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,40 @@
+<<<<<<< HEAD
+# shivansh.
+=======
+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
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## 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.
+>>>>>>> 3143765 (added)

app/contact/page.jsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import { FaPhoneAlt, FaEnvelope, FaMapMarkerAlt } from "react-icons/fa";
+import { Description } from "@radix-ui/react-dialog";
+
+const info = [
+  {
+    icon: <FaPhoneAlt />,
+    title: "Phone",
+    description: "+91 7599184535",
+  },
+  {
+    icon: <FaEnvelope />,
+    title: "Email",
+    description: "[email protected]",
+  },
+  {
+    icon: <FaMapMarkerAlt />,
+    title: "Address",
+    description: "Code Corner, Tech Town 1343",
+  },
+];
+import { motion } from "framer-motion";
+
+const Contact = () => {
+  return (
+    <motion.section
+      initial={{ opacity: 0 }}
+      animate={{
+        opacity: 1,
+        transition: { delay: 2.4, duration: 0.4, ease: "easeIn" },
+      }}
+      className="py-6 "
+    >
+      <div className="container mx-auto">
+        <div className="flex flex-col xl:flex-row gap-[30px] ">
+          {/* form */}
+          <div className="xl:w-[54%] order-2 xl:order-none ">
+            <form className="flex flex-col gap-6 p-10 bg-[#27272c] rounded-xl ">
+              <h3 className="text-4xl text-accent">Let's work together</h3>
+            <p className="text-white/60"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
+               magnam porro magni natus ipsa molestias. 
+            </p>
+            {/* input */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <Input type="firstname" placeholder="Firstname" />
+              <Input type="lastname" placeholder="Lastname" />
+              <Input type="email" placeholder="Email address" />
+              <Input type="phone" placeholder="Phone number" />
+            </div>
+            {/* select */}
+            <Select>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select a service"  />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>Select a service</SelectLabel>
+                  <SelectItem value="est">Web Development</SelectItem>
+                  <SelectItem value="cst">UI/UX Design</SelectItem>
+                  <SelectItem value="mst">Logo Design</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            {/* textarea */}
+            <Textarea 
+            className="h-[200px] "
+            placeholder="Type your message here."
+            />
+            {/* button */}
+            <Button size="md" className="max-w-40" >Send message</Button>
+            </form>
+          </div>
+          {/* info */}
+          <div className="flex-1 flex items-center xl:justify-end order-1 xl:order-none mb-8 xl:mb-0">
+            <ul className="flex flex-col gap-10">
+              {info.map((item, index) =>{
+                return ( <li key={index} className="flex items-center gap-6">
+                  <div className=" w-[52px] h-[52px] xl:w-[72px] xl:h-[72px] bg-[#27272c] text-accent rounded-md flex items-center justify-center ">
+                    <div className="text-[28px] " >{item.icon}</div>
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-white/60">{item.title}</p>
+                    <h3 className="text-xl">{item.description}</h3>
+                  </div>
+                </li>
+                );  
+            } )}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </motion.section>
+  );
+};
+
+export default Contact;

app/globals.css

@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base{
+    body{
+        @apply font-primary bg-primary text-white leading-loose;
+    }
+    .h1{
+        @apply text-[48px] xl:text-[88px] leading-[1.1] font-semibold; 
+    }
+    .h2{
+        @apply text-[36px] xl:text-[48px] leading-[1.1] font-semibold; 
+    }
+    .h3{
+        @apply text-[20px] xl:text-[24px] leading-[1.1] font-semibold; 
+    }
+    .text-outline  {
+        -webkit-text-stroke: 1px #ffffff;
+    }
+    .text-outline-hover {
+        -webkit-text-stroke: 1px #00ff99;
+    }
+}

app/layout.jsx

@@ -0,0 +1,32 @@
+import { JetBrains_Mono } from "next/font/google";
+import "./globals.css";
+
+//components
+import Header from "@/components/ui/header";
+import PageTransition from "@/components/ui/PageTransition";
+import StairTransition from "@/components/ui/StairTransition";
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800"],
+  variable: "--font-jetbrainsMono",
+});
+
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={jetbrainsMono.variable}>
+        <Header />
+        <StairTransition />
+        <PageTransition>
+          {children}
+        </PageTransition>
+      </body>
+    </html>
+  );
+}

app/page.jsx

@@ -0,0 +1,59 @@
+import { Button } from "@/components/ui/button";
+import { FiDownload } from "react-icons/fi";
+//components
+import Social from "@/components/ui/Social";
+import Photo from "@/components/ui/Photo";
+import Stats from "@/components/ui/Stats";
+const Home = () => {
+  return (
+    <section className="h-full">
+      <div className="container mx-auto h-full">
+        <div
+          className="flex mx-12 my-5 flex-col xl:flex-row items-center justify-between
+       xl:pt-8 xl:pb-24"
+        >
+          {/*text*/}
+          <div className="text-center xl:text-left order-2 xl:order-none">
+            <span className="text-xl">Software Developer</span>
+            <h1 className="h1">
+              Hello I'm <br />{" "}
+            </h1>
+              <h1 className="h2">
+              <span className="text-accent">Shivansh Kaushik</span>
+            </h1>
+            <p className="max-w-[500px] mb-9 text-white/80">
+              I excel at crafting elegant digital experiences and I am
+              proficient in various languages and technologies.
+            </p>
+            {/*btn and socials*/}
+            <div className="flex flex-col xl:flex-row items-center gap-8">
+              <Button
+                variant="outline"
+                size="lg"
+                className="uppercase flex items-center gap-2"
+              >
+                <span>Download CV</span>
+                <FiDownload className="text-xl" />
+              </Button>
+              <div className="mb-8 xl:mb-0">
+                <Social  
+                  containerStyles="flex gap-6"
+                  iconStyles="w-9 h-9 border border-accent rounded-full
+                  flex justify-center items-center text-accent text-base 
+                  hover:bg-accent hover:text-primary hover:transition-all duration-500" 
+                  />
+              </div>
+            </div>
+          </div>
+          {/*photo*/}
+          <div className="order-1 xl:order-none mb-8 xl:mb-0">
+            <Photo />
+          </div>
+        </div>
+      </div>
+      <Stats />
+    </section>
+  );
+};
+
+export default Home;