Casper/Portofolio_Site_OnceUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initail_Commit

Browse Source
This commit is contained in:
Casper
2024-10-20 21:56:52 +02:00
commit ec47039eae
191 changed files with 21402 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/app/blog/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,130 @@
import { notFound } from 'next/navigation'
import { CustomMDX } from '@/app/components/mdx'
import { formatDate, getPosts } from '@/app/utils'
import { Avatar, Button, Flex, Heading, Text } from '@/once-ui/components'
import { person, baseURL } from '@/app/resources'
interface BlogParams {
params: {
slug: string;
};
}
export async function generateStaticParams() {
let posts = getPosts(['src', 'app', 'blog', 'posts'])
return posts.map((post) => ({
slug: post.slug,
}))
}
export function generateMetadata({ params }: BlogParams) {
let post = getPosts(['src', 'app', 'blog', 'posts']).find((post) => post.slug === params.slug)
if (!post) {
return
}
let {
title,
publishedAt: publishedTime,
summary: description,
image,
} = post.metadata;
let ogImage = image
? `https://${baseURL}${image}`
: `https://${baseURL}/og?title=${title}`;
return {
title,
description,
openGraph: {
title,
description,
type: 'article',
publishedTime,
url: `https://${baseURL}/blog/${post.slug}`,
images: [
{
url: ogImage,
},
],
},
twitter: {
card: 'summary_large_image',
title,
description,
images: [ogImage],
},
}
}
export default function Blog({ params }: BlogParams) {
let post = getPosts(['src', 'app', 'blog', 'posts']).find((post) => post.slug === params.slug)
if (!post) {
notFound()
}
return (
<Flex as="section"
fillWidth maxWidth="xs"
direction="column"
gap="m">
<script
type="application/ld+json"
suppressHydrationWarning
dangerouslySetInnerHTML={{
__html: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: post.metadata.title,
datePublished: post.metadata.publishedAt,
dateModified: post.metadata.publishedAt,
description: post.metadata.summary,
image: post.metadata.image
? `https://${baseURL}${post.metadata.image}`
: `https://${baseURL}/og?title=${post.metadata.title}`,
url: `https://${baseURL}/blog/${post.slug}`,
author: {
'@type': 'Person',
name: person.name,
},
}),
}}
/>
<Button
href="/blog"
variant="tertiary"
size="s"
prefixIcon="chevronLeft">
Posts
</Button>
<Heading
variant="display-strong-s">
{post.metadata.title}
</Heading>
<Flex
gap="12"
alignItems="center">
{ person.avatar && (
<Avatar
size="s"
src={person.avatar}/>
)}
<Text
variant="body-default-s"
onBackground="neutral-weak">
{formatDate(post.metadata.publishedAt)}
</Text>
</Flex>
<Flex
as="article"
direction="column"
fillWidth>
<CustomMDX source={post.content} />
</Flex>
</Flex>
)
}

17
src/app/blog/components/Posts.module.scss Normal file
View File

@@ -0,0 +1,17 @@
.hover {
transition: var(--transition-property) var(--transition-duration-micro-medium) var(--transition-timing-function);
&:hover {
transform: translateX(var(--static-space-8));
.indicator {
transform: rotate(0);
}
}
}
.indicator {
transform: rotate(-90deg);
left: -2rem;
transition: var(--transition-property) var(--transition-duration-micro-medium) var(--transition-timing-function);
}

67
src/app/blog/components/Posts.tsx Normal file
View File

@@ -0,0 +1,67 @@
import { formatDate, getPosts } from '@/app/utils';
import { Flex, Grid, Heading, SmartLink, Text } from '@/once-ui/components';
import styles from '@/app/blog/components/Posts.module.scss';
interface PostsProps {
range?: [number] | [number, number];
columns?: '1' | '2' | '3';
}
export function Posts({
range,
columns = '1'
}: PostsProps) {
let allBlogs = getPosts(['src', 'app', 'blog', 'posts']);
const sortedBlogs = allBlogs.sort((a, b) => {
return new Date(b.metadata.publishedAt).getTime() - new Date(a.metadata.publishedAt).getTime();
});
const displayedBlogs = range
? sortedBlogs.slice(
range[0] - 1,
range.length === 2 ? range[1] : sortedBlogs.length
)
: sortedBlogs;
return (
<>
{ displayedBlogs.length > 0 && (
<Grid
columns={`repeat(${columns}, 1fr)`} mobileColumns="1col"
fillWidth marginBottom="40" gap="m" paddingX="l">
{displayedBlogs.map((post) => (
<SmartLink
style={{
textDecoration: 'none',
margin: '0',
height: 'fit-content',
}}
className={styles.hover}
key={post.slug}
href={`/blog/${post.slug}`}>
<Flex
position="relative"
paddingX="16" paddingY="12" gap="8"
direction="column" justifyContent="center">
<Flex
position="absolute"
className={styles.indicator}
width="20" height="2"
background="neutral-strong"/>
<Heading as="h2" wrap="balance">
{post.metadata.title}
</Heading>
<Text
variant="body-default-s"
onBackground="neutral-weak">
{formatDate(post.metadata.publishedAt, false)}
</Text>
</Flex>
</SmartLink>
))}
</Grid>
)}
</>
);
}

79
src/app/blog/page.tsx Normal file
View File

@@ -0,0 +1,79 @@
import { Flex, Heading } from '@/once-ui/components';
import { Mailchimp } from '@/app/components';
import { Posts } from '@/app/blog/components/Posts';
import { blog, newsletter, person } from '@/app/resources'
import { baseURL, mailchimp } from '@/app/resources'
export function generateMetadata() {
const title = blog.title;
const description = blog.description;
const ogImage = `https://${baseURL}/og?title=${encodeURIComponent(title)}`;
return {
title,
description,
openGraph: {
title,
description,
type: 'website',
url: `https://${baseURL}/blog`,
images: [
{
url: ogImage,
alt: title,
},
],
},
twitter: {
card: 'summary_large_image',
title,
description,
images: [ogImage],
},
};
}
export default function Blog() {
return (
<Flex
fillWidth maxWidth="s"
direction="column">
<script
type="application/ld+json"
suppressHydrationWarning
dangerouslySetInnerHTML={{
__html: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Blog',
headline: blog.title,
description: blog.description,
url: `https://${baseURL}/blog`,
image: `${baseURL}/og?title=${encodeURIComponent(blog.title)}`,
author: {
'@type': 'Person',
name: person.name,
image: {
'@type': 'ImageObject',
url: `${baseURL}${person.avatar}`,
},
},
}),
}}
/>
<Heading
marginBottom="l"
variant="display-strong-s">
{blog.title}
</Heading>
<Flex
fillWidth flex={1}>
<Posts range={[1,3]}/>
<Posts range={[4]} columns="2"/>
</Flex>
{newsletter.display && (
<Mailchimp/>
)}
</Flex>
);
}

33
src/app/blog/posts/new-milestone-in-my-career.mdx Normal file
View File

@@ -0,0 +1,33 @@
---
title: "Arriving to a new milestone in my career"
publishedAt: "2024-04-08"
summary: "Every career is a journey, filled with challenges, growth, and those significant moments that mark a shift in our path."
---
Every career is a journey, filled with challenges, growth, and those significant moments that mark a shift in our path. Today, I’m excited to share that I’ve arrived at a new milestone in my career—one that is both a culmination of past experiences and a stepping stone toward future aspirations.
## Reflecting on the Journey So Far
Looking back, it’s clear that each phase of my career has built upon the last, guiding me to where I stand today. From my early days of learning the basics and struggling through complex projects, to gaining confidence through real-world experience, each step has shaped my skills and mindset. I’ve learned that design and engineering are as much about problem-solving and creativity as they are about resilience and continuous learning.
## What This Milestone Represents
Reaching this milestone represents more than just professional progress—it’s a moment of personal growth. It’s a sign that the dedication and passion I’ve invested are paying off. Whether it’s mastering a new skill, taking on leadership responsibilities, or completing a major project, this achievement is a reminder that perseverance, curiosity, and a love for what I do are key drivers of success.
## The Challenges That Shaped Me
Of course, no journey is without its hurdles. There were moments of doubt, failed prototypes, and unforeseen obstacles that tested my resolve. However, those challenges taught me the importance of adaptability, creative thinking, and collaboration. They pushed me to improve, to think outside the box, and to view setbacks not as failures, but as opportunities to learn and grow.
## Embracing New Opportunities
This milestone is also an opportunity to embrace new challenges and expand my horizons. Whether it’s exploring emerging technologies, diving deeper into specific fields of interest, or taking on a mentorship role, I’m excited about what lies ahead. The engineering and design landscape is constantly evolving, and staying curious and open to new ideas is what keeps this career path so rewarding.
## Gratitude and Acknowledgment
I’d be remiss if I didn’t take a moment to acknowledge the mentors, colleagues, and collaborators who have been part of this journey. Their insights, support, and shared enthusiasm have been invaluable. Reaching this milestone is as much a testament to their influence as it is to my individual efforts.
## Looking Ahead
While I’m proud of how far I’ve come, I know this is just one milestone in a much larger journey. The road ahead is filled with exciting possibilities, and I’m eager to continue pushing boundaries, learning new things, and contributing to meaningful projects. If there’s one thing I’ve learned along the way, it’s that every new milestone is not an end, but rather a launchpad for the next chapter.
Thank you for being part of this journey with me, and here’s to the adventures yet to come!

29
src/app/blog/posts/the-99-percent-that-remains-in-the-drawer.mdx Normal file
View File

@@ -0,0 +1,29 @@
---
title: "The 99% that remains in the drawer"
publishedAt: "2024-03-05"
summary: "As design engineers, we're often defined by the 1% of our work that makes it into the final product."
---
As design engineers, we're often defined by the 1% of our work that makes it into the final product. That shiny, polished piece of engineering is a result of countless iterations, tweaks, and redesigns. But what happens to the other 99%—those ideas, concepts, and prototypes that never see the light of day? They remain tucked away in the drawer, both literally and figuratively.
## The Beauty of Unused Ideas
It’s easy to think of discarded designs as failures, but in truth, they’re stepping stones. Each one represents a path explored, tested, and ultimately left behind. Those early drafts may never become reality, but they play a crucial role in shaping the solution that does. They teach us what works and, more importantly, what doesn’t.
## The Process of Elimination
In every project, the first few ideas often come quickly. They’re intuitive, straightforward, and sometimes too simple. As we dive deeper, we explore more creative solutions, test the limits of materials and technology, and challenge the initial assumptions. This process of elimination is not about rejecting ideas but about refining them. The 99% left in the drawer is evidence of rigorous thinking and thorough exploration.
## Why the Drawer Matters
For every concept that didn’t make it, there’s a lesson learned. A sketch that looked promising might fail in prototyping. A concept that seemed impractical might be revisited years later, finding new relevance with advancements in technology or a change in project scope. These shelved ideas serve as a knowledge base—a library of possibilities for future projects.
## Innovation Through Failure
Many breakthrough innovations are born from revisiting old, seemingly failed concepts. What didn’t work in one context might be the key to solving a problem in another. As design engineers, we should never be afraid to open the drawer and revisit those shelved ideas. They are a testament to the iterative nature of design, where nothing is truly wasted.
![Once UI logo on dark background.](/images/projects/project-01/cover-01.jpg)
## Final Thoughts
The final product is just the tip of the iceberg—the visible 1%. The other 99% may never see the spotlight, but they are just as important. They represent the trial and error, the persistence, and the creative drive that push us to find the best solution. So next time you’re stuck or looking for inspiration, don’t be afraid to dig into the drawer. The answer might be hiding there, waiting for the right moment to shine.

32
src/app/blog/posts/the-rise-of-design-engineering.mdx Normal file
View File

@@ -0,0 +1,32 @@
---
title: "The rise of design engineering"
publishedAt: "2024-03-05"
summary: "In recent years, the role of design engineering has evolved from a specialized niche to a critical component in the development of innovative products and solutions."
---
The Rise of Design Engineering
In recent years, the role of design engineering has evolved from a specialized niche to a critical component in the development of innovative products and solutions. The seamless integration of design principles with engineering expertise has become essential in shaping not only the functionality of products but also the user experience, sustainability, and overall impact. So, what’s driving this shift, and why is design engineering more relevant than ever before?
## Where Engineering Meets Creativity
Traditionally, engineering and design were viewed as separate disciplines. Engineers focused on solving technical problems, while designers were concerned with aesthetics and user experience. However, as products become more complex and user-centered, the need for a unified approach has grown. Design engineering bridges this gap by combining the precision of engineering with the creativity of design. It’s where form meets function, ensuring that products are not only technically sound but also intuitive, visually appealing, and user-friendly.
## The User-Centered Revolution
One of the biggest factors in the rise of design engineering is the shift toward user-centered design. Whether it’s a smartphone, a medical device, or an automotive system, today’s products are expected to be intuitive, responsive, and aligned with user needs. Design engineers play a pivotal role in this transformation by focusing on the end-user from the very beginning of the development process. Instead of approaching design and engineering as separate stages, they merge them into a cohesive workflow that considers usability, ergonomics, and aesthetics alongside structural integrity and functionality.
## Sustainability and Innovation
As the world becomes increasingly conscious of environmental impacts, design engineers are at the forefront of creating sustainable solutions. From selecting eco-friendly materials to designing for energy efficiency and minimizing waste, their work is crucial in driving sustainability initiatives across industries. The role of the design engineer extends beyond merely meeting technical requirements; it involves finding innovative ways to achieve sustainability without compromising on performance or aesthetics.
## The Digital Transformation
The digital revolution has also played a significant role in the rise of design engineering. Advanced tools such as computer-aided design (CAD) software, simulation, and rapid prototyping have empowered design engineers to push boundaries and experiment with ideas that were previously impossible. Virtual testing and iterative development processes allow for quick adjustments and refinements, enabling more sophisticated and optimized designs. This integration of digital technology with traditional engineering practices has made design engineering a dynamic and rapidly evolving field.
## Collaboration and Interdisciplinary Work
In the modern product development landscape, collaboration is key. Design engineering brings together experts from various fields—mechanical engineering, industrial design, electronics, materials science, and more—into a cohesive team. This interdisciplinary approach fosters innovation by allowing for a broader perspective on problems and solutions. Design engineers often act as the glue that holds these teams together, ensuring that everyone’s contributions align to create a product that is both technically sound and user-centric.
## Looking Ahead
The rise of design engineering signals a fundamental shift in how we approach product development. It’s no longer enough to have a product that simply works; it must also resonate with users, be sustainable, and push the boundaries of innovation. As technology continues to advance and user expectations evolve, design engineers will be increasingly critical in shaping the future. Their unique blend of creative thinking and technical expertise will continue to drive the development of products that are not only functional but also meaningful.