Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

portfolio commits #41

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

portfolio commits #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion actions/sendEmail.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const sendEmail = async (formData: FormData) => {
try {
data = await resend.emails.send({
from: "Contact Form <[email protected]>",
to: "bytegrad@gmail.com",
to: "nagaraju0011@gmail.com",
subject: "Message from contact form",
reply_to: senderEmail,
react: React.createElement(ContactFormEmail, {
Expand Down
33 changes: 10 additions & 23 deletions components/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,32 +18,19 @@ export default function About() {
id="about"
>
<SectionHeading>About me</SectionHeading>

<p className="mb-3">
After graduating with a degree in{" "}
<span className="font-medium">Accounting</span>, I decided to pursue my
passion for programming. I enrolled in a coding bootcamp and learned{" "}
<span className="font-medium">full-stack web development</span>.{" "}
<span className="italic">My favorite part of programming</span> is the
problem-solving aspect. I <span className="underline">love</span> the
feeling of finally figuring out a solution to a problem. My core stack
is{" "}
<span className="font-medium">
React, Next.js, Node.js, and MongoDB
</span>
. I am also familiar with TypeScript and Prisma. I am always looking to
learn new technologies. I am currently looking for a{" "}
<span className="font-medium">full-time position</span> as a software
developer.
A highly skilled and experienced <span className="font-medium">UI/UX Developer with over 13 years of expertise</span> in designing and developing intuitive, user-centric web applications. Proficient in front-end technologies including HTML5, CSS3, Bootstrap, Tailwind, SCSS, JavaScript, React.js, Vue.js, and DOM Manipulation, with a strong focus on creating responsive, accessible, and visually appealing interfaces. Known for delivering high-quality, scalable solutions that enhance user experience and meet client requirements.
</p>
<p className="mb-3">Specialized in leveraging modern frameworks like React.js and Vue.js to build reusable components and maintainable codebases, along with a proven ability to collaborate effectively with cross-functional teams. Expertise in API integration, cross-browser compatibility, and advanced UI/UX design tools such as Adobe Photoshop, Figma, and Adobe XD.
</p>
<p className="mb-3">With a keen eye for detail and a passion for innovation, I have successfully completed several high-impact projects for clients across industries, including healthcare, real estate, and e-commerce. Recognized for problem-solving skills, adaptability, and the ability to stay ahead of emerging trends in front-end development.
</p>
<p>Committed to delivering exceptional results, I bring a blend of technical expertise, creativity, and a user-first approach to every project I undertake.
</p>

<p>
<span className="italic">When I'm not coding</span>, I enjoy playing
video games, watching movies, and playing with my dog. I also enjoy{" "}
<span className="font-medium">learning new things</span>. I am currently
learning about{" "}
<span className="font-medium">history and philosophy</span>. I'm also
learning how to play the guitar.
</p>


</motion.section>
);
}
22 changes: 14 additions & 8 deletions components/contact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,19 @@ export default function Contact() {
>
<SectionHeading>Contact me</SectionHeading>

<p className="text-gray-700 -mt-6 dark:text-white/80">
Please contact me directly at{" "}
<a className="underline" href="mailto:[email protected]">
[email protected]
</a>{" "}
or through this form.
<p className="text-gray-700 -mt-6 dark:text-white/80 mb-7">
Please contact me directly with following details:{" "}

</p>

<form
<p className="mb-3">
<span>Email: <a className="underline" href="mailto:[email protected]">[email protected]</a>{" "}</span>
</p>
<p>
<span>Phone: 9700049396{" "}</span>
</p>

{/* <form
className="mt-10 flex flex-col dark:text-black"
action={async (formData) => {
const { data, error } = await sendEmail(formData);
Expand Down Expand Up @@ -68,7 +72,9 @@ export default function Contact() {
maxLength={5000}
/>
<SubmitBtn />
</form>
</form> */}


</motion.section>
);
}
2 changes: 1 addition & 1 deletion components/experience.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default function Experience() {
>
<h3 className="font-semibold capitalize">{item.title}</h3>
<p className="font-normal !mt-0">{item.location}</p>
<p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
<p className="mt-4 !font-normal text-gray-700 dark:text-white/75">
{item.description}
</p>
</VerticalTimelineElement>
Expand Down
6 changes: 3 additions & 3 deletions components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ export default function Footer() {
return (
<footer className="mb-10 px-4 text-center text-gray-500">
<small className="mb-2 block text-xs">
&copy; 2030 Ricardo. All rights reserved.
&copy; 2030 Nagaraju Komma. All rights reserved.
</small>
<p className="text-xs">
{/* <p className="text-xs">
<span className="font-semibold">About this website:</span> built with
React & Next.js (App Router & Server Actions), TypeScript, Tailwind CSS,
Framer Motion, React Email & Resend, Vercel hosting.
</p>
</p> */}
</footer>
);
}
32 changes: 21 additions & 11 deletions components/intro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { HiDownload } from "react-icons/hi";
import { FaGithubSquare } from "react-icons/fa";
import { useSectionInView } from "@/lib/hooks";
import { useActiveSectionContext } from "@/context/active-section-context";
import profilepic from "@/public/Nagaraju_Photo.jpg";


export default function Intro() {
const { ref } = useSectionInView("Home", 0.5);
Expand All @@ -31,8 +33,8 @@ export default function Intro() {
}}
>
<Image
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?fit=crop&w=368&h=368&q=100"
alt="Ricardo portrait"
src={profilepic}
alt="Nagaraju Komma"
width="192"
height="192"
quality="95"
Expand All @@ -57,20 +59,28 @@ export default function Intro() {
</div>
</div>


<motion.h1
className="mb-10 mt-4 px-4 text-2xl font-medium !leading-[1.5] sm:text-4xl"
className="mb-10 mt-4 px-4 text-2xl !leading-[1.65] sm:text-1xl"
initial={{ opacity: 0, y: 100 }}
animate={{ opacity: 1, y: 0 }}
>
<span className="font-bold">Hello, I'm Ricardo.</span> I'm a{" "}
<span className="font-bold">full-stack developer</span> with{" "}
<span className="font-bold">8 years</span> of experience. I enjoy
<div className="max-w-[41rem]">
<p className="font-bold text-2xl sm:text-4xl mb-4">I'm NAGARAJU KOMMA,</p>
Senior Frontend Developer | Senior UI Developer | UI/UX Specialist & JavaScript Enthusiast with 13+ Years of Mastery in HTML, CSS, JavaScript, React, Node, Express, Mongo DB, and Responsive Design.

{/*
<span className="font-bold">Hello, I'm NAGARAJU.</span> I'm a{" "}
<span className="font-bold">front-end developer</span> with{" "}
<span className="font-bold">12+ years</span> of experience. I enjoy
building <span className="italic">sites & apps</span>. My focus is{" "}
<span className="underline">React (Next.js)</span>.
<span className="underline">HTML5, CSS3, React, etc...</span>. */}

</div>
</motion.h1>

<motion.div
className="flex flex-col sm:flex-row items-center justify-center gap-2 px-4 text-lg font-medium"
className="flex flex-col sm:flex-row items-center justify-center gap-5 px-4 text-lg font-medium"
initial={{ opacity: 0, y: 100 }}
animate={{ opacity: 1, y: 0 }}
transition={{
Expand All @@ -91,7 +101,7 @@ export default function Intro() {

<a
className="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-none focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10"
href="/CV.pdf"
href="/CV_Nagaraju_Komma.pdf"
download
>
Download CV{" "}
Expand All @@ -100,15 +110,15 @@ export default function Intro() {

<a
className="bg-white p-4 text-gray-700 hover:text-gray-950 flex items-center gap-2 rounded-full focus:scale-[1.15] hover:scale-[1.15] active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 dark:text-white/60"
href="https://linkedin.com"
href="https://www.linkedin.com/in/nagarajukomma/"
target="_blank"
>
<BsLinkedin />
</a>

<a
className="bg-white p-4 text-gray-700 flex items-center gap-2 text-[1.35rem] rounded-full focus:scale-[1.15] hover:scale-[1.15] hover:text-gray-950 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 dark:text-white/60"
href="https://github.com"
href="https://github.com/Nagaraju0011"
target="_blank"
>
<FaGithubSquare />
Expand Down
12 changes: 6 additions & 6 deletions components/project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,16 @@ export default function Project({
}}
className="group mb-3 sm:mb-8 last:mb-0"
>
<section className="bg-gray-100 max-w-[42rem] border border-black/5 rounded-lg overflow-hidden sm:pr-8 relative sm:h-[20rem] hover:bg-gray-200 transition sm:group-even:pl-8 dark:text-white dark:bg-white/10 dark:hover:bg-white/20">
<div className="pt-4 pb-7 px-5 sm:pl-10 sm:pr-2 sm:pt-10 sm:max-w-[50%] flex flex-col h-full sm:group-even:ml-[18rem]">
<h3 className="text-2xl font-semibold">{title}</h3>
<p className="mt-2 leading-relaxed text-gray-700 dark:text-white/70">
<section className="bg-gray-100 max-w-[46rem] border border-black/5 rounded-lg overflow-hidden sm:pr-8 relative sm:h-[20rem] hover:bg-gray-200 transition sm:group-even:pl-8 dark:text-white dark:bg-white/10 dark:hover:bg-white/20">
<div className="pt-3 pb-7 px-5 sm:pl-10 sm:pr-2 sm:pt-10 sm:max-w-[56%] flex flex-col h-full sm:group-even:ml-[18rem]">
<h3 className="text-[18px] font-semibold">{title}</h3>
<p className="mt-2 leading-5 text-gray-700 dark:text-white/70 text-sm">
{description}
</p>
<ul className="flex flex-wrap mt-4 gap-2 sm:mt-auto">
<ul className="flex flex-wrap mt-4 gap-1 sm:mt-auto">
{tags.map((tag, index) => (
<li
className="bg-black/[0.7] px-3 py-1 text-[0.7rem] uppercase tracking-wider text-white rounded-full dark:text-white/70"
className="bg-black/[0.7] px-3 py-1 text-[0.6rem] uppercase tracking-wider text-white rounded-full dark:text-white/70"
key={index}
>
{tag}
Expand Down
2 changes: 1 addition & 1 deletion components/skills.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function Skills() {
<ul className="flex flex-wrap justify-center gap-2 text-lg text-gray-800">
{skillsData.map((skill, index) => (
<motion.li
className="bg-white borderBlack rounded-xl px-5 py-3 dark:bg-white/10 dark:text-white/80"
className="bg-white borderBlack rounded-full px-6 py-2 dark:bg-white/10 dark:text-white/80"
key={index}
variants={fadeInAnimationVariants}
initial="initial"
Expand Down
100 changes: 63 additions & 37 deletions lib/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import React from "react";
import { CgWorkAlt } from "react-icons/cg";
import { FaReact } from "react-icons/fa";
import { LuGraduationCap } from "react-icons/lu";
import corpcommentImg from "@/public/corpcomment.png";
import rmtdevImg from "@/public/rmtdev.png";
import wordanalyticsImg from "@/public/wordanalytics.png";
import corpcommentImg from "@/public/eropean.jpg";
import myagentpro from "@/public/myAgentPro.jpg";
import realtorr from "@/public/realtorr.jpg";

export const links = [
{
Expand Down Expand Up @@ -34,74 +34,100 @@ export const links = [
] as const;

export const experiencesData = [
// {
// title: "Diploma in Designing and Development",
// location: "Miami, FL",
// description:
// "I graduated after 6 months of studying. I immediately found a job as a front-end developer.",
// icon: React.createElement(LuGraduationCap),
// date: "2019",
// },
{
title: "Graduated bootcamp",
location: "Miami, FL",
title: "UX/UI DESIGNER and DEVELOPER",
location: "Hyderabad, Telangana, India",
description:
"I graduated after 6 months of studying. I immediately found a job as a front-end developer.",
icon: React.createElement(LuGraduationCap),
date: "2019",
"I spent 6.2 years at Inforlinx Pvt. Ltd. as a UX/UI designer and developer, honing my design expertise and user-centric approach. During this time, I expanded my skill set to include front-end development, specializing in JavaScript and React to build modern, interactive user interfaces.",
icon: React.createElement(CgWorkAlt),
date: "Jun 2010 - July 2016",
},
{
title: "Front-End Developer",
location: "Orlando, FL",
title: "SR. UX/UI DEVELOPER",
location: "Hyderabad, Telangana, India",
description:
"I worked as a front-end developer for 2 years in 1 job and 1 year in another job. I also upskilled to the full stack.",
"I worked as a front-end developer at Web Revolutions Pvt. Ltd. for 1.8 years, where I enhanced my expertise by upskilling in TypeScript and Angular, further strengthening my ability to build scalable and maintainable web applications.",
icon: React.createElement(CgWorkAlt),
date: "2019 - 2021",
date: "Aug 2016 - Mar 2018",
},
{
title: "UI DEVELOPER",
location: "Hyderabad, Telangana, India",
description:
"I worked as a UI Developer at HEED IT Solutions Pvt. Ltd. for 9 months, where I contributed to building responsive and dynamic user interfaces using HTML, CSS, Angular, TypeScript, and Bootstrap.",
icon: React.createElement(FaReact),
date: "Mar 2018 - Nov 2018",
},
{
title: "Full-Stack Developer",
location: "Houston, TX",
title: "Senior Frontend Developer",
location: "Hyderabad, Telangana, India",
description:
"I'm now a full-stack developer working as a freelancer. My stack includes React, Next.js, TypeScript, Tailwind, Prisma and MongoDB. I'm open to full-time opportunities.",
"I worked as a UI Developer at Cannysys IT Solutions Pvt. Ltd. for 2.1 Years, where I contributed to building responsive and dynamic user interfaces using HTML 5, CSS 3, React, Javascript, Node and Bootstrap 5.",
icon: React.createElement(FaReact),
date: "2021 - present",
date: "Dec 2018 - Dec 2020",
},
{
title: "Senior Frontend Developer",
location: "Chennai, Tamilnadu, India",
description:
"I worked as a UI Developer at SHAR Technologies Pvt. Ltd. for 1.3 Years, where I contributed to building responsive and dynamic user interfaces using HTML 5, CSS 3, VUE JS, Javascript and Bootstrap 5.",
icon: React.createElement(FaReact),
date: "Jan 2021 - Mar 2022",
},
{
title: "Sr. Frontend Developer",
location: "Hyderabad, Telangana, India",
description:
"I worked as a UI Developer at Affluent Global Services for 0.8 Years, where I contributed to building responsive and dynamic user interfaces using HTML 5, CSS 3, Angular, Javascript and Bootstrap 5.",
icon: React.createElement(FaReact),
date: "May 2022 - Dec 2022",
},
] as const;

export const projectsData = [
{
title: "CorpComment",
title: "European Medical Agency",
description:
"I worked as a full-stack developer on this startup project for 2 years. Users can give public feedback to companies.",
tags: ["React", "Next.js", "MongoDB", "Tailwind", "Prisma"],
"Convert UI/UX designs into responsive, functional web pages. Ensure pixel-perfect mockups. Create modular, reusable components and implement interactive functionality. Ensure consistent rendering across browsers and fix related bugs. Build adaptable applications for various screen sizes. Use developer tools and error logs to identify and resolve issues.",
tags: ["Html", "CSS", "JS", "Bootstrap", "Angular"],
imageUrl: corpcommentImg,
},
{
title: "rmtDev",
title: "My Agents Pro",
description:
"Job board for remote developer jobs. I was the front-end developer. It has features like filtering, sorting and pagination.",
tags: ["React", "TypeScript", "Next.js", "Tailwind", "Redux"],
imageUrl: rmtdevImg,
"Convert UI/UX designs into responsive, functional web pages. Ensure pixel-perfect mockups. Create modular, reusable components and implement interactive functionality. Ensure consistent rendering across browsers and fix related bugs. Build adaptable applications for various screen sizes. Use developer tools and error logs to identify and resolve issues.",
tags: ["HTML", "CSS", "JS", "Bootstrap", "VUE"],
imageUrl: myagentpro,
},
{
title: "Word Analytics",
title: "Realtorr",
description:
"A public web app for quick analytics on text. It shows word count, character count and social media post limits.",
tags: ["React", "Next.js", "SQL", "Tailwind", "Framer"],
imageUrl: wordanalyticsImg,
"Convert UI/UX designs into responsive, functional web pages. Ensure pixel-perfect mockups. Create modular, reusable components and implement interactive functionality. Ensure consistent rendering across browsers and fix related bugs. Build adaptable applications for various screen sizes. Use developer tools and error logs to identify and resolve issues.",
tags: ["HTML5", "CSS3", "Bootstrap", "React", "Node"],
imageUrl: realtorr,
},
] as const;

export const skillsData = [
"HTML",
"CSS",
"Bootstrap 5",
"Tailwind",
"JavaScript",
"TypeScript",
"React",
"Redux",
"Next.js",
"Express",
"Node.js",
"Git",
"Tailwind",
"Prisma",
"MongoDB",
"Redux",
"GraphQL",
"Apollo",
"Express",
"PostgreSQL",
"Python",
"Django",
"Framer Motion",
] as const;
Binary file added public/CV_Nagaraju_Komma.pdf
View file
Open in desktop
Binary file not shown.
Binary file added public/Nagaraju_Photo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/eropean.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/myAgentPro.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/realtorr.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.