Skip to content

Commit

Permalink
rename Javascript to JavaScript, more changes to about js code
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArushYadlapati
ArushYadlapati committed Aug 17, 2024
1 parent 859abe7 commit fed79dd
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 138 deletions.
277 changes: 142 additions & 135 deletions app/components/homepage/hero-section/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,153 +1,160 @@
// @flow strict

import { personalData } from "@/utils/data/personal-data";
import {personalData} from "@/utils/data/personal-data";
import Image from "next/image";
import Link from "next/link";
import {BsDiscord, BsGithub, BsLinkedin} from "react-icons/bs";
import { MdDownload } from "react-icons/md";
import { RiContactsFill } from "react-icons/ri";
import {MdDownload} from "react-icons/md";
import {RiContactsFill} from "react-icons/ri";

import TypeAnimation from './TypeAnimation';

function HeroSection() {
return (
<section className="relative flex flex-col items-center justify-between py-4 lg:py-12">
<Image
src="./hero.svg"
alt="Hero"
width={1572}
height={795}
className="absolute -top-[98px] -z-10"
/>
return (
<section className="relative flex flex-col items-center justify-between py-4 lg:py-12">
<Image
src="./hero.svg"
alt="Hero"
width={1572}
height={795}
className="absolute -top-[98px] -z-10"
/>

<div className="grid grid-cols-1 items-start lg:grid-cols-2 lg:gap-12 gap-y-8">
<div className="order-2 lg:order-1 flex flex-col items-start justify-center p-2 pb-20 md:pb-10 lg:pt-10">
<h1 className="text-3xl font-bold leading-10 text-white md:font-extrabold lg:text-[2.6rem] lg:leading-[3.5rem]">
Hi, <br/>
{/* eslint-disable-next-line react/no-unescaped-entities */}
I'm {' '}
<span className=" text-pink-500">{personalData.name}</span>
{`, and I am a`}
<br/>
<TypeAnimation />
.
</h1>
<div className="grid grid-cols-1 items-start lg:grid-cols-2 lg:gap-12 gap-y-8">
<div
className="order-2 lg:order-1 flex flex-col items-start justify-center p-2 pb-20 md:pb-10 lg:pt-10">
<h1 className="text-3xl font-bold leading-10 text-white md:font-extrabold lg:text-[2.6rem] lg:leading-[3.5rem]">
Hi, <br/>
{/* eslint-disable-next-line react/no-unescaped-entities */}
I'm {' '}
<span className=" text-pink-500">{personalData.name}</span>
{`, and I am a`}
<br/>
<TypeAnimation/>
.
</h1>

<div className="my-12 flex items-center gap-5">
<Link
href={personalData.github}
target='_blank'
className="transition-all text-pink-500 hover:scale-125 duration-300"
>
<BsGithub size={30} />
</Link>
<Link
href={personalData.discord}
target='_blank'
className="transition-all text-pink-500 hover:scale-125 duration-300"
>
<BsDiscord size={30} />
</Link>
</div>
<div className="my-12 flex items-center gap-5">
<Link
href={personalData.github}
target='_blank'
className="transition-all text-pink-500 hover:scale-125 duration-300"
>
<BsGithub size={30}/>
</Link>
<Link
href={personalData.discord}
target='_blank'
className="transition-all text-pink-500 hover:scale-125 duration-300"
>
<BsDiscord size={30}/>
</Link>
</div>

<div className="flex items-center gap-3">
<Link href="mailto:[email protected]" className="bg-gradient-to-r to-pink-500 from-violet-600 p-[1px] rounded-full transition-all duration-300 hover:from-pink-500 hover:to-violet-600">
<button className="px-3 text-xs md:px-8 py-3 md:py-4 bg-[#0d1224] rounded-full border-none text-center md:text-sm font-medium uppercase tracking-wider text-[#ffff] no-underline transition-all duration-200 ease-out md:font-semibold flex items-center gap-1 hover:gap-3">
<span>Contact me</span>
<RiContactsFill size={16} />
</button>
</Link>
</div>
<div className="flex items-center gap-3">
<Link href="mailto:[email protected]"
className="bg-gradient-to-r to-pink-500 from-violet-600 p-[1px] rounded-full transition-all duration-300 hover:from-pink-500 hover:to-violet-600">
<button
className="px-3 text-xs md:px-8 py-3 md:py-4 bg-[#0d1224] rounded-full border-none text-center md:text-sm font-medium uppercase tracking-wider text-[#ffff] no-underline transition-all duration-200 ease-out md:font-semibold flex items-center gap-1 hover:gap-3">
<span>Contact me</span>
<RiContactsFill size={16}/>
</button>
</Link>
</div>

</div>
<div className="order-1 lg:order-2 from-[#0d1224] border-[#1b2c68a0] relative rounded-lg border bg-gradient-to-r to-[#0a0d37]">
<div className="flex flex-row">
<div className="h-[1px] w-full bg-gradient-to-r from-transparent via-pink-500 to-violet-600"></div>
<div className="h-[1px] w-full bg-gradient-to-r from-violet-600 to-transparent"></div>
</div>
<div className="px-4 lg:px-8 py-5">
<div className="flex flex-row space-x-2">
<div className="h-3 w-3 rounded-full bg-red-400"></div>
<div className="h-3 w-3 rounded-full bg-orange-400"></div>
<div className="h-3 w-3 rounded-full bg-green-200"></div>
</div>
</div>
<div className="overflow-hidden border-t-[2px] border-indigo-900 px-4 lg:px-8 py-4 lg:py-8">
<code className="font-mono text-xs md:text-sm lg:text-base">
<div className="blink">
<span className="mr-2 text-pink-500">function</span>
<span className="mr-2 text-white">coder()</span>
<span className="mr-2 text-pink-500"></span>
<span className="text-gray-400">{'{'}</span>
</div>
<div>
<span className="ml-4 lg:ml-8 mr-2 text-white">name:</span>
<span className="text-gray-400">{`'`}</span>
<span className="text-amber-300">Arush</span>
<span className="text-gray-400">{`';`}</span>
</div>
<div className="ml-4 lg:ml-8 mr-2">
<span className=" text-white">programming_languages:</span>
<span className="text-gray-400">{`['`}</span>
<span className="text-amber-300">Python</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">C++</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">Java</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">NextJS</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">NodeJS</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">ReactJS</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">ExpressJS</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">HTML</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">CSS</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">C</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">Kotlin</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">Gradle</span>
<span className="text-gray-400">{"'];"}</span>
</div>
<div
className="order-1 lg:order-2 from-[#0d1224] border-[#1b2c68a0] relative rounded-lg border bg-gradient-to-r to-[#0a0d37]">
<div className="flex flex-row">
<div
className="h-[1px] w-full bg-gradient-to-r from-transparent via-pink-500 to-violet-600"></div>
<div className="h-[1px] w-full bg-gradient-to-r from-violet-600 to-transparent"></div>
</div>
<div className="px-4 lg:px-8 py-5">
<div className="flex flex-row space-x-2">
<div className="h-3 w-3 rounded-full bg-red-400"></div>
<div className="h-3 w-3 rounded-full bg-orange-400"></div>
<div className="h-3 w-3 rounded-full bg-green-200"></div>
</div>
</div>
<div className="overflow-hidden border-t-[2px] border-indigo-900 px-4 lg:px-8 py-4 lg:py-8">
<code className="font-mono text-xs md:text-sm lg:text-base">
<div className="blink">
<span className="mr-2 text-pink-500">const</span>
<span className="mr-2 text-white">coder</span>
<span className="mr-2 text-pink-500">=</span>
<span className="text-gray-400">{'{'}</span>
</div>
<div>
<span className="ml-4 lg:ml-8 mr-2 text-white">name:</span>
<span className="text-gray-400">{`'`}</span>
<span className="text-amber-300">Arush</span>
<span className="text-gray-400">{`',`}</span>
</div>
<div className="ml-4 lg:ml-8 mr-2">
<span className=" text-white">skills:</span>
<span className="text-gray-400">{`['`}</span>
<span className="text-amber-300">Python</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">Java</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">C</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">C++</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">HTML</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">CSS</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">JavaScript</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">Kotlin</span>
<span className="text-gray-400">{"', '"}</span>
<span className="text-amber-300">Gradle</span>
<span className="text-gray-400">{"'],"}</span>

</div>

</div>
<div>
<br/>
<span className="ml-8 text-red-400">characteristics:</span>
<span className="ml-2 text-pink-500">function</span>
<span className="text-gray-400">{`()`}</span>
<span className="ml-2 text-gray-400">{'{'}</span>
</div>

<div>
<span className="ml-8 lg:ml-16 mr-2 text-orange-400">return</span>
<span className="text-gray-400">{`(`}</span>
</div>
<div>
<span className="ml-12 lg:ml-24 text-cyan-400">this.</span>
<span className="mr-2 text-white">programmer</span>
<span className="text-amber-300">&amp;&amp;</span>
</div>
<div>
<span className="ml-12 lg:ml-24 text-cyan-400">this.</span>
<span className="mr-2 text-white">robotics</span>
<span className="text-amber-300">&amp;&amp;</span>
</div>
<div>
<span className="ml-12 lg:ml-24 text-cyan-400">this.</span>
<span className="mr-2 text-white">student</span>
<span className="text-amber-300">&amp;&amp;</span>
</div>
<div>
<span className="ml-12 lg:ml-24 text-cyan-400">this.</span>
<span className="mr-2 text-white">mentor</span>
</div>
<div><span className="ml-8 lg:ml-16 mr-2 text-gray-400">{`);`}</span></div>
<div><span className="ml-4 lg:ml-8 text-gray-400">{`};`}</span></div>
<div><span className="text-gray-400">{`};`}</span></div>
</code>
</div>
</div>
</div>
</section>
);
<div>
<span className="ml-8 lg:ml-16 mr-2 text-orange-400">return</span>
<span className="text-gray-400">{`(`}</span>
</div>
<div>
<span className="ml-12 lg:ml-24 text-cyan-400">this.</span>
<span className="mr-2 text-white">programmer</span>
<span className="text-amber-300">&amp;&amp;</span>
</div>
<div>
<span className="ml-12 lg:ml-24 text-cyan-400">this.</span>
<span className="mr-2 text-white">robotics</span>
<span className="text-amber-300">&amp;&amp;</span>
</div>
<div>
<span className="ml-12 lg:ml-24 text-cyan-400">this.</span>
<span className="mr-2 text-white">student</span>
<span className="text-amber-300">&amp;&amp;</span>
</div>
<div>
<span className="ml-12 lg:ml-24 text-cyan-400">this.</span>
<span className="mr-2 text-white">mentor</span>
</div>
<div><span className="ml-8 lg:ml-16 mr-2 text-gray-400">{`);`}</span></div>
<div><span className="ml-4 lg:ml-8 text-gray-400">{`};`}</span></div>
<div><span className="text-gray-400">{`};`}</span></div>
</code>
</div>
</div>
</div>
</section>
);
};

export default HeroSection;
17 changes: 17 additions & 0 deletions app/components/homepage/hero-section/test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@

const coder = {
name: 'Arush',
programming_languages: ['Python', 'Java', 'C', 'C++', 'HTML', 'CSS', 'JavaScript', 'Kotlin', 'Gradle'],
characteristics: function () {
return (
this.programmer &&
this.robotics &&
this.student &&
this.mentor
}
)
;
}
;
}
;
2 changes: 1 addition & 1 deletion app/components/homepage/skills/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Marquee from "react-fast-marquee";
function Skills() {
const getSkillWebsite = (skill) => {
const websiteMap = {
"Javascript": "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
"JavaScript": "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
"React": "https://reactjs.org/",
"Python": "https://www.python.org/",
"HTML": "https://developer.mozilla.org/en-US/docs/Web/HTML",
Expand Down
2 changes: 1 addition & 1 deletion utils/data/personal-data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export const personalData = {


designation: "Software Developer",
description: "I am a freshman at Tesla STEM High School (class of 2027), and I am a passionate web developer, robotics programmer, and STEM enthusiast! Some of my hobbies include reading, playing chess, and coding. I started FIRST® Robotics in 2021.",
description: "I am a rising sophomore at Tesla STEM High School (class of 2027), and I am a passionate web developer, robotics programmer, and STEM enthusiast! Some of my hobbies include reading, playing chess, and coding. I started FIRST® Robotics in 2021.",
email: '[email protected]',
github: 'https://github.com/ArushYadlapati',
discord: "https://discord.com/users/764258716463529986",
Expand Down
2 changes: 1 addition & 1 deletion utils/data/skills.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export const skillsData = [
'CSS',
'Python',
'Java',
'Javascript',
'JavaScript',
'React',
'Next JS',
'Node JS',
Expand Down

0 comments on commit fed79dd

Please sign in to comment.