Skip to content

Commit

Permalink
f
Browse files Browse the repository at this point in the history
  • Loading branch information
@neerajrekwar
neerajrekwar committed Jul 16, 2024
1 parent c1c1f8b commit 5f21dca
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 108 deletions.
104 changes: 9 additions & 95 deletions app/components/StickyRelativeDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const source_Code_Pro = Source_Code_Pro({
const StickyRelativeDemo: NextPage = () => {
return (
<div className="m-auto scroll-smooth text-secondary justify-between p-2 max-h-fit max-w-6xl">
<div className="justify-start flex items-center gap-2 sm:gap-1 py-10 text-2xl font-semibold visible sm:text-4xl">
<div className="justify-start flex text-secondary items-center gap-2 sm:gap-1 py-10 text-2xl font-semibold visible sm:text-4xl">
<div className="text-4xl text-third sm:text-5xl sm:mx-2">
&#8226;
</div>
Expand All @@ -23,7 +23,7 @@ const StickyRelativeDemo: NextPage = () => {
<div className="relative visible top-0 flex min-h-full basis-1/2 flex-col justify-between border-rose-500 sm:gap-10">
<div className="sticky top-0 will-change-transform overflow-hidden z-10 pt-10 items-center justify-center border-green-500">
<div className="flex flex-wrap border-yellow-400">
<div className="mb-4 max-w-fit rounded-full border bg-seven border-tBorder font-semibold text-thirdText px-3 py-1 antialiased text-sm">
<div className="mb-4 max-w-fit rounded-full border bg-seven border-four font-semibold text-five border-five px-3 py-1 antialiased text-sm">
2024
</div>
</div>
Expand All @@ -43,20 +43,20 @@ const StickyRelativeDemo: NextPage = () => {
</div>
</div>
<div className="text-sm text-four pt-12 ">
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
<li className="text-thirdText font-normal">Role</li>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder text-secodary">
<li className="text-four font-normal">Role</li>
<li>Digital Marketing</li>
</ul>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
<li className="text-thirdText font-normal">Deliverables</li>
<li className="text-four font-normal">Deliverables</li>
<li>Survey checks</li>
</ul>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder ">
<li className="text-thirdText font-normal">Company</li>
<li className="text-four font-normal">Company</li>
<li>VMR</li>
</ul>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
<li className="text-thirdText font-normal">Visit Site</li>
<li className="text-four font-normal">Visit Site</li>
<li className="px-2">
<Link href="https://veecrew.com" className="">
<svg
Expand All @@ -77,94 +77,7 @@ const StickyRelativeDemo: NextPage = () => {
</div>
</div>
<div className="relative basis-1/2 pt-10 overflow-hidden border-rose-500">
<div className="mb-4 max-w-fit rounded-full border bg-seven border-tBorder font-semibold text-thirdText px-3 py-1 antialiased text-sm">
Showcase
</div>
<div className="grid gap-4 p-2 pt-4 sm:gap-10">
<Image
src={"/projects/mypro.png"}
alt={"My Profile Picture"}
width={300}
height={300}
className="min-w-full min-h-full rounded-2xl "
/>

<Image
src={"/projects/mypro.png"}
alt={"My Profile Picture"}
width={300}
height={300}
className="min-w-full min-h-full rounded-2xl "
/>
<Image
src={"/projects/mypro.png"}
alt={"My Profile Picture"}
width={300}
height={300}
className="min-w-full min-h-full rounded-2xl "
/>
</div>
</div>
</div>
<div className="relative m-auto min-h-screen max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">
<div className="relative visible top-0 flex min-h-full basis-1/2 flex-col justify-between border-rose-500 sm:gap-10">
<div className="sticky top-0 will-change-transform overflow-hidden z-10 pt-10 items-center justify-center border-green-500">
<div className="flex flex-wrap border-yellow-400">
<div className="mb-4 max-w-fit rounded-full border bg-seven border-tBorder font-semibold text-thirdText px-3 py-1 antialiased text-sm">
2024
</div>
</div>
<div className="border-yellow-400 sm:pr-10">
<div className="max-w-2xl">
<h2 className="text-2xl text-secodary py-3 pb-3 font-semibold ">
Craft &amp; Code: Building the Future, One Line at a Time
</h2>
<div>
<p className="text-four text-base">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae quo natus accusantium eius molestiae expedita
possimus accusamus, aspernatur, quia quae asperiores
inventore. Quod, officia vel aliquam exercitationem est
inventore porro?
</p>
</div>
</div>
<div className="text-sm text-four pt-12 ">
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
<li className="text-thirdText font-normal">Role</li>
<li>Digital Marketing</li>
</ul>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
<li className="text-thirdText font-normal">Deliverables</li>
<li>Survey checks</li>
</ul>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder ">
<li className="text-thirdText font-normal">Company</li>
<li>VMR</li>
</ul>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
<li className="text-thirdText font-normal">Visit Site</li>
<li className="px-2">
<Link href="https://veecrew.com" className="">
<svg
xmlns="http://www.w3.org/2000/svg"
className="hover:fill-third"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="--priamryText"
>
<path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" />
</svg>
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="relative basis-1/2 pt-10 overflow-hidden border-rose-500">
<div className="mb-4 max-w-fit rounded-full border bg-seven border-tBorder font-semibold text-thirdText px-3 py-1 antialiased text-sm">
<div className="mb-4 max-w-fit rounded-full border bg-seven border-four font-semibold text-five border-five px-3 py-1 antialiased text-sm">
Showcase
</div>
<div className="grid gap-4 p-2 pt-4 sm:gap-10">
Expand Down Expand Up @@ -193,6 +106,7 @@ const StickyRelativeDemo: NextPage = () => {
</div>
</div>
</div>



</div>
Expand Down
2 changes: 1 addition & 1 deletion app/components/infiniteCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { InfiniteMovingCards } from "./ui/infinite-moving-cards";

export function InfiniteMovingCardsDemo() {
return (
<div className="flex flex-col antialiased bg-white items-center justify-center relative overflow-hidden">
<div className="flex flex-col antialiased items-center justify-center relative overflow-hidden">
<InfiniteMovingCards
items={testimonials}
direction="right"
Expand Down
11 changes: 6 additions & 5 deletions app/components/ui/infinite-moving-cards.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
"use client";

import { cn } from "@/app/utils/cn";
import React, { useEffect, useState } from "react";

Expand Down Expand Up @@ -86,10 +87,10 @@ export const InfiniteMovingCards = ({
>
{items.map((item, idx) => (
<li
className="w-[350px] max-w-full relative rounded-2xl border border-b-0 flex-shrink-0 border-slate-700 px-8 py-6 md:w-[450px]"
className="w-[350px] max-w-full relative rounded-2xl font-semibold flex-shrink-0 text-secondary border-slate-700 px-8 py-6 md:w-[450px]"
style={{
background:
"linear-gradient(180deg, var(--slate-800), var(--slate-900)",
"var(--seven)",
}}
key={item.name}
>
Expand All @@ -98,15 +99,15 @@ export const InfiniteMovingCards = ({
aria-hidden="true"
className="user-select-none -z-1 pointer-events-none absolute -left-0.5 -top-0.5 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)]"
></div>
<span className="relative z-20 text-sm leading-[1.6] text-gray-100 font-normal">
<span className=" relative z-20 text-sm leading-[1.6] text-five font-normal">
{item.quote}
</span>
<div className="relative z-20 mt-6 flex flex-row items-center">
<span className="flex flex-col gap-1">
<span className="text-sm leading-[1.6] text-gray-400 font-normal">
<span className=" text-sm leading-[1.6] text-four font-semibold">
{item.name}
</span>
<span className="text-sm leading-[1.6] text-gray-400 font-normal">
<span className=" text-sm leading-[1.6] text-five font-semibold">
{item.title}
</span>
</span>
Expand Down
38 changes: 38 additions & 0 deletions app/components/visionSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
export default function VisionSection() {
const svgStyles = {
width: "auto",
height: "100vh",
filter: "contrast(170%) brightness(1000%)",
background:
"linear-gradient(0deg, rgba(0,0,255,1), rgba(0,0,0,0)), url(/projects/noise.svg)",
};

return (
<>
<div className="p-2 min-h-screen max-w-6xl m-auto">
<div className="justify-start text-secondary flex items-center gap-2 sm:gap-1 py-10 text-2xl font-semibold visible sm:text-4xl">
<div className="text-4xl text-third sm:text-5xl sm:mx-2">
&#8226;
</div>
Work Experince
</div>

<div>
<div className="">
<div className="m-2 md:flex justify-between items-center border-b-1">
<h4 className=" text-four font-semibold md:text-2xl">Adminstrative Assistant</h4>
<ul className="flex py-2 gap-2 md:gap-4 text-xs md:text-1xl text-five text-center">
<li className="p-1 px-2 max-w-fit border-1 bg-seven rounded-full text-center">
VMR Pvt. Ltd.
</li>
<li className="p-1 px-2 max-w-fit border-1 bg-seven rounded-full text-center">
2021 sep - 2022 fab
</li>
</ul>
</div>
</div>
</div>
</div>
</>
);
}
10 changes: 3 additions & 7 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@ import type { Metadata } from "next";
import HomeSectionHeader from "./components/homeSectionHeader";
import AdminWeather from "./components/AdminWeather";
import IntroSection from "./components/introSection";
import DeviceAddress from "./components/DeviceAddress";
import { InfiniteMovingCardsDemo } from "./components/infiniteCard";
import { ReviewSection } from "./components/reviewSection";
import DarkModeToggle from "./components/DarkModeToggle";
import VisionSection from "./components/visionSection";

export const metadata: Metadata = {
title: "nee. - Portfolio Framer Template For Freelancers",
Expand All @@ -25,11 +24,8 @@ export default function Home() {
<section className="">
<ReviewSection/>
</section>
<section id="vision" className="h-screen flex flex-col justify-center items-center">
<div>
<DarkModeToggle/>
</div>
Vision to learn
<section id="vision" className="mt-20">
<VisionSection/>
</section>
<div className="flex flex-col bg-primary items-center justify-center min-h-screen py-2">
<AdminWeather />
Expand Down
Binary file added public/background/javier-miranda-AlJ9TQqeCV0-unsplash.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions public/projects/noise.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5f21dca

Please sign in to comment.