amiirkhl/my-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: align footer with portfolio design

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-04 20:41:42 +03:30
parent c5af25f546
commit 446abd5086
2 changed files with 57 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/FooterSection.tsx
View File

@@ -2,10 +2,35 @@
import React from 'react';
import Image from 'next/image';
import { Phone, Send, Coffee } from 'lucide-react';
import { useTheme } from '@/context/ThemeContext';
import styles from './FooterSection.module.css';
const PhoneIcon = () => (
<svg viewBox="2 2 20 20" aria-hidden="true">
<path d="M6.62 10.79a15.46 15.46 0 0 0 6.59 6.59l2.2-2.2a1.02 1.02 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2Z" />
</svg>
);
const LinkedInIcon = () => (
<svg viewBox="0 0 448 512" aria-hidden="true">
<path d="M100.28 448H7.4V148.9h92.88ZM53.79 108.1C24.09 108.1 0 83.5 0 53.8A53.79 53.79 0 0 1 107.58 53.8c0 29.7-24.09 54.3-53.79 54.3ZM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448Z" />
</svg>
);
const GiteaIcon = () => (
<svg viewBox="0 0 640 640" aria-hidden="true">
<path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2l-16.6-7.9-.1-109.2c-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9-45 40.1-33.5 103.9-32.1 113.5 1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4s12.9-13.8 30.9-45.3c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6ZM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1Zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1Z" />
<path className={styles.giteaCutout} d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8l27.1 13-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12Z" />
<path d="M326.8 380.1a18 18 0 1 0 14.5 28.4l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6a18 18 0 1 0 16.6 5.9c5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3l14.1-29-12.2-6.1-14.5 29.5c-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4Z" />
</svg>
);
const TelegramIcon = () => (
<svg viewBox="0 32 448 448" aria-hidden="true">
<path d="M446.7 98.6 379.1 417.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-76-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284.3 16.2 252.5c-22.1-6.9-22.5-22.1 4.6-32.7L418 66.8c18.4-6.9 34.5 4.1 28.7 31.8Z" />
</svg>
);
export const FooterSection: React.FC = () => {
const { theme } = useTheme();
@@ -19,7 +44,8 @@ export const FooterSection: React.FC = () => {
? '/assets/footer-background-dark.png'
: '/assets/footer-background 1.png'
}
alt="Footer mountains background"
alt=""
aria-hidden="true"
fill
className={styles.bgImage}
/>
@@ -38,10 +64,8 @@ export const FooterSection: React.FC = () => {
{/* 4 Social / Contact Links */}
<div className={styles.socialRow}>
{/* Phone */}
<a href="tel:+989388263077" className={styles.socialItem}>
<div className={styles.iconCircle}>
<Phone size={24} />
</div>
<a href="tel:+989388263077" className={styles.socialItem} aria-label="Call 09388263077">
<span className={styles.socialIcon}><PhoneIcon /></span>
<span className={styles.socialLabel}>09388263077</span>
</a>
@@ -52,11 +76,7 @@ export const FooterSection: React.FC = () => {
rel="noopener noreferrer"
className={styles.socialItem}
>
<div className={styles.iconCircle}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 8.76a1.64 1.64 0 0 0 1.64-1.64A1.64 1.64 0 0 0 6.46 5.5a1.64 1.64 0 0 0-1.64 1.62c0 .9.74 1.64 1.64 1.64m1.39 9.74v-8.37H5.07v8.37h2.78Z" />
</svg>
</div>
<span className={styles.socialIcon}><LinkedInIcon /></span>
<span className={styles.socialLabel}>@amiirkhl</span>
</a>
@@ -67,9 +87,7 @@ export const FooterSection: React.FC = () => {
rel="noopener noreferrer"
className={styles.socialItem}
>
<div className={styles.iconCircle}>
<Coffee size={24} />
</div>
<span className={styles.socialIcon}><GiteaIcon /></span>
<span className={styles.socialLabel}>git.amiirkhl.ir</span>
</a>
@@ -80,9 +98,7 @@ export const FooterSection: React.FC = () => {
rel="noopener noreferrer"
className={styles.socialItem}
>
<div className={styles.iconCircle}>
<Send size={24} />
</div>
<span className={styles.socialIcon}><TelegramIcon /></span>
<span className={styles.socialLabel}>@amiirkhl</span>
</a>
</div>