Skip to content

Commit 4d02ab0

Browse files
fezcodefezcode
committed
about page + links outgoing
1 parent 553da12 commit 4d02ab0

File tree

5 files changed

+88
-47
lines changed

5 files changed

+88
-47
lines changed

‎public/about.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: About Me
3+
email: your.email@example.com
4+
---
5+
6+
Hello! I'm a passionate software engineer with a keen interest in web development, open-source projects, and creating engaging user experiences. I love exploring new technologies and continuously learning to build robust and scalable applications.
7+
8+
## My Skills
9+
* React, JavaScript, TypeScript
10+
* Node.js, Express.js
11+
* Python, Django, Flask
12+
* HTML, CSS, Tailwind CSS
13+
* Database Management (SQL, NoSQL)
14+
* Cloud Platforms (AWS, GCP)
15+
16+
## Useful Links
17+
* [GitHub Profile](https://github.com/yourusername)
18+
* [LinkedIn Profile](https://linkedin.com/in/yourusername)
19+
* [Twitter](https://twitter.com/yourusername)
20+
* [My Blog Posts](/blog)

‎src/components/Footer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
33

44
const Footer = () => {
55
return (
6-
<footer className="mt-16 sm:mt-24">
6+
<footer className="mt-1 sm:mt-1">
77
<div className="mx-auto max-w-7xl px-6 lg:px-8">
88
<div className="border-t border-gray-700/50 py-12">
99
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">

‎src/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@ body {
1515
code {
1616
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
1717
monospace;
18-
}
18+
}

‎src/pages/AboutPage.js‎

Lines changed: 55 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,64 @@
1-
import React from 'react';
1+
import React, { useState, useEffect } from 'react';
2+
import ReactMarkdown from 'react-markdown';
3+
import { FaArrowLeft, FaEnvelope, FaExternalLinkAlt } from 'react-icons/fa';
4+
import { Link } from 'react-router-dom';
5+
import fm from 'front-matter';
26

3-
const AboutPage = () => {
7+
const LinkRenderer = ({ href, children }) => {
8+
const isExternal = href.startsWith('http') || href.startsWith('https');
49
return (
5-
<div className="py-16 sm:py-24">
6-
<div className="mx-auto max-w-3xl px-6 lg:px-8 text-gray-300">
7-
<h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl mb-8">About Me</h1>
10+
<a href={href} className="text-primary-400 hover:text-primary-600 transition-colors inline-flex items-center gap-1" target={isExternal ? "_blank" : undefined} rel={isExternal ? "noopener noreferrer" : undefined}>
11+
{children} {isExternal && <FaExternalLinkAlt className="text-xs" />}
12+
</a>
13+
);
14+
};
815

9-
<p className="mb-6 text-lg leading-8">
10-
Hello! I'm a passionate software engineer with a keen interest in web development, open-source projects, and creating engaging user experiences. I love exploring new technologies and continuously learning to build robust and scalable applications.
11-
</p>
16+
const AboutPage = () => {
17+
const [content, setContent] = useState('');
18+
const [email, setEmail] = useState('');
19+
const [title, setTitle] = useState('About Me');
20+
21+
useEffect(() => {
22+
fetch('/about.md')
23+
.then(res => res.text())
24+
.then(text => {
25+
const { attributes, body } = fm(text);
26+
setTitle(attributes.title || 'About Me');
27+
setEmail(attributes.email || '');
28+
setContent(body);
29+
})
30+
.catch(err => console.error("Error fetching about.md:", err));
31+
}, []);
1232

13-
<h2 className="text-3xl font-semibold tracking-tight text-white mb-4">My Skills</h2>
14-
<ul className="list-disc list-inside mb-6 ml-4">
15-
<li>React, JavaScript, TypeScript</li>
16-
<li>Node.js, Express.js</li>
17-
<li>Python, Django, Flask</li>
18-
<li>HTML, CSS, Tailwind CSS</li>
19-
<li>Database Management (SQL, NoSQL)</li>
20-
<li>Cloud Platforms (AWS, GCP)</li>
21-
</ul>
33+
return (
34+
<div className="py-16 sm:py-24">
35+
<div className="mx-auto max-w-5xl px-6 lg:px-8 text-gray-300">
36+
<Link to="/" className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4">
37+
<FaArrowLeft className="text-xl" /> Back to Home
38+
</Link>
39+
<div className="border border-gray-700 p-8 rounded-lg shadow-xl flex">
40+
<div className="w-1 bg-gray-600 mr-1"></div>
41+
<div className="w-1 bg-gray-700 mr-1"></div>
42+
<div className="w-1 bg-gray-800 mr-8"></div>
43+
<div className="flex-grow">
44+
<h1 className="text-4xl font-bold tracking-tight text-primary-400 sm:text-6xl mb-8">{title}</h1>
2245

23-
<h2 className="text-3xl font-semibold tracking-tight text-white mb-4">Useful Links</h2>
24-
<ul className="list-disc list-inside mb-6 ml-4">
25-
<li>
26-
<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer" className="text-primary-400 hover:text-primary-500 transition-colors">
27-
GitHub Profile
28-
</a>
29-
</li>
30-
<li>
31-
<a href="https://linkedin.com/in/yourusername" target="_blank" rel="noopener noreferrer" className="text-primary-400 hover:text-primary-500 transition-colors">
32-
LinkedIn Profile
33-
</a>
34-
</li>
35-
<li>
36-
<a href="https://twitter.com/yourusername" target="_blank" rel="noopener noreferrer" className="text-primary-400 hover:text-primary-500 transition-colors">
37-
Twitter
38-
</a>
39-
</li>
40-
<li>
41-
<a href="/blog" className="text-primary-400 hover:text-primary-500 transition-colors">
42-
My Blog Posts
43-
</a>
44-
</li>
45-
</ul>
46+
<div className="prose prose-invert max-w-none leading-snug">
47+
<ReactMarkdown components={{ a: LinkRenderer }}>
48+
{content}
49+
</ReactMarkdown>
50+
</div>
4651

47-
<h2 className="text-3xl font-semibold tracking-tight text-white mb-4">Contact</h2>
48-
<p>
49-
Feel free to reach out to me at <a href="mailto:your.email@example.com" className="text-primary-400 hover:text-primary-500 transition-colors">your.email@example.com</a>.
50-
</p>
52+
{email && (
53+
<div className="mt-8">
54+
<h2 className="text-3xl font-semibold tracking-tight text-white mb-4">Contact</h2>
55+
<p className="flex items-center gap-2">
56+
<FaEnvelope className="text-primary-400" /> Feel free to reach out to me at <a href={`mailto:${email}`} className="text-primary-400 hover:text-primary-500 transition-colors">{email}</a>.
57+
</p>
58+
</div>
59+
)}
60+
</div>
61+
</div>
5162
</div>
5263
</div>
5364
);

‎src/pages/BlogPostPage.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,16 @@ import { useParams, Link } from 'react-router-dom';
33
import ReactMarkdown from 'react-markdown';
44
import fm from 'front-matter';
55
import PostMetadata from '../components/PostMetadata';
6+
import { FaExternalLinkAlt } from 'react-icons/fa';
7+
8+
const LinkRenderer = ({ href, children }) => {
9+
const isExternal = href.startsWith('http') || href.startsWith('https');
10+
return (
11+
<a href={href} className="text-primary-400 hover:text-primary-600 transition-colors inline-flex items-center gap-1" target={isExternal ? "_blank" : undefined} rel={isExternal ? "noopener noreferrer" : undefined}>
12+
{children} {isExternal && <FaExternalLinkAlt className="text-xs" />}
13+
</a>
14+
);
15+
};
616

717
const BlogPostPage = () => {
818
const { slug } = useParams();
@@ -66,7 +76,7 @@ const BlogPostPage = () => {
6676
&larr; Back to Blog
6777
</Link>
6878
<div ref={contentRef} className="prose prose-xl prose-dark max-w-none">
69-
<ReactMarkdown>{post.body}</ReactMarkdown>
79+
<ReactMarkdown components={{ a: LinkRenderer }}>{post.body}</ReactMarkdown>
7080
</div>
7181
</div>
7282
<div className="hidden lg:block">

0 commit comments

Comments
 (0)