1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
---
import Layout from '../layouts/Default.astro';
import { Icon } from 'astro-icon/components'
import { Image } from 'astro:assets';
import { getCollection } from "astro:content";
import projects from "../data/projects.json";
import Profile from '../images/Alee.png';
import '../styles/index.css';
import '../styles/Page.css';
import "../styles/cards.css";
import { formatDate } from "../util";
const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()).slice(0, 10);
const featuredProjects = projects.filter(project => project.featured);
---
<Layout title="Andrew Lee" description="Andrew Lee Website">
<main>
<div class="home">
<div class="headline">
<Image src={Profile} class="avatar" loading="eager" alt="Andrew Lee" height={200} width={200} />
<h1 id="title">Hey, I'm Andrew Lee!</h1>
<div class="social">
<a href="https://linkedin.alee14.me" target="_blank" aria-label="LinkedIn">
<Icon name="fa6-brands:linkedin" />
</a>
<a href="https://github.alee14.me" target="_blank" aria-label="GitHub">
<Icon name="fa6-brands:github" />
</a>
<a href="https://youtube.alee14.me" target="_blank" aria-label="YouTube">
<Icon name="fa6-brands:youtube" />
</a>
<a href="https://instagram.alee14.me" target="_blank" aria-label="Instagram">
<Icon name="fa6-brands:instagram" />
</a>
</div>
<div class="description">
<h2>20 Years Old</h2>
<!--<h2>Student at Pearson Electrotechnology Centre</h2>-->
<h2>Living in Montreal, Quebec, Canada</h2>
</div>
<div>
<h3><a href="mailto:andrew@alee14.me" class="email-contact">andrew@alee14.me</a></h3>
</div>
</div>
</div>
<div class="information">
<div class="box">
<h1>About me</h1>
<!--<a href="/history" class="link">History</a>-->
<p>Hey, I am Andrew Lee, a person who has a passion with computers.
I am currently a student at a trade school to get my DEP for IT.
For years, I have been into programming, tinkering with virtual machines, and messing with Linux.</p>
</div>
<div class="box">
<h1>Skills</h1>
<ul>
<li>Linux</li>
<li>Graphic Design</li>
<li>Web Development</li>
</ul>
</div>
<div class="box">
<h1>Computer Specs</h1>
<h2>AleePC</h2>
<ul>
<li>OS: Fedora</li>
<li>CPU: AMD Ryzen 3 2200G</li>
<li>RAM: 16 GB DDR4</li>
<li>Storage: 2 TB NVME SSD, 4 TB HDD, 2 TB HDD</li>
<li>GPU: AMD Radeon RX 6600</li>
</ul>
<h2>Synology</h2>
<ul>
<li>Model: DS918+</li>
<li>CPU: Intel Celeron J3455</li>
<li>RAM: 8 GB</li>
<li>Storage: 15 TB (3x6TB, 1x4TB)</li>
</ul>
<h2>Vultr (Web Server)</h2>
<ul>
<li>OS: Ubuntu Server 22.04 LTS</li>
<li>CPU: Intel Xeon Processor (Skylake, IBRS)</li>
<li>RAM: 1 GB</li>
<li>Storage: 25 GB (and 100 GB for Block Storage)</li>
</ul>
<h2>Proxmox</h2>
<ul>
<li>Model: Lenovo ThinkCentre M800</li>
<li>CPU: Intel Core i5 6500</li>
<li>RAM: 16 GB RAM</li>
<li>Storage: 500 GB SSD, 2 TB SSD</li>
</ul>
</div>
<div class="box latest-posts">
<h1>Latest Posts</h1>
{allBlogPosts.map((post) => (
<article>
<h1 class="blog-title"><a href={`/blog/${post.slug}`}>{post.data.title}</a></h1>
<small>{formatDate(post.data.pubDate)}</small>
<p>{post.data.description}</p>
</article>
))}
</div>
</div>
<div class="container">
<div class="featured-projects">
<h1>Featured Projects</h1>
<div class="grid">
{
featuredProjects.map((project) => {
return (
<article class="card">
<h1>{project.name}</h1>
<p>{project.description}</p>
<div class="row">
{project.links.map((link) => {
return (
<a href={link.url} target={link.external ? "_blank" : "_self"}>{link.name}</a>
)
})}
</div>
</article>
)
})
}
</div>
</div>
</div>
</main>
</Layout>
<style>
.row {
display: flex;
flex-direction: row;
gap: 1em;
}
</style>
|
