Skip to content

Commit 7fb2bca

Browse files
TorresjDevTorresjDev
authored
Merge pull request #19 from TorresjDev/refined-portfolio
feat: updated portfolio with refined UI components and performance improvements
2 parents 3c0dee0 + 52b833c commit 7fb2bca

22 files changed

+2934
-2834
lines changed

‎.github/workflows/azure-static-web-apps-mango-pebble-08050a31e.yml‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,18 @@ jobs:
2424
with:
2525
submodules: true
2626
lfs: false
27+
persist-credentials: false
2728

2829
- name: Build and Deploy to Azure
2930
uses: Azure/static-web-apps-deploy@v1
3031
with:
3132
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_PEBBLE_08050A31E }}
3233
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (e.g., PR comments)
3334
action: "upload"
34-
app_location: "/" # Update this if your app is in a subfolder
35-
api_location: "" # Leave blank if you don't have an API
36-
output_location: ".next" # Replace "out" with your actual build output folder (e.g., ".next" for Next.js)
35+
app_location: "/"
36+
api_location: "" # No API needed for static portfolio
37+
output_location: "out" # Using static export
38+
skip_app_build: false
3739

3840
close_pull_request_job:
3941
if: github.event_name == 'pull_request' && github.event.action == 'closed'

‎app/api/sentry-example-api/route.ts‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function RootLayout({
1818
children: React.ReactNode;
1919
}>) {
2020
return (
21-
<html lang="en">
21+
<html lang="en" suppressHydrationWarning>
2222
<body className={inter.className}>
2323
<ThemeProvider
2424
attribute="class"

‎app/provider.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
"use client"
22

33
import * as React from "react"
4-
import { ThemeProvider as NextThemesProvider } from "next-themes"
5-
import { type ThemeProviderProps } from "next-themes/dist/types"
4+
import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from "next-themes"
65

76
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
87
return <NextThemesProvider {...props}>{children}</NextThemesProvider>

‎app/sentry-example-page/page.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,13 @@ export default function Page() {
4949
margin: "18px",
5050
}}
5151
onClick={async () => {
52+
// Throw a client-side error for Sentry testing
53+
// Note: API route removed due to static export
5254
await Sentry.startSpan({
5355
name: 'Example Frontend Span',
5456
op: 'test'
5557
}, async () => {
56-
const res = await fetch("/api/sentry-example-api");
57-
if (!res.ok) {
58-
throw new Error("Sentry Example Frontend Error");
59-
}
58+
throw new Error("Sentry Example Frontend Error");
6059
});
6160
}}
6261
>

‎components/Approach.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
"use client";
22
import React from "react";
3-
3+
import dynamic from "next/dynamic";
44
import { AnimatePresence, motion } from "framer-motion";
5-
import { CanvasRevealEffect } from "@/components/ui/CanvasRevealEffect";
5+
6+
// Lazy load heavy WebGL component
7+
const CanvasRevealEffect = dynamic(
8+
() =>
9+
import("@/components/ui/CanvasRevealEffect").then(
10+
(m) => m.CanvasRevealEffect
11+
),
12+
{ ssr: false }
13+
);
614

715
const Approach = () => {
816
return (

‎components/Footer.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,14 @@ import MagicButton from "./ui/MagicButton";
55
import animationData from "@/data/confetti.json";
66
import { assetUrl, socialMedia } from "@/data";
77
import { MdDownload, MdDownloadDone } from "react-icons/md";
8-
import Lottie from "react-lottie";
8+
import dynamic from "next/dynamic";
9+
10+
// Lazy load Lottie for better performance
11+
const Lottie = dynamic(
12+
() => import("lottie-react").then((mod) => ({ default: mod.default })),
13+
{ ssr: false }
14+
);
15+
916

1017
const Footer = () => {
1118
const [downloaded, setDownloaded] = useState(false);
@@ -41,14 +48,9 @@ const Footer = () => {
4148
className={`absolute bottom-[19rem] right-[16rem] z-40 w-44 h-44`}
4249
>
4350
<Lottie
44-
options={{
45-
loop: downloaded,
46-
autoplay: downloaded,
47-
animationData: animationData,
48-
rendererSettings: {
49-
preserveAspectRatio: "xMidYMid slice",
50-
},
51-
}}
51+
animationData={animationData}
52+
loop={downloaded}
53+
autoPlay={downloaded}
5254
/>
5355
</span>
5456
<a
@@ -116,7 +118,7 @@ const Footer = () => {
116118
key={profile.id}
117119
href={profile.link}
118120
target="_blank"
119-
rel="noreferrer"
121+
rel="noopener noreferrer"
120122
className="w-10 h-10 flex items-center justify-center bg-black-300 rounded-lg hover:bg-cyan-400 transition"
121123
>
122124
<img

‎components/RecentProjects.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ const RecentProjects = () => {
99
<h1 className="heading text-center">
1010
Highlighting Recent <span className="text-cyan-400">Innovations</span>
1111
</h1>
12-
<div className="flex flex-wrap items-center justify-center p-4 mt-10 gap-x-10 lg:gap-x-16 gap-y-20 xl:gap-y-10 2xl:gap-y-6">
12+
<div className="flex flex-wrap items-center justify-center p-4 mt-10 gap-x-10 md:gap-x-20 lg:gap-x-15 gap-y-20 sm:gap-y-1 md:gap-y-28 xl:gap-y-15 2xl:gap-y-12">
1313
{projects.map(
1414
({ id, title, des, img, lngIconLts, toolsIconLts, link }) => (
1515
<div
1616
key={id}
17-
className="h-[39rem] sm:h-[36rem] lg:h-[24rem] xl:h-[27rem] 2xl:h-[30rem] 3xl:h-[33rem] flex items-center justify-center w-full max-w-[40vw] lg:max-w-[36vw] xl:max-w-[38vw] my-4 sm:my-14"
17+
className="h-[39rem] sm:h-[36rem] lg:h-[24rem] xl:h-[27rem] 2xl:h-[30rem] 3xl:h-[33rem] flex items-center justify-center w-full max-w-[40vw] lg:max-w-[36vw] xl:max-w-[38vw] my-4 sm:my-2"
1818
>
1919
<PinContainer
2020
title={link}

‎components/ui/3d-pin.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,18 +70,15 @@ export const PinPerspective = ({
7070
<motion.div className="pointer-events-none w-full h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500">
7171
<div className=" w-full h-full -mt-7 flex-none inset-0">
7272
<div className="absolute top-0 inset-x-0 flex justify-center">
73-
<a
74-
href={href}
75-
target="_blank"
76-
rel="noopener noreferrer"
73+
<span
7774
className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 pb-1 px-4 mb-2 ring-1 ring-white/10 whitespace-nowrap"
7875
>
7976
<span className="relative z-20 text-white text-xs font-bold inline-block py-0.5">
8077
{title}
8178
</span>
8279

8380
<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40"></span>
84-
</a>
81+
</span>
8582
</div>
8683

8784
<div

‎components/ui/BentoGrid.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ import { cn } from "@/lib/utils";
66
import animationData from "@/data/confetti.json";
77
import { GlobeDemo } from "./GridGlobe";
88
import { useState } from "react";
9-
import Lottie from "react-lottie";
9+
// Lazy load Lottie for better performance
10+
const Lottie = dynamic(
11+
() => import("lottie-react").then((mod) => ({ default: mod.default })),
12+
{ ssr: false }
13+
);
1014
import MagicButton from "./MagicButton";
1115
import { MdDownload, MdDownloadDone } from "react-icons/md";
1216

@@ -130,14 +134,9 @@ export const BentoGridItem = ({
130134
<div className="mt-5 relative -b">
131135
<div className={`absolute -bottom-16 right-0 z-40`}>
132136
<Lottie
133-
options={{
134-
loop: downloaded,
135-
autoplay: downloaded,
136-
animationData: animationData,
137-
rendererSettings: {
138-
preserveAspectRatio: "xMidYMid slice",
139-
},
140-
}}
137+
animationData={animationData}
138+
loop={downloaded}
139+
autoPlay={downloaded}
141140
/>
142141
</div>
143142
<a

0 commit comments

Comments
 (0)