This portfolio is built with modern web technologies and cloud infrastructure. Here's a technical deep dive into how it works.
The website combines server-side rendering with Next.js, modern React patterns, and a serverless backend architecture. The site features smooth animations and parallax effects using Framer Motion.
Some of backend infrastructure is fully automated using Terraform. Currently the contact form API is deployed using teraform.
Key features:
1# Create Lambda function
2resource "aws_lambda_function" "contact_form" {
3 filename = data.archive_file.lambda_zip.output_path
4 function_name = "aj-portfolio-contact-form"
5 role = aws_iam_role.lambda_role.arn
6 handler = "index.handler"
7 source_code_hash = data.archive_file.lambda_zip.output_base64sha256
8 runtime = "nodejs18.x"
9
10 timeout = 10
11 memory_size = 256
12
13 environment {
14 variables = {
15 ALLOWED_ORIGINS = "http://localhost:3000,https://aj-johnson.com"
16 }
17 }
18}
19
20# API Gateway
21resource "aws_apigatewayv2_api" "api" {
22 name = "aj-portfolio-api"
23 protocol_type = "HTTP"
24
25 cors_configuration {
26 allow_origins = ["http://localhost:3000", "https://aj-johnson.com"]
27 allow_methods = ["POST", "OPTIONS"]
28 allow_headers = ["content-type"]
29 max_age = 300
30 }
31}The website features a dynamic parallax scrolling section built with Framer Motion and React. This implementation showcases smooth animations and responsive design patterns.
Key features:
1import React from "react";
2import { CodeBlock } from "@/components/ui/code-block";
3import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
4import { infrastructureCode, contactFormCode } from "@/data/code";
5import { Badge } from "@/components/ui/badge";
6import ParallaxAbout from "@/components/ParallaxAbout";
7
8const TechBadge = ({ children }: { children: React.ReactNode }) => (
9 <Badge variant="secondary" className="text-sm">{children}</Badge>
10);
11
12const ThisWebsitePage = () => {
13 return (
14 <div className="max-w-4xl mx-auto space-y-12 py-8 px-4">
15 <div className="space-y-6">
16 <h1 className="text-4xl font-bold">About This Website</h1>
17 <div className="space-y-4">
18 <p className="text-xl text-muted-foreground">
19 This portfolio is built with modern web technologies and cloud infrastructure. Here's a technical deep dive into how it works.
20 </p>
21 <div className="flex flex-wrap gap-2">
22 <TechBadge>Next.js 14</TechBadge>
23 <TechBadge>React</TechBadge>
24 <TechBadge>TypeScript</TechBadge>
25 <TechBadge>Tailwind CSS</TechBadge>
26 <TechBadge>AWS Lambda</TechBadge>
27 <TechBadge>API Gateway</TechBadge>
28 <TechBadge>Terraform</TechBadge>
29 </div>
30 </div>
31 </div>
32
33 <div className="space-y-4">
34 <h2 className="text-2xl font-semibold">Technical Overview</h2>
35 <p className="text-muted-foreground">
36 The website combines server-side rendering with Next.js, modern React patterns, and a serverless backend
37 architecture. Some of the projects infrastructure is managed through code using Terraform, ensuring reproducibility and
38 maintainability.
39 </p>
40 </div>
41
42 <Card>
43 <CardHeader>
44 <CardTitle>Infrastructure as Code</CardTitle>
45 <CardDescription className="space-y-2">
46 <p>
47 Some of backend infrastructure is fully automated using Terraform. Currently the contact form API is deployed using
48 teraform.
49 </p>
50 <p>
51 Key features:
52 </p>
53 <ul className="list-disc list-inside space-y-1 text-sm">
54 <li>Automated deployment process</li>
55 <li>CORS configuration for security</li>
56 <li>CloudWatch integration for monitoring</li>
57 <li>IAM roles and permissions management</li>
58 </ul>
59 </CardDescription>
60 </CardHeader>
61 <CardContent>
62 <CodeBlock
63 language="hcl"
64 filename="main.tf"
65 highlightLines={[2, 8, 15, 24]}
66 code={infrastructureCode}
67 />
68 </CardContent>
69 </Card>
70
71 <Card>
72 <CardHeader>
73 <CardTitle>Contact Form Implementation</CardTitle>
74 <CardDescription className="space-y-2">
75 <p>
76 The contact form is built with React and TypeScript, featuring real-time validation and
77 error handling. It communicates with AWS Lambda through API Gateway to process submissions.
78 </p>
79 <p>
80 Features:
81 </p>
82 <ul className="list-disc list-inside space-y-1 text-sm">
83 <li>Form validation with error messages</li>
84 <li>Loading states and success feedback</li>
85 <li>Error boundary implementation</li>
86 <li>Accessibility considerations</li>
87 </ul>
88 </CardDescription>
89 </CardHeader>
90 <CardContent>
91 <CodeBlock
92 language="tsx"
93 filename="contact-form.tsx"
94 highlightLines={[8, 13, 17, 22]}
95 code={contactFormCode}
96 />
97 </CardContent>
98 </Card>
99
100 {/* Replaced Projects Card with ParallaxAbout component */}
101 <div className="w-full">
102 <ParallaxAbout />
103 </div>
104
105 <div className="space-y-4">
106 <h2 className="text-2xl font-semibold">Development Practices</h2>
107 <div className="grid md:grid-cols-3 gap-4">
108 <Card className="p-4">
109 <h3 className="font-semibold mb-2">Type Safety</h3>
110 <p className="text-sm text-muted-foreground">
111 TypeScript is used throughout the codebase to ensure type safety and improve development experience.
112 </p>
113 </Card>
114 <Card className="p-4">
115 <h3 className="font-semibold mb-2">Component Design</h3>
116 <p className="text-sm text-muted-foreground">
117 Components are built following atomic design principles, ensuring reusability and maintainability.
118 </p>
119 </Card>
120 <Card className="p-4">
121 <h3 className="font-semibold mb-2">Deployment</h3>
122 <p className="text-sm text-muted-foreground">
123 The website is deployed using AWS Amplify with automatic deployments triggered by GitHub commits.
124 </p>
125 </Card>
126 </div>
127 </div>
128 </div>
129 );
130};
131
132export default ThisWebsitePage;
133The contact form is built with React and TypeScript, featuring real-time validation and error handling. It communicates with AWS Lambda through API Gateway to process submissions.
Features:
1export default function ContactForm() {
2 const [formData, setFormData] = useState<FormData>({
3 name: '',
4 email: '',
5 subject: '',
6 message: '',
7 });
8 const [isSubmitting, setIsSubmitting] = useState(false);
9 const [showSuccess, setShowSuccess] = useState(false);
10
11 const handleSubmit = async (e: React.FormEvent) => {
12 e.preventDefault();
13 if (!validateForm()) return;
14
15 setIsSubmitting(true);
16 try {
17 const response = await fetch('/api/contact', {
18 method: 'POST',
19 headers: { 'Content-Type': 'application/json' },
20 body: JSON.stringify(formData)
21 });
22
23 if (!response.ok) throw new Error('Failed to send');
24 setShowSuccess(true);
25 setFormData({ name: '', email: '', subject: '', message: '' });
26 } finally {
27 setIsSubmitting(false);
28 }
29 };TypeScript is used throughout the codebase to ensure type safety and improve development experience.
Animations are built using Framer Motion, providing smooth transitions and interactive elements.
The website is deployed using AWS Amplify with automatic deployments triggered by GitHub commits.