Merge version_1 into main #2
@@ -20,7 +20,7 @@ export default function PortfolioPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
@@ -49,7 +49,7 @@ export default function PortfolioPage() {
|
||||
tag="Available for Contract & Full-Time"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "noiseDiagonalGradient" }}
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
buttons={[
|
||||
{ text: "View My Work", href: "#projects" },
|
||||
{ text: "Let's Talk", href: "#contact" }
|
||||
@@ -73,6 +73,7 @@ export default function PortfolioPage() {
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/modern-developer-workspace-showing-fulls-1773246286809-10373734.png"
|
||||
imageAlt="Developer workspace with multiple monitors"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
@@ -89,13 +90,13 @@ export default function PortfolioPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "E-Commerce Platform", price: "React, Node.js, PostgreSQL", variant: "Scaled to $2M ARR | Full-Stack Build", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-modern-e-commerce-platform-dashboard-w-1773246287005-bc5906bf.png?_wi=1", imageAlt: "E-commerce platform dashboard"
|
||||
id: "1", name: "E-Commerce Platform", price: "React, Node.js, PostgreSQL", variant: "Scaled to $2M ARR | Full-Stack Build", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-modern-e-commerce-platform-dashboard-w-1773246287005-bc5906bf.png", imageAlt: "E-commerce platform dashboard"
|
||||
},
|
||||
{
|
||||
id: "2", name: "SaaS Team Collaboration App", price: "Next.js, TypeScript, MongoDB", variant: "1000+ Active Users | Real-Time Features", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-collaborative-saas-application-showing-1773246287776-ccfa0b89.png?_wi=1", imageAlt: "SaaS collaboration platform interface"
|
||||
id: "2", name: "SaaS Team Collaboration App", price: "Next.js, TypeScript, MongoDB", variant: "1000+ Active Users | Real-Time Features", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-collaborative-saas-application-showing-1773246287776-ccfa0b89.png", imageAlt: "SaaS collaboration platform interface"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Fintech Mobile & Web App", price: "React Native, Node.js, AWS", variant: "Multi-Platform | Secure Transactions", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-fintech-mobile-and-web-application-sho-1773246294589-05c1c5d0.png?_wi=1", imageAlt: "Fintech application dashboard"
|
||||
id: "3", name: "Fintech Mobile & Web App", price: "React Native, Node.js, AWS", variant: "Multi-Platform | Secure Transactions", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-fintech-mobile-and-web-application-sho-1773246294589-05c1c5d0.png", imageAlt: "Fintech application dashboard"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@@ -110,16 +111,16 @@ export default function PortfolioPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Johnson, CEO of TechCorp", date: "Date: 15 November 2024", tag: "E-Commerce Success", title: "Transformed Our Online Business", quote: "The developer rebuilt our entire platform from legacy code to a modern, scalable architecture. Sales increased 40% within 3 months due to improved performance and user experience. Exceptional technical skills and communication.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-headshot-of-a-confident-tec-1773246286583-95609ac4.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-modern-e-commerce-platform-dashboard-w-1773246287005-bc5906bf.png?_wi=2", imageAlt: "Client team celebrating success"
|
||||
id: "1", name: "Sarah Johnson, CEO of TechCorp", date: "Date: 15 November 2024", tag: "E-Commerce Success", title: "Transformed Our Online Business", quote: "The developer rebuilt our entire platform from legacy code to a modern, scalable architecture. Sales increased 40% within 3 months due to improved performance and user experience. Exceptional technical skills and communication.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-headshot-of-a-confident-tec-1773246286583-95609ac4.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-modern-e-commerce-platform-dashboard-w-1773246287005-bc5906bf.png", imageAlt: "Client team celebrating success"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Michael Chen, CTO of InnovateLab", date: "Date: 22 October 2024", tag: "SaaS Development", title: "Best Technical Partner We've Had", quote: "Delivered our SaaS platform on time and under budget. The code quality is exceptional, and the real-time features work flawlessly. This developer understands both the business and technical requirements perfectly.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-headshot-of-a-female-produc-1773246285995-436d3ab4.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-collaborative-saas-application-showing-1773246287776-ccfa0b89.png?_wi=2", imageAlt: "SaaS platform launch"
|
||||
id: "2", name: "Michael Chen, CTO of InnovateLab", date: "Date: 22 October 2024", tag: "SaaS Development", title: "Best Technical Partner We've Had", quote: "Delivered our SaaS platform on time and under budget. The code quality is exceptional, and the real-time features work flawlessly. This developer understands both the business and technical requirements perfectly.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-headshot-of-a-female-produc-1773246285995-436d3ab4.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-collaborative-saas-application-showing-1773246287776-ccfa0b89.png", imageAlt: "SaaS platform launch"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Emily Rodriguez, Founder of GrowthCo", date: "Date: 8 September 2024", tag: "Full-Stack Innovation", title: "Scaled From Startup to Scale-up", quote: "Started as a small project, now handling 10x the traffic. The architecture was built to scale from day one. Proactive problem-solving and a true partner in our growth journey.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-headshot-of-a-male-cto-in-t-1773246286256-87357ee8.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-fintech-mobile-and-web-application-sho-1773246294589-05c1c5d0.png?_wi=2", imageAlt: "Growing startup metrics"
|
||||
id: "3", name: "Emily Rodriguez, Founder of GrowthCo", date: "Date: 8 September 2024", tag: "Full-Stack Innovation", title: "Scaled From Startup to Scale-up", quote: "Started as a small project, now handling 10x the traffic. The architecture was built to scale from day one. Proactive problem-solving and a true partner in our growth journey.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-headshot-of-a-male-cto-in-t-1773246286256-87357ee8.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-fintech-mobile-and-web-application-sho-1773246294589-05c1c5d0.png", imageAlt: "Growing startup metrics"
|
||||
},
|
||||
{
|
||||
id: "4", name: "David Kim, Product Manager at StartupXYZ", date: "Date: 25 August 2024", tag: "Mobile Development", title: "Delivered Beyond Expectations", quote: "Not only delivered the requirements but anticipated future needs and built solutions ahead of time. Clean code, excellent documentation, and always available when we needed guidance. Highly recommend.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-headshot-of-a-female-busine-1773246285688-9a24fabc.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-collaborative-saas-application-showing-1773246287776-ccfa0b89.png?_wi=3", imageAlt: "Product team collaboration"
|
||||
id: "4", name: "David Kim, Product Manager at StartupXYZ", date: "Date: 25 August 2024", tag: "Mobile Development", title: "Delivered Beyond Expectations", quote: "Not only delivered the requirements but anticipated future needs and built solutions ahead of time. Clean code, excellent documentation, and always available when we needed guidance. Highly recommend.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-headshot-of-a-female-busine-1773246285688-9a24fabc.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-collaborative-saas-application-showing-1773246287776-ccfa0b89.png", imageAlt: "Product team collaboration"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@@ -137,19 +138,19 @@ export default function PortfolioPage() {
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Frontend Development", author: "5 Years Experience", description: "Expert in React, Next.js, TypeScript, Vue.js. Specializing in performance optimization, responsive design, and modern UI/UX implementations with accessibility best practices.", tags: ["React", "Next.js", "TypeScript", "Tailwind CSS"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/abstract-visualization-of-modern-tech-st-1773246287269-7da488e7.png?_wi=1", imageAlt: "Frontend technology stack"
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/abstract-visualization-of-modern-tech-st-1773246287269-7da488e7.png", imageAlt: "Frontend technology stack"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Backend & APIs", author: "5 Years Experience", description: "Node.js, Express, Python, RESTful APIs, GraphQL expertise. Building secure, scalable server architectures with microservices patterns and cloud-native solutions.", tags: ["Node.js", "Express", "Python", "GraphQL"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/abstract-visualization-of-modern-tech-st-1773246287269-7da488e7.png?_wi=2", imageAlt: "Backend technology stack"
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/abstract-visualization-of-modern-tech-st-1773246287269-7da488e7.png", imageAlt: "Backend technology stack"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Database & Infrastructure", author: "5 Years Experience", description: "PostgreSQL, MongoDB, Firebase, AWS, Docker, Kubernetes. Experience with database design, optimization, caching strategies, and DevOps automation.", tags: ["PostgreSQL", "MongoDB", "AWS", "Docker"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/abstract-visualization-of-modern-tech-st-1773246287269-7da488e7.png?_wi=3", imageAlt: "Infrastructure technology stack"
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/abstract-visualization-of-modern-tech-st-1773246287269-7da488e7.png", imageAlt: "Infrastructure technology stack"
|
||||
},
|
||||
{
|
||||
id: "4", title: "Mobile Development", author: "3+ Years Experience", description: "React Native and Flutter expertise. Delivering iOS and Android applications with native performance and seamless user experiences for both platforms.", tags: ["React Native", "Flutter", "iOS", "Android"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/abstract-visualization-of-modern-tech-st-1773246287269-7da488e7.png?_wi=4", imageAlt: "Mobile development stack"
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/abstract-visualization-of-modern-tech-st-1773246287269-7da488e7.png", imageAlt: "Mobile development stack"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
@@ -1,51 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from 'react';
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({ text, className = '' }) => {
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
viewBox="0 0 200 50"
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
x="10"
|
||||
y="35"
|
||||
fontSize="32"
|
||||
fontWeight="bold"
|
||||
fill="currentColor"
|
||||
dominantBaseline="middle"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
};
|
||||
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user