Skip to content

Updating next version to 15.2.2 #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

This file was deleted.

27 changes: 0 additions & 27 deletions app/blog/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,6 @@ import { TextMorph } from '@/components/ui/text-morph'
import { ScrollProgress } from '@/components/ui/scroll-progress'
import { useEffect, useState } from 'react'

function CopyButton() {
const [text, setText] = useState('Copy')
const currentUrl = typeof window !== 'undefined' ? window.location.href : ''

useEffect(() => {
setTimeout(() => {
setText('Copy')
}, 2000)
}, [text])

return (
<button
onClick={() => {
setText('Copied')
navigator.clipboard.writeText(currentUrl)
}}
className="font-base flex items-center gap-1 text-center text-sm text-zinc-500 transition-colors dark:text-zinc-400"
type="button"
>
<TextMorph>{text}</TextMorph>
<span>URL</span>
</button>
)
}

export default function LayoutBlogPost({
children,
Expand All @@ -43,9 +19,6 @@ export default function LayoutBlogPost({
}}
/>

<div className="absolute right-4 top-24">
<CopyButton />
</div>
<main className="prose prose-gray mt-24 pb-20 prose-h4:prose-base dark:prose-invert prose-h1:text-xl prose-h1:font-medium prose-h2:mt-12 prose-h2:scroll-m-20 prose-h2:text-lg prose-h2:font-medium prose-h3:text-base prose-h3:font-medium prose-h4:font-medium prose-h5:text-base prose-h5:font-medium prose-h6:text-base prose-h6:font-medium prose-strong:font-medium">
{children}
</main>
Expand Down
52 changes: 52 additions & 0 deletions app/blog/teaching-html-made-me-miss-the-90s/page.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<Cover
src="/img/wireframes.jpg"
alt="Colorful wireframes"
caption="Colorful Wireframes"
/>

# Teaching HTML Made Me Miss the 90s


> If you can’t explain it simply, you don’t understand it well enough. - Einstein

I didn’t fully appreciate the value of understanding through teaching until I volunteered to teach young students how to code a simple web application. What surprised me more was how much the kids taught me.

---

I thought I had a solid grasp of what I was doing. "This will be easy!" I thought. "It's just basic HTML and CSS!" But the last time I spent a lot of time analyzing the intricacies of where a pixel fell on the screen was during the "Web Mistress" era of the late 90s, a period of time near to my heart when teenaged girls dove into the realm of CSS to create dedicated fan sites for their favorite anime series, movie, or TV show.

This era of fandom and geekery was before social media like Instagram or Tumblr, and certainly before TikTok. Coding a website to show your love for Sailor Moon was a badge of honor that was not as easy as simply uploading a picture to an account. It was quite the flex to host and maintain a website, and I think it's a lost art that we should bring back (at least I'm going to).

---

I was surprised at how much I was relying on scraping up ancient knowledge from this far gone era of Geocities and Angelfire, spinning gifs and guestbooks, and not on any skills that were relevant to my actual, everyday job. All of my Typescript, SQL and Python experience was nearly useless. PowerBI? Don't even know 'er!

After a short pre-made Powerpoint going through the basics of wireframes, and brainstorming ideas on how to make a theoretical app marketable, the kids were more interested in using CSS to overlay simple geometric shapes and compose an image of a cat. I wasn't much help at first in assisting them venture on their creative pursuits (hey, that’s what Copilot is for). I mean, don’t they know that adding an image file is way more efficient? Then it started coming back to me:

### "Is it uhh &lt;a href =...&gt; for a link, and uhmm image is ... &lt;img src =...&gt;"

---

But there was a purity there that was charming - the idea of doing something just because it’s fun or because it looks cool, or even just for the challenge of it. Not because it’s marketable, performant or because it will make you promotion-ready.

So I leaned into their creativity and showed them [coolors.co](https://coolors.co/) to play with palettes, what hexadecimal values are, and how to set them in their .css files. I suggested fun image ideas and demonstrated how to hunt down the perfect PNG file, and how to verify that the backgrounds are actually transparent (surprisingly, this is still a problem 20 years later). I showed them how to set the opacity on an image, and how to align it with their text. I got into the groove of it and vicariously felt the satisfaction similar to staying up until 3AM getting your divs just right.

---

That experience made me remember what the best parts of tech are. We get lost in profitability, agile methodology, sprints, ROIs, KPIs and a soup of other business-y terms and acronyms, and forget what brought a lot of us here to begin with - creativity, spontaneity, and messiness. And real. Like chocolate ice cream smeared on your face.

---


### Questions for Reflection

- When was the last time you created something just because it was fun or beautiful, and not because it was practical or productive?
- Are there skills or interests from your past that you’ve forgotten, but could reconnect with in a new context?
- What might you learn about your own knowledge by teaching it to someone younger or less experienced?


---

### Music for Inspiration

Listening to music while working? Check out _"Motion"_ by Tycho—a perfect blend of creativity and rhythm.
151 changes: 105 additions & 46 deletions app/data.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
type Project = {
type Technologies = {
name: string
description: string
icon: string // URL to the icon image
link: string
video: string
id: string
}

Expand All @@ -12,6 +11,15 @@ type WorkExperience = {
start: string
end: string
link: string
detail: string[]
id: string
}

type Education = {
institution: string
degree: string
fieldOfStudy: string
link: string
id: string
}

Expand All @@ -27,58 +35,113 @@ type SocialLink = {
link: string
}

export const PROJECTS: Project[] = [
export const TECHNOLOGIES: Technologies[] = [
{
name: 'Motion Primitives Pro',
description:
'Advanced components and templates to craft beautiful websites.',
link: 'https://pro.motion-primitives.com/',
video:
'https://res.cloudinary.com/read-cv/video/upload/t_v_b/v1/1/profileItems/W2azTw5BVbMXfj7F53G92hMVIn32/newProfileItem/d898be8a-7037-4c71-af0c-8997239b050d.mp4?_a=DATAdtAAZAA0',
id: 'project1',
name: 'Python',
icon: '/logos/python.svg',
link: 'https://www.python.org/',
id: 'tech1',
},
{
name: 'React',
icon: '/logos/react.svg',
link: 'https://reactjs.org/',
id: 'tech6',
},
{
name: 'Typescript',
icon: '/logos/typescript.svg',
link: 'https://www.typescriptlang.org/',
id: 'tech7',
},
{
name: 'Node.js',
icon: '/logos/nodejs.svg',
link: 'https://nodejs.org/',
id: 'tech3',
},
{
name: 'Snowflake',
icon: '/logos/snowflake.svg',
link: 'https://www.snowflake.com/',
id: 'tech2',
},
{
name: 'PostgreSQL',
icon: '/logos/postgresql.svg',
link: 'https://www.postgresql.org/',
id: 'tech4',
},
{
name: 'DBT',
icon: '/logos/dbt.png',
link: 'https://www.getdbt.com/',
id: 'tech9',
},
{
name: 'Motion Primitives',
description: 'UI kit to make beautiful, animated interfaces.',
link: 'https://motion-primitives.com/',
video:
'https://res.cloudinary.com/read-cv/video/upload/t_v_b/v1/1/profileItems/W2azTw5BVbMXfj7F53G92hMVIn32/XSfIvT7BUWbPRXhrbLed/ee6871c9-8400-49d2-8be9-e32675eabf7e.mp4?_a=DATAdtAAZAA0',
id: 'project2',
name: 'AWS',
icon: '/logos/aws.svg',
link: 'https://aws.amazon.com/',
id: 'tech5',
},
{
name: 'Azure',
icon: '/logos/azure.svg',
link: 'https://azure.microsoft.com/',
id: 'tech8',
}
]

export const WORK_EXPERIENCE: WorkExperience[] = [
{
company: 'Reglazed Studio',
title: 'CEO',
start: '2024',
company: 'Liberty Mutual Insurance',
title: 'Sr. Data Engineer',
start: '2020',
end: 'Present',
link: 'https://ibelick.com',
id: 'work1',
link: 'https://www.libertymutual.com/',
detail: [
'Lead multiple system migration initiatives, modernizing legacy infrastructure by transitioning to scalable cloud-based architectures using diverse tech stacks.',
'Develop and manage database objects across PostgreSQL, Synapse Analytics, and Snowflake to support scalable data delivery pipelines and stakeholder reporting.',
'Build new features for internal web applications using React, Node.js, and TypeScript to support business operations.',
], id: 'work1',
},
{
company: 'Freelance',
title: 'Design Engineer',
start: '2022',
end: '2024',
link: 'https://ibelick.com',
id: 'work2',
company: 'University of New Hampshire',
title: 'Data Engineer',
start: '2017',
end: '2020',
link: 'https://www.unh.edu/',
detail: [
'Designed and implemented Python-based processes for ingesting and transforming educational data.',
'Leveraged Rundeck to orchestrate automated jobs processing educational data.',
'Managed schema changes, performance tuning, and data integrity for a MariaDB database used in educational data workflows.',
], id: 'work2',
},
]

export const EDUCATION: Education[] = [
{
company: 'Freelance',
title: 'Front-end Developer',
start: '2017',
end: 'Present',
link: 'https://ibelick.com',
id: 'work3',
institution: 'University of New Hampshire',
degree: 'Bachelor of Science',
fieldOfStudy: 'Computer Science',
link: 'https://www.unh.edu/',
id: 'edu1',
},
{
institution: 'University of New Hampshire',
degree: 'Master of Science',
fieldOfStudy: 'Cybersecurity',
link: 'https://www.unh.edu/',
id: 'edu2',
},
]


export const BLOG_POSTS: BlogPost[] = [
{
title: 'Exploring the Intersection of Design, AI, and Design Engineering',
description: 'How AI is changing the way we design',
link: '/blog/exploring-the-intersection-of-design-ai-and-design-engineering',
title: 'Teaching HTML Made Me Miss the 90s',
description: 'Reflections on creativity in web design',
link: '/blog/teaching-html-made-me-miss-the-90s',
uid: 'blog-1',
},
{
Expand All @@ -100,20 +163,16 @@ export const BLOG_POSTS: BlogPost[] = [
export const SOCIAL_LINKS: SocialLink[] = [
{
label: 'Github',
link: 'https://github.com/ibelick',
link: 'https://github.com/pattiestrada',
},
{
label: 'Twitter',
link: 'https://twitter.com/ibelick',
label: 'X (Twitter)',
link: 'https://x.com/p_lesstrada',
},
{
label: 'LinkedIn',
link: 'https://www.linkedin.com/in/ibelick',
},
{
label: 'Instagram',
link: 'https://www.instagram.com/ibelick',
link: 'https://www.linkedin.com/in/patricia-estrada-a9819865/',
},
]

export const EMAIL = 'your@email.com'
export const EMAIL = 'estrada.patti@gmail.com'
Binary file modified app/favicon.ico
100644 → 100755
Binary file not shown.
Loading