Skip to content

Commit 495c58d

Browse files
SunilKumarKVSunilKumarKV
authored
Merge pull request #2 from SunilKumarKV/premium-about-contact
premium about and contact redesign
2 parents 0880fec + 24d77ad commit 495c58d

7 files changed

Lines changed: 425 additions & 233 deletions

File tree

‎src/components/AboutPage.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import SkillsSection from "./SkillsSection";
44
import CertificateGallery from "./CertificateGallery";
55
import PageHeader from "./ui/PageHeader";
66
import SectionPanel from "./ui/SectionPanel";
7+
import { profile } from "../data/profile";
78

89
export default function AboutPage() {
910
return (
1011
<main className="page-shell">
1112
<PageHeader
1213
eyebrow="About SunilCraft"
13-
title="Builder profile, skills, and rewards"
14-
description="A cleaner view of the person behind SunilCraft: engineering focus, practical skills, and milestone snapshots."
14+
title="Builder profile, craft, and credibility"
15+
description={`A premium overview of ${profile.name}: product thinking, frontend craft, full-stack execution, and the rewards that reflect that growth.`}
1516
align="left"
1617
/>
1718

‎src/components/AboutSection.jsx‎

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from "react";
22
import { motion } from "framer-motion";
3+
import { profile, services } from "../data/profile";
4+
import Badge from "./ui/Badge";
35
import "../styles/AboutSection.css";
46
import profilePic from "/assets/images/profile.png";
57

@@ -13,34 +15,47 @@ const AboutSection = () => {
1315
viewport={{ once: true }}
1416
transition={{ duration: 0.7, ease: "easeOut" }}
1517
>
16-
<h2 className="about-title">About Me</h2>
18+
<div className="card-row about-badges">
19+
<Badge tone="accent">{profile.location}</Badge>
20+
<Badge>MCA Journey</Badge>
21+
<Badge tone="success">Production Focus</Badge>
22+
</div>
23+
<h2 className="about-title">Building thoughtful interfaces with engineering depth</h2>
1724

1825
<p className="about-description">
19-
Hello! I’m <strong>Sunil Kumar K V</strong>, a full-stack and front-end
20-
developer from India. I build clean, responsive, and user-friendly
21-
applications using React, JavaScript, Node.js, Express, and modern UI
22-
tools.
23-
<br />
24-
I am currently studying MCA and improving production-level project
25-
skills through real deployments like SunilCraft, ChessPlay, and
26-
DevWithSunil. My strengths are component-based architecture, UI/UX
27-
improvement, API integration, debugging, and learning in public.
28-
<br />
29-
<strong>Skills:</strong> React, JavaScript, HTML5, CSS3, Tailwind CSS,
30-
Node.js, Express, MongoDB, Git, Vite, Framer Motion.
26+
Hello! I&apos;m <strong>{profile.name}</strong>, a developer from India who likes turning
27+
ambitious ideas into clean interfaces, practical full-stack features, and transparent
28+
developer systems. SunilCraft now sits at the center of that work: portfolio storytelling,
29+
coding-journal sync, verified solutions, and engineering dashboards in one place.
30+
</p>
31+
<p className="about-description">
32+
My strongest areas are frontend architecture, UI/UX refinement, routing and state cleanup,
33+
API integration, debugging, and shipping improvements that make products feel calmer and
34+
more intentional. I&apos;m especially motivated by projects that need both polish and
35+
structure.
3136
</p>
37+
38+
<div className="about-pillars">
39+
{services.slice(0, 4).map((service) => (
40+
<article className="about-pillar" key={service.title}>
41+
<h3>{service.title}</h3>
42+
<p>{service.description}</p>
43+
</article>
44+
))}
45+
</div>
46+
3247
<div className="about-details">
3348
<div className="about-card">
3449
<h3>10+</h3>
35-
<p>Projects Built</p>
50+
<p>Projects built and iterated</p>
3651
</div>
3752
<div className="about-card">
3853
<h3>3+</h3>
39-
<p>Live Deployments</p>
54+
<p>Live deployments maintained</p>
4055
</div>
4156
<div className="about-card">
4257
<h3>2+</h3>
43-
<p>Years Experience</p>
58+
<p>Years of hands-on growth</p>
4459
</div>
4560
</div>
4661
</motion.div>
@@ -52,7 +67,13 @@ const AboutSection = () => {
5267
viewport={{ once: true }}
5368
transition={{ duration: 0.7, ease: "easeOut", delay: 0.3 }}
5469
>
55-
<img src={profilePic} alt="About Me" />
70+
<div className="about-image-frame">
71+
<img src={profilePic} alt="About Me" />
72+
<div className="about-image-note">
73+
<strong>{profile.role}</strong>
74+
<span>Clean UI, reliable routing, live developer data, and product-minded iteration.</span>
75+
</div>
76+
</div>
5677
</motion.div>
5778
</section>
5879
);

‎src/components/ContactSection.jsx‎

Lines changed: 133 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import React, { useState } from "react";
22
import { motion } from "framer-motion";
33
import emailjs from "@emailjs/browser";
4+
import { FaEnvelope, FaGithub, FaLinkedinIn, FaMapMarkerAlt } from "react-icons/fa";
5+
import { profile } from "../data/profile";
6+
import PageHeader from "./ui/PageHeader";
7+
import SectionPanel from "./ui/SectionPanel";
8+
import Badge from "./ui/Badge";
49
import "../styles/ContactSection.css";
510

611
const ContactSection = () => {
@@ -72,67 +77,134 @@ const ContactSection = () => {
7277
};
7378

7479
return (
75-
<section className="contact" id="contact">
76-
<div className="contact-header">
77-
<h2 className="contact-title">Let's Work Together</h2>
78-
<p className="contact-subtitle">
79-
Have a project or idea? I'd love to hear from you.
80-
</p>
81-
</div>
82-
83-
<form onSubmit={handleSubmit} className="contact-form">
84-
{["name", "email", "message"].map((field, i) => (
85-
<motion.div
86-
key={field}
87-
custom={i}
88-
initial="hidden"
89-
animate="visible"
90-
variants={inputVariants}
91-
>
92-
{field !== "message" ? (
93-
<input
94-
type={field === "email" ? "email" : "text"}
95-
name={field}
96-
placeholder={`Your ${
97-
field.charAt(0).toUpperCase() + field.slice(1)
98-
}`}
99-
value={formData[field]}
100-
onChange={handleChange}
101-
required
102-
/>
103-
) : (
104-
<textarea
105-
name="message"
106-
placeholder="Your Message"
107-
value={formData.message}
108-
onChange={handleChange}
109-
rows="5"
110-
required
111-
></textarea>
112-
)}
113-
</motion.div>
114-
))}
115-
116-
<motion.button
117-
type="submit"
118-
disabled={isSending}
119-
whileHover={{ scale: isSending ? 1 : 1.05 }}
120-
whileTap={{ scale: 0.95 }}
121-
>
122-
{isSending ? "Sending..." : "Send Message"}
123-
</motion.button>
124-
125-
{status.message && (
126-
<motion.p
127-
className={`form-status ${status.type}`}
128-
initial={{ opacity: 0 }}
129-
animate={{ opacity: 1 }}
130-
>
131-
{status.message}
132-
</motion.p>
133-
)}
134-
</form>
135-
</section>
80+
<main className="page-shell">
81+
<PageHeader
82+
eyebrow="Contact"
83+
title="Let’s build something useful and well-crafted"
84+
description="For frontend polish, dashboard architecture, portfolio systems, and production-ready React work, this page is designed to make the next step easy."
85+
align="left"
86+
/>
87+
88+
<SectionPanel
89+
eyebrow="Collaboration"
90+
title="Start a conversation"
91+
description="Reach out with a feature idea, UI cleanup request, portfolio upgrade, or product concept. I’m most helpful when the work needs both technical structure and visual refinement."
92+
>
93+
<div className="contact-layout">
94+
<div className="contact-column contact-summary">
95+
<div className="card-row">
96+
<Badge tone="accent">Frontend Systems</Badge>
97+
<Badge>React + Vite</Badge>
98+
<Badge tone="success">Available</Badge>
99+
</div>
100+
101+
<div className="contact-intro">
102+
<h3>Best fit engagements</h3>
103+
<p>Developer portfolios, engineering dashboards, routing cleanup, mobile-first UI refinement, and production-ready frontend/full-stack features.</p>
104+
</div>
105+
106+
<div className="contact-methods">
107+
<a href={`mailto:${profile.email}`} className="contact-method">
108+
<FaEnvelope />
109+
<div>
110+
<strong>Email</strong>
111+
<span>{profile.email}</span>
112+
</div>
113+
</a>
114+
<a href={profile.github} target="_blank" rel="noreferrer" className="contact-method">
115+
<FaGithub />
116+
<div>
117+
<strong>GitHub</strong>
118+
<span>See active builds and coding-journal sync</span>
119+
</div>
120+
</a>
121+
<a href={profile.linkedin} target="_blank" rel="noreferrer" className="contact-method">
122+
<FaLinkedinIn />
123+
<div>
124+
<strong>LinkedIn</strong>
125+
<span>Professional profile and collaboration context</span>
126+
</div>
127+
</a>
128+
<div className="contact-method static">
129+
<FaMapMarkerAlt />
130+
<div>
131+
<strong>Location</strong>
132+
<span>{profile.location}</span>
133+
</div>
134+
</div>
135+
</div>
136+
137+
<div className="contact-trust-grid">
138+
<article className="glass-card">
139+
<h3>UI/UX Cleanup</h3>
140+
<p>Turning cluttered flows into clearer, more premium product surfaces.</p>
141+
</article>
142+
<article className="glass-card">
143+
<h3>Developer Platforms</h3>
144+
<p>Problems, codebase, analytics, and synced engineering views built around live data.</p>
145+
</article>
146+
<article className="glass-card">
147+
<h3>Production Mindset</h3>
148+
<p>Routing, responsive layouts, build safety, and implementation detail all treated seriously.</p>
149+
</article>
150+
</div>
151+
</div>
152+
153+
<div className="contact-column">
154+
<form onSubmit={handleSubmit} className="contact-form">
155+
{["name", "email", "message"].map((field, i) => (
156+
<motion.div
157+
key={field}
158+
custom={i}
159+
initial="hidden"
160+
animate="visible"
161+
variants={inputVariants}
162+
>
163+
{field !== "message" ? (
164+
<input
165+
type={field === "email" ? "email" : "text"}
166+
name={field}
167+
placeholder={`Your ${field.charAt(0).toUpperCase() + field.slice(1)}`}
168+
value={formData[field]}
169+
onChange={handleChange}
170+
required
171+
/>
172+
) : (
173+
<textarea
174+
name="message"
175+
placeholder="Tell me what you’re building, where it feels stuck, and what kind of help you need."
176+
value={formData.message}
177+
onChange={handleChange}
178+
rows="7"
179+
required
180+
></textarea>
181+
)}
182+
</motion.div>
183+
))}
184+
185+
<motion.button
186+
type="submit"
187+
disabled={isSending}
188+
whileHover={{ scale: isSending ? 1 : 1.01 }}
189+
whileTap={{ scale: 0.99 }}
190+
>
191+
{isSending ? "Sending..." : "Send Message"}
192+
</motion.button>
193+
194+
{status.message && (
195+
<motion.p
196+
className={`form-status ${status.type}`}
197+
initial={{ opacity: 0 }}
198+
animate={{ opacity: 1 }}
199+
>
200+
{status.message}
201+
</motion.p>
202+
)}
203+
</form>
204+
</div>
205+
</div>
206+
</SectionPanel>
207+
</main>
136208
);
137209
};
138210

0 commit comments

Comments
 (0)