Skip to content

Commit e8937ad

Browse files
rasyidcoderasyidcode
committed
add initial components and styles for portfolio site
1 parent 1a39a19 commit e8937ad

File tree

11 files changed

+263
-4
lines changed

11 files changed

+263
-4
lines changed

‎app/components/About.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function About() {
2+
return (
3+
<section id="about" className="section">
4+
<h2 className="section-title">About</h2>
5+
<p>I’m a web developer focused on building accessible, performant apps. I enjoy open-source and learning new tools.</p>
6+
</section>
7+
);
8+
}

‎app/components/Contact.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function Contact() {
2+
return (
3+
<section id="contact" className="section">
4+
<h2 className="section-title">Contact</h2>
5+
<p>If you'd like to work together, send an email to <a href="mailto:[email protected]">[email protected]</a>.</p>
6+
</section>
7+
);
8+
}

‎app/components/Header.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export default function Header() {
2+
return (
3+
<header className="site-header">
4+
<div className="container header-inner">
5+
<a className="logo" href="#">Ahmad Jamil Al Rasyid</a>
6+
<nav className="nav">
7+
<a href="#projects">Projects</a>
8+
<a href="#about">About</a>
9+
<a href="#contact">Contact</a>
10+
</nav>
11+
</div>
12+
</header>
13+
);
14+
}

‎app/components/Hero.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default function Hero() {
2+
return (
3+
<section id="hero" className="hero">
4+
<div>
5+
<h1 className="hero-title">Hi — I'm Ahmad Jamil Al Rasyid</h1>
6+
<p className="hero-sub">I build web apps and developer tools. I focus on TypeScript, Next.js, and good UX.</p>
7+
<p>
8+
<a className="btn" href="#projects">See projects</a>
9+
</p>
10+
</div>
11+
</section>
12+
);
13+
}

‎app/components/Projects.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import projects from "../../data/projects";
2+
3+
export default function Projects() {
4+
return (
5+
<section id="projects" className="section">
6+
<h2 className="section-title">Projects</h2>
7+
<div className="projects-grid">
8+
{projects.map((p) => (
9+
<article key={p.id} className="project-card">
10+
<h3>{p.title}</h3>
11+
<p>{p.description}</p>
12+
{p.link && (
13+
<p>
14+
<a className="muted-link" href={p.link} target="_blank" rel="noreferrer">View</a>
15+
</p>
16+
)}
17+
</article>
18+
))}
19+
</div>
20+
</section>
21+
);
22+
}

‎app/globals.css‎

Lines changed: 120 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,120 @@
1-
@import 'tailwindcss';
1+
@import 'tailwindcss';
2+
3+
:root {
4+
--bg: #0f1724;
5+
--card: #0b1220;
6+
--muted: #94a3b8;
7+
--accent: #4f46e5;
8+
--text: #e6eef8;
9+
}
10+
11+
html,
12+
body,
13+
#root {
14+
height: 100%;
15+
}
16+
17+
body {
18+
background: linear-gradient(180deg, var(--bg), #071028 80%);
19+
color: var(--text);
20+
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
21+
margin: 0;
22+
}
23+
24+
.container {
25+
max-width: 960px;
26+
margin: 0 auto;
27+
padding: 2rem 1rem;
28+
}
29+
30+
.site-header {
31+
position: sticky;
32+
top: 0;
33+
background: transparent;
34+
padding: 1rem 0;
35+
z-index: 40
36+
}
37+
38+
.header-inner {
39+
display: flex;
40+
justify-content: space-between;
41+
align-items: center
42+
}
43+
44+
.logo {
45+
font-weight: 700;
46+
color: var(--text);
47+
text-decoration: none
48+
}
49+
50+
.nav a {
51+
margin-left: 1rem;
52+
color: var(--muted);
53+
text-decoration: none
54+
}
55+
56+
.nav a:hover {
57+
color: var(--text)
58+
}
59+
60+
.hero {
61+
padding: 6rem 0 3rem
62+
}
63+
64+
.hero-title {
65+
font-size: 2.25rem;
66+
margin: 0 0 .5rem
67+
}
68+
69+
.hero-sub {
70+
color: var(--muted);
71+
margin: 0 0 1rem
72+
}
73+
74+
.btn {
75+
background: var(--accent);
76+
color: white;
77+
padding: .5rem .9rem;
78+
border-radius: 6px;
79+
text-decoration: none
80+
}
81+
82+
.section {
83+
padding: 3rem 0
84+
}
85+
86+
.section-title {
87+
font-size: 1.25rem;
88+
margin-bottom: 1rem
89+
}
90+
91+
.projects-grid {
92+
display: grid;
93+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
94+
gap: 1rem
95+
}
96+
97+
.project-card {
98+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
99+
padding: 1rem;
100+
border-radius: 8px
101+
}
102+
103+
.project-card h3 {
104+
margin: 0 0 .5rem
105+
}
106+
107+
.muted-link {
108+
color: var(--accent);
109+
text-decoration: none
110+
}
111+
112+
@media (max-width:640px) {
113+
.hero-title {
114+
font-size: 1.6rem
115+
}
116+
117+
.container {
118+
padding: 1.5rem
119+
}
120+
}

‎app/layout.tsx‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,33 @@ import { Inter } from 'next/font/google'
55
const inter = Inter({ subsets: ['latin'] })
66

77
export const metadata: Metadata = {
8-
title: 'rasyidcode',
9-
description: 'My Personal Site',
8+
title: 'Ahmad Jamil Al Rasyid — Software Developer',
9+
description: 'Web developer portfolio — projects, open-source, and contact.',
10+
icons: {
11+
icon: '/favicon.svg',
12+
shortcut: '/favicon.svg',
13+
},
14+
openGraph: {
15+
title: 'Ahmad Jamil Al Rasyid — Software Developer',
16+
description: 'Web developer portfolio — projects, open-source, and contact.',
17+
url: 'https://rasyidcode.github.io',
18+
siteName: 'Rasyid',
19+
images: [
20+
{
21+
url: '/favicon.svg',
22+
width: 800,
23+
height: 600,
24+
alt: 'Rasyid logo',
25+
},
26+
],
27+
type: 'website',
28+
},
29+
twitter: {
30+
card: 'summary_large_image',
31+
title: 'Ahmad Jamil Al Rasyid — Software Developer',
32+
description: 'Web developer portfolio — projects, open-source, and contact.',
33+
images: ['/favicon.svg'],
34+
},
1035
}
1136

1237
export default function RootLayout({

‎app/page.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1+
import Header from "@/app/components/Header";
2+
import Hero from "@/app/components/Hero";
3+
import Projects from "@/app/components/Projects";
4+
import About from "@/app/components/About";
5+
import Contact from "@/app/components/Contact";
6+
17
export default function Page() {
2-
return <h1>Hello, World!</h1>;
8+
return (
9+
<>
10+
<Header/>
11+
<main className="container">
12+
<Hero />
13+
<Projects />
14+
<About />
15+
<Contact />
16+
</main>
17+
</>
18+
);
319
}

‎data/projects.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const projects = [
2+
{
3+
id: 1,
4+
title: "Portfolio starter",
5+
description: "A minimal Next.js portfolio template with projects and contact section.",
6+
link: "#"
7+
},
8+
{
9+
id: 2,
10+
title: "Open-source tool",
11+
description: "CLI utility for developer workflows.",
12+
link: "#"
13+
},
14+
{
15+
id: 3,
16+
title: "Design system",
17+
description: "Reusable components and tokens for UI consistency.",
18+
link: "#"
19+
}
20+
];
21+
22+
export default projects;

‎package-lock.json‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)