Hero Page setup

darsan-in · Jul 2, 2024 · 87a3236 · 87a3236
1 parent 1cc6eda
commit 87a3236
Show file tree

Hide file tree

Showing 21 changed files with 1,935 additions and 194 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,10 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = tab
+indent_size = 4
+
diff --git a/.github/workflows/ftpdeploy.yml b/.github/workflows/ftpdeploy.yml
@@ -0,0 +1,73 @@
+name: "Deploy Static Files to GH-pages"
+
+on:
+  workflow_dispatch:
+
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checking Out"
+        uses: actions/[email protected]
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: |
+          echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+      - name: "Caching yarn"
+        uses: actions/[email protected]
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: "Caching build"
+        uses: actions/[email protected]
+        with:
+          path: |
+            ~/.npm
+            ${{ github.workspace }}/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+
+      - name: Setting Up Node.js
+        uses: actions/[email protected]
+        with:
+          node-version: "21"
+          cache: "yarn"
+
+      - name: Installing dependencies
+        run: yarn install
+
+      - name: Generating Static Files
+        run: yarn build
+
+  deploy:
+   needs: build
+
+   permissions:
+    pages: write
+    id-token: write
+
+   environment:
+	 name: github-pages
+	 url: ${{ steps.deployment.outputs.page_url }}
+
+   runs-on: ubuntu-latest
+	steps:
+	  - name: Deploy to GitHub Pages
+		id: deployment
+		uses: actions/[email protected] # or specific "vX.X.X" version tag for this action
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+dist
+node_modules
+.next
+kinact-package
+next-env.d.ts
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,15 @@
+{
+
+  "bracketSameLine": true,
+  "semi": true,
+  "proseWrap": "always",
+  "printWidth": 75,
+  "arrowParens": "always",
+  "singleAttributePerLine": true,
+  "trailingComma": "all",
+  "embeddedLanguageFormatting": "auto",
+  "experimentalTernaries": true,
+  "parser": "typescript",
+  "tabWidth": 2,
+  "useTabs": true
+}
diff --git a/LICENSE b/LICENSE
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,86 @@
+import { HiDocumentArrowDown } from "react-icons/hi2";
+import { IoCallSharp, IoMail } from "react-icons/io5";
+import { RiGithubFill, RiLinkedinFill } from "react-icons/ri";
+import "./src/styles/globals.scss";
+import style from "./src/styles/style.module.scss";
+
+export const metadata = {
+	title:
+		"DARSAN (@iamspdarsan)- Expert in Web, Desktop, Mobile Development & SEO",
+	description: "",
+};
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	const bannerIconSize: number = 20;
+	const iconBgClasses: string =
+		"w-8 h-8 flex-none rounded-full flex items-center justify-center text-white " +
+		style.bannerIcon;
+
+	return (
+		<html lang="en">
+			<body>
+				<header className="h-15 rounded-b-lg bg-indigo-100">
+					<div className="max-w-screen-xl mx-auto px-4 py-3 items-center justify-between text-white sm:flex md:px-8">
+						<div className="flex gap-x-4 text-sm text-black">
+							<a
+								href="https://github.com/iamspdarsan"
+								className="flex gap-x-2">
+								<div className={iconBgClasses + " bg-black"}>
+									<RiGithubFill size={bannerIconSize} />
+								</div>
+								<p className="py-2">@iamspdarsan</p>
+							</a>
+
+							<a
+								href="https://www.linkedin.com/in/iamspdarsan/"
+								className="flex gap-x-2">
+								<div className={iconBgClasses + " bg-blue-600"}>
+									<RiLinkedinFill size={bannerIconSize} />
+								</div>
+								<p className="py-2">@iamspdarsan</p>
+							</a>
+
+							<a
+								href="mailto:[email protected]"
+								className="flex gap-x-2">
+								<div className={iconBgClasses + " bg-green-600"}>
+									<IoMail size={bannerIconSize} />
+								</div>
+								<p className="py-2">[email protected]</p>
+							</a>
+
+							<a
+								href="tel:+91-6381866191"
+								className="flex gap-x-2">
+								<div className={iconBgClasses + " bg-teal-600"}>
+									<IoCallSharp size={bannerIconSize} />
+								</div>
+								<p className="py-2">+91-6381866191</p>
+							</a>
+
+							<a
+								href="cv.pdf"
+								className="flex gap-x-2">
+								<div className={iconBgClasses + " bg-yellow-600"}>
+									<HiDocumentArrowDown size={bannerIconSize} />
+								</div>
+								<p className="py-2">Resume</p>
+							</a>
+						</div>
+
+						<a
+							href="#works"
+							className="inline-block w-full mt-3 py-2 px-3 text-center text-white font-medium bg-indigo-600 duration-150 hover:bg-indigo-800 active:bg-indigo-800 rounded-lg sm:w-auto sm:mt-0 sm:text-sm border border-indigo-600">
+							Hire me
+						</a>
+					</div>
+				</header>
+				{children}
+			</body>
+		</html>
+	);
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import Skills from "./src/components/skills";
+
+export default function HomePage() {
+	const navigation = [
+		{ title: "Works", path: "" },
+		{ title: "Experience", path: "" },
+		{ title: "Achievments", path: "" },
+	];
+
+	return (
+		<>
+			<nav className="relative mt-9 items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 md:flex md:space-x-6">
+				<div className="flex justify-between font-jose pr-20">
+					<a href="">
+						<p className="block w-full mt-2 text-center text-indigo-600 font-bold duration-1000 hover:text-blue-700 active:bg-gray-200 rounded-lg sm:w-auto sm:mt-0 sm:text-sm lg:text-8xl">
+							PRIYADARSAN
+						</p>
+					</a>
+				</div>
+
+				<ul
+					className={`flex-1 justify-between mt-12 md:text-lg md:font-medium md:flex md:mt-0 ${"absolute inset-x-0 px-4 border-b bg-white md:border-none md:static"}`}>
+					<div className="items-center space-y-5 md:flex md:space-x-6 md:space-y-0 md:ml-12">
+						{navigation.map((item, idx) => (
+							<li
+								className="ml-5 text-black hover:text-indigo-600 uppercase hover:underline hover:font-900"
+								key={idx}>
+								<a href={item.path}>{item.title}</a>
+							</li>
+						))}
+					</div>
+				</ul>
+			</nav>
+
+			<section className="py-20">
+				<div className="max-w-screen-xl mx-auto text-gray-600 gap-x-12 justify-between overflow-hidden md:flex md:px-8">
+					<div className="flex-none space-y-5 px-4 sm:max-w-lg md:px-0 lg:max-w-xl">
+						<h1 className="text-indigo-600 font-medium">
+							Over 30 projects completed
+						</h1>
+
+						<h2 className="text-4xl text-gray-800 font-extrabold md:text-5xl leading-loose">
+							Founder <span className="text-blue-600">@Cresteem</span> ,
+							Expert in Web, Desktop, Mobile Development & SEO
+						</h2>
+
+						<p>
+							I specialize in web, desktop, and mobile development,
+							combining innovation with meticulous craftsmanship to deliver
+							impactful software solutions. With a passion for transforming
+							ideas into reality, I lead projects that redefine user
+							experiences and drive business growth. Let's collaborate on
+							building the next generation of digital innovations.
+						</p>
+
+						<div className="items-center gap-x-3 space-y-3 sm:flex sm:space-y-0">
+							<a
+								href=""
+								className="block py-2 px-4 text-center text-white font-medium bg-indigo-600 duration-150 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg shadow-lg hover:shadow-none">
+								Explore more
+							</a>
+							<a
+								href=""
+								className="flex items-center justify-center gap-x-2 py-2 px-4 text-gray-700 hover:text-gray-500 font-medium duration-150 active:bg-gray-100 border rounded-lg md:inline-flex">
+								Works
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 20 20"
+									fill="currentColor"
+									className="w-5 h-5">
+									<path
+										fillRule="evenodd"
+										d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"
+										clipRule="evenodd"
+									/>
+								</svg>
+							</a>
+						</div>
+					</div>
+
+					<div className="flex-none mt-6 md:mt-0 md:max-w-xl">
+						<img
+							src="ai.jpg"
+							className=" md:rounded-tl-[108px] w-85"
+							alt=""
+						/>
+					</div>
+				</div>
+
+				<div className="mt-14 px-4 md:px-8">
+					<p className="text-center text-2xl text-gray-700 font-semibold">
+						<span className="text-indigo-600 text-2xl font-bold">
+							Technical Skills:
+						</span>{" "}
+						Have Been Worked with numerous technolgies
+					</p>
+
+					<div
+						className={
+							"flex justify-center items-center text-center flex-wrap gap-x-12 gap-y-6 text-sm w-100 px-20 my-10"
+						}>
+						<Skills
+							color="#4B5563"
+							iconSize={40}
+						/>
+					</div>
+				</div>
+			</section>
+		</>
+	);
+}