WolvenDotDev · WolvenDotDev · Jul 19, 2025 · Dec 15, 2024 · Jun 17, 2025 · Jun 17, 2025
diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wolven.Dev</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Wolven.Dev | Jovan Kresnadi</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "dependencies": {
         "gsap": "^3.12.5",
         "jquery": "^3.7.1",
+        "micromark": "^4.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },

diff --git a/public/Resume_Gregorius Jovan Kresnadi.pdf b/public/Resume_Gregorius Jovan Kresnadi.pdf
diff --git a/src/components/containers/Experience.tsx b/src/components/containers/Experience.tsx
@@ -1,28 +1,37 @@
 import React from 'react';
 import type { DExperience } from '@/data/experience';
+import { micromark } from 'micromark';
 import './container.css';
 
 type ExpProps = {
   experience: DExperience;
 };
 
 const Experience: React.FunctionComponent<ExpProps> = ({ experience }) => {
-  const { id, title, company, description, jobdesc, date, skills } = experience;
+  const { id, title, company, description, jobdesc, date, skills, companyUrl } = experience;
   return (
     <div className="exp-card flex flex-col lg:gap-4 gap-6 transition-colors duration-200 hover:opacity-100 hover:bg-light-1 hover:bg-opacity-5 rounded-lg p-4">
-      <div className="flex lg:flex-row flex-col-reverse justify-between items-baseline gap-x-2">
+      <div className="flex lg:flex-row flex-col-reverse justify-between items-baseline gap-x-2 gap-y-1">
         <h6 className="text-light-1 lg:w-1/5">{date}</h6>
-        <h4 className="lg:w-[78%]">
-          {title} · {company}
-        </h4>
+        <div className="lg:w-[78%] flex flex-col items-start gap-x-2 lg:gap-y-2">
+          <h4 className="">{title}</h4>
+          <a href={companyUrl} target="_blank" rel="noreferrer" className="cursor-pointer flex company-link">
+            <h5>{company}</h5>
+            {companyUrl && (
+              <span>
+                <i className="link-icon fa fa-link"></i>
+              </span>
+            )}
+          </a>
+        </div>
       </div>
       <div className="flex justify-end">
         <div className="lg:w-[78%] flex flex-col gap-4">
-          {description && <p>{description}</p>}
+          {description && <p dangerouslySetInnerHTML={{ __html: micromark(description) }} />}
 
           <ul className="text-neutral-1 list-disc text-justify pl-2 flex flex-col gap-2 jobdesc-list">
             {jobdesc.map((job, idx) => (
-              <li key={`${id}-job-${idx}}`}>{job}</li>
+              <li key={`${id}-job-${idx}}`} dangerouslySetInnerHTML={{ __html: micromark(job) }} />
             ))}
           </ul>
           <ul className="flex flex-wrap gap-3">

diff --git a/src/components/containers/Project.tsx b/src/components/containers/Project.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { DProject } from '@/data/projects';
 import './container.css';
+import { micromark } from 'micromark';
 
 type ProjectProps = {
   project: DProject;
@@ -18,10 +19,14 @@ const Project: React.FunctionComponent<ProjectProps> = ({ project }) => {
     >
       <div className="flex gap-2">
         <img src={icon} alt="" className="w-8 aspect-square" />
-        <h3 className="title">{title}<span><i className="link-icon fa fa-link"></i></span></h3>
-
+        <h3 className="title">
+          {title}
+          <span>
+            <i className="link-icon fa fa-link"></i>
+          </span>
+        </h3>
       </div>
-      {description && <p className="lg:mx-3">{description}</p>}
+      {description && <p className="lg:mx-3" dangerouslySetInnerHTML={{ __html: micromark(description) }} />}
 
       <ul className="flex flex-wrap gap-3">
         {techs &&

diff --git a/src/components/containers/container.css b/src/components/containers/container.css
@@ -4,8 +4,12 @@
   line-height: 1.3;
 }
 
+strong {
+  color: var(--off-white);
+}
+
 .jobdesc-list li::marker {
-  content: "\f0da"; /* FontAwesome Unicode */
+  /* content: "\f0da"; FontAwesome Unicode */
   font-family: FontAwesome;
   color: var(--accent-1)
 }
@@ -37,3 +41,15 @@
   transform: translateY(-1rem);
   transition: transform 300ms var(--cb-snap-on);
 }
+
+.company-link .link-icon {
+  padding-left: 0.3rem;
+  font-size: x-small;
+  transform: translateY(-0.1rem);
+  transition: transform 300ms var(--cb-snap-off);
+}
+
+.company-link:hover .link-icon {
+  transform: translateY(-0.7rem);
+  transition: transform 300ms var(--cb-snap-on);
+}
diff --git a/src/data/experience.ts b/src/data/experience.ts
@@ -2,8 +2,9 @@ export type DExperience = {
   id: string;
   title: string;
   company: string;
+  companyUrl?: string;
   description?: string;
-  jobdesc: string[];
+  jobdesc: string[]; // Markdown
   date: string;
   skills?: string[];
 };
@@ -13,27 +14,45 @@ const Experiences: DExperience[] = [
     id: 'solecode',
     title: 'Software Engineer',
     company: 'Solecode',
-    description: 'Solecode is an IT consulting and services company specializing in rapid delivery, intuitive design, convenient experience, high agility, and better client collaboration.',
+    companyUrl: 'https://solecode.id',
+    description:
+      'Solecode is an IT consulting and services company specializing in rapid delivery, intuitive design, convenient experience, high agility, and better client collaboration.',
     jobdesc: [
-      'Refactored a Human Resource management app using Dart & Flutter, refining UI logic and rebuilding the overall project structure',
-      'Developed back-end services and web pages for a budget monitoring system using Blazor .NET Web Framework, Tailwind CSS, and PostgreSQL DBMS',
-      'Developed a UI component library in React TypeScript with Vite, utilizing Tailwind CSS, and Storybook as a front-end workshop for UI development, and publishing it as an npm package for future projects',
-      'Built UI components and back-end services for a resource management website of an Indonesian oil and gas company using C# with ASP.NET MVC framework and Razor Pages',
-      'Maintained a Next.js code boilerplate for streamlined development in future projects',
-      'Developed back-end services for a thesis management website and a student study plan platform for a world-class private university in Jakarta, using C# with ASP.NET Core framework, Azure CosmosDB as NoSQL database, and Azure cloud services',
+      'Developing a **document storage management system** using **Java** with **Spring & ZK** framework, **streamlining business workflows** across all branches of an Indonesian financing company',
+      'Led a team of 3, **restructuring** a Human Resource management app using **Flutter**, implementing **state management** with Riverpod, **caching**, and building reusable components, resulting in a **reduction of over 10,000 lines of code**',
+      'Unified **React TypeScript** UI components into a **Storybook** UI library with **Vite, Tailwind,** and published it as an internal **npm package** to **reduce development time by 50%**',
+      'Developed **core back-end logic** for an **oil reservoir and well management system** of an Indonesian oil and gas company using .NET MVC, **reducing development time** by **30%**',
+      'Maintained a **Next.js fullstack boilerplate** to **bootstrap** future company **projects**',
+      'Developed **back-end services** for a thesis management and **student study plan platform** for a private university in Jakarta, using **C#** with **ASP.NET Core, Redis, Azure CosmosDB,** and **Azure cloud services**',
     ],
     date: 'Feb 2023 - Present',
-    skills: ['React', 'Next.js', 'TailwindCSS', 'C#', '.NET', 'Azure', 'OracleDB', 'Storybook', 'Flutter', 'Figma'],
+    skills: [
+      'React',
+      'Next.js',
+      'TailwindCSS',
+      'C#',
+      '.NET',
+      'Java',
+      'Azure',
+      'OracleDB',
+      'Redis',
+      'PostgreSQL',
+      'Storybook',
+      'Flutter',
+      'Figma',
+    ],
   },
   {
     id: 'dana',
     title: 'Front End SDET Intern',
     company: 'DANA',
-    description: 'DANA Indonesia is a payment gateway company aiming to replace traditional wallets with their digital platform.',
+    companyUrl: 'https://dana.id',
+    description:
+      'DANA Indonesia is a payment gateway company aiming to replace traditional wallets with their digital platform.',
     jobdesc: [
-      'Ensured high-quality user experiences for lifestyle services and mini-program features through automated testing on iOS devices using Selenium and XCode, increasing test coverage to 95%',
-      'Developed test suites for end-to-end, regression, and system integration tests using XMind and Testrail',
-      'Assisted in on-duty monitoring during high-traffic events and post-deployments, reporting issues in JIRA with severity and priority classification',
+      'Ensured high-quality user experiences for lifestyle services and mini-program features through **automated testing** on iOS devices using Selenium and Xcode, **increasing test coverage to 95%**',
+      '**Developed test suites** for **end-to-end, regression,** and **system integration tests** using XMind and Testrail',
+      'Assisted in monitoring during high-traffic events and post-deployments, reporting issues in Jira with severity and priority classification',
     ],
     date: 'Aug 2021 - Feb 2022',
     skills: ['Cucumber', 'Java', 'Selenium'],
@@ -42,10 +61,12 @@ const Experiences: DExperience[] = [
     id: 'blibli',
     title: 'SDET Intern',
     company: 'Blibli.com',
+    companyUrl: 'https://www.blibli.com',
     description: 'Blibli.com is an omnichannel e-commerce platform and lifestyle ecosystem in Indonesia.',
     jobdesc: [
-      'Increased regression test coverage to 95% for checkout and promotion features by developing test cases using Behavior Driven Development and creating automated tests for API & UI testing using Cucumber & Selenium',
-      'Maintained sanity tests and integration tests at 100% coverage.',
+      '**Increased** regression **test coverage** to **95%** for checkout and promotion features',
+      'Developed **test cases** using **Behavior Driven Development (BDD)** to enhance developer productivity',
+      'Created **automated tests** for **API & UI testing** using Cucumber & Selenium',
     ],
     date: 'Jun - Aug 2021',
     skills: ['Cucumber', 'Selenium', 'Java', 'Kafka'],
@@ -57,7 +78,7 @@ const Experiences: DExperience[] = [
     description:
       'Course management in ITB is divided into several laboratories. Programming Lab manages Data Structure & Algorithm, Object Oriented Programming, and Web Development.',
     jobdesc: [
-      'Assisted and supervised students in coding lessons and practice using Olympia learning platform',
+      'Assisted and supervised students in coding assignments and practice using Olympia learning platform',
       'Managed the development of project assignments for the Data Structures & Algorithm course',
       'Designed and graded project assignments for the Object Oriented Programming course',
     ],
@@ -68,7 +89,8 @@ const Experiences: DExperience[] = [
     id: 'itb',
     title: 'Bachelor of Science in Informatics',
     company: 'Institut Teknologi Bandung',
-    jobdesc: ['GPA: 3.62/4.00', 'Vice Head of Publications Department at Informatics Student Union (HMIF ITB)'],
+    companyUrl: 'https://www.itb.ac.id',
+    jobdesc: ['*Cum Laude* (GPA 3.62)', 'Vice Head of Publications Department at Informatics Student Union (HMIF ITB)'],
     date: '2018 - 2022',
   },
 ];

diff --git a/src/data/projects.ts b/src/data/projects.ts
@@ -16,7 +16,7 @@ const projects: DProject[] = [
     iconFile: 'GradleVisualizer.svg',
     url: 'https://tree-self.vercel.app/',
     description:
-      'Gradle Visualizer is a web tool to visualize complex Gradle dependencies into a tree-like interactive 3D graph. It allows users to easily navigate and understand the dependency structure and identify potential issues. In this freelance project, I helped refactor the codebase and add additional functionalities. It uses React Three Fiber, a React renderer for Three.js, integrated into a Next.js app.',
+      'Gradle Visualizer is a web tool to **visualize complex Gradle dependencies** into a **interactive 3D graph**. It allows users to easily navigate and understand the dependency structure and **identify potential conflicts & issues.** In this freelance project, I helped refactor the codebase and add additional functionalities. Built **React Three Fiber**, a React renderer for Three.js, integrated into a **Next.js** app.',
     date: '2025',
     techs: ['Next.js', 'Three.js', 'Typescript', 'TailwindCSS'],
   },
@@ -27,7 +27,7 @@ const projects: DProject[] = [
     file: '',
     url: 'https://porsee-website-demo.vercel.app/',
     description:
-      'Porsee is an Indonesian food catering service delivering fresh ready-to-cook ingredients to your doorstep. Porsee aims to bring restaurant quality food to your home kitchen, complete with the experience of cooking it yourself. I developed the website using Next.js and Firebase as the Backend, deployed to a Digital Ocean droplet with Docker to support containerization.',
+      'Porsee is an **Indonesian online food catering service** delivering fresh ready-to-cook ingredients to your doorstep. Porsee aims to bring restaurant quality food to your home kitchen, complete with the experience of cooking it yourself. I developed the website using **Next.js**, developed back-end services using **Firebase** with integrated **Google Analytics**. Deployed to a **Digital Ocean** droplet with **Docker.**',
     date: '2023',
     techs: ['Next.js', 'Typescript', 'TailwindCSS', 'Figma', 'Firebase', 'Digital Ocean', 'Docker'],
   },
@@ -38,7 +38,7 @@ const projects: DProject[] = [
     file: '',
     url: 'https://wolven.dev/',
     description:
-      "It's basically this website... \n I used Vite React with Typescript, and Tailwind to style and the occasional vanilla CSS to help out with complex animations.",
+      "It's basically this website... I used **Vite React with Typescript**, and **Tailwind** to style and the occasional vanilla CSS to help out with complex animations. Deployed to **GitHub Pages.**",
     date: '2023',
     techs: ['Vite', 'React', 'Typescript', 'TailwindCSS', 'Figma'],
   },

diff --git a/src/styles/design_tokens.css b/src/styles/design_tokens.css
@@ -11,6 +11,7 @@
   --val--accent-1: 255, 155, 113;
   --val--accent-2: 248, 89, 53;
   --val--white-true: 255, 255, 255;
+  --val--off-white: 210, 210, 210;
 
   --black-1: rgb(var(--val--black-1));
   --light-1: rgb(var(--val--light-1));
@@ -23,6 +24,7 @@
   --accent-1: rgb(var(--val--accent-1));
   --accent-2: rgb(var(--val--accent-2));
   --white-true: rgb(var(--val--white-true));
+  --off-white: rgb(var(--val--off-white));
 
   --glow-light-1: drop-shadow(0 0 4px rgba(var(--val--light-1), 0.5));
   --glow-accent-1: drop-shadow(0 0 4px rgba(var(--val--accent-1), 0.7));