changes in experience

components/About.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {motion} from 'framer-motion'
+
+type Props = {}
+
+export const About = (props: Props) => {
+ return (
+ <motion.div
+ initial={{opacity:0}}
+ whileInView={{opacity:1}}
+ transition={{duration: 2.5}} 
+ className='h-screen flex flex-col relative text-center
+ md:text-left md:flex-row max-w-7xl px-10 justify-evenly mx-auto items-center'>
+ <h3 className='absolute top-20 ml-5 uppercase tracking-[20px] text-gray-500 text-2xl'>About</h3>
+ <motion.img
+ initial={{
+ x: -200,
+ opacity:0
+ }}
+ whileInView={{x:0, opacity:1}}
+ transition={{
+ duration: 1.2,
+ }}
+ className='-mb-20 md:mb-0 flex-shrink-0 w-56 h-56 rounded-full object-cover
+ md:rounded-lg md:w-64 md:96 xl:w-[475px] xl:h-[570px]'
+ // viewport={{once: true}}
+ src='https://i.ibb.co/rk0VFt6/33-BCC6-C2-1-D74-4282-8-CA5-7-A8-B5130-AB28.jpg'
+ />
+ <div className='space-y-10 px-0 md:px-10'>
+ <h4 className='text-4xl font-semibold'>Here is a <span className='underline decoration-[#F7AB0A]/50'>little</span> background</h4>
+ <p className='text-base'>Hardworking College Student with excellent problem-solving skills and ability to perform well in a team.
+ I'm passionate about writing efficient code and learning new technologies.</p>
+ </div> 
+ </motion.div>
+ )
+}

components/BackgroundCircles.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import {motion} from 'framer-motion'
+
+type Props = {}
+
+export const BackgroundCircles = (props: Props) => {
+ return (
+ <motion.div
+ initial={{
+ opacity: 0,
+ }}
+ animate={{
+ scale: [1,2,2,3,1],
+ opacity: [0.1, 0.2, 0.4, 0.8, 0.1, 1.0],
+ borderRadius: ["20%", "20%", "50%", "80%", "20%"],
+ }}
+ transition={{
+ duration: 2.5
+ }}
+ className='relative flex justify-center items-center'>
+ <div className='absolute border border-[#333333] rounded-full h-[120px] w-[120px] mt-50 animate-ping lg:h-[150px] lg:w-[150px]' />
+ <div className='absolute border border-[#333333] rounded-full h-[180px] w-[180px] mt-50 lg:h-[250px] lg:w-[250px]' />
+ <div className='absolute border border-[#333333] rounded-full h-[250px] w-[250px] mt-50 lg:h-[400px] lg:w-[400px]' />
+ <div className='rounded-full border border-[#F7AB0A] opacity-20
+ h-[300px] w-[300px] absolute mt-50 animate-pulse lg:h-[500px] lg:w-[500px]' />
+ <div className='absolute border border-[#333333] rounded-full h-[360px] w-[360px] mt-50 lg:h-[625px] lg:w-[625px]' />
+ </motion.div>
+ )
+}

components/Header.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { SocialIcon } from 'react-social-icons'
+import { motion } from 'framer-motion'
+
+type Props = {}
+
+const Header = (props: Props) => {
+ return (
+ <header className='sticky top-0 p-5 flex items-start justify-between max-w-7xl mx-auto z-20
+ xl:items-center'>
+ <motion.div
+ initial={{
+ x: -500,
+ opacity: 0,
+ scale: 0.5,
+ }}
+ animate={{
+ x: 0,
+ opacity: 1,
+ scale: 1,
+ }}
+ transition={{
+ duration: 1.5,
+ }}
+ className='flex flex-row items-center'>
+ {/* social icons */}
+ <SocialIcon
+ url='https://www.instagram.com/ayushaww'
+ fgColor='gray'
+ bgColor='transparent'
+ />
+ <SocialIcon
+ url='https://twitter.com/ayush_sri_'
+ fgColor='gray'
+ bgColor='transparent'
+ />
+ <SocialIcon
+ url='https://github.com/entrymaster'
+ fgColor='gray'
+ bgColor='transparent'
+ />
+ </motion.div>
+ <motion.div
+ initial={{
+ x: 500,
+ opacity: 0,
+ scale: 0.5,
+ }}
+ animate={{
+ x: 0,
+ opacity: 1,
+ scale: 1,
+ }}
+ transition={{
+ duration: 1.5,
+ }}
+ className='flex flex-row items-center text-gray-300 cursor-pointer'>
+ <SocialIcon
+ className='cursor-pointer'
+ network='email'
+ fgColor='gray'
+ bgColor='transparent'
+ />
+ <p className='uppercase hidden md:inline-flex text-sm text-gray-400'>Get In Touch</p>
+ </motion.div>
+ </header>
+ )
+}
+
+export default Header

components/Hero.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Cursor, useTypewriter } from 'react-simple-typewriter'
+import { BackgroundCircles } from './BackgroundCircles'
+import Image from 'next/image'
+import Link from 'next/link'
+
+type Props = {}
+
+export const Hero = (props: Props) => {
+ const [text, count] = useTypewriter({
+ words: [
+ "Hi, I'm Ayush Srivastava",
+ "<Developer />",
+ "Tech Enthusiast"
+ ],
+ loop: true,
+ delaySpeed: 2000,
+ })
+ return (
+ <div className='h-screen flex flex-col lg:pt-36 lg:-space-y-[65px] items-center justify-center
+ text-center overflow-hidden'>
+ <BackgroundCircles />
+ <div className='relative -top-[36px] lg:top-[10px]'>
+ <img
+ src={'https://i.ibb.co/xs9y62B/ca0cd4e5-bc0e-476f-be49-e0cbd33cdd12.jpg'}
+ alt="Picture of the author"
+ className='relative rounded-full h-[75px] w-[75px] mx-auto object-cover lg:h-[100px] lg:w-[100px]'
+ />
+ <div className='pt-5'>
+ <h2 className='text-xs uppercase text-gray-500 pb-2 tracking-[10px] lg:tracking-[15px]'>Software Engineer</h2>
+ <h1 className='text-2xl lg:text-4xl font-semibold px-10'>
+ <span className='mr-0.5 italic'>
+ {text}
+ </span>
+ <Cursor cursorColor='#f7ab0a' />
+ </h1>
+
+ <div className='pt-5'>
+ <Link href="#about">
+ <button className='heroButton'>About</button>
+ </Link>
+ <Link href="#experience">
+ <button className='heroButton'>Experience</button>
+ </Link>
+ <Link href="#skills">
+ <button className='heroButton'>Skills</button>
+ </Link>
+ <Link href="#projects">
+ <button className='heroButton'>Projects</button>
+ </Link>
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+}

components/WorkEx.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { motion } from 'framer-motion'
+
+type Props = {}
+
+export const WorkEx = (props: Props) => {
+ return (
+ <motion.div
+ initial={{ opacity: 0 }}
+ whileInView={{ opacity: 1 }}
+ transition={{ duration: 2.5 }}
+ className='h-screen flex relative overflow-hidden flex-col text-left md:flex-row
+ max-w-full px-10 justify-evenly mx-auto items-center'>
+ <h3 className='absolute top-20 ml-5 uppercase tracking-[20px] text-gray-500 text-2xl'>Experience</h3>
+ <div>
+
+ </div>
+ </motion.div>
+ )
+}

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  reactStrictMode: true,
+ images: {
+ domains: ["upload.wikimedia.org"]
+ }
 }
 
 module.exports = nextConfig