Alex Rivera - Full-Stack Developer & Designer

import { HeroSection } from '../components/portfolio/HeroSection' import { SkillsGrid } from '../components/portfolio/SkillsGrid' import { ProjectCard, ProjectGrid } from '../components/portfolio/ProjectCard' import { Timeline, TimelineItem } from '../components/portfolio/Timeline' import { Testimonial, TestimonialCarousel } from '../components/portfolio/Testimonial' import { ContactForm } from '../components/portfolio/ContactForm' import { SocialLinks } from '../components/portfolio/SocialLinks' import { AnimatedSection } from '../components/portfolio/AnimatedSection' import { StatsCounter } from '../components/portfolio/StatsCounter' import { TechStack } from '../components/portfolio/TechStack' import { FloatingNav } from '../components/portfolio/FloatingNav' import { GradientText } from '../components/portfolio/GradientText' import { ParticleBackground } from '../components/portfolio/ParticleBackground' import { ScrollProgress } from '../components/portfolio/ScrollProgress' import { CursorFollower } from '../components/portfolio/CursorFollower'

<ScrollProgress color="var(--gradient)" /> <CursorFollower enabled={true} /> <FloatingNav items={[ { label: "Home", href: "#hero" }, { label: "About", href: "#about" }, { label: "Skills", href: "#skills" }, { label: "Projects", href: "#projects" }, { label: "Experience", href: "#experience" }, { label: "Testimonials", href: "#testimonials" }, { label: "Contact", href: "#contact" }, ]} />

<section id="hero"> <HeroSection name="Alex Rivera" title={<>Full-Stack Developer<br />&amp; <GradientText>Creative Designer</GradientText></>} subtitle="I build beautiful, performant web experiences that delight users and drive business results. 7+ years of turning ideas into reality." avatarSrc="/portfolio/alex-avatar.jpg" backgroundEffect="particles" cta={[ { label: "View My Work", href: "#projects", variant: "primary" }, { label: "Get In Touch", href: "#contact", variant: "outline" }, ]} statusIndicator={{ available: true, text: "Available for new projects", }} /> </section>

<ParticleBackground particleCount={50} color="rgba(99, 102, 241, 0.3)" speed={0.5} connectDistance={150} />

<section id="skills">

Skills & Technologies

<SkillsGrid categories={[ { title: "Frontend", icon: "🎨", skills: [ { name: "React / Next.js", level: 95, years: 6 }, { name: "TypeScript", level: 92, years: 5 }, { name: "Vue.js / Nuxt", level: 80, years: 3 }, { name: "Tailwind CSS", level: 95, years: 4 }, { name: "Framer Motion", level: 88, years: 3 }, { name: "Three.js / WebGL", level: 70, years: 2 }, ], }, { title: "Backend", icon: "⚙️", skills: [ { name: "Node.js / Express", level: 92, years: 7 }, { name: "Python / FastAPI", level: 85, years: 4 }, { name: "PostgreSQL", level: 88, years: 6 }, { name: "Redis", level: 82, years: 4 }, { name: "GraphQL", level: 85, years: 4 }, { name: "Docker / K8s", level: 78, years: 3 }, ], }, { title: "Design", icon: "✨", skills: [ { name: "Figma", level: 90, years: 5 }, { name: "UI/UX Design", level: 88, years: 6 }, { name: "Design Systems", level: 92, years: 4 }, { name: "Prototyping", level: 85, years: 5 }, { name: "Motion Design", level: 75, years: 3 }, { name: "Accessibility", level: 90, years: 5 }, ], }, { title: "Tools & Practices", icon: "🛠️", skills: [ { name: "Git / GitHub", level: 95, years: 7 }, { name: "CI/CD Pipelines", level: 85, years: 5 }, { name: "AWS / Vercel", level: 82, years: 4 }, { name: "Testing (Vitest/Cypress)", level: 88, years: 5 }, { name: "Agile / Scrum", level: 90, years: 6 }, { name: "Technical Writing", level: 85, years: 4 }, ], }, ]} visualStyle="radial" showPercentage={true} animateOnScroll={true} />

<TechStack title="Current Tech Stack" technologies={[ { name: "Next.js 14", icon: "/icons/nextjs.svg", category: "framework" }, { name: "TypeScript", icon: "/icons/typescript.svg", category: "language" }, { name: "Tailwind", icon: "/icons/tailwind.svg", category: "styling" }, { name: "Prisma", icon: "/icons/prisma.svg", category: "orm" }, { name: "PostgreSQL", icon: "/icons/postgresql.svg", category: "database" }, { name: "Redis", icon: "/icons/redis.svg", category: "cache" }, { name: "Vercel", icon: "/icons/vercel.svg", category: "hosting" }, { name: "Figma", icon: "/icons/figma.svg", category: "design" }, ]} layout="marquee" speed="slow" />

</section>

<section id="projects">

Featured Projects

<ProjectGrid columns={2}> <ProjectCard title="Streamline Analytics" description="A real-time analytics dashboard for SaaS companies. Built with Next.js, D3.js, and WebSockets. Handles 10M+ events/day with sub-second query times." image="/portfolio/projects/streamline-analytics.jpg" tags={["Next.js", "D3.js", "WebSocket", "PostgreSQL", "Redis"]} liveUrl="https://streamline-analytics.demo.alexrivera.dev" githubUrl="https://github.com/alexrivera/streamline-analytics" caseStudyUrl="/projects/streamline-analytics" metrics={[ { label: "Daily Events", value: "10M+" }, { label: "Query Time", value: "<100ms" }, { label: "Uptime", value: "99.99%" }, ]} featured={true} year={2024} />

<ProjectCard title="Palette Design System" description="A full design system and component library serving 12 product teams. Includes 80+ components, documentation site, Figma kit, and automated accessibility testing." image="/portfolio/projects/palette-design-system.jpg" tags={["React", "Storybook", "Tailwind", "Radix UI", "Chromatic"]} liveUrl="https://palette.design" githubUrl="https://github.com/alexrivera/palette-ds" caseStudyUrl="/projects/palette-design-system" metrics={[ { label: "Components", value: "80+" }, { label: "Teams Using", value: "12" }, { label: "A11y Score", value: "100%" }, ]} featured={true} year={2023} />

<ProjectCard title="WanderMap" description="An AI-powered travel planning application. Users describe their ideal trip, and the app generates personalized itineraries with maps, booking links, and local tips." image="/portfolio/projects/wandermap.jpg" tags={["React Native", "OpenAI", "MapboxGL", "Node.js", "MongoDB"]} liveUrl="https://wandermap.app" caseStudyUrl="/projects/wandermap" metrics={[ { label: "Active Users", value: "25K+" }, { label: "Trips Planned", value: "100K+" }, { label: "App Rating", value: "4.8★" }, ]} featured={true} year={2023} />

<ProjectCard title="CodeCollab" description="A real-time collaborative code editor with video chat, shared terminals, and AI pair programming. Think Google Docs meets VS Code." image="/portfolio/projects/codecollab.jpg" tags={["Vue.js", "Yjs (CRDT)", "WebRTC", "Monaco Editor", "Go"]} liveUrl="https://codecollab.io" githubUrl="https://github.com/alexrivera/codecollab" caseStudyUrl="/projects/codecollab" metrics={[ { label: "Concurrent Users", value: "500+" }, { label: "Latency", value: "<50ms" }, { label: "Sessions/Day", value: "2K+" }, ]} year={2023} />

<ProjectCard title="EcoTrack" description="A sustainability tracking platform for businesses. Monitors carbon footprint, generates ESG reports, and provides actionable recommendations powered by ML models." image="/portfolio/projects/ecotrack.jpg" tags={["Next.js", "Python", "TensorFlow", "AWS", "Chart.js"]} liveUrl="https://ecotrack.green" caseStudyUrl="/projects/ecotrack" metrics={[ { label: "Companies", value: "200+" }, { label: "CO₂ Tracked", value: "5M tons" }, { label: "Reports/mo", value: "1.5K" }, ]} year={2022} />

<ProjectCard title="Melodia" description="A music visualization and creation tool using the Web Audio API. Features real-time audio analysis, procedural art generation, and MIDI controller support." image="/portfolio/projects/melodia.jpg" tags={["React", "Web Audio API", "Canvas", "MIDI", "Three.js"]} liveUrl="https://melodia.alexrivera.dev" githubUrl="https://github.com/alexrivera/melodia" metrics={[ { label: "GitHub Stars", value: "2.3K" }, { label: "Forks", value: "340" }, { label: "Weekly Users", value: "5K" }, ]} year={2022} /> </ProjectGrid>

</section>

<section id="experience">

Experience

<Timeline> <TimelineItem date="2022 — Present" title="Senior Full-Stack Engineer" company="NovaTech" companyUrl="https://novatech.io" location="San Francisco, CA" type="full-time" logo="/portfolio/companies/novatech.svg" >

• Led a team of 6 engineers building the next-gen analytics platform
• Architected micro-frontend system reducing deployment time by 70%
• Designed and shipped the company's design system (80+ components)
• Mentored 4 junior developers, 2 promoted to mid-level within a year
• Reduced page load times by 60% through performance optimization
• Technologies: Next.js, TypeScript, PostgreSQL, Redis, AWS, Terraform

</TimelineItem>

<TimelineItem date="2020 — 2022" title="Full-Stack Developer" company="Crescendo Digital" companyUrl="https://crescendo.digital" location="Remote" type="full-time" logo="/portfolio/companies/crescendo.svg" >

• Built and maintained 15+ client projects across various industries
• Developed a white-label SaaS platform generating $2M+ ARR
• Implemented CI/CD pipelines reducing release cycles from weeks to hours
• Created reusable project templates, cutting kickoff time by 50%
• Technologies: React, Node.js, GraphQL, MongoDB, Docker, GCP

</TimelineItem>

<TimelineItem date="2019 — 2020" title="Frontend Developer" company="StartupHub" companyUrl="https://startuphub.co" location="Austin, TX" type="full-time" logo="/portfolio/companies/startuphub.svg" >

• Rebuilt the company's flagship product from jQuery to React
• Improved Core Web Vitals scores from 40 to 95+
• Established frontend testing practices (unit, integration, e2e)
• Collaborated directly with designers to implement pixel-perfect UIs
• Technologies: React, Redux, Styled Components, Jest, Cypress

</TimelineItem>

<TimelineItem date="2017 — 2019" title="Junior Web Developer" company="Digital Craft Agency" companyUrl="https://digitalcraft.agency" location="Austin, TX" type="full-time" logo="/portfolio/companies/digitalcraft.svg" >

• Developed responsive websites for 30+ small business clients
• Learned modern JavaScript frameworks and backend development
• Contributed to the agency's internal tools and workflow automation
• Won "Rising Star" award in first year
• Technologies: HTML/CSS, JavaScript, PHP, WordPress, MySQL

</TimelineItem>

<TimelineItem date="2017" title="B.S. Computer Science" company="University of Texas at Austin" location="Austin, TX" type="education" logo="/portfolio/companies/ut-austin.svg" >

• GPA: 3.8 / 4.0, Dean's List all semesters
• Senior project: Real-time collaborative whiteboard (won Best in Class)
• Teaching Assistant for Web Development (CS 329E)
• Active in ACM Student Chapter and Hackathon Club

</TimelineItem> </Timeline>

</section>

<section id="testimonials">

What People Say

<TestimonialCarousel autoPlay={true} interval={6000}> <Testimonial quote="Alex is one of the most talented engineers I've ever worked with. Their ability to bridge the gap between design and engineering is truly rare. Every project they touch becomes significantly better." author="Jessica Park" role="VP of Engineering" company="NovaTech" avatar="/portfolio/testimonials/jessica-park.jpg" linkedinUrl="https://linkedin.com/in/jessicapark" />

<Testimonial quote="Working with Alex transformed our product. They didn't just build what we asked — they challenged our assumptions, proposed better solutions, and delivered something beyond our expectations. Our conversion rate increased 40% after the redesign." author="Marcus Thompson" role="CEO & Founder" company="GrowthMetrics" avatar="/portfolio/testimonials/marcus-thompson.jpg" linkedinUrl="https://linkedin.com/in/marcusthompson" />

<Testimonial quote="Alex's design system work saved our organization hundreds of engineering hours. The documentation is impeccable, the components are accessible and performant, and the DX is world-class. They set the gold standard for our entire frontend practice." author="Priya Sharma" role="Design Director" company="NovaTech" avatar="/portfolio/testimonials/priya-sharma.jpg" linkedinUrl="https://linkedin.com/in/priyasharma" />

<Testimonial quote="I was lucky to have Alex as my mentor. Their patience, deep technical knowledge, and genuine care for my growth helped me go from junior to mid-level in record time. They make complex concepts feel approachable." author="Daniel Kim" role="Software Engineer" company="Stripe" avatar="/portfolio/testimonials/daniel-kim.jpg" linkedinUrl="https://linkedin.com/in/danielkim" /> </TestimonialCarousel>

</section>

<section id="writing">

Writing & Talks

I regularly share knowledge through blog posts and conference talks. Here are some recent highlights:

</section>

<section id="contact">

Let's Work Together

I'm always interested in hearing about new projects, especially those involving complex UI challenges, design systems, or full-stack applications. Whether you have a question or just want to say hi, my inbox is always open!

<ContactForm endpoint="/api/contact" fields={[ { name: "name", label: "Your Name", type: "text", required: true, placeholder: "John Doe" }, { name: "email", label: "Email Address", type: "email", required: true, placeholder: "john@example.com" }, { name: "company", label: "Company", type: "text", required: false, placeholder: "Acme Inc." }, { name: "projectType", label: "Project Type", type: "select", required: true, options: [ "Full-Time Position", "Freelance Project", "Consulting", "Speaking Engagement", "Mentorship", "Just Saying Hi", ]}, { name: "budget", label: "Budget Range", type: "select", required: false, options: [ "< $5,000", "$5,000 - $15,000", "$15,000 - $50,000", "$50,000+", "Not Applicable", ]}, { name: "timeline", label: "Timeline", type: "select", required: false, options: [ "ASAP", "1-2 weeks", "1-3 months", "3+ months", "Flexible", ]}, { name: "message", label: "Message", type: "textarea", required: true, placeholder: "Tell me about your project or idea...", rows: 5 }, ]} submitText="Send Message 🚀" successMessage="Thanks for reaching out! I'll get back to you within 24 hours." honeypot={true} recaptcha={true} />

<SocialLinks links={[ { platform: "github", url: "https://github.com/alexrivera", label: "GitHub" }, { platform: "linkedin", url: "https://linkedin.com/in/alexrivera", label: "LinkedIn" }, { platform: "twitter", url: "https://twitter.com/alexriveradev", label: "Twitter/X" }, { platform: "dribbble", url: "https://dribbble.com/alexrivera", label: "Dribbble" }, { platform: "codepen", url: "https://codepen.io/alexrivera", label: "CodePen" }, { platform: "youtube", url: "https://youtube.com/@alexriveradev", label: "YouTube" }, { platform: "email", url: "mailto:hello@alexrivera.dev", label: "Email" }, ]} layout="horizontal" iconSize={24} showLabels={true} animated={true} />

</section>

<footer className="portfolio-footer"> <p> Designed & built with ❤️ by Alex Rivera <br /> Powered by Next.js, MDX, Tailwind CSS & Framer Motion <br /> © {new Date().getFullYear()} All rights reserved. </p> </footer>

export const metadata = { lastUpdated: "2024-03-15", version: "3.0", framework: "Next.js 14", styling: "Tailwind CSS + Framer Motion", deployment: "Vercel", analytics: "Plausible", cms: "MDX + Content Collections", };