Feature: Initial Commit

.env

@@ -0,0 +1,2 @@
+UPSTASH_REDIS_REST_URL="https://finer-hookworm-12806.upstash.io"
+UPSTASH_REDIS_REST_TOKEN="ATIGAAIjcDEzOWFhODY3NDhmZDc0NWQ3YTIzYjE4YzViYzg2YjAxY3AxMA"

app/contact/page.tsx

@@ -1,27 +1,27 @@
 "use client";
-import { Github, Mail, Twitter } from "lucide-react";
+import { Github, Mail, Smartphone } from "lucide-react";
 import Link from "next/link";
 import { Navigation } from "../components/nav";
 import { Card } from "../components/card";
 
 const socials = [
 	{
-		icon: <Twitter size={20} />,
-		href: "https://twitter.com/chronark_",
-		label: "Twitter",
-		handle: "@chronark_",
+		icon: <Smartphone size={20} />,
+		href: "",
+		label: "Phone",
+		handle: "+(63) 917 342 5335",
 	},
 	{
 		icon: <Mail size={20} />,
-		href: "mailto:dev@chronark.com",
+		href: "mailto:ManuelAlecsandra@gmail.com",
 		label: "Email",
-		handle: "dev@chronark.com",
+		handle: "ManuelAlecsandra@gmail.com",
 	},
 	{
 		icon: <Github size={20} />,
-		href: "https://github.com/chronark",
+		href: "https://github.com/ThisIsSandra",
 		label: "Github",
-		handle: "chronark",
+		handle: "ThisIsSandra",
 	},
 ];
 
@@ -32,28 +32,48 @@ export default function Example() {
 			<div className="container flex items-center justify-center min-h-screen px-4 mx-auto">
 				<div className="grid w-full grid-cols-1 gap-8 mx-auto mt-32 sm:mt-0 sm:grid-cols-3 lg:gap-16">
 					{socials.map((s) => (
-						<Card>
-							<Link
-								href={s.href}
-								target="_blank"
-								className="p-4 relative flex flex-col items-center gap-4 duration-700 group md:gap-8 md:py-24  lg:pb-48  md:p-16"
-							>
-								<span
-									className="absolute w-px h-2/3 bg-gradient-to-b from-zinc-500 via-zinc-500/50 to-transparent"
-									aria-hidden="true"
-								/>
-								<span className="relative z-10 flex items-center justify-center w-12 h-12 text-sm duration-1000 border rounded-full text-zinc-200 group-hover:text-white group-hover:bg-zinc-900 border-zinc-500 bg-zinc-900 group-hover:border-zinc-200 drop-shadow-orange">
-									{s.icon}
-								</span>{" "}
-								<div className="z-10 flex flex-col items-center">
-									<span className="lg:text-xl font-medium duration-150 xl:text-3xl text-zinc-200 group-hover:text-white font-display">
-										{s.handle}
+						<Card key={s.label}>
+							{s.href ? (
+								<Link
+									href={s.href}
+									target="_blank"
+									className="p-4 relative flex flex-col items-center gap-4 duration-700 group md:gap-8 md:py-24 lg:pb-48 md:p-16 cursor-pointer"
+								>
+									<span
+										className="absolute w-px h-2/3 bg-gradient-to-b from-zinc-500 via-zinc-500/50 to-transparent"
+										aria-hidden="true"
+									/>
+									<span className="relative z-10 flex items-center justify-center w-12 h-12 text-sm duration-1000 border rounded-full text-zinc-200 group-hover:text-white group-hover:bg-zinc-900 border-zinc-500 bg-zinc-900 group-hover:border-zinc-200 drop-shadow-orange">
+										{s.icon}
 									</span>
-									<span className="mt-4 text-sm text-center duration-1000 text-zinc-400 group-hover:text-zinc-200">
-										{s.label}
+									<div className="z-10 flex flex-col items-center">
+										<span className={`${s.handle.length > 20 ? 'lg:!text-2xl md:!text-xs' : 'lg:text-xl'} font-medium duration-150 xl:text-3xl text-zinc-200 group-hover:text-white font-display text-center`}>
+											{s.handle}
+										</span>
+										<span className="mt-4 text-sm text-center duration-1000 text-zinc-400 group-hover:text-zinc-200">
+											{s.label}
+										</span>
+									</div>
+								</Link>
+							) : (
+								<span className="p-4 relative flex flex-col items-center gap-4 duration-700 group md:gap-8 md:py-24 lg:pb-48 md:p-16">
+									<span
+										className="absolute w-px h-2/3 bg-gradient-to-b from-zinc-500 via-zinc-500/50 to-transparent"
+										aria-hidden="true"
+									/>
+									<span className="relative z-10 flex items-center justify-center w-12 h-12 text-sm duration-1000 border rounded-full text-zinc-200 border-zinc-500 bg-zinc-900 drop-shadow-orange">
+										{s.icon}
 									</span>
-								</div>
-							</Link>
+									<div className="z-10 flex flex-col items-center">
+										<span className={`${s.handle.length > 20 ? 'lg:!text-2xl md:!text-xs' : 'lg:text-xl'} font-medium duration-150 xl:text-3xl text-zinc-200 font-display text-center`}>
+											{s.handle}
+										</span>
+										<span className="mt-4 text-sm text-center duration-1000 text-zinc-400">
+											{s.label}
+										</span>
+									</div>
+								</span>
+							)}
 						</Card>
 					))}
 				</div>

app/page.tsx

@@ -28,21 +28,22 @@ export default function Home() {
         className="absolute inset-0 -z-10 animate-fade-in"
         quantity={100}
       />
-      <h1 className="py-3.5 px-0.5 z-10 text-4xl text-transparent duration-1000 bg-white cursor-default text-edge-outline animate-title font-display sm:text-6xl md:text-9xl whitespace-nowrap bg-clip-text ">
-        chronark
+      <h1 className="py-3.5 px-0.5 z-10 text-4xl text-transparent duration-1000 bg-white cursor-default text-edge-outline animate-title font-display sm:text-6xl md:text-9xl whitespace-nowrap bg-clip-text text-center">
+        Alecsandra<br />Manuel
       </h1>
 
       <div className="hidden w-screen h-px animate-glow md:block animate-fade-right bg-gradient-to-r from-zinc-300/0 via-zinc-300/50 to-zinc-300/0" />
       <div className="my-16 text-center animate-fade-in">
         <h2 className="text-sm text-zinc-500 ">
-          I'm building{" "}
+
+          {/* I'm building{" "}
           <Link
             target="_blank"
             href="https://unkey.dev"
             className="underline duration-500 hover:text-zinc-300"
           >
             unkey.dev
-          </Link> to solve API authentication and authorization for developers.
+          </Link> to solve API authentication and authorization for developers. */}
         </h2>
       </div>
     </div>

app/projects/[slug]/page.tsx

@@ -41,7 +41,8 @@ export default async function PostPage({ params }: Props) {
       <ReportView slug={project.slug} />
 
       <article className="px-4 py-12 mx-auto prose prose-zinc prose-quoteless">
-        <Mdx code={project.body.code} />
+        {/* <Mdx code={project.body.code} /> */}
+        {/* Make a children component if ever you do want to add additional info per project */}
       </article>
     </div>
   );

app/projects/article.tsx

@@ -25,7 +25,7 @@ export const Article: React.FC<Props> = ({ project, views }) => {
 					</span>
 					<span className="text-zinc-500 text-xs  flex items-center gap-1">
 						<Eye className="w-4 h-4" />{" "}
-						{Intl.NumberFormat("en-US", { notation: "compact" }).format(views)}
+						{Intl.NumberFormat("en-US", { notation: "compact" }).format(views ?? 0)}
 					</span>
 				</div>
 				<h2 className="z-20 text-xl font-medium duration-1000 lg:text-3xl text-zinc-200 group-hover:text-white font-display">

app/projects/page.tsx

@@ -11,6 +11,7 @@ const redis = Redis.fromEnv();
 
 export const revalidate = 60;
 export default async function ProjectsPage() {
+
   const views = (
     await redis.mget<number[]>(
       ...allProjects.map((p) => ["pageviews", "projects", p.slug].join(":")),
@@ -21,7 +22,7 @@ export default async function ProjectsPage() {
   }, {} as Record<string, number>);
 
   const featured = allProjects.find((project) => project.slug === "unkey")!;
-  const top2 = allProjects.find((project) => project.slug === "planetfall")!;
+  const top2 = allProjects.find((project) => project.slug === "scf")!;
   const top3 = allProjects.find((project) => project.slug === "highstorm")!;
   const sorted = allProjects
     .filter((p) => p.published)
@@ -37,7 +38,7 @@ export default async function ProjectsPage() {
         new Date(a.date ?? Number.POSITIVE_INFINITY).getTime(),
     );
 
-  return (
+      return (
     <div className="relative pb-16">
       <Navigation />
       <div className="px-6 pt-20 mx-auto space-y-8 max-w-7xl lg:px-8 md:space-y-16 md:pt-24 lg:pt-32">
@@ -94,7 +95,7 @@ export default async function ProjectsPage() {
           </Card>
 
           <div className="flex flex-col w-full gap-8 mx-auto border-t border-gray-900/10 lg:mx-0 lg:border-t-0 ">
-            {[top2, top3].map((project) => (
+            {[top2].map((project) => (
               <Card key={project.slug}>
                 <Article project={project} views={views[project.slug] ?? 0} />
               </Card>